html标签须按语义正确使用：标题需严格层级嵌套，表段落而非换行，/表强调而非样式，//有特定语义用途；误用将损害可访问性、seo及维护性。
<h1></h1> 到 <h6></h6> 是语义化标题，不是“加大字号”的装饰工具；<p></p> 是段落容器，不是换行符；用错就等于把结构当样式使，后续维护和 SEO 都会出问题。
标题标签 <h1></h1>–<h6></h6> 必须按层级嵌套
浏览器和屏幕阅读器依赖标题层级理解内容结构。<h1></h1> 应全页唯一（通常为页面主标题），<h2></h2> 表示一级子节，<h3></h3> 是 <h2></h2> 下的子节，依此类推。跳着用（比如 <h1></h1> 后直接 <h4></h4>）会破坏可访问性树。
常见错误现象：
- 用
<h2></h2>当副标题、<h3></h3>当小标题，但中间缺了<h2></h2>分组，导致大纲混乱 - 为“视觉效果”滥用
<h1></h1>多次（如每个卡片都塞一个<h1></h1>）
实际建议：
- 先画内容大纲，再选对应层级标签
- 用浏览器开发者工具的“大纲视图”（Elements → Accessibility → Outline）实时验证
- 不要靠 CSS 改变
<h1></h1>的字号来“降级”它——该用<h2></h2>就用<h2></h2>
<p></p> 不是 <br>，段落必须有语义边界
<p></p> 表示一个完整、独立的文字段落，自带上下外边距；<br> 只是强制换行，无任何语义。混用会导致：
- 无障碍工具无法识别段落分隔，读屏时连成一片
- CSS 重置或响应式断点失效（比如想对所有段落统一加首行缩进，
<br>完全不响应） - 复制粘贴时丢失段落空行，变成一整块文字
正确做法：
- 每一段自然成文的内容，都用
<p></p>包裹 - 纯排版换行（比如地址分行、诗歌断句）才用
<br> - 连续多个
<br>（如<br><br>）基本是结构设计缺陷，应改用 margin 或<div> 分隔 <h3> <code><strong></strong>和<b></b>、<em></em>和<i></i>语义不同前者强调内容重要性或语气变化，后者仅表示“视觉加粗/斜体”，无语义权重。搜索引擎和读屏软件只响应
<strong></strong>和<em></em>。典型误用场景：
- 产品名、品牌词用
<b></b>加粗（应使用<strong></strong>，因其具有强调含义） - 外语短语、术语用
<em></em>（应优先用<i></i>，W3C 明确将其定义为“不同语境下的文字”，如拉丁名、船名） - 用
<strong></strong>实现图标旁文字加粗，但其实只是 UI 样式需求（此时应改用<span></span>+ class）
简单判断法：删掉标签后，句子原意是否被削弱？如果是，用
<strong></strong>/<em></em>；如果只是“看起来要突出”，用 CSS。<small></small>、<mark></mark>、<u></u>这些标签仍有明确用途它们不是过时的“装饰残留”，而是 HTML5 明确定义的语义标签：
-
<small></small>：用于免责声明、版权信息、法律条款等次要但需保留的文本（不是“缩小字体”的通用手段） -
<mark></mark>：高亮用户当前搜索关键词或文档中需要引起注意的片段（语义上等同于荧光笔标记） -
<u></u>：HTML5 已弃用其“下划线”旧含义，现专用于拼写错误提示（配合spellcheck="false"使用）或中文排版中的人名、地名下划线（需搭配 lang 属性）
容易被忽略的点：这些标签默认样式可被 CSS 覆盖，但语义不可替代。比如用
<span class="highlight"></span>替代<mark></mark>，就失去了机器可读的“这是高亮内容”这一层含义。 - 产品名、品牌词用
