HTML CSS JavaScript 网页制作从入门到精通 第3版

978-7-115-42505-8
作者: 刘西杰
译者:
编辑: 赵轩

图书目录:

详情

全书共分为18章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作。为了便于读者学习,附录中汇集了经过作者精心整理的网页制作技巧60多例。 

图书摘要

版权信息

书名:HTML CSS JavaScript 网页制作从入门到精通 第3版

ISBN:978-7-115-42505-8

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。

• 著    刘西杰  张 婷

  责任编辑 赵 轩

• 人民邮电出版社出版发行  北京市丰台区成寿寺路11号

  邮编 100164  电子邮件 315@ptpress.com.cn

  网址 http://www.ptpress.com.cn

• 读者服务热线:(010)81055410

  反盗版热线:(010)81055315


全书共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及制作基于JavaScript语言的网页特效,此外还介绍了最新的HTML 5和CSS 3知识。为了便于读者学习,附录中汇集了作者精心整理的60多例网页制作技巧。

本书语言简洁、内容丰富,适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员、个人网站爱好者阅读。


十多年前,Internet在国内开始流行。其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注。由于当时网速的限制,网页主要承载文本、图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页。而今天,Internet领域已经改变了太多,在软件上点几下、拖几下即可完成整个网站的方法已经完全不适用了。现在的网页制作领域综合了多种技术,新一批的初学者该怎样学习网页制作?目前大部分制作网页的方式都是运用可视化的网页编辑软件,这些软件的功能相当强大,使用非常方便。但是对于高级的网页制作人员来讲,仍需掌握HTML、CSS、JavaScript等网页设计语言和技术,这样才能充分发挥自己丰富的想象力,更加随心所欲地设计符合标准的网页,以实现网页设计软件不能实现的许多重要功能。本书的第1版在2007年出版后,销售在同类书籍中一直名列前茅,重印十余次。2012改版后,首印上市后一周就销售一空,4年来重印20多次,当当网络书店评论超过8000条。这次改版重点增加了HTML 5、CSS 3方面的内容。

从技术的角度根据最新的HTML 5和CSS 3标准进行了更新和补充。

本书从网页制作的实际角度出发,将所有HTML、CSS和JavaScript元素进行归类。每个标记的语法、属性和参数都有完整详细的说明。信息量大,知识结构完善。

全部语法采用真实案例进行分析讲解,每一个知识点均相应配以一个实例。边分析代码,边查看结果,以一种可视化的方式来学习语言,避免了单纯学习语法的枯燥与乏味。

考虑到许多学习者在实际设计网页时都是使用Dreamweaver作为设计工具,而不是手工编写脚本,所以本书给出了Dreamweaver的基本用法,在最后一个附录中向读者展示了如何在Dreamweaver中实现前面讲解的大部分功能。

本书采用技巧与解答相结合的方式,将使用HTML、CSS、JavaScript和Dreamweaver在设计和制作网页过程中遇到的各种疑难问题进行了归纳。

本书是集体努力的结晶,许多从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师,他们为本书提供了许多实用的见解。由于时间所限,书中疏漏之处在所难免,恳请广大读者朋友批评指正。

编者


在当今社会中,网络已成为人们生活的一部分,网页设计技术是学习计算机的重要内容之一。目前许多网页都采用可视化网页编辑软件来制作的,但是无论采用哪一种网页编辑软件,最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言,如果不了解HTML,就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法,以及浏览HTML文件的方法,使读者对HTML有个初步的了解,从而为后面的学习打下基础。

学习目标

HTML的英文全称是Hyper Text Markup Language,即网页超文本标记语言,也是全球广域网上描述网页内容和外观的标准。

HTML作为一款标记语言,本身不能显示在浏览器中。经过浏览器的解释和编译,才能正确地反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化,从单一的文本显示功能到多功能互动,经过多年的完善,已经成为了一款非常成熟的标记语言。

