h1–h6需严格按层级嵌套，一个页面仅一个h1；p为语义段落，不可嵌套块级元素；strong/em/mark表达重要性、语气和高亮语义；img的alt、small、del/ins均具强制语义，不可仅作样式使用。
h1–h6 标题标签的语义与嵌套限制
标题不是单纯为了“变大变粗”，h1到h6构成一个有层级的语义结构，搜索引擎和屏幕阅读器都依赖它理解内容主次。一个页面应有且仅有一个h1，代表整页核心主题；h2是它的直接子级，h3再隶属于某个h2，以此类推。
常见错误是跳级使用，比如h1后面直接跟h4，或用h2当副标题却没配对的h1。浏览器不会报错，但会破坏可访问性与 SEO 逻辑。
-
h1–h6自带上下外边距和加粗，无需额外写font-weight: bold - 不要用标题标签仅为了视觉效果——该用
div+CSS的地方别硬套h3 - 移动端视口缩放时，
h1可能过大，可通过 CSS 重设font-size，但别改语义层级
段落标签的换行与空白处理机制
p 是块级元素，天然独占一行、上下留白。它不负责“换行”，而是定义一段完整语义内容。很多人误用p包裹单行短句（如导航文字、按钮说明），这会引入多余间距，干扰布局流。
真正需要强制换行又不想带段落间距时，该用br；需要分组文本但不强调“段落”语义时，用div或span更合适。
立即学习“前端免费学习笔记（深入）”；
-
p内不能嵌套h1–h6、div、其他p等块级元素（W3C 规范禁止） - 连续多个
p标签会产生叠加外边距，不是两倍间距，而是取最大值（margin collapse） - 段落首尾空格、换行符会被浏览器自动忽略，要保留空白需用
white-space: pre-wrap
、、 等内联语义标签的实际用途
strong 不等于“加粗”，它表示内容具有强重要性；em 不等于“斜体”，它表示强调语气；mark 表示高亮，常用于搜索结果或引用中需突出的部分。它们影响的是语义，而非样式——样式可以被 CSS 覆盖，但语义一旦写错，辅助技术就无法正确传达意图。
容易踩的坑是把strong当样式工具滥用，比如在价格旁加strong只为了让数字粗一点，其实应配合 aria-label 或直接用 CSS 控制视觉。
-
strong和em可以嵌套：<strong>请<em>务必</em>确认</strong> -
mark默认背景色是黄色，但颜色无语义，重点是其“临时标记”含义，适合动态高亮场景 - 避免用
b和i替代strong/em——前者纯样式，后者带语义，现代项目应优先选后者
alt 属性与 、 的不可省略性
img 的 alt 属性不是“可选补充”，而是强制可访问性要求。为空字符串 alt="" 表示该图纯装饰、无信息价值；若留空或缺失，屏幕阅读器可能读出文件名，造成干扰。而small 并非只是“缩小字号”，它专用于侧栏、版权、法律声明等次要但仍有语义的内容；del 表示已被删除的内容，常与ins搭配展示修订痕迹。
很多人把small当通用缩小工具，甚至用它压低表单提示文字，这会让辅助技术误判内容权重；把del当划线样式用，却不配ins，则丢失了“修改发生”的语义上下文。
-
alt文字需简洁准确，描述图像本身作用，而非“图片”“图标”这类冗余词 -
small内容仍会被搜索引擎索引，只是权重较低，别用来藏关键词 -
del和ins支持datetime属性，可用于记录修改时间：<del datetime="2026-08-20">旧价格</del><ins datetime="2026-08-25">新价格</ins>
h3控制字体大小，用strong制造视觉重量，用small压低提示文字——这些操作短期内看起来没问题，但一旦接入无障碍工具、SEO 抓取或内容复用系统，语义断裂就会立刻暴露出来。 
