2.1 常用文本标签

文本标签主要用于设置网页中所有有关文字方面的内容，具体包括段落、标题字、换行、强调以及特殊字符等方面的标签。

2.1.1 段落与换行标签

段落就是一段格式上统一的文本。在Dreamweaver设计视图中按Enter键后，将自动生成一个段落。在HTML中，创建段落需要使用<p>标签。

基本语法：

语法说明：段落从<p>开始创建，到</p>结束。使用<p>和</p>创建的段落分别与上下文有一空行的间隔，这是由段落的默认样式决定的。默认情况下，段落有16px的上外边距和下外边距。可以通过后面将学习的CSS的margin：0样式代码来重置默认外边距为0。

默认情况下，段落相对于其父窗口居左对齐。修改段落水平对齐方式，有两种方法：一种是使用标签的align属性；另一种是使用CSS。建议使用CSS方式来修改对齐方式。

设置段落水平对齐方式的语法如下：

语法说明：对齐方式可分别取left、center和right 3种值，分别表示居左、居中和居右对齐。默认情况下，段落居左对齐，当段落是左对齐时，对齐方式可以省略不设置。

段落之间是隔行换行的，文字的行间距比较大，当希望换行后文字显示比较紧凑时，可以使用标签<br>来换行。<br>是一个单标签，在XHTML中直接在<br>中加一个空格和反斜线表示段落结束。

基本语法：

语法说明：在HTML5中，可以直接写成<br>。一个换行使用一个<br>，多个换行可以连续使用多个<br>，连续使用两个<br>将产生一个空行。

【示例2-1】段落标签和换行标签的使用。

上述代码在IE11浏览器中的运行结果如图2-1所示。

从图2-1中可以看出，设置为段落的第二行文本与第一行和第三行之间间隔一行空行。而换行只是将<br>后面的文本内容在下一行显示，与换行前的文本之间不产生空行。

2.1.2 标题字标签

标题字就是以某几种固定的字号显示的文字，一般用于强调段落要表现的内容或作为文章的标题，默认具有加粗显示并与下文产生一空行的间隔特性，这是由标题字的默认样式决定的。此外，标题字还默认存在特定大小的上外边距和下外边距，而且不同级别标题字的默认外边距不相同，同一级别的标题字，不同浏览器默认的外边距也可能不相同。在实际应用中，为了提高浏览器的兼容性，通常会通过margin：0样式代码来重置标题字的默认外边距。

标题字根据字号的大小分为6级，分别用标签h1～h6表示，字号的大小默认随数字增大而递减。标题字的字号可以使用CSS修改。

基本语法：

语法说明：hn中的n表示标题字级别，取值为1～6，具体设置如表2-1所示。

默认情况下，标题字相对其父窗口居左对齐。要修改水平对齐方式，和段落一样，可以使用标签的align属性和使用CSS两种方式。建议使用CSS方式设置对齐方式。

基本语法：

语法说明：hn中的n表示标题字级别。水平对齐方式可取left、center和right 3种值，分别表示居左、居中和居右对齐。

【示例2-2】设置标题字及其对齐方式。

上述代码在IE11浏览器中的运行结果如图2-2所示。

图2-2中的页面显示了6个级别的标题字，它们的字号从一级到六级依次减小。其中前三级标题字使用了默认对齐方式，即左对齐；后面三级标题字使用align属性显式设置对齐方式分别为居中、居右和居左。

2.1.3 <strong>标签

<strong>标签通过语气的加重来强调文本，是一个具有强调语义的标签，除了样式上要显示加粗效果外，还通过特别加重的语气来强调文本。使用<strong>标签修饰的文本会更容易吸引搜索引擎。另外，视力障碍人士使用阅读设备阅读网页时，<strong>标签内的文字会着重朗读。

基本语法：

语法说明：需要修饰的文本直接放到标签对之间即可。

【示例2-3】<strong>标签的使用。

上述代码创建了两段文本，最后一段文本会加粗显示。运行结果如图2-3所示。

“中500万奖”那是一件多么让人激动的事。但图2-3所示的第一段文本，仅仅平铺直叙地表达中奖这一件事，让浏览者无法体会到陈述者激动的心情；而第二段文本不仅从视觉效果上可以引起浏览者的注意，而且能通过陈述者加强的语气，体现其此刻激动的心情，使用阅读设备阅读该文本时，也会更大声地着重朗读。

