<html>是HTML文档唯一合法根元素，必须包裹全部内容且不可嵌套；其直接子元素仅限<head>和<body>（顺序固定），缺失或错位会导致DOM异常、语义失效与可访问性问题。
<html> 标签不是可选容器，而是必须存在的根元素——所有其他标签都得在它里面，否则文档结构不合法，浏览器可能降级到怪异模式或丢弃部分语义。
为什么 <html> 必须包裹全部内容，且不能嵌套
HTML 解析器把 <html> 当作文档根节点，它的子节点只能是 <head> 和 <body>（顺序固定，<head> 必须在前）。如果漏写 <html>，浏览器会自动补上，但补全行为不可控；如果手动再套一层 <html>，解析器会忽略内层，只认最外层——等于白写，还可能触发 DOM 树异常。
-
<html>不能出现在<head>或<body>内部，否则被视作无效标签，直接剥离 -
lang属性应直接写在<html>上，而非<body>或某个 p，否则屏幕阅读器无法正确识别整页语言 - 某些 SSR 框架（如 Next.js）生成的 HTML 可能默认省略
<html>开始标签，需检查输出源码确认是否完整
<head> 和 <body> 的位置与内容边界
它们是 <html> 的唯二合法直接子元素，且顺序不可交换。浏览器按顺序解析：先 <head>（收集元信息、加载资源），再 <body>（渲染可见内容）。把脚本或样式塞进 <body> 开头虽能运行，但会阻塞渲染；放错位置（比如 <meta> 写在 <body> 里）会导致 charset 生效失败或 viewport 不起作用。
-
<meta charset="utf-8">必须在<head>最前面（越早越好），否则中文可能乱码 -
<title>只能出现在<head>中，放在<body>里会被忽略，document.title 读不到 -
<script>默认同步执行，若没加defer或async，放在<head>末尾仍会阻塞<body>渲染
常见错误：把语义标签当“装饰性容器”乱套
像 <header>、<main>、<footer> 这些不是 p 替代品，它们自带隐含语义和默认 ARIA role，但必须在 <body> 下直接使用，不能为了“结构整齐”而套在额外的 <p> 里。
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个文档中只能出现一次，且不能被<article>或<section>包裹——否则语义冲突，辅助技术会误判主内容范围 - 用
<p onclick="goHome()">模拟导航链接，键盘 Tab 焦点进不去，role="link"也补不回原生<a href>的语义和 focus 状态 -
<nav>必须包含至少一个可聚焦的交互元素（如<a>或带tabindex="0"的元素），否则会被部分屏幕阅读器跳过
真正容易被忽略的，是 <html> 标签上的 lang 和 <head> 里 <meta charset> 的位置——它们不报错，但一旦出错，问题会渗透到 SEO、翻译插件、语音朗读甚至表单输入法切换上，排查时却很难联想到根源在这里。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xinjizixun/123892.html
