- HTML+CSS+JavaScript实用详解
- 叶青编著
- 1803字
- 2020-08-26 19:31:43
第4章 HTML网页中的文字和段落
通过上一章的学习，读者在网页整体表现设置方面有了比较扎实的基础。但是读者不仅是希望在网页上表现文字，更希望对网页上的文字进行排版、修饰。本章将学习文字的简单排版、修饰、滚动文字以及超级链接。超级链接在网站开发中无处不在，是网页中的重点。
学习本章时，在D:\web\目录下创建一个目录命名为chapter3，把上一章的文件移动到D:\web\chapter3，做一个归类。本章继续在D:\web\目录下创建示例文件，这样方便用IIS测试示例文件。
说明：以后章节都作类似处理，不再重复说明。如第4章文件归类到D:\web\chapter4。
4.1 段落排版和换行
网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。本节从段落的细节设置入手，使读者学习后能利用标签自如地处理大段的文字。
4.1.1 给大段文字进行分段
简单地对文字分段常用<p></p>标签，即段落的开始用<p>，段落的结束用</p>标签。某些网页分段时省略了</p>，即作为单标签使用，因为下一段开始的<p>标签就意味上一段的结束。
注意：笔者不推荐把<p>当作单标签使用，这样代码不规范，易出错。
在D:\web\目录下创建网页文件，命名为p.htm，编写代码如代码4.1所示。
代码4.1 分段的设置：p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊：《无间道三：终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p>2002年岁末，神话开始。2003年秋冬，走向高潮和终极。《无间道》即自承取乎佛家理念，光
明与黑暗、生存与消亡、存在与虚无纠结于浑然一体，愕然分崩离析，亦是丰富兼统一的过程。有因就有果，
有孽就有缘，境与相的妙处在于言诠的限度，不可道破，又不可沉默，相互依托。心音始终在，拷问自我，
拷问时空。这是最好的时代，这是最坏的时代，几乎每个时代的人都在这么说。然而《维摩诘经·观众生品 第七》中说：无住则无本。从身体的言行开始，经过辩难言说的层面，初步达到存有自视境界，最后不过是 归结为生存的态度。在我看来，刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实 是宿命中的镜像人物，都可以从对方身上看到自我，抗争、迸发、沉雄、挥洒，仿佛的劫数、扭曲的生命， 于是乎“无间道”。</p>
<p>顾准说从理想主义到经验主义，王小波说要警惕僭主和英雄，谁是英雄？他们从哪里来？他们来
了又怎样？我们这个时代还要不要英雄？我在编辑这期E论坛时，有一些欣慰，从文字中可以看出大家都在
思考，毕竟我们不再是盲从的一代。在我看来，娱乐从来就不仅仅是娱乐本身，从一滴水、一朵花、一粒沙
可以看到一个世界，从一场电影中我们想到的注定更多，理解定可变奏无穷。我们每个人就构成了这个世界，
无论这个世界是好是坏，我们都有份。我们每个人都有自己的生活，都有优点都有缺点，这是我们共同进步
的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.1所示。
图4.1 分段的设置
通过<p></p>标签的分段，大段的文字排版井井有条。
4.1.2 给文字加入空格
仔细观察图4.1，图中的分段感觉有点别扭，因为每段开始没有字符空格。
说明：按中文写作习惯，段落的首行须空格2个中文字符。
前面章节学习过，在HTML代码中直接用键盘敲击空格键，是无法显示在页面上的。HTML使用“ ”表现1个空格字符（英文的空格字符）。由于1个中文字符占两个英文字符的宽度，所以在段落的首行开头加上4个“ ”字符，修改p.htm的代码如代码4.2所示。
代码4.2 空格符的设置：p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊：《无间道三：终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p> 2002年岁末，神话开始。2003年秋冬，走向高潮和终极。《无
间道》即自承取乎佛家理念，光明与黑暗、生存与消亡、存在与虚无纠结于浑然一体，愕然分崩离析，亦是
丰富兼统一的过程。有因就有果，有孽就有缘，境与相的妙处在于言诠的限度，不可道破，又不可沉默，相
互依托。心音始终在，拷问自我，拷问时空。这是最好的时代，这是最坏的时代，几乎每个时代的人都在这
么说。然而《维摩诘经·观众生品第七》中说：无住则无本。从身体的言行开始，经过辩难言说的层面，初
步达到存有自视境界，最后不过是归结为生存的态度。在我看来，刘健明、陈永仁、韩琛、黄志诚、倪永孝、
陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物，都可以从对方身上看到自我，抗争、迸发、沉雄、挥
洒，仿佛的劫数、扭曲的生命，于是乎“无间道”。</p>
<p> 顾准说从理想主义到经验主义，王小波说要警惕僭主和英雄，
谁是英雄？他们从哪里来？他们来了又怎样？我们这个时代还要不要英雄？我在编辑这期E论坛时，有一些
欣慰，从文字中可以看出大家都在思考，毕竟我们不再是盲从的一代。在我看来，娱乐从来就不仅仅是娱乐
本身，从一滴水、一朵花、一粒沙可以看到一个世界，从一场电影中我们想到的注定更多，理解定可变奏无
穷。我们每个人就构成了这个世界，无论这个世界是好是坏，我们都有份。我们每个人都有自己的生活，都
有优点都有缺点，这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.2所示。
图4.2 空格符的设置
段落已经初步成形了，空格已经表现了出来。读者可以在段落中任意加上空格符测试。
4.1.3 设置文字换行与不换行
图4.1看上去已经没有问题了，当文字到达浏览器的边界后将自动换行。但是当调整浏览器的宽度时，文字换行的位置也相应发生变化，格式显得相当混乱。为了规范格式，读者应该在编写代码时在需要换行的位置用单标签<br />标签强制换行。反之，不需要换行的部分用双标签<nobr></nobr>包含。修改p.htm代码如代码4.3所示。
代码4.3 换行的控制：p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊：《无间道三：终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p> 2002年岁末，神话开始。2003年秋冬，走向高潮和终极。<br
/><nobr>《无间道》即自承取乎佛家理念，光明与黑暗、生存与消亡、存在与虚无纠结于浑然一体，愕然
分崩离析，亦是<br />丰富兼统一的过程。有因就有果，</nobr>有孽就有缘，境与相的妙处在于言诠的
限度，不可道破，又不可沉默，相互依托。心音始终在，拷问自我，拷问时空。<nobr>这是最好的时代，
这是最坏的时代，几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说：无住则无本。</nobr>
从身体的言行开始，经过辩难言说的层面，初步达到存有自视境界，最后不过是归结为生存的态度。在我看
来，刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物，都可
以从对方身上看到自我，抗争、迸发、沉雄、挥洒，仿佛的劫数、扭曲的生命，于是乎“无间道”。</p>
<p> 顾准说从理想主义到经验主义，王小波说要警惕僭主和英雄，
谁是英雄？他们从哪里来？他们来了又怎样？我们这个时代还要不要英雄？我在编辑这期E论坛时，有一些
欣慰，从文字中可以看出大家都在思考，毕竟我们不再是盲从的一代。在我看来，娱乐从来就不仅仅是娱乐
本身，从一滴水、一朵花、一粒沙可以看到一个世界，从一场电影中我们想到的注定更多，理解定可变奏无
穷。我们每个人就构成了这个世界，无论这个世界是好是坏，我们都有份。我们每个人都有自己的生活，都
有优点都有缺点，这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.3所示。
图4.3 换行的控制
由本例可得，被<nobr></nobr>包含的部分不会自动换行，除非有<br />强制换行。
4.1.4 设置文字对齐方式
段落中的文字在某些时候需要有不同的对齐方式，默认对齐方式是左对齐。<p>标签的对齐属性为align，通过设置align为left、right或center值实现左对齐、右对齐和居中对齐。修改p.htm代码如代码4.4所示。
代码4.4 对齐的控制：p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊：《无间道三：终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p align="center"> 2002年岁末，神话开始。2003年秋冬，
走向高潮和终极。《无间道》即自承取乎佛家理念，光明与黑暗、生存与消亡、存在与虚无纠结于浑然一体，
愕然分崩离析，亦是丰富兼统一的过程。有因就有果，有孽就有缘，境与相的妙处在于言诠的限度，不可道
破，又不可沉默，相互依托。心音始终在，拷问自我，拷问时空。这是最好的时代，这是最坏的时代，几乎
每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说：无住则无本。从身体的言行开始，经过
辩难言说的层面，初步达到存有自视境界，最后不过是归结为生存的态度。在我看来，刘健明、陈永仁、韩
琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物，都可以从对方身上看到自我，
抗争、迸发、沉雄、挥洒，仿佛的劫数、扭曲的生命，于是乎“无间道”。</p>
<p align="right"> 顾准说从理想主义到经验主义，王小波说要警
惕僭主和英雄，谁是英雄？他们从哪里来？他们来了又怎样？我们这个时代还要不要英雄？我在编辑这期E
论坛时，有一些欣慰，从文字中可以看出大家都在思考，毕竟我们不再是盲从的一代。在我看来，娱乐从来
就不仅仅是娱乐本身，从一滴水、一朵花、一粒沙可以看到一个世界，从一场电影中我们想到的注定更多，
理解定可变奏无穷。我们每个人就构成了这个世界，无论这个世界是好是坏，我们都有份。我们每个人都有
自己的生活，都有优点都有缺点，这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm，浏览效果如图4.4所示。
图4.4 对齐的控制
4.1.5 添加水平分隔线
HTML提供了修饰段落的水平分隔线，在很多场合中可以轻松使用，不需要另外作图。水平分隔线的标签是单标签<hr />，默认情况下占一行。
在D:\web\目录下创建网页文件，命名为hr.htm，编写代码如代码4.5所示。
代码4.5 分隔线的设置：hr.htm
<html>
<head>
<title>分隔线的设置</title>
</head>
<body>
<p align="center">回顾乐坛粤语歌曲辉煌</p>
<hr />
<p> 究竟哪首歌是最早的粤语歌，还存在争议。1973年，“筷子
姊妹花”成员仙杜拉演唱了由顾嘉辉创作的电视剧《啼笑因缘》同名主题歌，此歌也是香港歌坛第一首粤语
剧集主题歌。同年，初出茅庐的郑少秋同样在TVB剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而197
4年由许冠杰演唱的大热电影《鬼马双星》同名主题歌则更是乐坛的重磅炸弹，成为第一首在英国BBC电
台播放的中文歌曲，在当时名震一时，也最受大家对粤语歌起源的认同。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/hr.htm，浏览效果如图4.5所示。
图4.5 分隔线的设置
一个简单的<hr />标签就可以实现分隔线，轻松地修饰了段落排版，使之更美观。不过对于不同的应用场合，<hr />默认单一的线条样式显然不能满足要求。<hr />标签的多种属性解决了这个问题，常用的属性有width、size、align、color和title。width即宽度设置，属性值默认单位为像素，也可以用百分比来表示分隔线所占空间的比例。size可以理解为分隔线的厚度或高度，属性值默认单位同宽度。align为对齐方式，类似于<p>的align。color即颜色，根据需要设置分隔线的不同颜色。title属性使用不多，浏览者光标悬停在分隔线上时出现属性值的内容提示。
说明：<hr />的默认对齐方式是居中。HTML的宽度和高度属性默认单位为像素，一般无须标识单位。不过style属性中必须标识单位。
<hr />还有一个属性是noshade，当分隔线没有设置颜色，并且设置了一定的size时，分隔线看上去是立体下凹的，有阴影。如果使用了noshade属性，分隔线将会呈现单色。修改hr.htm代码如代码4.6所示。
代码4.6 分隔线的样式设置：hr.htm
<html>
<head>
<title>分隔线的设置</title>
</head>
<body>
设置了300像素宽度并且右对齐的分隔线：<br />
<hr width="300" align="right" />
设置了50%宽度并且居中对齐的分隔线：<br />
<hr width="50%" align="left" />
设置了50%宽度、50像素的厚度并且没有使用noshade的分隔线：<br />
<hr width="50%" size="50" />
设置了50像素的厚度并且使用noshade的分隔线：<br />
<hr size="50" noshade="noshade" />
设置了50像素的厚度并且设置了深红色的分隔线：<br />
<hr size="50" color="770000"/>
设置了50像素的厚度、设置了浅蓝色并且设置了“感谢你的到来！”提示的分隔线：<br />
<hr size="50" color="0000cc" title="感谢你的到来！"/>
</body>
</html>
在浏览器地址栏输入http://localhost/hr.htm，浏览效果如图4.6所示。
图4.6 分隔线的样式设置
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2.1 文字样式设置的基本标签—<font>
设置字体样式的基本标签是<font></font>，被其包含的文本为样式作用区。在初学者的HTML代码编写中，<font></font>容易被多重嵌套，如<font属性1=值1><font属性2=值2>文本</font></font>。还有一种情况是标签嵌套错位，如<font><p>文本</font></p>。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
4.2.2 设置文字的颜色
color是<font></font>标签的属性之一，用于设置文字颜色。在D:\web\目录下创建网页文件，命名为font_color.htm，编写代码如代码4.7所示。
代码4.7 字体颜色的设置：font_color.htm
<html>
<head>
<title>字体颜色的设置</title>
</head>
<body>
浅红色文字：<font color="#dd0000">HTML学习的本质就是该是什么就用什么</font><br />
深红色文字：<font color="#660000">HTML学习的本质就是该是什么就用什么</font><br />
浅绿色文字：<font color="#00dd00">HTML学习的本质就是该是什么就用什么</font><br />
深绿色文字：<font color="#006600">HTML学习的本质就是该是什么就用什么</font><br />
浅蓝色文字：<font color="#0000dd">HTML学习的本质就是该是什么就用什么</font><br />
深蓝色文字：<font color="#000066">HTML学习的本质就是该是什么就用什么</font><br />
浅黄色文字：<font color="#dddd00">HTML学习的本质就是该是什么就用什么</font><br />
深黄色文字：<font color="#666600">HTML学习的本质就是该是什么就用什么</font><br />
浅青色文字：<font color="#00dddd">HTML学习的本质就是该是什么就用什么</font><br />
深青色文字：<font color="#006666">HTML学习的本质就是该是什么就用什么</font><br />
浅紫色文字：<font color="#dd00dd">HTML学习的本质就是该是什么就用什么</font><br />
深紫色文字：<font color="#660066">HTML学习的本质就是该是什么就用什么</font><br />
</body>
</html>
在浏览器地址栏输入http://localhost/font_color.htm，浏览效果如图4.7所示。
图4.7 字体颜色的设置
读者不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
4.2.3 设置文字的尺寸
size也是<font></font>标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size属性值之前加上“+”、“-”字符，来指定相对于字号初始值的增量或减量。在D:\web\目录下创建网页文件，命名为font_size.htm，编写代码如代码4.8所示。
代码4.8 字体尺寸的设置：font_size.htm
<html>
<head>
<title>字体尺寸的设置</title>
</head>
<body>
size为1：<font size="1">HTML学习</font><br />
size为2：<font size="2">HTML学习</font><br />
size为3：<font size="3">HTML学习</font><br />
size为4：<font size="4">HTML学习</font><br />
size为5：<font size="5">HTML学习</font><br />
size为6：<font size="6">HTML学习</font><br />
size为7：<font size="7">HTML学习</font><br />
</body>
</html>
在浏览器地址栏输入http://localhost/font_size.htm，浏览效果如图4.8所示。
图4.8 字体尺寸的设置
读者可尝试在size值前面加上“+”、“-”字符，更灵活地设置文字尺寸。
4.2.4 设置文字的字体
face也是<font></font>标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:\web\目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm
<html>
<head>
<title>字体字型的设置</title>
</head>
<body>
字型为宋体：<font size="5" face="宋体">沁园春·长沙-毛泽东</font><br />
字型为楷体：<font size="5" face="楷体_GB2312">沁园春·长沙-毛泽东</font><br />
字型为黑体：<font size="5" face="黑体">沁园春·长沙-毛泽东</font><br />
字型为隶书：<font size="5" face="隶书">沁园春·长沙-毛泽东</font>
</body>
</html>
在浏览器地址栏输入http://localhost/font_face.htm，浏览效果如图4.9所示。
图4.9 字体字型的设置
笔者把被修改字型部分的文字尺寸设置为5号，方便读者查看。
4.2.5 使文字倾斜
用双标签<i></i>可使被作用文字倾斜，达到特殊的效果，例如文章的日期。<em></em>被称为强调标签，也是斜体，目前使用比<i></i>标签更频繁，其编写方法如下：
<i>这是斜体文字</i>
<em>这也是斜体文字</em>
4.2.6 使文字加粗
用双标签<b></b>可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。<strong></strong>被称为特别强调标签，也是文字加粗，目前使用比<b></b>标签更频繁，其编写方法如下：
<b>这是粗体文字</b>
<strong>这也是粗体文字</strong>
4.2.7 给文字加下划线
用双标签<u></u>可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:\web\目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm
<html>
<head>
<title>字体修饰的设置</title>
</head>
<body>
<font size="5">斜体：<em>沁园春·长沙-毛泽东</em><br />
加粗体：<strong>沁园春·长沙-毛泽东</strong><br />
下划线：<u>沁园春·长沙-毛泽东</u><br />
斜体+加粗体+下划线：<em><strong><u>沁园春·长沙-毛泽东</u></strong></em></font>
</body>
</html>
在浏览器地址栏输入http://localhost/font_style.htm，浏览效果如图4.10所示。
图4.10 字体修饰的设置
笔者把<body></body>内的所有文字尺寸设置为5号，方便读者查看。
注意：在多个标签包含同一块文字时，其包含顺序不能错位。
4.2.8 多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签<h1>到<h6>，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:\web\目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm
<html>
<head>
<title>标题的设置</title>
</head>
<body>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
<h1>财富杂志：谷歌为何不会盛极而衰</h1>
<h3>遭遇潜在问题</h3>
<p> 一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可
能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台
OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
<h3>将继续垄断搜索</h3>
<p> 最近有一些文章称，如果出现更好的搜索引擎，人们会毫不
犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种
情况下，网站速度往往会成为决定胜负的关键。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/font_h.htm，浏览效果如图4.11所示。
图4.11 标题的设置
4.2.9 学会处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如“<”和“>”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“<”和“>”呢？HTML规定了一些特殊字符的写法，以便在网页中显示，如表4.1所示。
表4.1 HTML中的特殊字符
在D:\web\目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm
<html>
<head>
<title>特殊字符的设置</title>
</head>
<body>
<font size="5">
标签的显示方法：<HTML><br />
引号的显示方法："英文半角双引号"<br />
商标的显示方法：™<br />
注册符号的显示方法：®<br />
版权符号的显示方法：©<br />
显示§<br />
显示×
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.12所示。
图4.12 特殊字符的设置
说明：单独显示符号&必须用代码&。
4.2.10 如何更方便地忽略浏览器对部分HTML的解析
如果在网页中作一个类似本书的HTML代码示例，恐怕得把所有的<和>转换成<和>，显得比较麻烦。HTML代码中的<plaintext>和<xmp></xmp>可以轻松解决这个问题。
<plaintext>是单标签，它插入到HTML代码中时，其后面的所有HTML标签全部失效，即浏览器对<plaintext>后面所有的HTML标签不作解析，直接在页面上显示。
<xmp></xmp>是双标签，它只使其包含的内容中的标签失效，<xmp></xmp>的使用更为普遍。在D:\web\目录下创建网页文件，命名为html.htm，编写代码如代码4.13所示。
代码4.13 忽略标签的设置：html.htm
<html>
<head>
<title>忽略标签的设置</title>
</head>
<body>
<h2>沁园春·长沙</h2>
<xmp>独立寒秋，<strong>湘江北去</strong>，橘子洲头。 <br/>看万山红遍，层林尽染； <br
/>漫江碧透，<u>百舸争流。</u> <br /></xmp>
鹰击长空，<strong>鱼翔浅底，</strong> <br />万类霜天竞自由。 <br />怅寥廓，<u>问苍
茫大地</u>，谁主沉浮？<br />
<plaintext>
携来百侣曾游，<br />忆往昔峥嵘岁月稠。 <br /> 恰同学少年，风华正茂； <br /> 书生意气，
挥斥方遒。 <br /> 指点江山，激扬文字，<br /> 粪土当年万户侯。 <br /> 曾记否，<strong>到
中流击水</strong>，浪遏飞舟！
</body>
</html>
在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.13所示。
图4.13 忽略标签的设置
4.2.11 其他文字修饰方法
为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。
· 上标格式标签为双标签<sup></sup>，多用于数学指数的表示，比如某个数的平方或立方。
· 下标格式标签为双标签<sub></sub>，多用于注释，以及数学的底数表示。
· 中划线标签为双标签<strike></strike>，多用于删除效果。
在D:\web\目录下创建网页文件，命名为other.htm，编写代码如代码4.14所示。
代码4.14 其他修饰标签的设置：other.htm
<html>
<head>
<title>其他修饰标签的设置</title>
</head>
<body>
<font size="5">
沁园春<sup>长沙</sup>！<br />
数学指数的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁园春<sub>长沙</sub>！<br />
数学底数的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
删除效果：<strike>我被删除了</strike>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/other.htm，浏览效果如图4.14所示。
图4.14 其他修饰标签的设置
4.3 制作滚动文字
通过本章前面的学习，读者已经能够很好地控制各种段落文字的显示方式，不过无论怎么设置，文字都是静态的。本节笔者讲述HTML代码中比较特殊的标签，它能使网页中的文字滚动，并且可以控制其滚动的属性。
4.3.1 设置文字滚动
HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>。在HTML代码中可使其作用区文字滚动，默认为从右到左，循环滚动。在D:\web\目录下创建网页文件，命名为mar.htm，编写代码如代码4.15所示。
代码4.15 文字滚动的设置：mar.htm
<html>
<head>
<title>文字滚动的设置</title>
</head>
<body>
<font size="5" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/mar.htm，浏览效果如图4.15所示。
图4.15 设置文字滚动默认形式
从图4.15可得，在未设置宽度时，<marquee></marquee>标签是独占一行的。
4.3.2 设置文字滚动的方向
<marquee></marquee>标签的direction属性用于设置内容滚动方向，属性值有left、right、up、down，分别代表向左、向右、向上、向下，例如以下代码：
<marquee direction="left">做人要厚道</marquee>
<marquee direction="right">做人要厚道</marquee>
<marquee direction="up">做人要厚道</marquee>
<marquee direction="down">做人要厚道</marquee>
4.3.3 设置文字滚动的速度和形式
设置文字滚动使用<marquee></marquee>标签，其属性说明如下。
· <marquee></marquee>标签的scrollamount属性用于设置内容滚动速度。
· <marquee></marquee>标签的behavior属性用于设置内容滚动方式，默认为scroll，即循环滚动，当其值为alternate时，内容将来回循环滚动。当其值为slide时，内容滚动一次即停止，不会循环。还有一个loop属性可设置其滚动循环次数，默认为没有限制。
· <marquee></marquee>标签的scrolldelay属性用于设置内容滚动的时间间隔。
· <marquee></marquee>标签的bgcolor属性用于设置内容滚动背景色（类似于body的背景色设置）。
· <marquee></marquee>标签的width属性用于设置内容滚动背景宽度。
· <marquee></marquee>标签的height属性用于设置内容滚动背景高度。
修改mar.htm网页文件，编写代码如代码4.16所示。
代码4.16 文字滚动的设置：mar.htm
<html>
<head>
<title>文字滚动的设置</title>
</head>
<body>
<font size="3" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">做人要厚道
</marquee>
文字滚动示例（向下，滚动方式为 slide，速度为 10）：<marquee scrollamount="10"
behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为 alternate，循环 3 次，速度为 2）：<marquee
scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up"
bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/mar.htm，浏览效果如图4.16所示。
图4.16 文字滚动的不同形式
<marquee></marquee>的众多属性能非常方便地制作滚动文字，在后面的JavaScript学习中，读者将继续深化<marquee></marquee>标签的动态行为学习。
4.4 用于组织数据的列表
学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。
4.4.1 列表的结构组成
HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由<li></li>组成。具体结构如图4.17所示。
图4.17 列表元素的结构
4.4.2 制作无序列表
顾名思义，无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表，其列表标签采用<ul></ul>，编写方法如下：
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
<li>列表项五</li>
</ul>
4.4.3 制作有序列表
顾名思义，有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或a、b、c等。在D:\web\目录下创建网页文件，命名为ul_ol.htm，编写代码如代码4.17所示。
代码4.17 列表的设置：ul_ol.htm
<html>
<head>
<title>列表的设置</title>
</head>
<body>
<font size="5">
网页前台技术
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>FLASH</li>
</ul>
网页后台的学习
<ol>
<li>ASP</li>
<li>ASP.net</li>
<li>PHP</li>
<li>CGI</li>
<li>Ruby</li>
<li>Python</li>
</ol>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/ul_ol.htm，浏览效果如图4.18所示。
图4.18 列表的设置
4.5 超级链接
超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。
注意：图片也可以做链接，将在下一章“网页中的图片”详细学习。
4.5.1 给文字添加链接
超级链接的标签是<a></a>，给文字添加超级链接类似于其他修饰标签。添加了链接后的文字有其特殊的样式，以和其他文字区分，默认链接样式为蓝色文字，有下划线。超级链接是跳转到另一个页面的，<a></a>标签有一个href属性负责指定新页面的地址。href指定的地址一般使用相对地址。
说明：网站开发中，文档相对地址使用更为普遍。
在D:\web\目录下创建网页文件，命名为a.htm，编写代码如代码4.18所示。
代码4.18 超级链接的设置：a.htm
<html>
<head>
<title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm">进入列表的设置页面</a>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/a.htm，浏览效果如图4.19所示。
图4.19 超级链接的设置
读者可从图4.19中看到超级链接的默认样式，当单击页面中的链接，页面将跳转到同一目录下的ul_ol.htm页面，即上节的列表设置页面。当单击浏览器的“后退”按钮，回到a.htm页面时，文字链接的颜色变成了紫色，用于告诉浏览者，此链接已经被访问过。
4.5.2 修改链接的窗口打开方式
默认情况下，超级链接打开新页面的方式是自我覆盖。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）、_top（在浏览器的整个窗口打开，将会忽略所有的框架结构）、_parent（在上一级窗口打开）。
注意：_top和_parent方式用于框架页面，后面章节有详解。
4.5.3 给链接添加提示文字
很多情况下，超级链接的文字不足以描述所要链接的内容，超级链接标签提供了title属性能很方便地给浏览者做出提示。title属性的值即为提示内容，当浏览者的光标停留在超级链接上时，提示内容才会出现，这样不会影响页面排版的整洁。修改a.htm网页文件，编写代码如代码4.19所示。
代码4.19 超级链接的设置：a.htm
<html>
<head>
<title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a href="ul_ol.htm" target="_blank" title="读者你好，现在你看到的是提示文字，单击
本链接可以新开窗口跳转到ul_ol.htm页面。">进入列表的设置页面</a>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/a.htm，浏览效果如图4.20所示。
图4.20 超级链接的提示文字
4.5.4 什么是锚（anchor）
很多网页文章的内容比较多，导致页面很长，浏览者需要不断地拖动浏览器的滚动条才能找到需要的内容。超级链接的锚功能可以解决这个问题，锚（anchor）是引自于船只上的锚，锚被抛下后，船只就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳转，有的地方叫做书签。
超级链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超级链接的href属性可以根据name跳转到对应的锚。在D:\web\目录下创建网页文件，命名为a_anchor.htm，编写代码如代码4.20所示。
代码4.20 超级链接的锚：a_anchor.htm
<html>
<head>
<title>超级链接的设置</title>
</head>
<body>
<font size="5">
<a name="top">这里是顶部的锚</a><br />
<a href="#1">第1任</a><br />
<a href="#2">第2任</a><br />
<a href="#3">第3任</a><br />
<a href="#4">第4任</a><br />
<a href="#5">第5任</a><br />
<a href="#6">第6任</a><br />
<h2>美国历任总统</h2>
●第1任(1789-1797)<a name="1">这里是第1任的锚</a><br />
姓名：乔治·华盛顿<br />
George Washington<br />
生卒：1732-1799<br />
政党：：联邦<br />
●第2任(1797-1801)<a name="2">这里是第2任的锚</a><br />
姓名：约翰·亚当斯<br />
John Adams<br />
生卒：1735-1826<br />
政党：：联邦<br />
●第3任(1801-1809)<a name="3">这里是第3任的锚</a><br />
姓名：托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒：1743-1826<br />
政党：：民共<br />
●第4任(1809-1817)<a name="4">这里是第4任的锚</a><br />
姓名：詹姆斯·麦迪逊<br />
James Madison<br />
生卒：1751-1836<br />
政党：民共<br />
●第5任(1817-1825)<a name="5">这里是第5任的锚</a><br />
姓名：詹姆斯·门罗<br />
James Monroe<br />
生卒：1758-1831<br />
政党：民共<br />
</font>
</body>
</html>l>
在测试之前，读者从代码4.20可以看到，定义锚也是用的<a></a>标签，锚的名称用name属性定义（名称没有限制，可自定义）。而寻找锚的链接用href属性指定对应的名称，在名称前面要加个#符号。在浏览器地址栏输入http://localhost/a_anchor.htm，浏览效果如图4.21所示。
图4.21 超级链接的锚
当浏览者单击超级链接时，页面将自动滚动到href属性值名称的锚位置。
注意：定义锚的标签<a name=""></a>内不一定需要具体内容，只是做一个定位。
4.5.5 电子邮件、FTP和Telnet的链接
超级链接还可以进一步扩展网页的功能，比较常用的有发电子邮件、FTP以及Telnet连接。完成以上的功能只需要修改超级链接的href值。发电子邮件的编写格式为：
<a href = "mailto:邮件地址">给我发email</a>
邮件地址必须完整，如intel@qq.com。
前面提到过，浏览网页采用http协议，而FTP服务器采用FTP协议连接，链接格式如下：
<a href = "ftp://服务器IP地址或域名">链接的文字</a>
FTP服务器链接和网页链接区别在于所用协议不同。FTP需要从服务器管理员处获得登录的权限。不过部分FTP服务器可以匿名访问，从而能获得一些公开的文件。同样，连接Telnet协议的服务器也是采用类似方法，格式如下：
<a href = "telnet://服务器IP地址或域名">链接的文字</a>
telnet协议应用非常少，使用http协议居多。在D:\web\目录下创建网页文件，命名为mail.htm，编写代码如代码4.21所示。
代码4.21 超级链接的其他设置：mail.htm
<html>
<head>
<title>超级链接的其他设置</title>
</head>
<body>
<font size="5">
<a href="mailto:intel@qq.com" title="读者你好，单击这里可以发电子邮件。">给我发
E-mail</a><br />
<a href="ftp://101.22.25.11" title="读者你好，欢迎进入FTP服务器。">连接FTP服务
器</a><br />
<a href="telnet://101.22.25.11" title="读者你好，欢迎进入 Telnet服务器。">连接
Telnet服务器</a>
</font>
</body>
</html>s
在浏览器地址栏输入http://localhost/mail.htm，浏览效果如图4.22所示。
图4.22 超级链接的其他设置
4.6 小结
无论网页技术如何发展，文本内容始终是网页的核心内容。本章知识点比较多，基本都是关于文本内容的样式控制，在学习CSS样式内容之前，读者可以大量应用本章的内容对网页的文本内容进行排版。本章关于特殊字符的部分也是容易被初学者忽略的，在以后的动态技术学习中特殊字符非常有用。最后关于滚动文字的学习，使本书第一次在网页中出现了能活动的元素，读者可以十分轻松地控制文字滚动的行为。而在后面JavaScript技术的学习中，这种活动的效果将经常出现。