p、h1–h6、span、strong、em、mark、code、blockquote、q、pre 是最常用且语义明确的文本承载元素，各自有特定用途和默认渲染行为：p 为段落载体，h1–h6 表示标题层级（h1 唯一且最高），strong/em 表示强重要性与语气强调，mark 用于高亮，code 表示代码，blockquote/q 区分长/短引用，pre 保留格式，span 无语义仅作操作容器。
p、h1–h6、span、strong、em、mark、code、blockquote、q、pre 是最常用且语义明确的文本承载元素。它们不是“容器”意义上的万能盒子，而是各自有明确用途和默认渲染行为——选错会导致语义混乱、SEO削弱或可访问性问题。
块级文本元素：天然独占一行，适合段落与结构划分
这类元素默认生成新行，浏览器会自动添加上下边距，适合组织内容主干：
-
p是段落的标准载体，里面可以放纯文本、strong、em、img等内联元素，但不能直接嵌套div或其他块级元素（HTML5 允许部分例外，但语义上不推荐） -
h1–h6表示标题层级，一个页面应有且仅有一个h1；搜索引擎和屏幕阅读器依赖这个结构，乱用h2替代h1会破坏文档大纲 -
blockquote表示引用他人内容，浏览器通常缩进并加左侧竖线；若只是视觉缩进，别用它，该用 CSS -
pre保留空格与换行，适合代码、诗歌等格式敏感文本；注意它默认是等宽字体，且不会自动折行
行内文本元素：不打断流式布局，专注语义强调
它们不产生换行，只影响所包裹的文字本身，常用于修饰而非结构：
-
strong表示强重要性（如警告、关键结论），屏幕阅读器会加重语气；不是“加粗样式开关”，b才是纯视觉加粗，语义弱 -
em表示强调语气（如反讽、重点读音），浏览器默认斜体，但本质是语音重音标记 -
mark标记高亮文本（如搜索关键词），默认黄色背景；不要用它替代span+ CSS 背景色，因为语义不同 -
code表示计算机代码片段，浏览器默认等宽字体；写<code>console.log()比用span更准确，也利于语法高亮工具识别 -
span是纯中性行内容器，无任何语义，只用于 CSS 或 JS 操作；滥用span包裹本可用strong或em的内容，等于放弃语义
容易被当成“文本容器”但其实不是的元素
有些元素看似能装文字，但设计初衷并非承载文本内容，强行使用会引发兼容性或可访问性隐患：
-
div是通用块容器，没有文本语义；把它当段落用（比如<div>这是一段话</div>）会让屏幕阅读器无法识别段落边界，也破坏 HTML 文档大纲 -
section、article、aside是内容分区元素，必须配合标题（h1–h6）才能形成有效语义结构；单独放一段文字进去，等于告诉辅助技术“这里有个没名字的章节” -
label只应在表单中关联input，直接塞一段说明文字进去，会导致点击无响应、ARIA 属性失效
真正决定文本是否“可读、可理解、可交互”的，从来不是能不能显示出来，而是用了哪个元素——浏览器、搜索引擎、屏幕阅读器都靠这些标签做判断。写 p 就老老实实写段落，该用 strong 就别图省事套 span 加 class，否则后期改语义成本远高于一开始选对标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