2.1.4 <em>标签

<em>标签也是一个具有强调语义的标签，除了在样式上会显示倾斜效果外，还通过特别加重的语气来强调文本，因而能引起搜索引擎的侧重。<em>标签和<strong>标签一样，都可以强调文本，但语气上要比<strong>标签轻，即<strong>标签的强调程度更大一些。

基本语法：

语法说明：需要修饰的文本直接放到标签对之间即可。

【示例2-4】<em>标签的使用。

上述代码创建了两段文本，最后一段文本会倾斜显示。运行结果如图2-4所示。

奖项的大小对人情绪的影响是不一样的，“500万大奖”不管对谁都是一个大奖，所以为了突出奖项的大小，应特别强调奖金数量。但图2-4所示第一段文本中的奖金数量和其他文本的格式完全一样，没有突出数量；第二段文本中的数量不仅从视觉效果上引起浏览者的注意，而且使用<em>标签来加强语气，因而体现陈述者情绪的激动。

2.1.5 <span>标签

<span>标签是一个装饰性标签，通常用于设置文本的视觉差异，例如，某些关键字需要区别对待时，就可以使用<span></span>标签对进行装饰。

基本语法：

语法说明：需要修饰的文本直接放到标签对之间即可。

【示例2-5】使用span标签设置关键字颜色。

上述代码使用span标签包含“HTML、CSS和JS”，然后使用CSS样式代码设置这些文本的颜色为红色，使其更加醒目（注：<style><style>标签对之间的代码为CSS样式代码，用于设置span标签所选择的文本颜色样式）。运行结果如图2-5所示。

2.1.6 空格、特殊字符的输入及注释

根据文字输入方式的不同以及是否显示在页面中，可以将网页文字分成以下几类：普通文字、空格、特殊文字和注释语句。普通文字直接输入就可以了，但空格和特殊文字则需要采用一定的方法才能输入，而注释语句和普通文字不同的是，其作用是对代码进行描述说明，主要是给开发人员看的，不会显示在浏览器中。

1.空格的输入

通常情况下，在制作网页时，通过空格键输入的多个空格，在浏览器浏览时将只保留一个空格，其余空格都被自动截掉了。网页中的空格几乎都是不换行空格，为了在网页中增加空格，可使用以下语法插入空格。

语法说明：一个“&nbsp；”表示一个不换行空格，需要多个空格时，需要连续输入多个“&nbsp；”。在“&nbsp；”中，“nbsp”是Non-BreakingSpace的缩写形式，表示空格对应的实体名称，“&”和“；”用于表示引用字符实体的前缀和后缀符号，不能省略。

需要注意的是，默认情况下，“&nbsp；”在不同浏览器中显示的宽度是不一样的，例如，在IE浏览器中，4个“&nbsp；”等于一个汉字；而在Chrome中，有些是2个“&nbsp；”等于一个汉字，在一些较新的版本中，则是一个“&nbsp；”等于一个汉字。空格宽度不相等的原因主要是各个浏览器默认使用的请求和响应的编码不同。为此，在实际应用中，最好使用CSS样式来生成空格，比如段首的缩进空格，最好使用CSS样式属性text-indent来设置。

2.特殊文字的输入

有些字符在HTML中有特别的含义，比如小于号<表示HTML标签的开始；另外，还有一些字符无法通过键盘输入，这些字符对于网页来说都属于特殊字符。要在网页中显示这些特殊字符，可以使用输入空格的形式，即使用它们对应的字符实体。

基本语法：

语法说明：使用时，用特殊字符对应的实体名称。常用的特殊字符与对应的字符实体如表2-2所示。

3.注释语句

为了提高代码的可维护性和可读性，常常在源代码中添加注释语句，用于对代码进行说明。浏览器解析页面时会忽略注释，因而注释语句不会显示在浏览器中，但查看源代码时可以看到。

基本语法：

语法说明：注释内容可以是多条语句。

【示例2-6】空格、特殊字符的输入及注释的使用。

上述示例演示了普通文字、空格、特殊字符（<、>、&、注册符号、版权符号及双引号）及注释语句的输入方式。在IE11浏览器中的运行结果如图2-6所示。

从图2-6可以看出，两条注释语句的内容没有显示在浏览器窗口中。