HTML不是一款编程语言,而是一款描述性的标记语言,用于描述超文本中内容的显示方式。如文字以什么颜色、大小来显示等,这些都是利用HTML标记完成的。其最基本的语法就是:<标记符>内容</标记符>。标记符通常都是成对使用,有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。

如在HTML中用<I></I>标记符来定义文字为斜体,用<B></B>标记符来定义文字为粗体。当浏览器遇到<I></I>标记时,就会把<I></I>标记中的所有文字以斜体样式显示出来。遇到<B></B>标记时,就会把<B></B>标记中的所有文字以粗体样式显示出来。

完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象,这些对象统称为HTML元素。一个HTML文件的基本结构如下。

<!doctype html>
<html>文件开始标记文件头开始的标记
……文件头的内容
</head>文件头结束的标记
<body>文件主体开始的标记
……文件主体的内容
</body>文件主体结束的标记
</html>文件结束标记

从上面的代码可以看出,在HTML文件中,所有的标记都是成对的,开头标记为<>,结束标记为</>,在这两个标记中间添加内容。

HTML是超文本标记语言,主要通过各种标记来标示和排列各对象,通常由尖括号“<”“>”和其中所包含的标记元素组成。

在HTML中,所有的标记都是成对出现的,而结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套,也可以放置各种属性。此外,在源文件中标记是不区分大小写的。

HTML定义了以下4种标记,用于描述页面的整体结构。

HTML文件的编写方法有两种:一种是利用记事本编写;另一种是在Dreamweaver中编写HTML代码。

HTML是一款以文字为基础的语言,并不需要什么特殊的开发环境,直接在Windows自带的记事本中编写就可以。HTML文档以.html为扩展名,将HTML源代码输入到记事本并保存之后,可以在浏览器中打开文档以查看其效果。使用记事本编写HTML文件的具体操作步骤如下。

01 选择菜单中的【开始】|【所有程序】|【附件】|【记事本】命令,打开一个记事本,在记事本中即可编写HTML代码,如图1.1所示。

图1.1 编辑HTML代码

02 当编辑完HTML文件后,选择菜单中的【文件】|【保存】命令,弹出【另存为】对话框,将它存为扩展名为.htm或.html的文件即可,如图1.2所示。

图1.2 【另存为】对话框

03 单击【保存】按钮,保存文档。打开网页文档,在浏览器中预览效果,如图1.3所示。

图1.3 浏览效果

提示


任何文字处理器都可以用来处理HTML代码,但必须记住,要以.html的扩展名对其加以保存。

使用Dreamweaver创建HTML文件,具体操作步骤如下。

01 打开Dreamweaver软件,新建一个文档,单击文档中的【代码】按钮,打开代码视图,在代码视图中可以输入HTML代码,如图1.4所示。

图1.4 编辑代码

02 输入代码完成后,切换到设计视图,效果如图1.5所示。

图1.5 设计视图中的效果

打开index.htm文件,在IE浏览器窗口中可以看到编辑的HTML页面效果,如图1.6所示。

图1.6 浏览器预览效果

可以使用以下方法方便快捷地打开HTML文档进行编辑。

图1.7 查看源文件

1.填空题

(1)标记符通常都是成对使用,有一个    和一个    。结束标记只是在开头标记的前面加一个    。当浏览器收到HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。

(2)HTML是超文本标记语言,主要通过各种标记来标示和排列各对象,通常由尖括号        以及其中所包含的标记元素组成。

(3)HTML文件的编写方法有两种:一种是利用    编写,另一种是在    中编写HTML代码。

2.操作题

(1)用IE浏览器打开网上的任意一个网页,选择【查看】|【源文件】命令,在打开的记事本中查看各代码,并试着与浏览器中的内容进行对照。

(2)分别利用记事本和Dreamweaver创建一个简单的HTML网页。


