里的内容不显示在页面上，因为它是元信息容器而非渲染区域，浏览器只渲染内的可视dom；、等仅影响解析、加载或行为，不生成像素。
为什么
因为 是元信息容器，不是渲染区域。浏览器只把 里的内容当作可视 DOM 渲染出来。<title></title>、<meta>、<link>、<script></script>（除非加 defer 或 async）都只影响解析、加载或行为，不产生像素。
常见错误现象：
- 在
里写<p>Hello</p>，页面完全不显示 - 误以为
<meta name="description">会出现在网页正文里 - 把 CSS 写在
外面，导致样式不生效
实际使用场景中， 必须包含：<title></title>（否则标签页显示空白或“无标题”），<meta charset="UTF-8">（否则中文可能乱码），以及响应式必需的 <meta name="viewport">。
lang 属性到底要不要设
要设，而且必须设对。它不只影响 SEO，更直接影响屏幕阅读器发音、拼写检查、字体回退逻辑，甚至部分 CSS 的 :lang() 选择器行为。
参数差异明显：
-
lang="zh"是泛中文，但不区分简繁；lang="zh-CN"明确指向简体中文（大陆），lang="zh-TW"指向繁体（台湾） -
lang="en"和lang="en-US"在美式/英式拼写提示上有细微差别 - 嵌套语言需局部覆盖，比如英文页面里一段法文：
<span lang="fr">Merci</span>
漏设或错设 lang 不报错，但会导致辅助技术失效、Google 搜索结果语言匹配不准、某些字体 fallback 到不合适的字族。
不能。所有用户可见内容必须放在 内。HTML 规范明确要求：除 和 外， 的直接子元素只允许这两个——多了就是无效结构。
容易踩的坑：
- 把
<script></script>或<div> 直接写在 <code>下、和之外，浏览器会自动纠错（多数情况下塞进开头），但 DOM 树不可靠，JS 获取document.body.children时顺序可能异常 - 用构建工具生成 HTML 时，模板拼接出多层
或遗漏标签，导致样式重置失效或 JS 找不到挂载点 -
<noscript></noscript>必须在内，哪怕它只是兜底提示 - 用浏览器 DevTools 的 Elements 面板右键节点 → “Edit as HTML”，手动删掉疑似错嵌的标签，观察结构是否塌陷或移位
- 检查常见非法嵌套：
<p></p>里不能放<div>（块级嵌套块级虽不报错，但违反 HTML5 内容模型）；<code><a></a>里不能放<button></button>；<li>必须直接子于<ul></ul>或<ol></ol> - 运行
document.querySelectorAll("*").forEach(el => { if (el.parentElement && !el.parentElement.contains(el)) console.warn("orphaned:", el); })可发现被浏览器自动移动的孤儿节点
验证方式很简单：打开开发者工具 → Elements 面板，确认 下只有两个子节点： 和 ，且顺序固定。
标签嵌套错误如何快速定位
浏览器不会报错，但 DOM 解析会静默修正。真正的问题往往出现在 CSS 选择器失效、JS querySelector 匹配不到、或者语义化校验失败（如 Lighthouse 提示 “Improper heading hierarchy”）。
实操建议：
最隐蔽的问题是自闭合标签误写为双标签，比如 <img src="x"> —— 浏览器会忽略 ，后续内容全部变成 <img> 的子节点，DOM 结构彻底错乱。
