基础原理
HTML
语义化文档结构与 Web 应用入口。核心能力：语义标签、音频/视频、Canvas、SVG、Web Storage、Web Worker。
这类题不要只写定义，要写"现象 -> 原因 -> 排查点"。 如果能结合 DevTools 的 layout / computed 面板来描述，会更像真实工程经验。
HTML 语义化
对 HTML 语义化的理解
- 用正确的标签做正确的事情
- 让页面的内容结构化，结构更清晰
- 便于对浏览器、搜索引擎解析
- 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
- 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
常见语义化标签
目前约有 100 多项语义化标签：
| 分类 | 标签 |
|---|---|
| 结构标签 | header / nav / aside / main / footer |
| 标题标签 | h1~h6 / hgroup |
| 内容标签 | article / section / details / time |
| 媒体标签 | figure / figcaption |
为什么要使用语义化标签
- SEO：让网页更容易被搜寻到
- 开发：提升代码可读性、帮助理解网页架构、减少差异化
- 无障碍：方便其他设备解析内容（HTML accessibility）
HTML5 新特性
| 特性 | 说明 |
|---|---|
| Canvas | 画布，用于 2D/3D 图形绘制 |
| Video / Audio | 原生媒介播放，无需 Flash |
| Web Storage | localStorage / sessionStorage |
| Web Worker | 后台线程，不阻塞主线程 |
| WebSocket | 全双工持久连接 |
| 表单属性 | calendar / date / time / email / url / search |
src vs href
| 属性 | 用途 | 加载方式 | 阻塞行为 | 典型标签 |
|---|---|---|---|---|
src | 引入/嵌入资源 | 下载并应用到当前位置 | 普通 <script> 阻塞；async/defer/<img>/<iframe> 不阻塞 | <script> <img> <iframe> |
href | 建立链接/关联 | 并行下载，不阻塞解析 | 不阻塞 | <a> <link> |