当前位置：首页 > article >正文

Web前端开发——格式化文本与段落（上）

article 2026/1/23 11:15:29

一、学习目标

网页内容的排版包括文本格式化、段落格式化和整个页面的格式化，这是设计个网页的基础。文本格式化标记分为字体标记、文字修饰标记。字体标记和文字修饰标记包括对于字体样式的一些特殊修改。段落格式化标记分为段落标记、换行记、水平分隔线标记等。

通过对文本与段落格式化知识的学习，读者能够掌握页面内容的初步设计，理解并掌握 HTML 标题字标记、空格及特殊符号的使用；理解格式化标记中的文本修饰标记、计算机输出标记、引用和术语标记以及字体 font 标记的语法和使用；理解段落与排版标记的语法，学会编写简易的 Web 页面代码。

二、Web页面初步设计

Web页面设计需要遵循简洁、一致性、有好的对比度的设计原则。简洁是指以满足人们的实际需求为目标，要求简练，准确。一致性是指网站中的各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格保持一致。对比度在于强调、突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。

1.1 向Web页面中添加文字信息

在 HTML 文件中，主体内容被包含在<body></body >标记之间，并且 body 标记有很多自身的属性，例如设置页面背景、设置页面边界等。

1.1.1 基本语法

<body>向这里添加内容</body>

1.1.2 语法说明

body标记定义文档的主体。

body标记包含文档的所有内容（例如文本、超链接、图像、表格和列表等）。

一个简单的HTML文档必须包含最基本的必备的标记。

1.2 标题字标记

标题字标记由h1~h6共6种标记组成。标记中的字母h是英语Heading的简称。作为标题字，h1 标记定义最大的标题字，h6标记定义最小的标题字。h1 标记到 h6标记属于块级标记，它们必须在HTML中首尾成对出现。浏览器会自动地在标题的前后添加空行。

1.2.1 基本语法

<h1 align="left|centerlright|justify">1号标题文字</h1>
<h2 align="left|centerlrightljustify">2号标题文字</h2>
<h3 align="left|centerlright|justify">3号标题文字</h3>
<h4 aliqn="left|center right|justify">4号标题文字</h4>
<h5 align="left|centerlright|justify">5号标题文字</h5>
<h6 align="left|centerlright|justify">6号标题文字</h6>

1.2.2 语法说明

h后面的数字越小，标题字越大。标题字标记的align属性用来定义标题字的对齐方式，对齐方式有4种，分别是left、center、right、jstify。但是一般推荐设计者使用CSS样式表来定义对齐方式。
标题文字的大小由它们的重要性决定,等级越高的标题字号越大。在设计时要对各级标题有所规划。

1.3 添加空格与特殊符号

在HTML文档中，添加空格的方式与在其他文档中添加空格的方式不同，在网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。

1.3.1 基本语法

<body>&nbsp;&lt;&reg;&times;
</body>

1.3.2 语法说明

在网页中添加空格使用“ ”，其中“nbsp”是指Non Breaking Space，空格数量与“ ”的个数相同。

在网页中插人特殊字符与插入空格符号的方式相同。特殊字符对应的符号代码如下表。

显示结果	说明	符号代码
	显示一个空格
<	小于	$lt;
>	大于	>
&	&符号	&
"	双引号	"
©	版权	®
×	称号	×
÷	除号	÷

对于HTML文档中特殊字符对应的代码，浏览器解释后会显示对应的特殊符号。

三、格式化文本标记

HTML中提供了很多格式化文本的标记，例如文字加斜、斜体、下画线、底纹、上/下标等。

2.1 文本修饰标记

对于文本修饰标记，各类浏览器均支持，在各类网页开发工具中仍然有这类标记。常见的文本修饰标记如下表。

标记	说明
<b>软件工程专业! </b>	定义粗体
<i>软件工程专业! </i>	定义斜体
<u>软件工程专业! </u>	定义下画线
<del>软件工程专业! </del>	定义删除线
<sup>软件工程专业! </sup>	定义上标
<sub>软件工程专业! </sub>	定义下标
<strong>软件工程专业! </strong>	定义着重文字，与<b></b>效果相同
<em>软件工程专业! </em>	定义加重语气，与<i></i>效果相同
<small>软件工程专业! </small>	变小字号
<big>软件工程专业! </big>	变大字号

2.2 字体标记

在不指定任何样式的情况下，浏览器会把字体显示为16px、黑色、宋体，因此在设计网页时要根据需要更改不同段落的字体。在HTML5中可以使用CSS中的字体属性替代。

字体标记(font)规定文本的字体系列、字体尺寸、字体颜色，所有浏览器均支持font标记。

2.2.1 基本语法

<font face = "" size ="" color ="" >…</font>

2.2.2 属性说明

字体标记(font)的属性、取值及说明如下表。

属性	取值	说明
size	+1~+7、1~7、-1~-7	数字越大字号越大，负数字越大字号越小。“＋”表示号比原来的字号大一些，“-”表示字号比原来的字号一些
color	rgb(r,g, b)、rgb(r%,g%,b%)#rrggbb或#rgbcolorname	规定文本的颜色。可以使用rgb()函数、十六进制数、颜色的英文名称来表达
face	字体1，字体2，…，字体n	face属性可以有多个值，用逗号分隔。字体使用方式为从左向右依次选用。如果前面的字体不存在，则使用后一个字体。若都不存在,则默认使用“宋体”

格式化文本与段落（上）就到这里，下级将更新段落与排版标记，也是格式化文本与段落的重点内容。