一个完整的HTML文档必须包含3个部分:一个由<html>元素定义的文档版本信息;一个由<head>定义各项声明的文档头部;一个由<body>定义的文档主体部分。<head>作为各种声明信息的包含元素出现在文档的顶端,并且要先于<body>出现。而<body>用来显示文档主体内容。文字是网页中最基本的信息载体,文字通过不同的排版方式、不同的设计风格排列在网页上,提供了丰富的信息。文字的控制与布局在网页设计中占了很大比例,因此掌握好文字的使用,对于网页制作来说是最基本的。本章就来讲解这些基本标记的使用,这些都是制作一个完整的网页必不可少的。

学习目标

HTML页面的标题一般是用来说明页面的用途,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在<head>与</head>之间。标题标记以<title>开始,以</title>结束。

语法:

<title>…</title>

说明:

在标记中间的“…”就是标题的内容,它可以帮助用户更好地识别页面。页面的标题只有一个,它位于HTML文档的头部,即<head>和</head>之间。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>标题标记title</title>
</head>
<body>
</body>
</html>

在代码中加粗部分的标记为标题,在浏览器的预览效果中可以看到标题名称,如图2.1所示。

图2.1 标题标记

在HTML语言的头部元素中,一般需要包括标题、基础信息和元信息等。HTML的头部元素以<head>为开始标记,以</head>为结束标记。

语法:

<head>……</head>

说明:

<head>元素的作用范围是整篇文档。<head>元素中可以有<meta>元信息定义、文档样式表定义和脚本等信息,定义在HTML语言头部的内容往往不会在网页上直接显示。

举例:

<!doctype html>
<html>
<head>
文档头部信息
</head>
<body>
文档正文内容
</body>
</html>

meta元素提供的信息不显示在页面中,一般用来定义页面信息的说明、关键字、刷新等。在HTML中,meta标记不需要设置结束标记,在一个尖括号内就是一个meta内容。在一个HTML页面中可以有多个meta元素。meta元素的属性有name和http-equiv,其中name属性 主要用于描述网页,以便于搜索引擎查找、分类。

在搜索引擎中,检索信息都是通过输入关键字来实现的。设置关键字是最基本也是最重要的一步,是进行网页优化的基础。关键字在浏览时是看不到的,它是针对搜索引擎的信息。当用关键字搜索网站时,如果网页中包含该关键字,就可以在搜索结果中列出来。

语法:

<meta name="keywords" content="输入具体的关键字">

说明:

在该语法中,name为属性名称,这里是keywords,也就是设置网页的关键字属性,而在content中则定义具体的关键字。

举例:

<!doctype html>
<html>
<head>
<meta name="keywords" content="插入关键字">
<title>插入关键字</title>
</head>
<body>
</body>
</html>

在代码中加粗部分的标记为插入关键字。

提示


选择关键字的技巧与原则

  • 要选择与网站或页面主题相关的文字作为关键字。
  • 选择具体的词语,别寄希望于行业或笼统的词语。
  • 揣摩用户会用什么作为搜索词,把这些词放在页面上或直接作为关键字。
  • 关键字可以不只一个,最好根据不同的页面,制订不同的关键字组合,这样页面被搜索到的概率将大大增加。

设置页面说明也是为了便于搜索引擎的查找,它用来详细说明网页的内容,页面说明在网页中不显示出来。

语法:

<meta name="description" content="设置页面说明">

说明:

在该语法中,name为属性名称,这里设置为description,也就是将元信息属性设置为页面说明,在content中定义具体的描述语言。

举例:

<!doctype html>
<html>
<head>
<meta name="description" content="设置页面说明">
<title>设置页面说明</title>
</head>
<body>
</body>
</html>

在代码中加粗的部分标记为设置页面的说明。

现在有很多编辑软件都可以制作网页,在源代码的头部可以设置网页编辑工具的名称。与其他meta元素相同,编辑工具也只是在页面的源代码中可以看到,而不会显示在浏览器中。

