Web前端开发与应用教程(HTML5+CSS3+JavaScript)
上QQ阅读APP看书,第一时间看更新

2.2 文本控制标签

设计Web页面时要组织好页面的基本元素,同时再配合一些特效,构成一个绚丽多彩的页面。页面的组成对象包括文本、图片、表单、超链接以及多媒体等。内容是网站的灵魂,而文本则是构成网站灵魂的物质基础。文本与图片在网站上的运用是最广泛的,一个内容充实的网站必然会用大量的文本与图片,然后把超级链接应用到文本和图片上,才能使这些文本和图片“活”起来。本节将介绍如何在页面中添加文本信息。

2.2.1 标题段落标签

标题段落在页面文字中起到格式化文本的作用,可以使得文本信息结构更清晰,读者可以一目了然。

1.标题标签<hi>

<hi>标签用于定义段落标题的大小级数。其语法格式如下:

<hi>标题</hi>

其中i表示标题级数,取值范围为1到6之间的正整数。

最大的标题级数是<h1>,最小的标题级数是<h6>。可使用<hi>标签的align属性来控制文字的对齐方式,属性值可以是left(左对齐)、center(居中对齐)、right(右对齐)和justify(两端对齐,对行进行伸展,这样每行都可以有相等的长度),默认的属性值为left。

例2-3】显示各级标题,代码如下:

978-7-111-57090-5-Chapter02-9.jpg

在浏览器中预览,显示效果如图2-3所示。

978-7-111-57090-5-Chapter02-10.jpg

图2-3 <hi>标签展示效果

2.段落标签<p>

<p>标签用于划分段落,控制文本的位置。其语法格式如下:

<p>段落内容</p>

<P>是成对标签,用于定义内容从新的一行开始,并与上段之间有一个空行。开始标签<p>和结束标签</p>之间写入段落内容。

可使用<P>标签的align属性定义新开始的一行内容在页面中的对齐位置,属性值可以是left(左对齐)、center(居中对齐)、right(右对齐)和justify(两段对齐,对行进行伸展,这样每行都可以有相等的长度)。<p>标签的align属性不建议使用,可以利用后续要学习的CSS来代替。

【例2-4】段落标签,代码如下:

978-7-111-57090-5-Chapter02-11.jpg

在浏览器中预览,显示效果如图2-4所示。

978-7-111-57090-5-Chapter02-12.jpg

图2-4 <p>标签展示效果

2.2.2 文本格式化标签

1.换行标签<br>

<br>标签用于定义文本从新的一行显示。其语法格式如下:

<br>

它不产生一个空行,但连续多个的<br>标签可以产生多个空行的效果。<br>标签是非成对标签,所以规范的换行标签在使用的时候记为<br>。

注意:<br>标签只是简单地开始新的一行,而当浏览器遇到<p>标签时,通常会在相邻的段落之间插入一些垂直的间距。

例2-5】换行标签,代码如下:

978-7-111-57090-5-Chapter02-13.jpg

在浏览器中预览,显示效果如图2-5所示。

978-7-111-57090-5-Chapter02-14.jpg

图2-5 <br>标签展示效果

注意:在本例中注意观察<br>标签与<p>标签的区别,特别是行间距。

2.水平线标签<hr>

<hr>标签用于产生一条水平线,以分隔文档的不同部分。其语法格式如下:

<hr>

<hr>标签是非成对标签,所以规范的换行标签在使用的时候记为<hr>。其主要属性见表2-2。

2-2 HTML常用标签

978-7-111-57090-5-Chapter02-15.jpg

【例2-6】水平线标签,代码如下:

978-7-111-57090-5-Chapter02-16.jpg

在浏览器中预览,显示效果如图2-6所示。

978-7-111-57090-5-Chapter02-17.jpg

图2-6 <hr>标签展示效果

3.字形标签

字形标签用于设置文字的风格。常用的字形标签见表2-3。

2-3 常用字形标签

978-7-111-57090-5-Chapter02-18.jpg

HTML5规范声明:应该使用<h1>~<h6>来表示标题,使用<em>标签来表示强调的文本,使用<strong>标签来表示重要文本,使用<mark>标签来表示标注的或突出显示的文本。根据HTML5规范,在没有其他标签更合适时,才应该把<b>标签作为最后的选项。

4.<div>标签

<div>标签可以用来排版大块HTML段落,设置多个段落的文本对齐方式等。其语法格式如下:

<div>块内容</div>

目前<div>标签最重要的功能是结合CSS设计页面布局。<div>标签是一种块(block)容器,默认的状态是占据一行。如:

978-7-111-57090-5-Chapter02-19.jpg

5.<span>标签

<span>标签被用来组合文档中的行内元素。使用方法和<div>标签基本相同。其语法格式如下:

<span>行内容</span>

<span>标签没有固定的格式表现。当对它应用样式时,才会产生视觉上的变化。如果不对<span>应用样式,那么span元素中的文本与其他文本不会有任何视觉上的差异。可以通过CSS对它定义样式,也可以通过JavaScript对它进行操作。

<span>标签和<div>标签主要区别为:<span>标签不换行,而<div>标签换行;<span>标签不能包含<div><p>标签,而<div>标签可以包含<span>标签和<p>标签。

2.2.3 特殊字符标签

随着互联网的发展,页面内容越来越丰富,很多行业信息也会出现在页面上,每个行业有自己的行业特性,如数学、物理、化学有很多特殊符号。本节将介绍如何在页面上显示这些特殊符号。

在HTML中,特殊字符以“&”开头,以“;”结尾,中间为相关字符编码。如用于声明标签的“<”和“>”,在页面上需要显示这两个符号的时候需要进行特殊处理。在HTML编码中,用“<”表示“<”,用“>”表示“>”。表2-4列出了常用特殊字符标签的表示方法。

2-4 特殊字符标签

978-7-111-57090-5-Chapter02-20.jpg