上期把 HTML 的基本骨架搭完之后私信里收到的学员问题集中在两类一类是“为什么我在代码里敲了一大堆回车网页上就是不换行”另一类是“我嫌 h1 的字太大能不能换 h2 来用”。你发现问题没有这两个问题其实指向同一个误区——把标题和段落当成了排版工具。这一期大白话前端我们就专门把 h1 到 h6 和 p 标签拿出来逐层讲透。标题管的是页面结构的“辈分”和顺序段落管的是内容怎么自然地分段它们都不是用来调间距、调字号的。哪怕你目前只会写html和body看完这一期再去打开任何一个新闻网站或企业官网你都能一眼看懂它的信息架构是怎么搭的。1. h1到h6——标题是为文档“排辈分”不是调字号1.1 先忘掉字号记住“大纲”两个字标题标签一共有六个等级从 h1 到 h6。我看很多零基础同学第一次接触它们时脑子里只有一个印象“哦h1 字最大h6 字最小。”这个印象本身没错但害人不浅。因为一旦你把注意力全放在字号上就会自然地做出很多错误操作比如“我想让这段字小一点所以用 h4 来写”这就是把标题当字体工具用的典型症状。如果你把 h1 到 h6 想象成一份图书的章节目录事情就清楚多了h1 是书名h2 是章节名h3 是章节里的小节名h4 再往下细分。浏览器默认把这些标签渲染成不同字号仅仅是为了让视觉上体现这种等级关系它只是浏览器顺手做的默认样式。换句话说标题标签和字号是两件事标签负责告诉浏览器“这里是这份文档的一级标题”字号只是浏览器收到指令之后额外渲染出来的外观。在实际项目中我们只需要记住一句话结构是标题的本职样式只是附赠。这个思维一旦建立起来后面很多坑都不会踩。1.2 h1到h6怎么选以及为什么很少用到h5、h6既然标题是文档大纲那选“h 几”就要看内容在整份页面里的位置。拿一个典型的博客文章页来举例页面的品牌名称和 logo 区域一般会有 h1代表“这就是本页的主题”如果文章标题才是这个页面的主角也可以直接把文章大标题做成 h1而文章内部的小节可以用 h2小节下面再分小点用 h3。这个划分没有绝对的死板公式但大体遵循“由大到小、逐级递减”的原则。不过有一个细节可能出乎很多新手的意料实际开发中 h5、h6 极少出现。原因很简单普通网页的信息深度到 h4 基本就到底了。如果哪天你的页面需要从 h4 再往下分五层、六层那大概率不是标题等级不够而是页面的信息架构出了问题该拆页面而不是加层数。所以我的建议是写页面时把主要精力放在 h1 到 h4 上层级关系心里有个“总—分—再分”的谱别为了视觉上的字号差异把 h5、h6 硬拉上来当普通文本用。标签在这个页面里扮演的角色浏览器默认渲染大小h1页面主标题整个页面主题的概括最大约 2 倍正文h2大区块标题对应页面的一级分区较大h3区块内的小节标题中等h4小节里的再细分条目接近正文h5 / h6很少用到信息深度过深时才出现小于正文或接近正文1.3 一个页面只有一个h1这个规矩尽量别破坏前端圈里流传着一句不成文的规矩“一个页面通常只有一个 h1。”原因不玄乎你可以把 h1 理解成页面整体内容的一句话概括。搜索引擎在抓取时会优先读取它判断这页讲的是啥读屏软件在朗读时也会把它当作页面内容的起点。多个 h1 相当于一篇文章出现好几个主标题读者光看目录就分不清主角是谁。这个我也在真实项目里验证过。之前接手一个营销落地页原开发者在三个板块各写了一个 h1用站长工具去检测信息架构明显不如后来把主卖点做成唯一 h1 的时候。虽然单一 h1 并不是决定排名的银弹但从内容组织角度它确实逼着你把页面主题想清楚——一个页面只有一个主目标这本身对产品思路也是好事。从这个角度再延伸一下如果你发现自己正在为“到底哪个板块该做 h1”而纠结十有八九是页面真的承载了太多主题。这时候更要回到底层逻辑把主目标挑出来其余全部降级哪怕视觉上那块区域很大。2. p标签与网页换行背后的事2.1 HTML里的回车键是摆设现在来聊段落。很多新手第一次写 HTML 时经常会干这么一件事在源代码里用回车把一段文字分成好几行或者打一排空格来做缩进保存刷新后却发现浏览器完全“不听话”该连排还是连排。这不是浏览器抽风而是 HTML 对空白有一套专门的折叠规则。在默认情况下一个甚至多个连续的空格、回车、制表符在渲染时都会被浏览器合并成一个空格。换句话说你在源代码里精心敲的回车在浏览器眼里和“一个空格”没有本质区别。于是就有了“回车键在 HTML 里是摆设”这个说法。那源代码里的换行还有没有意义有。它是给写代码的人看的。保持良好的源代码换行和缩进能让维护者快速看清标签嵌套关系。但必须明确源代码的排版和页面最终渲染的排版是两套系统页面怎么换行、怎么留白几乎全部要依靠标签和 CSS 来决定。2.2 p标签才是真正的段落自带上下留白段落标签 p 在这里登场。它的全称是 paragraph语义非常明确“这是一段描述性的文本。”浏览器在遇见 p 标签时会自动在段落前后添加一定量的垂直间距也就是 CSS 习惯上说的 margin从而让相邻段落分得开、读起来有节奏感。用 p 标签换行和用回车换行的最大区别在于回车是“视觉上的换行”p 是“结构上的分段”。视觉上的换行不携带任何含义而结构上的分段告诉浏览器和访问者这两块文字之间有逻辑上的间隔。实际操作中一个段落里应放连续的文本比如一句话加上后面的解释另起一段表示另一个意思。页面上段落之间的间距不需要你去敲多个br只需要用 CSS 调整 p 的 margin 就能全局控制。这也是我每次给新人评审代码时一定会强调的p 标签的数量要能反映文章的结构而不是反映你敲空行的爱好。p这是第一段文字浏览器会在段落前后自动加上间距。/p p这是第二段文字和上一段之间天然有一行空隙。/p这样写结构是结构间距是间距之后想统一调紧凑一点一段 CSS 就能搞定完全不用改 HTML。2.3 该用br的地方我从不含糊乱用才会翻车br 标签是 HTML 里少见的空标签之一写法为br作用就是强制换行。问题在于不少人把它当成了“分段神器”一旦觉得行不好看就随手插一个结果整页密密麻麻全是br语义上却什么都没表达。br 真正合理的使用场景是那些“换行但不断段落”的地方。比如地址块、诗歌、歌词、出版社信息等这些内容在排版上必须换行但在语义上仍属于同一个连续信息块不需要段落间距。比如地址写三行第一行街道、第二行城市、第三行邮编用 br 换行就很合适如果改用三个 p每行之间会出现明显的空距反而显得怪异。看清这两个标签的分工就会明白p 管逻辑分段br 管行内换行。绝大多数“我想在这里空一行”的需求正确的处理方法是把内容拆成两个 p或借助 CSS 设置 margin。br 永远只是局部调味品不是布局主力。全局到处是 br 的页面后期维护基本等于灾难。3. 三个高频翻车现场嵌套、跳级、拼视觉3.1 p标签里塞div浏览器会动手改你的代码新手写标签时最常犯的毛病是把所有标签当成“能装东西的箱子”随便套。典型错误在 p 里放一个 div或者在 p 里再套一层 p。这其实是无效的 HTML。我来说说浏览器会怎么处理HTML 解析器在读到p里出现div这种流式内容时不会直接报错说“你写错了”它会在遇到 div 之前先把 p“悄悄闭合”然后把 div 当作 p 外面的兄弟节点再额外闭合一个空的 p。也就是说你写了一堆代码浏览器会自行重新解释成另一种结构。表面上页面似乎没太崩但如果你用开发者工具去看最终的 DOM会发现标签结构已经被“动过手脚”和你源码里写的已经不是一回事了。p 标签的内容模型在设计时只允许包含短语内容或者说“行内级别”的内容比如文字、a 链接、span、img 图片、em、strong 这类而 div、p、ul、table 这类流式内容都不能放进 p 里。!-- 错误示范 -- p 我在段落里放了一个 div div这是一个 div/div /p !-- 正确做法 -- p我在段落里放了一个 span span这是一个 span/span/p记住这个规则就不会被浏览器那种“看似还行”的渲染效果迷惑。结构不对的代码纵使页面暂时没崩也迟早会在某个浏览器版本更迭时给你表演现场翻车。3.2 标题跳级大纲断层读起来像内容“断了层”第二个高频翻车点是标题层级跳来跳去。比如页面主标题 h1下面直接写 h3再下面又回到 h2。很多人为什么会这样多半是因为写的时候图省事或者从别处复制的样式带了标题标签于是贴过来就是错误的层级。标题跳级的坏处要结合“大纲”来理解。想象一下一本目录从第一章直接跳到第三节再从第三节跳回第二章读者能不晕吗搜索引擎也会对页面内容结构理解混乱视障用户使用读屏时更是会被这种断层困扰。我自己在维护老项目时就遇过这类历史债务某个模块逻辑上属于二级标题但代码里用的是 h4原因是当时开发的人觉得 h4 的字号正合适。后来想统一页面大纲只能一个文件一个文件地改标签。所以现在接任何前端改造我都会用一种“文档大纲”的眼光先给页面做体检见到跳级就当场指出来结构问题必须在 HTML 层解决字号问题请在 CSS 层解决两边别混淆。3.3 用标题和段落拼版式后患无穷第三个坑不是针对某一个具体标签的写法而是整体思路的问题。我发现很多新人在还不熟悉 HTML 和 CSS 分工时会本能地选择最“省事”的做法想空一行就敲一堆 br想让字变大就改用标题标签想缩进就塞一堆不换行的空格。说实话这些做法在当前页面里看起来好像也能达到效果但后患无穷。第一一旦你后续想调整字体大小你根本分不清哪些标题是结构需要的哪些是凑版式用的第二样式主题更新时那些被塞进结构里的 br 和空格会导致间距忽大忽小第三语义混乱会让真实用户和辅助技术都没有一致的体验。改过一次这样的页面你就很难再回到“随手凑合”的写码习惯里。正确姿势是记住两句话内容的结构归属用 HTML视觉的样式归属用 CSS。标题的字号可以用 CSS 的 font-size 覆盖段落的间距可以用 CSS 的 margin 调整需要更大留白就加 padding 或 margin而不是疯狂敲回车。把这个分工刻进习惯里你写出来的代码才会让自己的页面可维护、浏览器可读、用户可感知。4. 搜索引擎和读屏软件都在偷看你的标题4.1 爬虫是先看标题再读内容聊完实操中的坑再说说标题和段落为什么并不仅仅是“给页面排版用”的。搜索引擎的爬虫抓取一个网页时并不是像人一样从头读一遍再总结它会优先解析文档的结构尤其是 h1 到 h6。这些标签对爬虫来说相当于一份页面的阅读地图h1 告诉它这一页的主题h2 是主题下的大分支h3 是更细的切分。这也就是为什么很多做前端或做 SEO 的人会强调标题里最好带着这个板块的关键词。比如一篇介绍“如何给小程序动态设置标题”的文章h1 写“小程序动态设置标题的完整思路”就比写“开发笔记”要清晰得多。但特别注意这里说的是自然语境里的表达不是把关键词硬堆进标题。堆标题关键词是过去的做法现在搜索引擎反而会识别并处理这类行为得不偿失。另外段落 p 的文本是爬虫抽取正文内容的主要来源。段落结构清楚、文字表达自然的页面更便于搜索引擎建立内容质量判断。这就非常现实地说明了一件事结构良好不是为了程序员看着爽而是搜索引擎和用户都在消费同一份文档大纲。4.2 视障用户靠标题导航读完整篇页面你可能听说过“屏幕阅读器”这个词。视障用户打开网页并不会像我们一样用鼠标浏览而是通过读屏软件比如 Windows 下的 NVDA、macOS 的 VoiceOver把一个一个的文字朗读出来。读完整页是很累的所以读屏软件都提供“标题导航”功能用户按快捷键呼出页面的标题列表通过上下键选择要去的章节直接跳转。这意味着什么如果页面根本没有标题或者标题结构一塌糊涂视障用户就只能从头到尾逐字听完或者靠猜。尤其在一些文档类、资讯类页面上没有清晰的 h 结构几乎等于把盲人用户挡在门外。这是无障碍a11y的基础要求不是“加分项”。我开发的时候已经把标题结构和无障碍绑定在一起想了每次写完一个页面会模拟自己只听标题列表看看这个列表能不能准确描述页面的信息层级。如果列表读出来像“二级标题价格介绍一级标题产品名称二级标题产品参数”这种顺序颠倒的组合就说明结构需要修正。这件事听起来是“给别人方便”实际上做久了你会发现它也是帮你把页面逻辑理顺的过程。4.3 用开发者工具两分钟检查页面大纲讲了这么多怎么方便地验证自己或别人的页面到底有没有结构问题这里分享一个我在项目里的日常检查方法不需要装复杂工具浏览器自带的开发者工具就能做初步体检。打开目标网页按下 F12 打开 DevTools切到 Elements 面板然后直接按 CtrlFMac 上是 CmdF在搜索框里输入“h1”。这时候页面 DOM 里所有的 h1 都会高亮出来看一眼数量正常情况下只有一两个。接着把搜索词换成 h2、h3逐级看一遍你会发现页面内容的分块方式很像一个大纲列表哪些板块是平级哪些板块是包含关系很快就有了数。如果项目里用了 React、Vue 这类框架组件树可能比普通 HTML 更深但标题标签依然会原样出现在最终的 DOM 上所以这个方法依然适用。我每次跨项目代码评审基本都会用这个动作开场不出意外多数问题都能当场暴露要么 h1 出现多个要么层级倒挂。找到问题后再回到源码里修最多不过五分钟。按着这个思路打开你手头任意一个网站先别急着看花里胡哨的样式专门把它的标题等级像剥洋葱一样剥一层你会很快看懂那个网页的信息架构。等你看得多了再去写自己的页面就会自然地把目录树感放进代码里这也是我愿意反复强调标题与段落的原因所在。