正心全栈编程

文本与内容分组 ​

页面骨架搭好后，需要把学员信息组织成清楚的标题、段落和内容区域。本节只处理文字结构和内容分组，字号、颜色与布局留到 CSS 部分。

先观察下面两张页面截图，重点看标题层级、段落分隔和局部强调怎样帮助读者快速理解内容。

下面是这张截图对应的 HTML 预览，可以对照观察标题、段落、分隔线、上下标和特殊符号。

各科小常识

语文

三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著。是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初年近 100 年的历史风云。

数学

勾股定理直角三角形：a2+b2=c2。

英语

No pain , No gain.

化学

H2SO4是一种重要的工业原料，可用于制作肥料、洗涤剂等。

经济

版权符号：©
注册商标：®

下面的 HTML 预览保留了截图中的对应标注，右侧说明左侧内容使用的标签。

各科小常识

标题标签

语文

三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著。是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初年近 100 年的历史风云。

段落标签

数学

勾股定理直角三角形：a2+b2=c2。

文本标签（上标标签）

英语

No pain , No gain.

水平线标签

化学

H2SO4是一种重要的工业原料，可用于制作肥料、洗涤剂等。

文本标签（下标标签）

经济

版权符号：©
注册商标：®

特殊符号

组织文本层级 ​

使用标题 ​

HTML 提供 h1 到 h6 六级标题：

html
<h1>学员信息管理</h1>
<h2>学员基本信息</h2>
<h3>联系方式</h3>

预览效果：

学员信息管理

学员基本信息

联系方式

h 来自 heading，表示标题。数字表示层级，不是字号选择器。

一个页面通常只有一个最主要的 h1。子区域使用 h2，更小的内容继续使用 h3。不要为了字体大小跳过标题层级，字号和颜色在 CSS 中处理。

举例：

html
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>正心全栈编程 - 标题标签</title>
	</head>
	<body>
		<h1>这是一级标题</h1>
		<h2>这是二级标题</h2>
		<h3>这是三级标题</h3>
		<h4>这是四级标题</h4>
		<h5>这是五级标题</h5>
		<h6>这是六级标题</h6>
	</body>
</html>

浏览器预览效果如下图所示。

下面是对应的 HTML 预览，展示六级标题的默认字号差异。

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

从预览图可以看出，浏览器默认样式下，h1 字号最大，h6 字号最小。标题层级应根据内容结构选择，不需要把六级标题全部用上。

分段与换行 ​

普通说明文字使用 p：

html
<p>本页面用于登记新学员信息。</p>
<p>带星号的字段为必填项。</p>

预览效果：

本页面用于登记新学员信息。

带星号的字段为必填项。

一个完整意思使用一个段落。同一段中确实需要换行时使用 br：

html
<p>
  上课地址：长沙市岳麓区<br />
  联系电话：13800000000
</p>

预览效果：

上课地址：长沙市岳麓区
联系电话：13800000000

不要使用连续多个 br 制造间距。段落和区域间距由 CSS 负责。

内容主题发生明显分隔时，可以使用 hr：

html
<p>以上是学员基本信息。</p>
<hr />
<p>下面开始填写课程信息。</p>

预览效果：

以上是学员基本信息。

下面开始填写课程信息。

举例：

html
<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>段落标签</title>
	</head>
	<body>
		<h3>爱莲说</h3>
		<p>
			水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
		</p>
		<p>
			予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？
			牡丹之爱，宜乎众矣。
		</p>
	</body>
</html>

浏览器预览效果如下图所示。

爱莲说

水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。

予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。

从上面的预览效果可以看出，段落标签会自动换行，并且段落与段落之间有一定的间距。

如果想要改变文字的颜色和大小，需要用 CSS 设置文字的颜色和大小。在后面的内容里我们会进行学习。

强调关键信息 ​

常用的语义文本元素：

