HTML5核心语义化标签共7个：header、nav、main、article、section、aside、footer，分别定义页眉、导航、主体、独立内容、主题区块、侧边栏和页脚，构建清晰文档结构并提升SEO与可访问性。
HTML 不是编程语言，是浏览器用来解析和渲染网页结构的标记语言。现代网页开发默认采用 HTML5 标准——它不是 HTML4 的补丁，而是一套完整、自洽、去 DTD 的新规范，2014 年由 W3C 正式发布，至今仍是所有主流浏览器唯一实际执行的 HTML 标准。
为什么必须写 <!DOCTYPE html> 且只能放在第一行
这行声明不带任何参数、不区分大小写（但惯例小写），作用是强制浏览器进入「标准模式」。漏写、错位、加空格或混入注释（如 <!--><!DOCTYPE html>）都会触发「混杂模式」，导致盒模型、字体渲染、表单控件样式等行为在不同浏览器中严重不一致。HTML5 已取消 DTD 概念，所以这个声明就是纯粹的开关信号，没有 URI、没有 SYSTEM、没有 PUBLIC。
<html lang="zh"> 中的 lang 属性到底影响什么
它不控制页面显示效果，但直接影响三类关键能力：
- 屏幕阅读器的语音语调与断句（中文需设为
zh或更细粒度如zh-CN） - 浏览器内置拼写检查器的语言词典匹配
- 搜索引擎对页面语言归属的判定（影响多语言站点收录与区域分发）
忽略 lang 不会报错，但无障碍访问和 SEO 会实质性受损；设错（如英文内容写 lang="zh"）反而比不设更糟。
立即学习“前端免费学习笔记（深入）”；
语义化标签不是“换汤不换药”，<div> 和 <section> 在 DOM 层级有本质区别
浏览器和辅助技术把 <section>、<article>、<nav> 等识别为具有明确含义的结构节点，而非仅样式容器：
-
<main>全局唯一，被屏幕阅读器视为内容主干，跳过导航/侧边栏直达 -
<figure>+<figcaption>构成独立媒体单元，打印时可整体浮动或重排 -
<time datetime="2026-04-30">今天</time>的datetime属性可被日历应用直接提取，<div>完全无法承载这种机器可读时间
用 <div class="section"> 模拟语义标签，CSS 和 JS 看起来一样，但对爬虫、语音交互、自动化测试工具而言，它就是一堆无意义的方块。
<video> 和 <audio> 的 src 与 <source> 必须配合使用
直接写 <video src="a.mp4"> 看似能播，但存在硬伤：
- 无法提供多格式回退：Safari 不支持 WebM，Firefox 对 MP4 编码支持不稳定
- 无法设置 MIME type，服务端可能返回错误 Content-Type，导致部分浏览器拒绝加载
- 失去
type属性带来的预加载判断权（浏览器可提前跳过不支持的格式）
正确写法必须用 <source> 显式声明：
<video controls> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
注意：<source> 是空元素，不闭合；备用文本必须写在 <video> 开始与结束标签之间，不能放在 <source> 后面。
真正容易被忽略的，是 <meta charset="UTF-8"> 必须出现在 <head> 最前面——哪怕只晚于一个注释或空格，某些旧版 IE 就会乱码；而 <meta name="viewport"> 若缺失，移动端页面会以桌面宽度缩放，用户得双指放大才能阅读。这些不是“可选优化”，是现代 HTML5 页面能正常工作的最低硬件门槛。
