HTML标签误用导致语义错位：<p>不可嵌套<h1>–<h6>，因规范禁止且浏览器会自动修正DOM；<strong>表强重要性，<b>仅视觉加粗；<hr>是语义分隔符，<br>仅限必要换行。
初学者用错 <p>、<h1>、<strong> 这类标签，不是语法报错的问题，而是语义错位——浏览器照常渲染，但搜索引擎看不懂你在强调什么，屏幕阅读器会读错重点，后期加 CSS 或改结构时反而更费劲。
为什么 <p> 不能套 <h1>？
HTML 规范明确禁止块级元素嵌套标题标签。虽然浏览器会“容错渲染”，比如写成：
<p><h2>副标题</h2></p>
它可能看起来没崩，但实际会自动修正 DOM 结构：把 <h2> 提到 <p> 外面，<p> 可能被截断或补闭合。结果是结构混乱，CSS 选择器失效，JS 查询不到预期节点。
-
<p>只能包含文本、行内元素（如<strong>、<em>、<a>） -
<h1>–<h6>是独立块级标题，必须直接放在<body>或语义容器（如<section>、<article>）里 - 想让段落“居中”或“加粗”？用 CSS 控制，别靠塞标题标签硬凑效果
<strong> 和 <b> 到底该用哪个？
二者都显示为加粗，但语义完全不同：<strong> 表示内容有强重要性（比如警告、关键参数），会被屏幕阅读器加重语气读出；<b> 仅表示“视觉上突出”，无语义权重，适合产品名、关键词等无需强调含义的场景。
立即学习“前端免费学习笔记（深入）”；
- 错误用法：
<strong>¥99</strong> —— 价格本身不具语义重要性，用 <code><b>更合适 - 正确用法：
<strong>请勿删除此文件</strong> —— 带操作风险提示，需语义强化</li> <li>现代项目中，<code><b>
使用频率远低于<strong>，别为了“加粗”就默认选它
<hr> 和 <br> 经常被当成“换行”和“分隔线”乱用
<hr> 是语义化的内容分隔符，代表主题或章节的边界；<br> 是纯排版换行，只应在极少数必须折行的场合使用（如地址、诗歌、歌词）。滥用 <br> 会导致响应式失效、无障碍访问困难、SEO 权重稀释。
- 别用
<br>实现段间距——用<p>标签天然自带上下 margin，或用 CSS 的margin - 别用多个
<br>“空行”模拟区块间隔——那是结构缺失，该用<section>或<div>+ CSS -
<hr>不需要任何属性，也不建议加width、color等样式属性——这些该交给 CSS 控制
最易被忽略的一点：所有文本标签的语义不是“怎么好看”，而是“怎么被理解”。哪怕只是写个个人简历页面，<h1> 应该是你的姓名，<h2> 是“教育背景”“工作经历”这类一级模块，而不是为了字号大就到处塞 <h3>。结构对了，后期加动画、适配手机、对接 CMS 才真正省力。