元素用途示例
strong表示重要内容必填提醒
em表示语气强调特别说明
small表示补充说明字段提示
del表示已经删除的内容旧课程价格
ins表示新增内容新增课程说明
code表示代码或字段名class_name
sup上标标签
sub下标标签
html
<p><strong>注意：</strong>手机号不能与已有学员重复。</p>
<p><em>特别提醒：</em>请填写可以接收通知的手机号。</p>
<p>接口字段使用 <code>class_name</code>，不要写成 <code>className</code>。</p>
<p><small>保存前请再次核对信息。</small></p>

预览效果：

注意：手机号不能与已有学员重复。

特别提醒：请填写可以接收通知的手机号。

接口字段使用 class_name，不要写成 className。

保存前请再次核对信息。

strong 和 em 不只是加粗、倾斜，它们表达内容含义。视觉样式仍可在 CSS 中调整。

strong 表示内容本身很重要，em 表示说话时需要强调的语气或词语。两者都不应该只为了改变文字外观而使用。

举例

html
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>粗体标签</title>
</head>
<body>

<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>

<p>新鲜的新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p><strong>现在仅售：￥4.00/kg</strong></p>
<p><em>限时优惠，报名前请先确认开课时间。</em></p>

<p><u>正心全栈编程</u>是一个做编程教学的自媒体。</p>

</body>
</html>

预览效果：

(a+b)2=a2+b2+2ab

新鲜的新西兰奇异果

原价:￥6.50/kg

现在仅售：￥4.00/kg

限时优惠，报名前请先确认开课时间。

正心全栈编程是一个做编程教学的自媒体。

对页面内容分组 ​

使用 div 和 span ​

div 用于分组一块内容，span 用于标记一小段行内文字。

html
<div class="student-summary">
  <h2>当前统计</h2>
  <p>学员总数：<span class="student-count">12</span></p>
  <p>停用人数：<span class="disabled-count">2</span></p>
</div>

预览效果：

当前统计

学员总数：12

停用人数：2

这里的 div 包含一个完整统计区域，span 只包住需要单独处理的数字。

能使用 header、main、section 等语义元素时，后面会优先使用语义元素。div 适合没有更合适语义的通用分组。

观察默认排列方式 ​

浏览器默认情况下：

  • h1、p、div 通常各占一行。
  • strong、em、span 通常跟随文字排列。
html
<div>第一块内容</div>
<div>第二块内容</div>

<span>正常</span>
<span>Python 1 班</span>

预览效果：

第一块内容
第二块内容
正常Python 1 班

这里只观察默认表现。元素最终怎样排列由 CSS 的 display、Flex 等规则决定，正式内容放在 p02。

显示 HTML 保留字符 ​

HTML 使用 < 和 > 表示标签。如果需要显示这些字符本身，应使用字符实体：

要显示的字符写法
<&lt;
>&gt;
&&amp;
不换行空格&nbsp;
html
<p>HTML 标签示例：&lt;input name=&quot;name&quot; /&gt;</p>
<p>课程方向：Python &amp; FastAPI</p>

预览效果：

HTML 标签示例：<input name="name" />

课程方向：Python & FastAPI

&nbsp; 表示不允许换行的空格，不用于中文首行缩进。首行缩进应在 CSS 中使用 text-indent。

完成学员信息说明 ​

html
<main>
  <h1>学员信息登记</h1>

  <div class="notice">
    <p><strong>填写说明：</strong>请使用学员本人信息。</p>
    <p><small>姓名、班级和手机号为必填项。</small></p>
  </div>

  <hr />

  <section>
    <h2>课程信息</h2>
    <p>当前方向：<span>FastAPI Web 全栈</span></p>
    <p>接口字段示例：<code>class_name</code></p>
  </section>
</main>

预览效果：

学员信息登记

填写说明：请使用学员本人信息。

姓名、班级和手机号为必填项。

课程信息

当前方向：FastAPI Web 全栈

接口字段示例：class_name

运行后先观察内容层级，不需要调整颜色和间距。

小结 ​

  1. 标题标签表达内容层级，不负责最终字号。
  2. 段落使用 p，真正的段内换行使用 br。
  3. div 负责通用区域分组，span 标记行内小片段。
  4. 块级和行内只是当前默认表现，正式布局交给 CSS。
  5. 字符实体用于显示 HTML 保留字符，不用于页面排版。