HTML和HTML5

🍲第一部分：常用的HTML标签，和常见的概念和用法

---

1.基础概念

基础概念

• 行内元素：与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度
• 块级元素：独占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
• 行内块元素：能设置宽高，与其他元素并排
• 相互转换：display：inline（block 块级 | inline-block 行内块）

常见标签类型

• 行内元素：a，span，textarea，select，input，b，br...
• 块级元素：div，h1~h6，ol，ul，p，hr，form，table ...
• 行内块元素：img...

---

2.HTML4.1 常用标签

更详细请看...1.HTML基础 (opens new window)

<!-- div, span, h1~h6，p，hr,等标签不作展示 -->

<!-- img标签可以设置很多属性 -->
<img src="图片地址" title="文字悬停时候显示的文字" alt="图像加载失败，显示的替换文字" width="宽度" height="高度" ...>

<a href="跳转地址" target="目标窗口弹出方式">文字或者图像</a>
<!-- target: self为默认值，blank为在新窗口打开 -->

<!-- 锚点定位 -->
<!-- 1️⃣ 给a设置锚点 #idName -->
<a href="#test">跳转到目标锚点</a>
<!-- 2️⃣ 设置目标锚点 -->
<h3 id="test">目标锚点</h3>

<!-- 表格 -->
<table>
    <caption>我是表格标题</caption> 
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一行1</td>
            <td>第一行2</td>
            <td>第一行3</td>
        </tr>
        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
            <td>第二行3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">备注：</td>
        </tr>
    </tfoot>
</table>

<!-- 列表（还有有序列表 和 自定义列表） -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <div>4</div>
    </li>
</ul>

<!-- 表单 -->
<form action="提交到的url地址" method="提交方式（取值是get & post）" name="表单名称">
    <!-- input -->
    账号：<input type="text" value="请输入账号" name="username" />
    密码：<input type="password" name="password" />

    <!-- 通过相同 name 来实现 单选效果 -->
    <!-- ❣️ 备注：checked 表示默认选中，常用于单选，多选场景 -->
    性别：男 <input type="radio" name="sex" checked /> | 女 <input type="radio" name="sex" />

    <!-- 多选也是通过 name 来实现 -->
    爱好：🎧听歌 <input type="checkbox" name="like" /> | 🏀篮球 <input type="checkbox" name="like" /> | 🏊游泳 <input type="checkbox" name="like" />

    <!-- 按钮组：提交 & 重置 都需要在表单域下才能生效，默认value值是 提交 和 重置 -->
    <input type="submit" />
    <input type="reset" />
    <input type="button" value="一个纯的按钮" />

    <!-- 其他：图片提交必须包含src属性 -->
    <input type="image" src="" />
    <input type="file" />

    <label>
        账号：<input type="text" value="请输入账号" name="username" />
    </label>

    <textarea cols="每行中的字符数" rows="显示的行数">
        文本内容
    </textarea> 

    <select>
        <!-- selected 表示默认选定项 -->
        <option selected>--请选择省份--</option>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</form>

<b>粗体展示</b>
<strong>粗体展示</strong>
<i>斜体展示</i>
<em>斜体展示</em>
<s>删除线展示</s>
<del>删除线展示</del>
<u>下划线展示</u>
<ins>下划线展示</ins>

---

3.HTML5语义化标签的用法

---

🥓第二部分：Canvas

1.canvas基础操作

let canvas = document.getElementById('can')
let ctx = canvas.getContext('2d') // 这个可以理解为画笔

// 线（直线，三角形...）
ctx.moveTo(x, y)
ctx.lineTo(x, y)
ctx.arcTo(B点x， By, C点x, C点y, 弧的数值) // 直线 + 圆弧（可以做圆角矩形）

// 矩形
ctx.rect(x, y, 宽度, 高度) // 画矩形
ctx.strokeRect(x, y, 宽度, 高度) // 直接画出来了，都不用写构建路径
ctx.fillRect(x, y, 宽度, 高度) // 直接画出来了，都不用写填充路径

// 圆形（半圆，扇形，弧线，圆形）
ctx.arc(圆心x, 圆心y, 半径, 弧度, 方向)

// 贝塞尔曲线
ctx.quadraticCurveTo(x1, y1, x2, y2); // 二次贝塞尔曲线（除了起点，还需要另外两个点）
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3); // 三次贝塞尔曲线（除了起点，还需要三个点）

// 设置样式
ctx.fillStyle = 'red' // 设置填充颜色
ctx.strokeStyle = 'blue' // 设置填充颜色
ctx.lineWidth = 3 // 设置线条宽度
ctx.font = '24px 黑体'

ctx.fillText('实体文字', 文字显示的x, 文字显示的y); // 设置文字
ctx.strokeText('空心文字', 文字显示的x, 文字显示的y); // 设置文字

