第3章HTML基础知
识
HTML是制作网页的基础语言,它通过标记式指令将文字、图片、声音和影像等连接起
来,通过浏览器呈现给用户。HTML文件可以用记事本等文本编辑工具编写,文件的扩展
名为HTML,它们是能够被浏览器解释显示的文件格式。
1
HTML概述
3.
3.1
HTML的发展历程
1.
1.HTML的诞生
1969年,IBM的CharlesGoldfarb发明了用于描述超文本信息的GML(Generalized
MarkupLanguage,通用置标语言)。1978—1986年,在ANSI等组织的努力下,GML进一
步发展为著名的SGML(StandardGeneralizedMarkupLanguage,标准通用置标语言)标
准。当TimBerners-Le(Web应用创始人)和他的同事在1989年试图创建一个基于超文
本的分布式应用系统时,他们意识到SGML是描述超文本信息的一个上佳方案,但美中不
足的是,SGML过于复杂,不利于信息的传递和解析。于是,TimBerners-Le
对SGML做
了大刀阔斧的简化和完善。1990年,第一个图形化Web浏览器WorldWideWeb终于可以
使用一种为Web量身订制的语言———HTML展现超文本信息了。
2.HTML的版本发展
HTML是建立网页的标准,从它诞生至今,其规范不断完善,功能越来越强大。从发展
历程来看,HTML大体经历了以下几个阶段。
(0:HTML没有1.为了和当时的各
1)HTML2.0版本是因为当时有很多不同的版本;
种HTML标准区分开来,1993年推出了第一个正式使用2.
0作为版本号的HTML 。
(2)HTML3.0~3.2:1995年3月由当时刚成立的W3C(WorldWideWeb
Consortium,万维网联盟)提出HTML3.0,但由于实现工作过于复杂,后来中止了开发;1
版从未被正式提出,1996年,W3C直接提出了HTML3.3.
2并推荐为当时的标准。
(01:1997年12月18日,W3C推出了HTML4.这是一个具有跨时
3)HTML4.~0,
04.
代意义的标准;1999年12月24日,W3C在HTML4.
0的基础上推出了改进版的HTML
4.成为当时最为流行和相当成熟可靠的版本。01,
02.0的基础上推出了XHTML1.它是一
(4)XHTML1.~0:2000年1月在HTML4.0,
种优化和改进后的新语言,2002年推出了XHTML2.XHTML
0的第一个工作草案。不过,
并没有成功,大多数浏览器厂商认为XHTML作为一个过渡化的标准并没有太大的必要,
所以XHTML并没有成为主流,而HTML5便因此孕育而生。
(5)HTML5:HTML5的前身名为WebAppiain1.由一些浏览器厂商联合成立
lctos0,
的WHATWG工作组在2004年提出,于2007年被W3C接纳。W3C随即成立了新的
第3章 HTML基础知识
51
HTML工作团队,团队包括Apple、Google、IBM、Microsoft、Opera等,这个团队于2008年公布
了HTML5的第一份正式草案。2014年10月28日,W3C正式发布HTML5推荐标准。
HTML还在不断发展扩充,有关HTML的各种参考资料和W3C即将发布的各种新
版特征、最新消息等内容,均可以通过网络查询。
3.HTML的特点
HTML是网页制作的基本语言,虽然不懂得HTML也能够制作出漂亮的网页,但学习
HTML能帮助读者进一步理解网页形成的原理,还能帮助初学者读懂代码、插入特效。
HTML的主要特点如下。
(1)HTML容易学习,不需要编程基础和专业的编程知识。
(2)HTML文档容易创建,只需要一个文本编辑器(如记事本)就可以完成。
(3)用HTML编写的文件垃圾代码少,浏览器解释效率高,加快了页面的显示速度。
(4)HTML文件存储量小,加快了网页的传输速度。
(5)HTML独力于操作系统平台,能够多平台兼容,只需要一个浏览器就能浏览网页
文件,适合推广使用。
3.1.2 一个简单的HTML实例
在学习HTML前,先来看一个简单的用HTML编写的实例。
【例3-1】 用HTML制作一个简单的网页,显示效果如图3-1所示。
图3-1 一个简单的网页
(1)用任何文本编辑器(Windows的记事本、写字板等)输入下列文本。
<html>
<head>
<title>一个简单的HTML 示例</title>
</head>
<body text="#0000FF">
<center>
网页设计与制作教程(第4版)
52
<font size="7">题西林壁</font>
<p><font size="5">(宋)苏轼</font></p>
<p><font size="6">横看成岭侧成峰,</font></p>
<p><font size="6">远近高低各不同。</font></p>
<p><font size="6">不识庐山真面目,</font></p>
<p><font size="6">只缘身在此山中。</font></p>
</center>
</body>
</html>
(2)保存为example3-1.html文件。
(3)双击该文件就会看到如图3-1所示的效果。
3.1.3 HTML的基本概念
要了解HTML,先要熟悉HTML中的一些基本概念。
1.标记
在HTML中,用于描述功能的符号称为标记,它用来控制文字、图像等显示方式,例如
例3-1代码中的html、head、body等。HTML 标记由一对尖括号“< >”和标记名组成。
XHTML标准中规定,标记名必须用小写字母。标记有单标记和双标记之分。
1)单标记
单标记是指只需单独使用就能完整地表达意思的标记。这类标记的语法是:<标记名>。
最常用的单标记为<br>,表示换行。XHTML标准规定单标记也必须封闭,即在单标记名后
以斜杠作为结束,这时换行标记必须写成:<br/>。
2)双标记
双标记是指由“始标记”和“尾标记”两部分构成且必须成对使用的标记。其中,始标记
告诉Web浏览器从此处开始执行该标记表示的功能,而尾标记告诉Web浏览器到这里结
束该功能。始标记前加一个斜杠“/”即为尾标记。双标记的语法是:<标记名>受标记影响
的内容</标记名>。例如想突出对某段文字的显示,可以将此段文字放在<em></em>这
对标记中间,写为:<em>第一</em>。
2.标记属性
许多单标记和双标记的始标记内可以包含一些属性,标记通过属性实现各种效果,其语
法是:<标记名属性1属性2属性3… >,属性名建议用小写字母表示,各属性之间无先
后次序,属性也可省略(取系统默认值),属性值要用双引号括起来。例如单标记<hr/>表
示在文档当前位置画一条水平线,一般是从窗口中当前行的最左端一直画到最右端,它可以
带有一些属性:<hrsize="3" align="left"width="75%"/>。其中,size属性定义线
的粗细,属性值取整数,默认值为1;align属性表示对齐方式,可取left(左对齐,默认值)、
center(居中)、right(右对齐);width属性定义线的长度,可取相对值(由一对“”号括起来的
百分数,表示相对于整个窗口的百分比),也可取绝对值(用整数表示的屏幕像素点的个数,
如width="300"),默认值是100%。
第3章 HTML基础知识
53
3.1.4 HTML文档的基本结构
HTML5文档是一种纯文本格式的文件,文档的基本结构如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>文档标题</title>
</head>
<body>
网页内容
</body>
</html>
HTML网页文件的基本结构主要包含以下几种标记。
1.文档类型标记
在编写HTML5文档时,要求指定文档类型,用于向浏览器说明当前文档使用的是哪
种HTML 标准。文档类型声明的格式为:<!DOCTYPE html>,该行代码称为
DOCTYPE(documendtype,文档类型)声明。要建立符合标准的网页,DOCTYPE声明必
不可少,且必须放在每个HTML文档的顶部,在所有标记之前。
2.html文件标记
<html>…</html>标记放在网页文档的最外层,用来告诉浏览器HTML文档的开始
和结束位置,其中包括head和body两大部分,中间嵌套其他标记。HTML文档中所有的内容
都应该在这两个标记之间,一个HTML文档总是以<html>开始,以</html>结束。
3.head文件头部标记
HTML文件的头部用<head>…</head>标记,头部主要提供文档的描述信息,head
部分的所有内容都不会显示在浏览器窗口中,主要用来说明文件的有关信息,如文件标题、
作者、编写时间、搜索引擎可用的关键词、链接的其他脚本或样式文件等。
在head标记内,最常用的标记有文档编码标记meta和网页标题标记title。
(1)meta的格式为:<metacharset="gb2312">。所有HTML文档都必须声明它们
使用的编码语言,并且与实际的编码一致,否则就会变成乱码,对于中文网页的设计者来讲,
一般使用gb2312(简体中文)。
(2)title的格式为:<title>网页标题</title>。网页标题是提示网页内容和功能的
文字,它出现在浏览器的标题栏中,一个网页只能有一个标题,并且只能出现在文件的头部。
4.body文件主体标记
HTML文件的主体用<body>…</body>标记,它是HTML文档的主体部分,网页
正文中的所有内容,包括文字、表格、图像、声音和动画等都包含在这对标记对之间,其格式
为:<bodybackground="image-url"bgcolor="color"text="color"link="color"alink=
"color"vlink="color"leftmargin="value"topmargin="value">…</body>。
其中,各属性的含义如下。
网页设计与制作教程(第4版)
(1)background:设置网页背景图像。
(2)image-url:设置图像文件的路径。
(3)bgcolor:设置网页的背景颜色,默认为白色。
(4)text:设置非链接文字的色彩,默认为黑色。
(5)link:设置尚未被访问过的超文本链接的色彩。
(6)alink:设置超文本链接在被访问瞬间即被选中时的色彩。
(7)vlink:设置已被访问过的超文本链接的色彩。
(8)leftmargin:设置页面左边距,即内容和浏览器左部边框之间的距离。
(9)topmargin:设置页面上边距,即内容和浏览器上部边框之间的距离。
(10)value:表示空白量,可以是数值,也可以是相对页面窗口宽度和高度的百分比。
(11)color:表示颜色值。颜色值可以用颜色的英文名表示;也可以用“#”加红绿蓝
(RGB)三基色混合的6位十六进制数(#RRGGBB)表示,每个基色的最低值是0(十六进制
是#00),最大值是255(十六进制是#FF )。常用颜色的中英文名称及RGB十六进制值如
表3-1所示。
表3-
1
常用颜色的中英文名称及RGB十六进制值
色彩名称色彩英文名十六进制代码色彩名称色彩英文名十六进制代码
纯白White #FFFFFF 棕色Brown #A52A2A
纯黑Black #000000 金色Gold #FFD700
灰色Gray #808080 纯绿Gren #008000
银灰色Silver #C0C0C0 橄榄Olive #808000
纯红Red #FF0000 青色Cyan #00FFFF
粉红Pink #FFC0CB 纯蓝Blue #0000FF
深红Crimson #DC143C 海军蓝Navy #000080
橙色Orange #FFA500 紫色Purple #800080
纯黄Yelow #FFFF00 栗色Maroon #800000
3.5
HTML的基本语法规则
1.
HTML代码的书写必须遵循以下语法规则。
(1)HTML文件虽然是一个文本文件,但它的后缀名是html,而不是文本文件的后缀
名txt。
(2)HTML文件中的每个标记都要用“<”和“>”括起来,如<p>,表示这是HTML
代码,而不是普通文本,注意:“<”和“>”与标记名之间不能留有空格或其他字符。
(3)参照XHTML规则,标记名和属性名建议都用小写字母,属性值必须用双引号括
起来,所有标记(包括单标记)必须封闭,如<br/>、<img/>、<p>…</p>等。
(4)多数HTML标记可以嵌套,但不可以交叉。例如:<p><fontcolor="#
000000"face="方正粗圆简体,方正黑体">网页设计与制作教程</p></font>将不能
正确显示。
(5)HTML文件的一行可以写多个标记,一个标记及其属性也可以分多行写,不需要
54
第3章 HTML基础知识
55
任何续行符号,但标记中的一个单词不能分两行写。
<fo
nt color="# 000000" face="楷体-GB2312">网页设计与制作教程</font>
是不正确的。
(6)HTML源文件中的换行、回车符和空格等硬操作在显示效果中是无效的,要用标
记或符号码(3.2.10节介绍)实现。
3.2 HTML的文本格式标记
在<body>…</body>标记对之间直接输入的文字可以显示在浏览器窗口中,但是
要制作出实用美观的网页,还需要对输入的文字进行修饰。
3.2.1 标题标记
功能:用加强的效果制作标题。标题是一段文字内容的核心,HTML还会自动在标题
前后添加一个额外的换行。
格式:<hnalign="left|center|right">标题文字</hn>。
属性:n表示标题字号的级别,可以是1~6的任意整数,<h1>定义最大的标题,<h6>
定义最小的标题;align用来设置标题在页面中的对齐方式,取值包括left(左对齐)、center
(居中对齐)和right(右对齐),默认为left。
【例3-2】 标题标记的应用。
<html>
<head>
<title>标题标记示例</title>
</head>
<body>
<center>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</center>
</body>
</html>
浏览器中的显示效果如图3-2所示。
3.2.2 字体标记
功能:设置网页中文字的字体、字号或颜色。
网页设计与制作教程(第4版)
56
图3-2 标题的效果
格式:<fontface="字体" size="数字" color="颜色">文字</font>。
属性:face用来设置字体,如黑体、宋体、楷体等;size用来设置文字的大小,数字的取值
范围为1~7的整数,size取1时字号最小;color用来设置文字的颜色,默认为黑色。
注意:<font>被W3C列为不建议使用的标记,可以用后面所学的CSS设定字体。
【例3-3】 字体标记的应用。
<html>
<head>
<title>字体标记示例</title>
</head>
<body>
<p><font face="楷体_GB2312">欢迎光临</font></p>
<p><font face="宋体">欢迎光临</font></p>
<p><font face="黑体">欢迎光临</font></p>
<p><font face="Times New Roman">Welcome to my homepage! </font></p>
<p><font face="Arial Black">Welcome to my homepage! </font></p>
</body>
</html>
图3-3 设置文字字体后的效果
浏览器中的显示效果如图3-3所示。
3.2.3 文本修饰标记
功能:给文本增添一些特殊效果,如黑体、斜体、下画
线等,这是一组标记,它们可以单独使用,也可以混合使用,
以产生复合的修饰效果。常用的文本修饰标记如下。
<b>…</b>:文字加粗。
<i>…</i>:文字倾斜。
<u>…</u>:给文字添加下画线。
<strike>…</strike>:删除线。
第3章 HTML基础知识
57
<sup>…</sup>:使文字成为前一个字符的上标。
<sub>…</sub>:使文字成为前一个字符的下标。
<em>…</em>:强调文字,通常是斜体。
<strong>…</strong>:特别强调的文字,通常是加粗显示。
【例3-4】 文本修饰标记的应用。
<html>
<head>
<title>文本修饰标记示例</title>
</head>
<body>
<p><b>这是一行粗体</b></p>
<p><i>这是一行斜体</i></p>
<p><u>这一行有下画线</u></p>
<p><strong>这时要强调的文字</strong></p>
<p><b><i><u>粗斜体并有下画线</u></i></b></p>
<p>2<sup>4</sup>=16</p>
<p>水的化学符号是H<sub>2</sub>O</p>
</body>
</html>
图3-4 文本修饰后的效果
浏览器中的显示效果如图3-4所示。
3.2.4 段落标记
功能:由于浏览器在解释HTML 文档时会忽略用户在
HTML编辑器中输入的回车符,所以在文档中输入回车并不能
在浏览器中看到一个新的段落,当需要在网页中插入新的段落
时,必须使用段落标记,它会在段落的前后加上额外的空行,不
同段落间的距离等于连续加了两个换行标记<br/>。
格式:<palign="left|center|right">…</p>。
属性:align取值可以为left(左对齐)、center(居中对齐)和
right(右对齐),默认为left。
3.2.5 强制换行标记
功能:强行另起一行显示该标记后面的网页元素。
格式:<br/>
说明:这是一个单标记,在显示效果上与段落标记都是另起一行书写,但它们的不同之
处是段落标记的行距相当于两个<br/>标记的效果。
【例3-5】 段落标记和强制换行标记的应用。
<html>
<head>
<title>段落标记和强制换行标记示例</title>
网页设计与制作教程(第4版)
58
</head>
<body>
<h3>南昌大学</h3>
<p>联系地址: 江西省南昌市红谷滩区学府大道999 号</p>
邮政编码: 330031<br/><br/> <!--两个强制换行标记相当于一个段落标记-->
值班电话: 0791-83969099<br/>
传真号码: 0791-83969069<br/>
</body>
</html>
浏览器中的显示效果如图3-5所示。
图3-5 设置段落标记和强制换行标记后的效果
3.2.6 水平线标记
功能:在网页中插入一条水平线,用于页面内容上的分割。
格式:<hr width="value1"size="value2"align="value3"color="color1"
noshade/>。
属性:width用来设置水平线的长度,value1可以是绝对值(长度固定不变,以像素为单
位)或相对值(相对于当前窗口的百分比,当窗口宽度改变时,水平线的长度也随之增减,默认
值为100%);size用来设置水平线的粗细,以像素为单位;align用来设置水平线的对齐方式,
value3的值可以是left、center、right,默认是center;color用来设置水平线的颜色,颜色的取值
可以是颜色的英文名称或十六进制RGB颜色码;noshade用来设置水平线是否有阴影效果。
3.2.7 缩排标记
功能:将标记之间的文本从常规文本中分离出来,以左右两边缩进的方式显示。
格式:<blockquote>文本</blockquote>。
说明:浏览器会自动在<blockquote>标记前后添加换行,并增加外边距。
【例3-6】 缩排标记的应用。
<html>
<head>
<title>缩排标记示例</title>
第3章 HTML基础知识
59
</head>
<body>
南昌大学是国家“双一流”计划世界一流学科建设高校,它的校训是:
<blockquote>格物致新 厚德泽人</blockquote>
“格物致新”意在告知师生要追求真理、人文日新;“厚德泽人”就是说我们自己的一切能力不仅是为
自身的发展,更为服务于整个人类社会的进步与幸福。
</body>
</html>
浏览器中的显示效果如图3-6所示。
图3-6 缩排后的效果
3.2.8 滚动效果标记
功能:将文本、图片等设置为动态滚动的效果。
格式:<marqueebehavior="value"bgcolor="color"direction="value"height="
value"width ="value"loop ="value"scrollamount="value"scrolldelay ="value"
hspace="value"vspace="value">文本</marquee>。
属性如下。
(1)behavior:设置文本滚动方式。共有3 种滚动方式可供选择:当behavior =
"alternate"时,文本将来回交替滚动;当behavior="scroll"时,文本将循环滚动;当behavior=
"slide"时,文本只滚动一次就停止。
(2)bgcolor:为滚动文本添加背景颜色。
(3)direction:设置文本的滚动方向,value的取值可以为up、down、left和right,分别
表示文本向上、向下、向左和向右滚动。
(4)height和width:设置文本滚动背景的面积,取值为像素或相对于窗口的百分比。
(5)loop:设置文本的滚动次数,默认值为-1,表示无限次不断滚动。
(6)scrollamount:设置文本的滚动速度,数值越大,速度越快。
(7)scrolldelay:设置在不断滚动的间隙产生一段时间的延迟,数值越大,延迟越长。
(8)hspace和vspace:设置文本滚动的水平方向和垂直方向的空白空间。
【例3-7】 滚动效果标记的应用。
<html>
<head>
网页设计与制作教程(第4版)
60
<title>滚动效果标记示例</title>
</head>
<body>
<marquee bgcolor="blue" behavior="alternate" direction="left" scrollamount=
"10" scrolldelay="100"><font color="white"><b>欢迎使用杨选辉编著的新书: < < 网页
设计与制作教程>>(第4 版)</b></font></marquee>
</body>
</html>
浏览器中的显示效果如图3-7所示。
图3-7 文本滚动的效果
3.2.9 注释标记
功能:给HTML文档添加注释。
格式:<!--注释内容-->。
说明:和其他计算机语言一样,HTML也提供了注释语句。“<!--”表示注释开始,“-->”
表示注释结束,中间的内容表示注释文,注释语句可以放在HTML文档的任何地方,但注
释内容在浏览器中是不显示的,仅供设计人员在HTML编辑器中阅读。通过在HTML文
档中添加注释可以增加代码的可读性,便于以后的维护和修改。
3.2.10 特殊符号
由于“>”“<”等已被HTML用作语法符号,因此如果要想在页面中使用这些特殊符
号原本的含义,就必须使用相应的HTML符号码表示。这些符号码通常由前缀“&”加上
字符对应的名称,再加上后缀“;”组成。常见的特殊符号及对应的符号码如表3-2所示。
表3-2 常见的特殊符号及对应的符号码
特殊符号符号码
空格
引号(") "
特殊符号符号码
大于(>) >
小于(<) <
特殊符号符号码
版权号(..) ©
注册商标(..) ®
【例3-8】 特殊符号的应用。
<html>
<head>
<title>特殊符号应用示例</title>
第3章 HTML基础知识
61
</head>
<body>
<hr>
<p align="center"> Copyright©2022 Sohu All Rights Reserved. 搜狐公司
版权所有</p>
</body>
</html>
浏览器中的显示效果如图3-8所示。
图3-8 特殊符号的效果
3.2.11 列表标记
分段排列出的一组级别相同的项目称为列表,写品种说明书、对名词进行解释时经常会
用到列表,通过使用列表标记,能使这些内容在网页中条理清晰、层次分明地显示出来。
HTML中的列表主要分为无序列表、有序列表和定义列表三种形式。
1.无序列表
无序列表是指列表中的各个元素在逻辑上没有先后顺序的列表形式。在无序列表中,
各个列表项之间没有顺序级别之分,它通常使用一个项目符号,如黑点、圆圈、方框等,作为
每个列表项的前缀。
功能:设置无序列表。
格式:
<ul type=“加重符号类型”>
<li type=“加重符号类型”>列表项目1</li>
<li type=“加重符号类型”>列表项目2</li>
…<
/ul>
属性:<ul>标记表示一个无序列表的开始,<li>标记表示一个无序列表项。type属
性表示在每个项目前显示加重符号的类型,共有3种选择:当type="disc"时,列表符号为
“●”(实心圆点);当type="circle"时,列表符号为“○”(空心圆点);当type="square"时,
列表符号为“■”(实心方块)。<ul>和<li>标记都可以定义type参数,因此一个列表中
的不同的列表项目可以使用不同的列表符号,但一般情况下不建议这样设置。
2.有序列表
有序列表使用编号,而不是项目符号编排项目。有序列表中的项目采用数字或英文字
母作为序号,通常各项目间有先后顺序。
功能:设置有序列表。
网页设计与制作教程(第4版)
62
格式:
<ol type="序号类型" start=“起始号码”>
<li type="序号类型">列表项目1</li>
<li type="序号类型">列表项目2</li>
…<
/ol>
属性:使用<ol>标记建立有序列表,用<li>标记列出表项。type属性表示每个项目
前显示的序号类型,其值可以为1(阿拉伯数字)、A(大写英文字母)、a(小写英文字母)、I(大
写罗马字母)、i(小写罗马字母)。start用于设置编号的开始值,默认值为1,<li>标记用于
设定该条目的编号,其后的条目将以此作为起始数逐渐递增。
【例3-9】 无序列表和有序列表标记的应用对比。
<html>
<head>
<title>无序列表和有序列表标记示例</title>
</head>
<body text="blue">
<ul>
<p>中国城市</p>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<ol>
<p>美国城市</p>
<li>华盛顿</li>
<li>芝加哥</li>
<li>纽约</li>
</ol>
</body>
</html>
浏览器中的显示效果如图3-9所示。
图3-9 设置无序列表和有序列表的效果
第3章 HTML基础知识
63
3.定义列表
定义列表又称释义列表或字典列表,定义列表不是带有项目符号或编号的列项目,而是
一列文本以及与其相关的解释。
功能:用于需要对列表条目进行简短说明的场合。
格式:
<dl>
<dt>列表条目1</dt>
<dd>条目1 的说明</dd>
<dt>列表条目2</dt>
<dd>条目2 的说明</dd>
…<
/dl>
属性:用<dl>标记开始定义列表,用<dt>标记定义的列表条目内容将左对齐,用
<dd>标记定义的条目说明文字将自动向右缩进。
【例3-10】 定义列表标记的应用。
<html>
<head>
<title>定义列表标记示例</title>
</head>
<body>
常用的网络论坛用语:
<dl>
<dt>菜鸟</dt>
<dd>菜鸟: 原指计算机水平比较低的人,后来广泛运用于现实生活中,指在某领域不太拿手的人。
与之相对的就是老鸟。</dd>
<dt>大虾</dt>
<dd>大虾: 指网龄比较长的资深网虫,或者某一方面(如计算机技术或文章水平)特别高超的人
</dd>
</dl>
</body>
</html>
浏览器中的显示效果如图3-10所示。
图3-10 定义列表的效果
网页设计与制作教程(第4版)
64
3.3 HTML的图像与多媒体标记
在网页中加入图像和多媒体元素可以使网页更加丰富多彩和生动活泼。
3.3.1 图像标记
图像具有直观和美化的作用,是网页设计中必不可少的元素,它既是文字表达的有力补
充,又是网页美化装饰中最具渲染力的元素。在网页中插入图像可以使网页丰富多彩,更显
生动。
1.常用的图像格式
图像文件的格式有很多,但适合在网页中使用的图片格式并不多,主要有GIF、JPEG
和PNG三种,下面简单介绍它们的特点。
(1)GIF(GraphicInterchangeFormat)。GIF是Internet上应用广泛的图像文件格式
之一,它的最大特点是可以制作动态图像,即可以将数张静态图像作为动画帧串联起来,转
换成一个动画文件;GIF的另一个优点是可以将图像以交错的方式在网页中呈现,即当图像
尚未下载完成时,浏览器会先以马赛克的形式将图像慢慢显示,让浏览者可以大致看出下载
图像的雏形。GIF图像最多可以使用256种颜色,最适合显示色调不连续或具有大面积单
一颜色的图像,例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
(2)JPEG(JointPhotographicExpertsGroup)。JPEG 也是Internet上应用广泛的图
像文件格式之一,适用于摄影或色调连续的图像。JPEG 文件可以包含数百万种颜色,因此
JPEG格式的文件体积较大,但图片质量较佳,通常可以通过压缩JPEG 文件在图像品质和
文件大小之间达到良好的平衡,当网页对图片的质量有要求时,建议使用该格式。JPEG 是
一种压缩得非常紧凑的格式,专门用于不含大色块的图像,不支持透明图和动态图,但它能
够保留全真的色调板格式,如果图像需要全彩模式才能表现出效果,JPEG 就是最佳的
选择。
(3)PNG(PortableNetworkGraphics)。PNG是一种非破坏性的、无专利权限的网页
图像文件格式,兼有GIF和JPEG 的优点,它提供将图像文件以最小的方式压缩却又不造
成图像失真的技术,它的显示速度很快,只需要下载1/64的图像信息就可以显示出低分辨
率的预览图像。它可以用来替代GIF格式,同样支持透明层,而且支持48位的色彩,在质
量和体积方面都具有优势,适合在网络中传输。
2.图像标记
功能:在当前位置插入图像。
格式:
<img src="图像文件的地址" alt="替代文字" title="说明文字"width="图像宽度" height
="图像高度" border="边框宽度" hspace="水平空白" vspace="垂直空白" align="对齐方
式"/>。
属性如下。
(1)src:设置要加入的图像的URL路径,图像格式通常为GIF、JPEG或PNG。
第3章HTML基础知识
(2)alt:设置图像无法显示时的替代文字
。
(3)title:光标停留在图像上时显示的说明文字,能为用户提供图像的说明信息,在
无
法看到图像时也可以了解图像的内容信息
。
(4)width、height:设置图像的宽度或高度,可以是绝对值(像素)或相对值(百分比)。
一旦设定了图像的宽度和高度,图像将按设定尺寸显示,与图像的真实大小无关。但宽度和
高度一般设为图像的真实大小,以免失真;若需要改变图像的大小,最好事先使用图像编辑
工具进行修改。
(5)border:设置图像的边框大小,用数字表示,默认单位为像素;默认情况下,图像没
有边框,即border="0"。
(6)hspace、vspace:设置水平方向或垂直方向的空白像素数,即图像左右或上下留多
少空白。
(7)align:设置图像在页面中的位置。设定图像在水平方向或垂直方向的位置,包括
left(在水平方向上左对齐)、center(在水平方向上居中对齐)、right(在水平方向上右对齐)、
top(图片顶部与同行其他网页元素顶部对齐)、middle(图片中部与同行其他网页元素中部
对齐)和botom(图片底部与同行其他网页元素底部对齐)。
说明:<img>标记并不是真正地把图像加入HTML文档,而是给标记对内的src属
性赋值,这个值是包括路径的图像文件的文件名,实际上是通过路径将图像文件调用到
HTML文档中显示。路径在网页中是一个很重要的概念,路径分为绝对路径和相对路径。
①绝对路径是指文件在硬盘上真正存在的路径,经常表现为以盘符为出发点的路径。
例如“E:\网页设计与制作教程\第2章\imagejpg”就是一个绝对路径, jpg
\bg.它表示bg.
这个图片存放在硬盘的“E:\网页设计与制作教程\第2章\image”目录中。在进行网页编
程时,很少使用绝对路径,如果使用“E:\网页设计与制作教程\第2章\imag\bg.指(”) 定
ejpg
背景图片的位置,在自己的计算机上浏览可能一切正常,但是换一台计算机或者上传到
Web服务器上浏览就可能不会显示图片了。因为别的计算机和Web服务器上也许没有E
盘,即使有E盘,E盘里也不一定会存在“E:\网页设计与制作教程\第2章\image这(”) 个目
录,因此在浏览网页时是不会显示图片的。
还有一种情况是要调用显示的图片是网络上的,这时必须采用完整的URL指定图片
文件在inent上的精确地址, mgsc“h//www.ufdo.e/ioo.
jpgtre例如<ir=
tp:xeuantmg/pht”>也是绝对路径,这种方式也不好,因为这张其他网站中的图片一旦被删除了,那样的
话网页也无法显示这张图片。
②相对路径是指要链接或嵌入当前HTML文档的文件与当前文件的相对位置形成的
路径,设置图像文件地址时应尽量使用相对路径,以避免图片丢失。假如一个HTML文件
调用文件名为loo.i根据HTML文件与图像文件的目录关系,
ggf的图像文件, 可分为以下4
种情况:
.假如HTML文件与图像文件在同一个目录中,则<img>的代码应写成<imgsrc
="oo.i">。
lggf
.假如图像文件放在当前HTML文件所在目录的一个子目录(子目录名假设是
gggg
imaes)中,则<img>的代码应写成<imgsrc="imaes/loo.if">。
.假如图像文件放在当前HTML文件所在目录的上层目录中,则需要在图像文件名
65
网页设计与制作教程(第4版)
66
前添加“../”,因为“./”表示本级目录,“../”表示上级目录,“../../”表示上上级目录,
以此类推,这时代码应写成<imgsrc="../logo.gif">。
. 假如图像文件放在当前HTML文件所在目录的上层目录的其他子目录(假设放在
一个叫作home的子目录)中,这时代码应写成<imgsrc="../home/logo.gif">。
【例3-11】 图像标记的应用。
<html>
<head>
<title>图像标记示例</title>
</head>
<body>
<p align=" center" > < img src =" images/ysh. jpg" alt =" 有儿初长大" width =" 250"
height="300"/></p>
</body>
</html>
图3-11 插入图像的效果
浏览器中的显示效果如图3-11所示。
3.图文混排
图文混排是指设置图像与同一行中的文本、图像、插件
或其他网页元素的对齐方式。制作网页时往往需要在网页
中的某个位置插入一幅图像,并使文本环绕在图像的周围。
<img>标记的align属性用来指定图像与周围元素的对齐
方式,以实现图文混排效果,其取值包括left(图像居左,文本
在图像的右边)、center(图像居中,文本在图像的左右)、right
(图像居右,文本在图像的左边)、top(文本与图像在顶部对
齐)、middle(文本与图像在中央对齐)或bottom(文本与图像
在底部对齐)。
【例3-12】 图文混排的应用。
<html>
<head>
<title>图文混排示例</title>
</head>
<body bgcolor="#FFFFCC">
<h2 align="center">适合团队玩的小游戏</h2>
<p><img src="images/1.jpg" width="200" height="150" align="left" border="0"/>
<strong>搭桥过河</strong></p>
竞赛方法: 每队派6 人上场(3 男3 女),赛道30 米长,两头各一组,每组分三人自
由组合,起点组手持四块小地毯(报纸或者毛巾布等),由第一名队员向前搭放小地毯,第三个队员
不断地把身后的小地毯传给第一个队员,要求脚不能触地,三人踩着小地毯前进30 米后,另一组将
接过小地毯以同样的方式往回走,最先到达起点队为胜。按时间记名次。<br/>
第3章 HTML基础知识
67
竞赛规则: (1)参赛队队员在起点线外准备。待一组队员全部到达终点时另一组才
能开始接力。(2)比赛过程中只要有脚触地的情况,均视为犯规,触地一次加时30 秒。<br/>
<hr size="5" color="blue"/>
<p > < img src =" images/2. jpg" width =" 250" height =" 150" align =" right"
border="0"/><strong>链接加速</strong></p>
竞赛方法: 参加游戏者4 人一组,后边的人左手抬起前边人的左腿,右手搭在前边
人的右肩形成小火车,最后一名同学也要单脚跳步前进,不能双脚着地。场地上画好起跑线和终点
线,其距离为30 米,游戏开始时,各队从起跑线出发,跳步前进,绕过障碍物回到起点,最先到达起
点的为胜。按时间记名次。<br/>
竞赛规则: (1)游戏过程中队员必须跳步前进,不允许松手(一直保持抬起前边的
人的左腿),以防止出现断裂现象,队伍断裂必须重新组织好,从起点重新开始游戏。如果不重新组
织,继续前进,则成绩视为无效,记为0 分;(2)以各队最后一名同学通过终点线为准;(3)比赛过程
中,参赛队必须在规定的赛道进行比赛,不许乱道,犯规一次扣时2 秒,依次累加。<br/>
</body>
</html>
在浏览器中显示的效果如图3-12所示。
图3-12 图文混排的效果
3.3.2 声音和视频标记
1.声音标记
功能:在网页中播放音乐,是HTML5中的新属性。
格式:<audiosrc="音乐文件的地址"controls="controls"autoplay="autoplay"
loop="loop">。
属性如下。
网页设计与制作教程(第4版)
(1)src:设置音乐文件所在的路径,音乐文件格式可以为mp3、ogg 等。
(2)controls:如果出现controls="controls(") ,则向用户显示控件,比如播放按钮。
(3)autoplay:如果出现autoplay="autoplay",则音频在就绪后马上播放。
(4)loop:如果出现loop="loop,(") 则每当音频结束时就重新开始播放。
2.
视频标记
功能:在网页中播放视频,是HTML5 中的新属性
。
格式:<videosrc="视频文件的地址"poster="图片的地址"height="value"width=
"value"controls="controls"autoplay="autoplay"loop="loop">。
属性如下。
(1)src:设置要播放的视频文件所在的路径,视频文件格式可以为mp4、ogg 等。
(2)post:用于指定一张图片的URL,在当前视频无效时显示。
(3)height和width:设置视频播放器的高度和宽度,取值为像素数。
(4)controls:如果出现controls="controls(") ,则向用户显示控件,比如播放按钮。
(5)autoplay:如果出现autoplay="autoplay",则视频在就绪后马上播放。
(6)loop:如果出现loop="loop,(") 则当媒介文件完成播放后再次播放。
3.3
多媒体标记
3.
功能:在页面中放置音乐、动画、视频等多媒体元素
。
格式:<embedsrc="多媒体文件的URL 地址"height="value"width="value"
hidden="true|false"autostart="true|false"loop="true|false"></embed>
属性如下。
(1)src:设置多媒体文件所在的路径,可以插入的多媒体文件格式包括swf、mp3、
mpeg和avi等。
(2)height和width:设置多媒体播放的区域,取值为像素数。
(3)hidden:控制播放面板的显示和隐藏。当hidden="true"时,隐藏面板;当hidden=
"false(") 时,显示面板。
(4)autostart:控制多媒体内容是否自动播放。当autostart="true"时,自动播放。
(5)loop:控制多媒体内容的循环播放次数。当loop="true"时,可循环播放无限次;
当lop=fle时, fale为默认值。
o"as" 只播放一次,s
4
HTML
的超链接标记
3.
超链接是网页中重要的元素之一,网站是由多个页面组成的,页面之间依靠超链接确定
相互的导航关系,超链接使得网页的浏览变得非常方便。
功能:建立超链接。
格式:<ahref="file-url"target="value">承载超链接的文本或图像等元素</a>
属性如下。
(1)href:设置要链接的目标的URL 地址,可用“#”代替file-url,表示创建一个不链接
到其他位置的空超链接。
68
第3章 HTML基础知识
69
(2)target:设置链接目标的打开方式,有以下4种方式:
当target="_self"时,表示在原窗口或框架打开被链接的文档,这是target属性的默认
值;当target="_blank"时,表示在新窗口打开被链接的文档;当target="_parent"时,表示
将被链接的文件载入父框架打开,如果包含的链接不是嵌套框架,则被链接的文档将载入整
个浏览器窗口中打开;当target="_top"时,表示将被链接的文件载入整个浏览器窗口中打
开,并删除所有框架。"_parent"、"_top"仅在网页被嵌入其他网页中有效,如框架中的网页,
所以这两种取值用得很少。
【例3-13】 超链接标记的应用。
<html>
<head>
<title>超链接标记示例</title>
</head>
<body>
<center>
<h1>我常访问的网站</h1>
<p><a href="http://www.tup.tsinghua.edu.cn">清华大学出版社</a></p>
<p><a href="https://www.sohu.com/" target="_self">搜狐</a></p>
<p><a href="https://www.taobao.com/" target="_blank">淘宝网</a></p>
<p><a href="#">钓鱼之家</a></p>
</center>
</body>
</html>
浏览器中的显示效果如图3-13所示。
图3-13 运用超链接的效果
3.5 HTML的表格标记
表格是由行和列组成的二维表,它可以将文本和图像按一定的行和列规则进行排列,使
网页结构紧凑整齐,使网页内容的显示一目了然。表格内的格子称为单元格,它是组成表格
的最基本单元,可以放置文本、图片、动画等各种网页元素。表格除了用来显示数据外,还可