关键在于理解标签的语义角色：表示独立逻辑段落，自带间距与结构；仅强制换行、无语义；强调重要性（影响seo与读屏），仅视觉加粗；标题需严格层级嵌套；重置css后须手动恢复间距。
掌握HTML文字排版标签，关键不是背住所有标签名，而是理解每个标签在文档结构中的“身份”和“职责”。用错标签，页面照样能显示，但后续维护、SEO、无障碍访问会陆续出问题。
什么时候该用 <p></p> 而不是 <br>
<p></p> 是语义块，<br> 是纯视觉换行。很多人写地址或诗歌时，一股脑塞进一个 <p></p> 里再狂敲 <br>，结果搜索引擎读不出段落边界，屏幕阅读器念成一整段。
- 用
<p></p>：每段表达独立意思（如条款、说明、新闻段落） - 用
<br>：同一语义块内强制分行（如地址、诗行、签名档） - 危险信号：如果一段里用了 3 个以上
<br>，大概率该拆成多个<p></p>或改用<address></address>等更合适的语义标签
<strong></strong> 和 <b></b> 的区别不只是加粗效果
视觉上没差别，但浏览器、爬虫、读屏软件会按语义处理它们。<strong></strong> 表示内容重要性提升，会被读屏软件加重语气；<b></b> 只是“想让它看起来突出”，没有额外含义。
- 用
<strong></strong>：错误提示、必填项说明、安全警告（如<strong>密码必须包含特殊字符</strong>） - 用
<b></b>：仅需视觉强调且无语义权重（如商品名出现在广告文案中），但更推荐用 CSS class 控制样式 - 重置 CSS 后
<strong></strong>仍保留语义价值，而<b></b>一旦样式被清空，就彻底“隐身”了
标题层级 <h1></h1>–<h6></h6> 不是字号调节器
标题标签自带默认字号和加粗，但它的核心作用是构建文档大纲。跳级使用（比如 <h1></h1> 后直接跟 <h4></h4>）、重复使用多个 <h1></h1>，都会破坏结构逻辑，影响 SEO 和辅助技术解析。
- 每个页面只应有一个
<h1></h1>，代表主主题（如文章标题、页面核心功能） -
<h2></h2>–<h6></h6>应逐级嵌套，反映内容从属关系（如章节→小节→子项） - 不要靠改标题标签来“调大小”——那是 CSS 的事；滥用
<h3></h3>做副标题样式，等于把楼层编号贴错门牌
为什么注释和默认间距常被忽略却最影响协作体验
注释 <!-- --> 不渲染，但它是代码的“上下文说明书”。没人愿意维护一段没注释的 HTML，尤其当它混着 CSS 重置、响应式断点、临时屏蔽区块时。
- 注释要说明“为什么”，而不是“是什么”（比如写
<!-- 防止 Safari iOS 16.4 下 margin collapse 异常 -->，比<!-- 清除浮动 -->有用得多） -
<p></p>默认有margin，但全局重置（如* { margin: 0; }）会干掉它，导致段落粘连——最简修复是加p { margin: 1em 0; } - 移动端小屏下，过大的段间距会撑开视口，建议配合
@media (max-width: 768px) { p { margin: 0.8em 0; } }
真正难的不是写出合法 HTML，而是每次敲标签前，先问一句：这段文字在文档里扮演什么角色？机器怎么理解它？人下次打开时能不能一眼看懂意图？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