// 坐标平移 && 旋转 && 缩放
ctx.translate(100, 100) // 修改坐标原点（坐标平移）
ctx.rotate(Math.PI) // 旋转（单位是弧度，并且是根据坐标原点进行的旋转）
ctx.scale(x点倍数, y点倍数) // 缩放

// 保存和使用之前坐标系
ctx.save() // 保存之前坐标系（可以保存坐标系的平移数据，缩放数据，旋转数据）
ctx.restore() // 恢复之前的坐标系

// 清除画布
ctx.clearRect(x, y, 宽度, 高度) 

// 重新开启一个路径
ctx.beginPath()

ctx.closePath() // 闭合路径，针对一个路径才能闭合
ctx.stroke() // 构建路径
ctx.fill() // 构建填充路径

---

2.其他操作

// 填充图片（纹理的填充是以坐标系原点进行填充的）
let img = new Image()
img.src = 'https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/github%E5%9B%BE%E7%89%87/notes/3.png'
img.onload = function () {
    ctx.translate(100, 100)
    ctx.fillStyle = ctx.createPattern(img, 'no-repeat')
    ctx.fillRect(0, 0, 100, 100)
}

// 线性渐变填充
let bg = ctx.createLinearGradient(100, 100, 200, 200);
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)

// 辐射渐变
let bg = ctx.createRadialGradient(150, 150, 0, 180, 180, 180)
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)

// 阴影
ctx.shadowColor = 'red'
ctx.shadowBlur = 10;
ctx.fillRect(100, 100, 100, 100)

// 圆角矩形
ctx.moveTo(100, 110) // y轴多了10，是一个小技巧
ctx.arcTo(100, 200, 200, 200, 10)
ctx.arcTo(200, 200, 200, 100, 10)
ctx.arcTo(200, 100, 100, 100, 10)
ctx.arcTo(100, 100, 100, 200, 10)
ctx.stroke()

更详细内容...前端体系/canvas（画布） (opens new window)

---

🥒第三部分：websocket

基础使用

let socket = new WebSocket('ws://...') // 使用的是ws协议

// socket 完全打开并准备通信时候就会调用这个处理函数
socket.onpen = function () {

}

// socket 接收服务器消息
socket.onmessage = function (e) {

}

// 使用 postMessage() 向web服务发送一个消息
socket.postMessage('Hello Server')

---

🌶第四部分：本地存储

localStorage：每个浏览器都为本地存储提供了5MB~10MB的空间，除非主动删除，否则是不会消失的

// 存
localStorage.setItem('key', 'value')

// 取
localStorage.getItem('key')

// 属性
localStorage.length // 告诉我们localStorage有多少数据项
localStorage.key(i) // 传入index，可以拿到对象的数据（可以和length一起，做循环遍历）

// 方法
localStorage.removeItem(key) // 根据key值，清除对应的数据项
localStorage.clear() // 会删除当前页面关联的所有数据项

sessionStorage：支持的API和上面完全相同，不同的地方在于，这个浏览器关闭之后，本地存储的数据项就会被删除

---

🍞第五部分：地理定位

// navigator.geolocation.getCurrentPosition(成功回调，失败回调，配置参数)

navigator.geolocation.getCurrentPosition( res => {
    console.log('成功回调：', res)
    // res.coords.latitude 纬度
    // res.coords.longitude 经度
}, err => {
    console.log('失败回调：', err)
})

---

🍯第六部分：HTML5视频标签（video）&& 音频标签（audio）

1.视频标签（video）

不再依赖第三方插件（Flash）

<!-- 
    controls 浏览器会提供控件，允许用户控制视频和音频的播放
    autoplay自动播放
    poster="不播放视频时候显示的海报图片"
    loop 是否循环播放
    preload 更加细粒化的控制如何加载视频
    ...
-->
<video src="播放地址" controls autoplay poster="不播放视频时候显示的海报图片"></video>

// 视频加载完成触发的回调
let video = document.getElementById('video')
video.addEventListener('ended', () => {
    // 回调触发
})

// ...

---

2.音频（audio元素）

---

🍖第七部分：Web工作线程

---

🍳第八部分：其他内容补充

1.Modernizer.js（检测浏览器对一个API的支持 | HTML5/CSS3检测库）

Modernizer官方网址 (opens new window) Modernizer官方文档 (opens new window)

// 示例
if (Modernizr.webgl){
    console.log('浏览器支持webgl')
} else {
    console.log('浏览器不支持webgl')
}

2.SVG

3.离线Web应用

创建缓存清单文件（cache, manifest, file）

<!-- 将缓存清单文件的文件名加入到HTML标记中 -->
<html manifest="main.manifest">

CACHE MANIFEST 必须以这个开头 | CACHE表示要缓存的文件

CACHE MANIFEST
CACHE:
main.html
main.css
main.js

备注：如果在服务器上，还需要设置 AddType text/cache-manifest .manifest 这一行，用来提供正确的MIME类型

---

📚参考列表（致敬）