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