HTML标题必须遵循语义化层级规则：一个页面仅一个h1，h2为h1子节，h3隶属h2且不可跳级；section/article内可重置层级；禁用div模拟标题，避免CMS多h1、误用h5作副标题等错误。
<p>、<h1>到<h6>、<strong>、<i>、<del>、<mark>这些标签不是“加个样式”那么简单，它们各自携带语义，浏览器和屏幕阅读器会据此处理内容。用错标签，可能让 SEO 掉权重、无障碍访问失效，甚至影响后续 CSS 选择器的稳定性。
段落标签 <p> 的默认行为与常见误用
它不只是“换行”，而是定义一个逻辑段落：浏览器自动添加上下 margin，且语义上表示一段完整意思。很多人用多个 <p> 包裹单行地址或短句，反而造成过大间距；更合适的写法是用 <div> 或 <span> 配合 CSS 控制。
- 别用
<p>做纯视觉换行——那是<br>的事 - 不要嵌套标题（如
<p><h2>xxx</h2></p>），HTML 规范禁止这种结构 -
<p>内部可放<strong>、<em>等内联元素，但不能直接放<div>、<ul>
标题层级 <h1>–<h6> 的语义约束
标题不是“字号从大到小”的排版工具，而是文档大纲的骨架。<h1> 应全站唯一，代表页面核心主题；后续标题必须按逻辑嵌套，不能跳级（比如 <h2> 后直接写 <h4>）。
- 搜索引擎和读屏软件依赖这个层级生成导航树，乱序会破坏可访问性
- CSS 可以重置所有
h标签的字体大小，但语义层级不能靠样式“伪装” - 某些 CMS 或静态站点生成器会自动提取
h2–h3生成目录，跳级会导致目录缺失
<strong> 和 <em> 不等于 <b> 和 <i>
这是最容易混淆的一组。前者表达语义强调：<strong> 表示内容重要（屏幕阅读器会加重语气），<em> 表示语气强调（如反语、重音）；后者只是视觉样式，无语义含义。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 价格旁写“限时抢购”应该用
<strong>，不是<b> - 人名首次出现时标注拼音，用
<ruby>+<rt>，而非<i> - 旧项目里大量
<b>标签迁移时，需逐个判断是否该替换为<strong>
<mark>、<del>、<small> 的典型使用场景
这些标签有明确语义边界，滥用会削弱 HTML 的可维护性。
-
<mark>仅用于高亮页面中“与当前上下文相关”的文字（如搜索结果中的关键词），不是通用背景色工具 -
<del>必须配合新内容出现，例如<del>¥199</del> <ins>¥99</ins>，单独用<del>会让辅助技术用户困惑 -
<small>专指“边注、版权、法律声明等次要信息”，不是缩小字体的快捷方式；CSS 的font-size更灵活可控
真正难的不是记住每个标签怎么写，而是每次敲下 < 时，先问一句：“这段内容在文档结构里扮演什么角色？”——语义对了，样式和可访问性才不会翻车。
