在线编辑器如CodePen、JSFiddle更适合初学排版，因其默认UTF-8编码、自动补全标签、实时预览，避免乱码、闭合错误与路径问题；需规范使用标题层级、处理默认样式、导出前检查charset、lang及图片URL。
不需要装软件、不用配环境，用浏览器就能写 HTML 并实时看到效果——这是完全可行的，而且比本地保存再双击打开更直观、容错率更高。
为什么在线运行比本地双击 .html 文件更适合初学排版
本地用记事本写完保存为 index.html 再双击打开，看似简单，但实际容易卡在几个地方：中文乱码（漏写 <meta charset="UTF-8">）、标签没闭合导致整页渲染错乱、图片路径写错却看不到报错提示。而 CodePen、JSFiddle 这类在线编辑器默认启用 UTF-8、自动补全标签、右侧预览区实时刷新，相当于把“写代码”和“看效果”压在一个界面里，改一行字马上能看到行高、间距、标题层级是否合理。
排版调试的本质是观察“结构 → 渲染 → 视觉反馈”的闭环，这个闭环越短，学习效率越高。
- CodePen 默认使用
<!DOCTYPE html>+lang="en"，如需中文网页，手动把lang="en"改成lang="zh-CN" - JSFiddle 的
Frameworks & Extensions区域默认为空，别误点加载 jQuery——初学排版阶段纯 HTML+CSS 足够，加 JS 反而干扰对盒模型的理解 - 所有在线工具都不支持本地
file://图片路径（比如<img src="D:/myphoto.jpg">），必须用网络地址或 base64
用 <h1> 到 <p> 搭出有呼吸感的页面结构
新手常把所有文字都塞进 <p>，结果页面像一块密不透风的砖。真正影响阅读节奏的是标题层级与段落留白的配合。浏览器默认给 <h1>~<h6> 加了上下外边距（margin），<p> 也有默认 margin-top 和 margin-bottom，这是排版的天然杠杆。
立即学习“前端免费学习笔记（深入）”；
- 一个页面只用 1 个
<h1>，它应该是页面核心主题，不是网站名或 Logo 文字 -
<h2>用于一级内容区块标题（如“产品特性”“用户评价”），<h3>用于该区块下的子项（如“响应式设计”“离线可用”） - 如果两段
<p>之间空隙太大，不是删margin，而是检查是否误用了多个<h2>—— 标题层级混乱才是间隙失控的根源
图片、列表、链接这些“内容零件”怎么嵌入才不破坏排版流
排版不是把元素堆上去，而是让它们按文档流自然排列。<img> 默认是 inline 元素，旁边紧挨文字会错位；<ul> 和 <ol> 默认有缩进和上下间距；<a> 默认带下划线且颜色突兀——这些都不是 bug，是浏览器的默认样式表（user agent stylesheet）在起作用。
-
<img>后紧跟文字时，加vertical-align: middle或直接包一层<div>设为display: block，避免基线对齐导致的空白缝隙 - 无序列表
<ul>的圆点默认靠左顶格，若想整体右移，不要调padding-left，而应设margin-left: 20px—— 这样列表和前面的<p>仍保持垂直对齐 -
<a>去下划线后，建议加color: #007bff（蓝色）并保留text-decoration: none，否则用户无法识别哪段是可点击链接
导出代码前必须检查的三个硬性细节
在线工具方便，但最终要落地为真实网页时，有三个点本地环境不会宽容：字符编码、语言属性、图片资源可用性。它们不出现在视觉上，但一出问题就是整页崩坏或 SEO 失效。
- 确认
<head>里有且仅有 1 个<meta charset="UTF-8">，位置必须在<title>之前 -
<html>标签必须带lang属性，中文站写lang="zh-CN"，否则屏幕阅读器可能读错声调，百度搜索结果页也可能降权 - 所有
<img src="...">中的 URL 必须能被公网访问（不能是本地路径或内网地址），临时可用https://via.placeholder.com/300x200占位
排版的复杂点不在标签多寡，而在每个标签背后隐含的语义和默认行为。你改的不是像素，是浏览器对内容的理解方式。
