HTML5文档必须包含、、和四个基础标签；前者声明文档类型且须为首行，后三者构成根结构，缺一将导致渲染异常或怪异模式。
HTML5 文档必须包含的 4 个基础标签
一个合法可被浏览器正确解析的 HTML5 静态网页，最低限度需要 、、 和 这四个标签。缺任何一个，页面可能渲染异常或被浏览器降级为怪异模式。
常见错误现象包括：中文乱码、CSS 不生效、JavaScript 报 document is not defined、表单提交失败等，往往就卡在这四层结构没写对。
必须是文档第一行，且不能带任何空格或注释前置；写成或也合法，但大小写不敏感不等于可随意缩写-
建议显式声明lang属性，否则屏幕阅读器和 SEO 会丢失语言上下文 -
里至少要有，否则中文内容极大概率乱码； -
是唯一能放可见内容的容器，所有文本、图片、按钮都得在里面；把它写成（自闭合）是无效的，HTML 不支持这种写法
语义化标签替代 div 的典型场景
HTML5 引入了 、、、、、 等语义化标签，不是为了“看起来更高级”，而是让浏览器、搜索引擎、辅助设备能准确理解内容层级。
比如用 立即学习“前端免费学习笔记（深入）”； 很多人只记得 这里是主体内容，而非 （如顶部主导航 + 侧边相关链接）
，且整个页面只能有一个；它不能嵌套在 或 内部 表示有独立主题的一块内容，需搭配 –
适用于能独立分发的内容，如博客文章、新闻条目；评论区、作者信息不属于 ，应放在外部head 中容易被忽略但关键的 3 个 meta 标签
，却漏掉另外两个影响实际体验的关键 ：
—— 没它，移动端页面会默认按 980px 渲染，文字小到无法阅读；iOS Safari 和 Android Chrome 都依赖这个声明做响应式适配 —— 不影响页面功能，但决定搜索引擎结果页中显示的摘要文案；长度建议控制在 70–160 字符，超长会被截断 —— 虽然 IE 已淘汰，但部分企业内网环境仍存在；此标签确保旧版 IE 使用最高可用文档模式，避免触发兼容性视图script 和 link 标签的位置与加载行为差异
默认同步阻塞解析，而 是并行下载但阻塞渲染；位置选错会直接拖慢首屏时间。
前（即 底部），避免阻塞 DOM 构建；若必须在 加载，加上 defer 属性（），保证执行顺序且不阻塞解析 内，且推荐使用 而非 内联；内联 CSS 超过 2KB 会增加 HTML 体积，不利于缓存复用 放在 里又不加 defer 或 async，否则 JS 执行时 document.body 还不存在，document.getElementById() 必然返回 null
HTML5 结构看似简单，但每个标签的存在位置、嵌套规则、属性取值都有明确规范；最容易出问题的不是“不知道怎么写”，而是“以为写了就对了”，结果在移动端、读屏软件或 SEO 抓取时暴露逻辑缺陷。网站标题