语法:

<meta name="generator" content="编辑软件的名称">

说明:

在该语法中,name为属性名称,设置为generator,也就是设置编辑工具,在content中定义具体的编辑工具名称。

举例:

<!doctype html>
<html>
<head>
<meta name="generator" content="FrontPage">
<title>设置编辑工具</title>
</head>
<body>
</body>
</html>

在代码中加粗部分的标记为定义编辑工具。

在源代码中还可以添加网页制作者的姓名。

语法:

<meta name="author" content="作者的姓名">

说明:

在该语法中,name为属性名称,设置为author,也就是设置作者信息,在content中定义具体的信息。

举例:

<!doctype html>
<html>
<head>
<meta name="author" content="小溪">
<title>设置作者信息</title>
</head>
<body>
</body>
</html>

在代码中加粗部分的标记为添加作者的信息。

在网页中还可以设置语言的编码方式,这样浏览器就可以正确地选择语言,而不需要人工选取。

语法:

<meta http-equiv="content-type" content="text/html; charset=字符集类型" />

说明:

在该语法中,http-equiv用于传送HTTP通信协议的标头,而在content中才是具体的属性值。charset用于设置网页的内码语系,也就是字符集的类型,国内常用的是GB码,charset往往设置为gb2312,即简体中文。英文是ISO-8859-1字符集,此外还有其他的字符集。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

在代码中加粗部分的标记是设置的网页文字及语言,此处设置的语言为日语。

使用<meta/>标记可以使网页在经过一定时间后自动刷新,这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。

在浏览网页时经常会看到一些欢迎信息的页面,在经过一段时间后,这些页面会自动转到其他页面,这就是网页的跳转。

语法:

<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">

说明:

在该语法中,refresh表示网页的刷新,而在content中设置刷新的时间和刷新后的链接地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间以秒为单位。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="refresh" content="20;url=index1.html">
<title>网页的定时跳转</title>
</head>
<body>
20秒后自动跳转
</body>
</html>

在代码中加粗部分的标记是设置的网页的定时跳转,这里设置为20秒后跳转到index1. html页面。在浏览器中预览,跳转前如图2.2所示,跳转后如图2.3所示。

图2.2 跳转前

图2.3 跳转后

注释是在HTML代码中插入的描述性文本,用来解释该代码或提示其他信息。注释只出现在代码中,在浏览器的页面中不显示。在HTML源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外,如果将代码交给其他设计者,其他人也能很快读懂前者所编写的内容。

语法:

<!--注释的内容 -->

说明:

注释语句元素由前后两半部分组成,前半部分由一个左尖括号、一个半角感叹号和两个连字符组成,后半部分由两个连字符和一个右尖括号组成。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>页面注释标记</title>
</head>
<body>
<!--居中对齐显示 -->
<center>
页面注释标记
</center>
</body>
</html>

在代码中加粗部分的标记是添加页面注释。

HTML文档中包含有各种级别的标题,各种级别的标题由<h1>到<h6>元素来定义。其中,<h1>代表最高级别的标题,依次递减,<h6>级别最低。

<h1>到<h6>元素中的字母h是英文headline的简称。作为标题,它们的重要性是有区别的,其中<h1>标题的重要性最高,<h6>的最低。

语法:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

说明:

在该语法中,有6个级别的标题,<h1>是一级标题,使用最大的字号表示,<h6>是6级标题,使用最小的字号表示。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>标题字标记</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>

在代码中加粗部分的标记是6种不同级别的标题,在浏览器中预览可以看到效果,如图2.4所示。

图2.4 标题字标记

提示


对于不同的浏览器,其确切的点阵尺寸的大小也不相同,但<h1>标题大约是标准文字高度的2~3倍,<h6>标题则比标准字体略小。

默认情况下,标题文字是左对齐的。而在网页制作过程中,常常需要选择其他的对齐方式。关于对齐方式的设置要使用align参数进行设置。

