是HTML文档唯一根元素，必须紧跟声明之后，仅直接包含和两个子元素（顺序固定），且需显式闭合并推荐添加lang属性以保障可访问性与SEO。
标签是每个 HTML 文档的根元素，它必须包裹整个网页内容，不能遗漏、不能嵌套、也不能放在其他标签内部。
它从 开始，到 结束，中间只允许直接包含 和 两个子元素（顺序固定， 在前， 在后）。
- 必须紧跟在
声明之后，且是文档中第一个实际标签 - 推荐添加
lang属性，明确页面语言，例如： - 所有其他 HTML 元素（包括
、及其全部内容）都必须严格位于内部 - 不可省略结束标签
（虽然部分浏览器能自动补全，但规范要求显式写出）
<meta charset="UTF-8"><title>我的网页</title><h1>欢迎访问</h1> <p>这是主体内容。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a> <p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
常见错误要避免
-
标签外写了任何内容（比如文字、注释、空格）——会导致解析异常或触发怪异模式 - 把
或放在外面——浏览器可能尝试修复，但语义已破坏 - 多个
标签——一个文档只能有一个根元素 - 忘记
lang属性——虽不影响显示，但影响可访问性（屏幕阅读器）、SEO 和字符处理逻辑
为什么必须用
- 它定义了文档边界，让浏览器知道“哪里开始、哪里结束”
- 是 CSS 选择器
:root对应的元素，所有全局样式和变量以此为基准 - JavaScript 中
document.documentElement就指向这个元素 - 搜索引擎和辅助技术依赖它识别文档结构完整性
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
