标签定义语义段落并自带上下间距，仅强制换行且无间距；到表示内容层级重要性，须逐级使用、不跳级，每页唯一。
<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 标签不是“加个换行”那么简单，它定义的是语义上的段落区块；<h1></h1> 到 <h6></h6> 不只是字号变化，而是告诉浏览器和搜索引擎“这段内容的层级重要性”。用错标签，页面可能看着差不多，但对屏幕阅读器、SEO 和后续 CSS 维护全是隐患。
用 <h1></h1>–<h6></h6> 搭建清晰的内容骨架
一个页面只该有一个 <h1></h1>，通常是文章标题或站点名；<h2></h2> 用于一级小节，<h3></h3> 是子小节，依此类推。跳级（比如 <h2></h2> 后直接写 <h4></h4>）会破坏结构逻辑，影响辅助技术识别。
- 错误写法：
<h2>引言</h2> <h4>背景介绍</h4>（缺<h3></h3>层级） - 正确写法：
<h2>引言</h2> <h3>背景介绍</h3> <h3>问题现状</h3> - 别用
align属性居中标题——它是过时的 HTML4 属性，现代写法统一用 CSS：text-align: center
段落、换行与分隔：别把 <br> 当 <p></p> 用
<p></p> 表示一个完整语义段落，浏览器默认给它上下 margin；<br> 只是强制换行，不产生新段落，也不带间距。滥用 <br> 堆出“段落”，会导致样式不可控、打印异常、无障碍支持差。
- 适合
<br>的场景：地址、诗歌、签名档等需保留原格式的连续短行 - 该用
<p></p>的场景：任何有独立意思的文字段（哪怕只有一句话） -
<hr>是视觉分隔符，不是“装饰线”——它代表主题切换，比如章节结束、作者信息前
强调类标签：语义优先，别只看样式
<strong></strong> 和 <em></em> 不等于 <b></b> 和 <i></i>。前者表达“内容重要性”和“语气强调”，后者只是“加粗”和“斜体”样式。搜索引擎、语音朗读工具会区别对待。
- 用
<strong></strong>标注关键结论、警告、操作指令（如“请立即保存”） - 用
<em></em>标注反语、重音、需要听者注意的词（如“我‘确实’没看到”） - 避免嵌套
<strong></strong>或<em></em>多层——语义上无意义，CSS 也难维护 -
<u></u>在 HTML5 中已恢复语义（表示非标准文本，如拼写错误、专有名词），不要用来做链接下划线——那是 CSS 的事
预格式化与引用：保持原始结构的两个关键标签
<pre class="brush:php;toolbar:false;"></pre> 会原样保留空格、缩进和换行，适合代码块、日志、ASCII 图；<blockquote></blockquote> 必须包裹一段完整引用，且最好配 cite 属性说明来源。它们都不是“让文字看起来整齐”的万能工具。
-
<pre class="brush:php;toolbar:false;"></pre>内容默认是等宽字体，若要改字体，必须用 CSS 覆盖font-family -
<blockquote></blockquote>不该用来缩进普通段落——那是margin-left或padding的职责 - 短引用用
<q></q>，它会自动添加引号（但不推荐依赖此行为，CSS 更可控）
最常被忽略的一点：所有这些标签的默认样式都可被 CSS 重置或覆盖，但它们的语义无法被 CSS 替代。排版“看着对”不等于结构“是对的”——尤其当页面要适配语音助手、打印机、搜索引擎或未来新设备时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