语法:

<align=对齐方式>

说明:

在该语法中,align属性需要设置在标题标记的后面,其对齐方式的取值见表2-1所示。

表2-1 对齐方式的取值

属性值

含义

left

左对齐

center

居中对齐

right

右对齐

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>标题字的对齐</title>
</head>
<body>
<h1>1级标题</h1>
<h2 align="left">2级标题左对齐</h2>
<h3 align="center">3级标题居中对齐</h3>
<h4 align="right">4级标题右对齐</h4>
</body>
</html>

在代码中加粗部分的标记,是为标题文字设置了左、中、右不同的对齐方式,在浏览器中预览可以看到效果,如图2.5所示。

图2.5 标题字的对齐方式

在网页中如果要把文字有条理地显示出来,离不开段落标记的使用。在HTML中可以通过标记实现段落的效果。

<p>是HTML文档中最常见的标记,<p>用来起始一个段落。

语法:

<p>段落文字<p>

说明:

段落标记可以没有结束标记</p>,而每一个新的段落标记开始的同时也意味着上一个段落的结束。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>段落</title>
</head>
<body>
<p align="right">不敢相信竟敢输掉这场西洋棋</p>
<p align="center">这属于我俩爱情斗智的游戏</p>
<p>我是国王而你是对面那个beauty queen</p>
<p>各自捍卫着外面的柏拉图是爱情</p>
</body>
</html>

在代码中加粗部分的标记为段落标记,align="right"是设置段落为右对齐,align= "center"是设置段落为居中对齐,在浏览器中预览,可以看到将文本成功地分段,如图2.6所示。

图2.6 段落效果

在网页制作的过程中,将一段文字分成相应的段落,不仅可以增加网页的美观性,而且使网页层次分明,让浏览者感觉不到页面拥挤,如图2.7所示。

图2.7 段落应用

换行标记<br>的作用是在不另起一段的情况下将当前文本强制换行。

语法:

<br>

说明:

一个<br>标记代表一个换行,连续的多个标记可以实现多次换行。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>换行标记</title>
</head>
<body>
我们的优势是高效率,良好的品质和具有竞争力的价格。<br>公司视质量为生命,为客户提供高效服务,以实现买卖双方达到双盈为目的,在客户中建立了良好的信誉。<br>在这个给人们带来欢乐的阳光行业中,我们相信我们的合作能让我们彼此感到欢乐和获得更好的利益。<br>热诚欢迎广大中外客户来我公司洽谈业务,联手合作,共创美好的明天!
</body>
</html>

在代码中加粗部分的标记为设置换行标记,在浏览器中预览,可以看到换行的效果,如图2.8所示。

图2.8 换行效果

提示


<br>是惟一可以为文字分行的方法。其他标记如<p>,可以为文字分段。

在网页中如果某一行的文本过长,浏览器会自动对这段文字进行换行处理。可以使用nobr标记来禁止自动换行。

语法:

<nobr>不换行文字</nobr>

说明:

在标记之间的文字在显示的过程中不会自动换行。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>不换行标记</title>
</head>
<body>
<p>公司视质量为生命,为客户提供高效服务,以实现买卖双方达到双盈为目的,在客户中建立了良好的信誉。</p>
<p>在这个给人们带来欢乐的阳光行业中,我们相信我们的合作能让我们彼此感到欢乐和获得更好的利益。</p>
<p><nobr>公司视质量为生命,为客户提供高效服务,以实现买卖双方达到双盈为目的,在客户中建立了良好的信誉。
在这个给人们带来欢乐的阳光行业中,我们相信我们的合作能让我们彼此感到欢乐和获得更好的利益。</nobr> </p>
</body> </html>

在代码中加粗部分的标记为不换行标记,在浏览器中预览,可以看到文字不换行的效果,如图2.9所示。

图2.9 不换行效果

