掌握html文字排版关键在于理解结构语义与浏览器默认行为：、–、/自带语义和默认样式，css仅需三行即可优化可读性与兼容性。
掌握HTML文字排版，关键不是背标签，而是理解「结构语义」和「默认行为」——浏览器对 <p></p>、<h1></h1>、<em></em> 等标签自带的渲染规则，比你手动加CSS更优先生效。
先搞懂浏览器怎么“自动排版”
HTML不是所见即所得编辑器，它不认回车、空格、缩进。你敲十次回车，浏览器照样连成一行；连续写两个 <p></p>，中间会自动空出约 1em 距离——这不是CSS写的，是用户代理样式表（UA stylesheet）默认给的。
-
<p></p>是块级元素，自带上下外边距，不设margin也会有空隙 -
<h1></h1>到<h6></h6>不仅变大变粗，还自带前后空白，且<h1></h1>默认比<h2></h2>空得更多 -
<strong></strong>和<em></em>默认渲染为加粗/斜体，但它们的核心价值是语义：告诉屏幕阅读器“这里强调”，而非“这里要加粗” - 用
<br>强行换行是权宜之计，它不表示新段落，也不带语义，别用来分隔逻辑内容
从三个标签起步，覆盖90%日常需求
不用一上来就学全部，先吃透这三个，就能写出结构清晰、可读性强的正文：
-
<p></p>：包裹完整语义段落，不是“换行工具”。一段话讲完一个意思，就用一个<p></p> -
<h2></h2>（或<h3></h3>）：文章小标题。别只用<h1></h1>，它应全页唯一，代表整页主题；子标题用<h2></h2>，小节用<h3></h3>，保持层级不跳 -
<em></em>或<strong></strong>：替代<i></i>和<b></b>。前者表达语气强调（如“请务必保存”），后者表达强重要性（如“密码<strong></strong>不可泄露”）
CSS只需加三行，立刻告别排版混乱
纯HTML排版看着“差不多”，但实际在高DPI屏、系统字体放大、不同浏览器下容易错位。加这几行CSS，能立刻稳住基础观感：
body {
line-height: 1.6;
}
p {
margin: 1.2rem 0;
text-indent: 2em;
}
p:first-child, p:last-child {
margin-top: 0;
margin-bottom: 0;
}
-
line-height: 1.6解决文字挤在一起的问题，比调font-size更直接有效 -
text-indent: 2em是中文首行缩进标准值，用em不用px，否则在 Windows 大字体模式或 macOS 缩放下会失效 -
:first-child/:last-child去掉首末段上下空隙，避免页面顶部/底部多出一截空白 - 别碰
padding-left模拟缩进——它会让整段左移，破坏段落与左右容器的对齐基准
最容易被忽略的兼容性陷阱
很多排版问题不是代码写错了，而是没意识到浏览器在“悄悄修复”你的错误结构：
- 在
<p></p>里塞<div> 或另一个 <code><p></p>，浏览器会自动拆开，变成<p></p> <div></div> <p></p>，多出空段落，样式全乱 - 用
align="center"这类HTML属性控制对齐，虽然能用，但已被废弃，现代项目中必须用text-align: center替代 -
<hr>是分隔线，不是段落结束标记；它不产生语义，也不影响后续段落的margin计算 - 中文段落之间要不要空行？视觉上需要，但靠的是
p { margin-bottom: 1.2rem }，不是靠多写一个空<p></p>
