html文档中，必须为根元素，和必须是其强制直系子元素且并列存在，不可嵌套、不可颠倒顺序，否则将导致dom结构错乱或浏览器静默修正。
html、head、body 三者必须严格嵌套
HTML 文档不是标签堆砌，而是有强制层级约束的树形结构。html 必须是根元素，head 和 body 必须是它的直接子元素，不能颠倒顺序，也不能嵌套在彼此内部。
常见错误现象：head 放在 body 里，或 body 写在 head 前面——浏览器会尝试自动修复，但 DOM 结构可能错乱，影响 CSS 选择器匹配和 JS 获取元素行为。
必须在第一行，且不区分大小写，但建议小写-
html标签可带lang属性（如lang="zh"），用于辅助技术识别语言 -
head中的内容不会渲染到页面上，但title、meta、link等直接影响 SEO、字符编码、样式加载 -
body是唯一承载可视内容的容器，所有用户可见的标签（h1、p、div等）都必须在此内
title 标签只允许出现在 head 中
title 不是装饰性标签，它是文档元信息的一部分，作用是定义浏览器标签页标题、被搜索引擎抓取为页面主标题。它必须、也只能作为 head 的直接子元素存在。
容易踩的坑：把 title 放进 body —— 浏览器会忽略它，页面标签页显示为空或默认值；用多个 title（比如动态插入）—— 后续的会被忽略，只有第一个生效。
-
title内容不能含 HTML 标签，会被原样转义显示（如写<strong>首页</strong>，页面标题就真显示那串文字） - 长度建议控制在 60 字符以内，过长在搜索结果中会被截断
- 服务端渲染或 SPA 中需注意：单页应用切换路由时，应通过
document.title手动更新，而非重复插入title标签
h1–h6 的语义层级不可跳级或滥用
标题标签不是“加大加粗字体”的快捷方式，而是表达内容主次关系的语义结构。浏览器和读屏软件依赖它们构建大纲（outline），SEO 也据此判断内容权重。
典型误用：h3 直接跟在 h1 后面，中间跳过 h2；用 h1 包裹按钮或图标；同一页面出现多个 h1（除非明确需要多主标题语义，如新闻聚合页）。
- 一个页面推荐仅一个
h1，代表页面核心主题 - 层级应线性递进：有
h2才该有对应的h3，不能为了样式好看而降级使用 - CSS 可以完全重置标题的默认样式，语义和表现要分离——
h2可以比h1小，只要逻辑层级正确 - 检查大纲结构可用浏览器开发者工具的「Accessibility」面板，或运行
document.ouline（部分浏览器支持）
br 是换行，不是分段，更不是布局工具
br 是唯一的纯排版单标签，作用仅仅是插入一个换行符。它不产生语义，也不创建新块级上下文，和 p 的功能本质不同。
很多人用 br 替代 p 或 div 实现“空行”，这是语义污染。后果包括：屏幕阅读器无法识别段落边界、打印样式错乱、后续维护难以添加段落级样式。
- 连续多个
br（如<br><br><br>）属于反模式，应改用margin或padding - 地址、诗歌、歌词等需要保留人工换行的场景，才是
br的合理用例 - 响应式设计中，
br在移动端可能造成意外折行，优先考虑 CSS 的white-space或弹性布局
querySelector 返回什么、甚至影响无障碍导航顺序。写错一层嵌套，可能让整个页面的语义结构塌陷。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