在网页中常常看到一些水平线将段落与段落之间隔开,这些水平线可以通过插入图片实现,也可以更简单地通过标记来完成。

<hr>标记代表水平分割模式,并会在浏览器中显示一条线。

语法:

<hr>

说明:

在网页中输入一个<hr>标记,就添加了一条默认样式的水平线。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>水平线</title>
</head>
<body>
<p align="center">无月的中秋 </p>
<hr>
<p>据说每年八月十五的时候,夜空中的月亮是一年中最大,最圆,最亮,最美的月亮,这就
是中秋节的来历,这就是月饼的来历,大家都会在这一天,合家团圆,吃着月饼,然后在空旷的夜空下赏月。渐渐的,也许人们会淡忘头顶的月亮,只记得这一天是个合家团聚的节日,记得这一天有月饼吃,偶尔抽空抬了下头,稍稍感慨:今天月亮还真是亮。我几乎要忘了月亮才是一切的缘由,直到发现今天看不到它 </p> </body> </html>

在代码中加粗部分的标记为水平线标记,在浏览器中预览,可以看到插入的水平线效果,如图2.10所示。

图2.10 插入水平线效果

在网页中除了可以输入汉字、英文和其他语言外,还可以输入一些空格和特殊字符,如¥、$、◎、#等。

可以用许多不同的方法来分开文字,包括空白、标签和Enter,这些都被称为空格,因为它们可增加字与字之间的距离。

语法:

&nbsp;

说明:

在网页中可以有多个空格,一个&nbsp;代表一个半角空格,多个空格则可以多次使用这一符号。

举例:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>插入空格</title>
</head>
<body>
<p> 床前明月光,疑似地上霜。</p>
<p> 举头望明月,低头思故乡。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;床前明月光,
&nbsp;&nbsp;&nbsp;&nbsp;疑似地上霜。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举头望明月,
&nbsp;&nbsp;&nbsp;&nbsp;低头思故乡。</p>
</body>
</html>

在代码中加粗部分的标记为设置空格,在浏览器中预览,可以看到浏览器完整地保留了输入的空格代码效果,如图2.11所示。

图2.11 输入空格效果

空格在网页排版中常常用到,使用空格符号在文字的前面输入几个空格,可以实现首行缩进的效果,如图2.12所示。

图2.12 空格应用效果

除了空格以外,在网页的创作过程中,还有一些特殊的符号也需要使用代码进行代替。一般情况下,特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用方法与空格符号类似,具体见表2-2所示。

表2-2 特殊符号的表示

特殊符号

符号的代码

&quot;

&

&amp;

<

&lt;

>

&gt;

×

&times;

§

&sect

©

&copy;

®

&reg;

&trade;

1.填空题

(1)一个完整的HTML文档必须包含3个部分:一个由<html>元素定义的    ;一个由<head>定义各项声明的    ;一个由<body>定义的    

(2)meta元素提供的信息不显示在页面中,一般用来定义页面信息的     、        等。HTML页面中可以有多个meta元素。

(3)使用<meta/>标记可以使网页在经过一定时间后自动刷新,这可通过将http-equiv属性值设置为    来实现。

2.操作题

制作一个如图2.13所示的基本文本网页。

图2.13 基本文本网页


相关图书

HTML+CSS+JavaScript完全自学教程
HTML+CSS+JavaScript完全自学教程
零基础入门学习Web开发(HTML5 & CSS3)
零基础入门学习Web开发(HTML5 & CSS3)
HTML CSS JavaScript入门经典 第3版
HTML CSS JavaScript入门经典 第3版
HTML+CSS+JavaScript网页制作 从入门到精通
HTML+CSS+JavaScript网页制作 从入门到精通
从0到1:HTML5 Canvas动画开发
从0到1:HTML5 Canvas动画开发
从零开始:HTML5+CSS3快速入门教程
从零开始:HTML5+CSS3快速入门教程

相关文章

相关课程