html5文档结构遵循语义流：从doctype声明和html根元素开始，经head（含charset、title、viewport等关键元信息）到body（用语义标签、正确标题层级、alt属性保障可访问性），head与body职责分明不可混淆。
HTML5文档结构不是代码堆砌，而是一条清晰的语义流：从声明意图（DOCTYPE），到定义主体（html），再到区分“关于内容的信息”（head）和“内容本身”（body）。 这条主线贯穿所有合格网页，决定浏览器如何解析、搜索引擎如何理解、辅助技术如何朗读。
doctype 和 html：结构起点与语言锚点
文档必须以 开头——这不是标签，而是向浏览器发出的明确指令：按 HTML5 标准解析。紧随其后的是 <code>，其中 lang 属性不是装饰，它告诉浏览器、翻译工具和读屏软件：“这段内容是简体中文”，直接影响字体回退、语音语调和SEO地域相关性。
head：不显示，但无处不在的“幕后指挥官”
不渲染可见内容，却掌控着页面的底层行为与表达能力：
-
<meta charset="UTF-8">确保中文、emoji、特殊符号不乱码——字符集错配会导致整页文字失效 -
<title></title>是唯一强制出现在中且用户可见的部分，它出现在浏览器标签页、收藏夹、搜索结果摘要里，直接影响点击率 -
<meta name="viewport" content="width=device-width, initial-scale=1">是响应式页面的开关，缺了它，手机访问就可能显示桌面缩略版 -
<link rel="stylesheet">和<script defer></script>的加载顺序与属性（如defer、async）直接决定首屏渲染速度与交互可用时间
body：语义化内容的承载层与用户触达终点
是用户真正看到并操作的部分，它的质量不只看是否能显示，更看是否可读、可导航、可访问：
- 避免通篇用
<div> 堆砌，优先使用 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer>等语义元素——它们让屏幕阅读器知道“这是导航栏”“这是主文章”，而非“一堆方块” - 标题层级必须线性递进：
<h1></h1>全局唯一，代表页面核心主题；<h2></h2>是一级子模块；跳过<h2></h2>直接写<h4></h4>会破坏大纲结构，影响SEO与无障碍体验 - 所有图片必须含
alt属性，空字符串（alt=""）表示“纯装饰”，有含义的图则需简明描述功能或内容，例如<img src="logo.png" alt="公司名称首页标识"> - 把 CSS 写在
里（如内联<style></style>在底部）——样式应尽早声明，否则页面会先无样式闪现再重绘 - 在
中写<script></script>且无defer或async——会阻塞 HTML 解析，导致白屏延长 - 把
<title></title>放进——浏览器会自动将其移到，但属于不符合规范的写法，可能触发验证警告或兼容问题
head 与 body 的协作边界不可模糊
常见错误往往源于混淆二者职责：
