平常用哪些语义标签

1. header / main / aside / section / article / footer / canvas / video / audio
2. canvas（ beginPath, strokeStyle, stroke 闭合 ）
3. video（ loop controls poster, src, autoplay ）

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 100);

🌈 讲一讲 HTML 语义化

用正确的标签做正确的事情

• 利于开发：结构清晰，可读性高，方便维护
• 利于SEO：方便爬虫根据 语义标签 确定 页面结构 和 关键字 的权重
  • tdk（title、description、keyword）
• 历史：最开始后端写 HTML 用 table，后来美工用 div + css（无语义），前端用语义元素（ h1，p，article ）

在写 HTML 代码时，语义化实践中应该注意什么 ？

• 尽可能少的使用无语义的标签 div 和 span
• 不要使用纯样式标签，如：b、font、u 等，改用 css 设置
• 需要强调的文本，可以包含在 strong 或 em 标签中，strong 默认样式是加粗（不要用 b），em 是斜体（不要用 i 标签）
• 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td
• 每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来
• 不仅写 HTML 结构时，要用语义化标签，给元素写 CSS 类名时，JS 类名、方法名、变量命名等也要遵循语义化原则。不随意取名，不利于后期的代码重构和维护。同时，也最好不要用汉语拼音命名。