HTML本身不负责自动排版美化，仅定义结构；美观依赖浏览器默认样式、CSS控制及工具链辅助，因浏览器会压缩多余空白符，<br>无语义且无间距，废弃属性被忽略，所有排版行为须通过CSS实现。
HTML本身不负责“自动排版美化”，它只定义结构；真正起作用的是浏览器默认样式 + CSS 控制 + 工具链辅助。靠写 <p> 或敲空格换行，得不到稳定美观的效果。
为什么直接敲回车或用 <br> 无法实现可靠排版
浏览器会忽略 HTML 源码中的多余空白符（包括换行、缩进、多个空格），所有连续空白字符被压缩为单个空格。这意味着：
-
<div>Hello\n\nWorld</div>渲染效果等同于<div>Hello World</div> -
<br>是强制换行标签，不是段落分隔符——它不提供语义、不带上下间距、无法响应式调整 - 用
align属性（如<p align="center">）已废弃，HTML5 不再支持，现代浏览器可能忽略或触发 quirks mode
用 CSS 控制文本流才是正解
所有可读性相关的排版行为（对齐、行高、缩进、间距、断行）必须通过 CSS 实现，且优先使用相对单位（em、rem、ch、无单位倍数）。
- 段落对齐：
text-align: justify（两端对齐）比left更适合长文，但需配合hyphens: auto防止单词撑破容器 - 首行缩进：
text-indent: 2em，注意不要和margin-left混用，后者影响整段位置 - 段落间距：
margin-bottom: 1.5rem比固定像素更适应字号变化；避免设margin-top，防止相邻段落外边距合并（collapsing margin） - 行高控制：
line-height: 1.6（无单位）是推荐值，它相对于当前字体大小计算，比line-height: 24px更健壮 - 禁止用户选中时破坏排版：
white-space: pre-wrap只在需要保留源码换行的极少数场景（如代码块、诗歌）才启用
用 Prettier 或编辑器格式化 HTML 源码结构
这是“代码层面”的自动排版，不影响渲染结果，但极大提升协作与维护效率。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- VS Code 安装
Prettier - Code formatter插件后，保存时自动缩进、闭合标签、换行对齐 - 关键配置项必须显式声明：在项目根目录加
.prettierrc，至少包含"htmlWhitespaceSensitivity": "css"（否则可能错误折行） - 避免用在线工具反复粘贴——它们常把
<img>错误转成<img />，在某些旧环境触发解析异常 - 如果团队混用不同编辑器，统一用
prettierCLI 配合lint-staged做提交前检查，比依赖个人设置更可靠
表格、列表、标题等特殊内容的排版陷阱
这些元素自带默认样式，但极易被忽略细节导致视觉断裂。
- 表格单元格垂直居中必须显式写：
vertical-align: middle，仅设text-align不生效 - 无序/有序列表默认有左侧缩进和顶部外边距，重置时建议用
margin: 0; padding-left: 1.5em而非全清零 -
<h1>到<h6>的默认margin-block在 Chrome/Firefox 中差异明显，应统一重置：h1, h2, h3 { margin-block: 0.8em 0.5em; } - 多级嵌套段落（如
<blockquote><p>）容易因继承导致行高叠加，建议用line-height: inherit或明确重设
最常被跳过的一步：没验证 text-rendering: optimizeLegibility 在 macOS 上对中文是否真有改善，以及是否引发 Firefox 下的字体回退问题——这类细节不测就上线，美化就变成“美而不稳”。
