美观靠语义准确与CSS控制，而非标签堆砌；需手动设置line-height、margin-bottom、text-indent等样式，并正确使用<p>、<strong>、<em>等语义标签。
直接用 <p>、<strong> 这类标签本身不会“美观”，美观靠的是语义准确 + CSS 控制，不是标签堆砌。
为什么 <p> 套文字后还是密不透风？
浏览器给 <p> 的默认 margin 是有的，但值很小（通常 1em），且没设 line-height 和 text-indent。中文阅读需要呼吸感，光靠默认样式远远不够。
- 必须手动加
line-height: 1.6（无单位）——比写line-height: 24px更稳，缩放时不会断裂 -
margin-bottom: 1.5em比margin: 1em更合理：段落只需下边距，上边距由前一段的margin-bottom提供，避免双倍间距 - 中文首行缩进用
text-indent: 2em，别用空格或 - 禁用
<p align="center">：这个属性已废弃，会触发怪异模式，改用text-align: center配合 CSS 类
<strong> 和 <em> 别当样式开关用
它们是语义标签，不是“加粗”和“倾斜”的快捷键。搜索引擎、读屏软件靠这个判断重点层级。
-
<strong>表示内容重要性高，比如警告、核心结论；连续多个<strong>会稀释语义，反而降低可读性 -
<em>表示语气强调，比如反问、转折：“你真的确定不备份吗？”——斜体只是表现，不是目的 - 别用
<b>或<i>替代，除非纯装饰性需求（如品牌名中某字母要加粗但无语义） - CSS 中可统一控制样式：
strong { font-weight: 700; }，但别删掉语义层
换行用 <br> 还是 <p>？看场景
<br> 是强制换行，不是段落分隔符。滥用会导致结构混乱、SEO 权重分散、移动端断点错乱。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 地址、诗行、签名档这类**逻辑上属于同一段、但需人工折行**的内容，才用
<br> - 两个意思独立的句子，哪怕只有一行，也该用
<p>包裹——这是语义边界，不是视觉边界 - 千万别写
<p>第一段</p><br><br><p>第二段</p>：中间两个<br>完全多余，还破坏段落间距节奏 - 从表单、评论框等输入源拿到带
\n的文本，直接塞进<p>会塌成一行；此时该用<div style="white-space: pre-wrap">，不是<p>
容易被忽略的细节：颜色、对比度与继承污染
很多排版在开发环境看着正常，上线后文字发灰、段落粘连、缩进失效，问题往往出在 CSS 继承链上。
- 正文别用纯黑
#000：推荐#333或#2d2d2d，对眼睛更友好；背景非纯白时更要调低对比度 -
<strong>在深色背景里可能变太亮，建议用color: inherit让它跟随父级文字色，再单独加粗 - 别在
<p>上写style="color:red"：一旦整页换主题色，就得挨个改；统一用类名，比如<p class="warning"> - 嵌套结构里，
em在strong里再嵌套，字体权重和倾斜会叠加，可能超出预期——先看设计稿是否真需要三层强调
真正决定美观的，从来不是用了多少标签，而是每个标签是否承担了它该承担的语义角色，以及 CSS 是否干净、克制、可复用。排版崩掉，八成不是标签写错了，而是样式覆盖了、继承漏了、或者把结构和表现混在了一起。
