一、学习目标
网页内容的排版包括文本格式化、段落格式化和整个页面的格式化，这是设计个网页的基础。文本格式化标记分为字体标记、文字修饰标记。字体标记和文字修饰标记包括对于字体样式的一些特殊修改。段落格式化标记分为段落标记、换行记、水平分隔线标记等。
通过对文本与段落格式化知识的学习，读者能够掌握页面内容的初步设计，理解并掌握 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>
<®×
</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属性可以有多个值，用逗号分隔。字体使用方式为从左向右依次选用。如果前面的字体不存在，则使用后一个字体。若都不存在,则默认使用“宋体” |
格式化文本与段落（上）就到这里，下级将更新段落与排版标记，也是格式化文本与段落的重点内容。
