一份标准html文档必须包含、、和四个标签，缺一不可；为根元素，存放元信息且必须含，仅支持纯文本并定义标签页标题，承载所有可见内容。
HTML文档必须包含哪四个标签
一个能被浏览器正确解析的HTML文档，至少要包含 、、<title></title>、 这四个标签。缺任何一个，都可能触发怪异模式（Quirks Mode），导致样式错乱或脚本行为异常。
常见错误现象：<title></title> 写在 里，或者漏掉 直接塞 <meta charset="UTF-8"> 到 下——这些都会让浏览器降级渲染。
-
是唯一根元素，所有其他标签必须嵌套其中；建议加lang属性，比如 -
不显示内容，但必须包含<meta charset="UTF-8">和<title></title>，否则中文可能乱码、SEO缺失主标题 -
<title></title>必须在内，且只能出现一次；它不是装饰，是页面在标签页、书签、搜索引擎结果里的唯一标识 -
是唯一可直接放可见内容的容器；不要把<script></script>或<style></style>放到它外面
为什么
的作用是声明元信息，不是内容容器。往里面塞 <p></p>、<h1></h1> 或图片标签，浏览器会默默把它们“踢”到 开头——但 DOM 结构已错乱，JavaScript 查找元素时容易出错，CSS 选择器也可能失效。
典型误用场景：复制粘贴时没注意标签层级，把整段文章直接粘进 ；或者用 CMS 模板时误删了 开始标签，导致所有内容被浏览器自动归入 。
- 检查方法：按 F12 打开开发者工具 → Elements 面板，看
<p></p>是否出现在下——如果是，说明结构错了 - 修复动作：剪切错误内容，粘贴到
标签下第一行（确保在之后、之内） - 注意：
<script></script>和<link rel="stylesheet">是例外，它们合法存在于，但仍是元信息，不是“内容”
<title></title> 和 <h1></h1> 的区别不是语义而是位置
<title></title> 是给浏览器和搜索引擎看的，<h1></h1> 是给用户和屏幕阅读器看的。两者可以文字相同，但绝不能互相替代——把 <h1></h1> 当成 <title></title> 用，页面在标签页上就只剩空白或默认名；反过来，在 里写 <title></title>，它根本不会渲染成任何文字。
容易踩的坑：为了“省事”，只写一个 <h1></h1> 就不再设 <title></title>；或在单页应用中动态改 <h1></h1> 却忘了同步更新 <title></title>，导致分享链接时预览标题错误。
-
<title></title>必须在内，且不支持 HTML 实体以外的任何格式化（不能加<strong></strong>、不能换行） -
<h1></h1>必须在内，可嵌套内联标签如<span></span>，也支持 CSS 控制样式 - SEO 角度：
<title></title>权重远高于<h1></h1>；无障碍角度：<h1></h1>是屏幕阅读器跳转的第一级锚点
注释和空格会影响 HTML 结构吗
HTML 注释 <!-- --> 和标签间的空白符（换行、缩进、空格）本身不会破坏结构，但可能干扰视觉排版或 JavaScript 获取文本内容的行为。
比如 <p>Hello</p>
<p>World</p> 和 <p>Hello</p>\n<p>World</p> 在渲染上完全一致，但若用 document.querySelector('p').textContent 获取，后者会多出换行符；而注释如果插在父子标签之间，比如 <!-- 注释 --><h1>标题</h1>，DOM 树里就会多出一个注释节点，影响 childNodes 遍历逻辑。
- 安全写法：注释尽量放在标签内部（如
<!-- 导航开始 --><nav>...</nav>），避免夹在父子标签之间 - 空格处理：用
textContent.trim()而非innerText获取纯文本，更可控 - 真正影响结构的是标签嵌套错误，而不是空格或注释——别为缩进焦虑，但务必检查闭合是否匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
