书名：网页编程技术pdf/doc/txt格式电子书下载

推荐语：

作者：《全国高等职业教育计算机系列规划教材》编委会编

出版社：电子工业出版社

出版时间：2012-01-01

书籍编号：30466750

ISBN：9787121149535

正文语种：中文

字数：52466

版次：1

所属分类：教材教辅-中职/高职

版权信息

书名：网页编程技术

作者：《全国高等职业教育计算机系列规划教材》编委会

ISBN：9787121149535

版权所有 · 侵权必究

丛书编委会

主任 郝黎明 逄积仁

副主任 左雅 方一新 崔炜 姜广坤 范海波 敖广武 徐云睛 李华勇

委员（按拼音排序）陈国浪 迟俊鸿 崔爱国 丁倩 杜文洁 范海绍 何福男 贺宏 槐彩昌 黄金栋 蒋卫祥 李琦 刘宝莲 刘红军 刘凯 刘兴顺 刘颖 卢锡良 孟宪伟 庞英智 钱哨 乔国荣 曲伟峰 桑世庆 宋玲玲 王宏宇 王华 王晶晶 温丹丽 吴学会 邢彩霞 徐其江 严春风 姚嵩 殷广丽 尹辉 俞海英 张洪明 张薇 赵建伟 赵俊平 郑伟 周绯非 周连兵 周瑞华 朱香卫 邹羚

本书编委会

主编 曲伟峰 金明日 马春艳

副主编 祖宝明 化松收 王晶晶

丛书编委会院校名单

（按拼音排序）

保定职业技术学院

渤海大学

常州信息职业技术学院

大连工业大学职业技术学院

大连水产学院职业技术学院

东营职业学院

河北建材职业技术学院

河北科技师范学院数学与信息技术学院

河南省信息管理学校

黑龙江工商职业技术学院

吉林省经济管理干部学院

嘉兴职业技术学院

交通运输部管理干部学院

辽宁科技大学高等职业技术学院

辽宁科技学院

南京铁道职业技术学院苏州校区

山东滨州职业学院

山东经贸职业学院

山东省潍坊商业学校

山东司法警官职业学院

山东信息职业技术学院

沈阳师范大学职业技术学院

石家庄信息工程职业学院

石家庄职业技术学院

苏州工业职业技术学院

苏州托普信息职业技术学院

天津轻工职业技术学院

天津市河东区职工大学

天津天狮学院

天津铁道职业技术学院

潍坊职业学院

温州职业技术学院

无锡旅游商贸高等职业技术学校

浙江工商职业技术学院

浙江同济科技职业学院

前言

随着Internet的飞速发展，网络对人类的各种活动产生了深刻的影响，已经成为这个时代最重要的信息传播手段。因此，基于Internet的开发已经成为现今软件开发的主流，甚至大量传统的信息系统也已经开始向新的运行模式进行移植。所以，网页设计人员必须掌握网页开发中所需的基础理论和实际应用技术，包括网页设计语言HTML、网页外观控制技术CSS、客户端脚本编程语言JavaScript等技术。

本书具有以下特点。

循序渐进：适合初级学者逐步掌握复杂的网页编程技术，实现网页前台的开发应用。

案例丰富：所有实例都具有代表性，着重解决网页设计工作中的实际问题。

强化动手操作：每章后都附有针对性的上机练习，通过实训巩固每章所学的知识。

内容翔实：对网页编程技术涉及的HTML、CSS、JavaScript技术都进行了详细的讲解。

本书分3篇共17章，循序渐进地讲述了网页编程技术，包括：HTML负责页面结构，CSS负责外观样式，JavaScript负责页面的动态行为。结合典型案例，加强读者的动手操作能力，使读者在学习知识的同时强化专业技能训练，每一章节都通过一个完整的案例，带领读者学习如何将各个知识点应用于一个实际网站中，培养读者的实践开发能力。本书的结构安排如下。

第一篇：HTML语言篇

第1章：HTML基础，重点介绍HTML设计和开发所需了解的基本概念和基本机构，以及HTML的基本标签，包括头部标签、内容标签、格式标签、字体标签和超链接标签。

第2章：HTML进阶，介绍表格、图像和多媒体在页面开发中的应用。

第3章：HTML高阶，重点讲解表单元素及框架在页面中的具体应用。

第4章：HTML综合案例，通过一个完整的页面实例，将所学到的HTML内容综合运用到实践开发中。

第二篇：CSS语言篇

第5章：CSS基础，主要讲解CSS的基本语法和具体的分类。

第6章：CSS的属性及应用，主要讲解字体属性、颜色属性、背景属性、文本属性、边框属性和滤镜特效，通过本章内容的学习，使学生掌握CSS样式各种属性的定义和具体的应用。

第7章：CSS综合案例，通过一个完整的实例，将所学习到的CSS知识应用到实践页面设计中。

第三篇：JavaScript语言篇

第8章：JavaScript简介，主要介绍JavaScript的特点，编写工具，JavaScript程序的运行和调试等基本操作步骤。

第9章：JavaScript编程基础，介绍数据类型、变量与常量、表达式与运算符、程序语句和函数。

第10章：事件与事件处理，主要介绍JavaScript中的常用事件，结合案例进行描述。

第11章：常用内置对象，介绍JavaScript的常用内置对象，包括数学对象、日期对象和数组对象。

第12章：常用的窗口对象与框架对象，主要介绍窗口对象和框架对象。

第13章：常用文档对象，主要介绍Document对象、Images对象、锚对象和Cookie的使用。

第14章：表单对象，重点讲解各种表单元素的概念及其在实践开发中的具体应用。

第15章：其他对象，包括历史对象、网址对象和浏览器对象。

第16章：正则表达式，介绍正则表达式的定义、常用的元字符、正则表达式对象，并通过一些很有实用价值的案例介绍常用的正则表达式。

第17章：JavaScript综合案例，通过一个完整的案例，系统介绍网站开发中的具体应用。

本书由曲伟峰、金明日、马春艳主编，祖宝明、化松收、王晶晶副主编。编写分工如下：第1、2、3、4章由大连工业大学职业技术学院曲伟峰编写，第5、6、7、8章由金明日编写，第13、14、15章由马春艳编写，第11、12章由苏州经贸职业技术学校祖宝明编写，第9、10章由化松收编写，第16、17章由王晶晶编写。全书由曲伟峰统稿。

由于编者水平有限，书中难免会有错误之处，敬请广大读者批评指正，以便下次修订时完善。

编 者

第一篇 HTML语言篇

HTML语言是HyperText Markup Language的缩写，中文名称为“超文本标记语言”。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。本篇完整介绍了HTML文件的基本结构，常用HTML标签的定义以及在网页中的具体应用。本篇最后一章的综合案例将所有常用的HTML标签应用到一个具体的页面中，使读者能更熟练掌握HTML语言在网页设计中的具体用法。

第1章 HTML基础

【本章要点】

▲掌握HTML文件的基本结构

▲掌握HTML基本标记的含义、用法及属性设置

▲利用HTML标记创建网页中的基本元素

HTML是网页文件的支持语言，通过IE浏览器看到的精美网页其实是IE执行网页的HTML代码的结果。超文本标记语言（HyperText Markup Language），它是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台计算机中的文本或图形与另一台计算机中的文本或图形方便地联系在一起，形成有机的整体。我们只需使用鼠标在某一文档中单击一个链接，Internet就会马上转到与此图标相关的内容上，而这些信息可能存放在网络的另一台计算机中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

1.1 HTML简介

现在是互联网的世界，在互联网上有成千上万的网站，我们可以浏览到包含文字、声音、图片、视频等内容的网站，这些内容都是通过HTML语言表现出来的，HTML是一种用于网页设计的语言。

● HTML是超文本标记语言（HyperText Markup Language）的缩写

● HTML不是一种编程语言，而是一种标记语言（Markup Language）

● 标记语言都会提供一套标记标签（Markup Tags）

● HTML用标记标签来设计网页

HTML（Hypertext Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用做WWW（World Wide Web，也可简写Web、中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过Web浏览器显示出其效果。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术——通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示，通过HTML可以表现出丰富多彩的设计风格。

从上面我们可以看到HTML超文本文件需要用到的一些标签。在HTML中每个用来当做标签的符号都是一条命令，它告诉浏览器如何显示文本。这些标签均由\"<\"和\">\"符号以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声音等。这些标签符号用\"<标签名字 属性>\"来表示。

HTML只是一个纯文本文件，创建一个HTML文档，只需要两个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用来打开Web网页文件，提供给我们查看Web资源的客户端程序。可以使用任何文本编辑器来打开并编写HTML文件，例如Windows的“记事本”，范例1.1.html，就是用记事本编写的一个HTML文件。

※ 范例代码 1.1.html

选择“开始→程序→附件→记事本”命令，打开记事本程序，输入代码，如图1.1所示。

图1.1 记事本文件中输入HTML文档

※ 范例效果图

单击“另存为”命令，文件名改写为1.1.html，然后双击该文件，可以在浏览器中看到最终的页面效果，如图1.2所示。

图1.2 IE中显示的页面效果

如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。

1.2 HTML文件的基本结构

一个完整的HTML文档是由一系列的元素和标签组成的，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

1.2.1 HTML文件结构

下面通过范例1.2.html，掌握HTML文件的基本结构，效果如图1.3所示。

※ 范例代码 1.2.html

※ 范例效果图

图1.3 HTML文件的基本结构

（1）<！doctype>标记指明本文档中HTML语言的版本，该标签必须位于HTML文件的第一行，用浏览器浏览网页时，此行内容并不显示在页面中，在编写HTML文档时也可省略。

（2）<html></html>在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有<html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。

（3）<head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其他标记，用以说明文件的标题和整个文件的一些公共属性。若不需要头部信息则可省略此标记，良好的习惯是不省略。

（4）<title>和</title>是嵌套在<head>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

（5）<body></body>标签一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。

上面的这几对标签在文档中都是唯一的，<head>标签和<body>标签是嵌套在HTML标签中的。

1.2.2 HTML的使用要点

（1）“<”和“>”是HTML任何标签的开始和结束。例：<body></body>

（2）标签与标签之间可以嵌套。例：<center><a>大连工业大学</a></center>

（3）HTML的标签和属性名不区分大小写。例：<html><HTML><Html>三个标签是一致的。

（4）HTML代码中任何回车和空格在显示时不起作用（显示空格为“&nbsp；”）。为了使代码清晰，建议不同的标签之间用回车换行编写。

（5）HTML标签中可以放置各种属性。例：<h1 class=\"center\">标题1</h1>

（6）在HTML源代码中的注释。<！-要注释的内容->注释语句只出现在源代码中，不会在浏览器中显示。

1.2.3 HTML的标签及属性

在HTML中用“<”和“>”括起来的部分，我们称它为标签，这些标签可以形成页面中文本的布局、文字的格式及五彩缤纷的画面。属性是标签里参数的选项。

HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名>和尾标签</标签名>组成的，成对标签的作用域只作用于这对标签中的文档，单独标签在相应的位置插入元素就可以了。大多数标签都有自己的一些属性，属性要写在开始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值。标签属性值如果是颜色值，HTML中颜色值有两种表示形式，分别是：

① 使用颜色名称来表示。

② 使用十六进制格式数值＃RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。

常用的颜色值如表1-1所示。

表1-1 常用颜色值

※ 范例代码 1.3.html

※ 代码分析

<body>标签中属性bgcolor的含义是定义页面的背景色，值为＃FFFFFF表示白色，属性text表示页面中文字的颜色，值为＃000000表示黑色。

※ 范例效果图

范例效果如图1.4所示。

图1.4 HTML标签及属性的应用

注意1：为了使读者有一个好的习惯，提倡全部对属性值加双引号。

注意2：输入开始标签时，一定不要在“<”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确识别括号中的标签命令，从而无法正确显示信息。

1.3 HTML的基本标签

1.3.1 头部标签

HTML头部标签是<head>，主要包含页面的一些基本描述语句，一般位于头部的内容不会直接显示在网页中，而是通过其他方式起到作用。表1-2列出了HTML常用的头部标签。

表1-2 头部标签

1.标题标签<title>

在HTML文档中，标题文字位于<title>和</title>之间。

2.元信息标记<meta>

<meta>标签放置在文档头部，不包含任何内容，能够提供文档的关键字、作者及描述等多种信息。

<meta>标签的常用属性见表1-3。

表1-3<meta>标签的常用属性

content的属性为提供页面内容的相关信息，指明文档类型为文本类型。charset定义字符集，提供网页的编码信息，浏览器根据这行代码选择正确的语言编码，GB2312表示定义网页内容时用标准简体中文显示。

定义本网页的关键字。搜索引擎可以让访问者根据这些关键字查找到网站主页，各关键字之间用逗号隔开。

网页自动刷新。经过用户自定义设置的时间5秒后，页面自动跳转到url指定的位置。

描述本网页的主要内容。

注意1：在HTML头部可以包括任意数量的<meta>标签。

注意2：meta标签只能放在<head></head>标签内。

※ 范例代码 1.4.html

※ 范例效果图

范例效果如图1.5所示。

图1.5 头部标签

1.3.2 内容标签

在<body>与</body>之间的所有部分都被称做主体部分，在其中放置的是页面中的所有内容（文字、图片、链接、表格、表单、视频等）。

表1-4列出了<body>标签的常用属性。

表1-4<body>标签的常用属性

<body>里的属性可以同时使用。

注意：学习HTML语言需要记住的东西很多，但是我们并没有必要全部记住。我们需要做的是了解每个标签的功能及其属性。当看到一个网页时知道能用什么标签或者属性实现就可以了。当我们编辑网页时如果忘了可以查看资料。

1.3.3 格式标签

网页设计过程中，经常需要用到一些格式标签对网页的格式进行定义，特别是HTML不识别Enter键和空格键，所以定义格式标签十分重要，见表1-5。

表1-5 格式标签

1.强制换行<br>

用HTML的标签来强制换行、分段。<br>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。

※ 范例代码 1.5.html

※ 范例效果图

范例效果如图1.6所示。

图1.6 换行标签

2.段落标签<p>...</p>

由<p>标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个<p>的开始就意味着上一个<p>的结束。良好的习惯是成对使用。

其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），省略时默认为left。格式中的“|”表示“或者”，即多中选一。

※ 范例代码 1.6.html

※ 范例效果图

范例效果如图1.7所示。

图1.7 段落标签

※ 范例代码 1.7.html

※ 范例效果图

范例效果如图1.8所示。

图1.8 换行与段落标签

3.定位标签<div>…</div>

设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用<div>…</div>标签。其中属性align用来设置文本块、一段文字或标题在网页上的对齐方式，省略时默认为left。

4.水平线标签<hr>

在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的<hr>标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的属性参数决定。size设定线条粗细，以像素为单位，默认为2像素。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。noshade去掉水平线的阴影效果，设置水平线为一条实线。

※ 范例代码 1.8.html

※ 范例效果图

范例效果如图1.9所示。

图1.9 水平线标签

5.注释标记<！-…->

注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。

※ 范例代码 1.9.html

※ 范例效果图

范例效果如图1.10所示。

图1.10 注释标签

1.3.4 字体标签

文字是网页中非常重要的元素，通过文字来说明网页的具体内容，关于字体标签如表1-6所示。

表1-6 字体标签

续表

1.标题文字标签<h＃>…</h＃>

在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。可以通过设置不同大小的标题，使文章条理清晰。＃用来指定标题文字的大小，＃取1～6的整数值，取1时文字最大，取6时文字最小。属性align设置标题在页面中的对齐方式，省略时默认为left。

2.字体标签<font>...</font>

在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用<font>标签设置字号（<font>被W3C列为不建议使用的标记，以后将学习用CSS来设定字体）。<font>标记可设定文字的字体、字号和色彩。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体_GB2312等。color用来设置文字色彩。

※ 范例代码 1.10.html

※ 范例效果图

范例效果如图1.11所示。

图1.11 文本标志的综合示例

注意：网页中的文字样式主要是通过CSS样式来进行设置的，在后面章节中会讲解到，font标签不提倡使用。

1.3.5 超链接标签

HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其他页面。超文本具有的链接能力，可层层链接相关的文件，这种具有超级链接能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多彩的多媒体世界。超链接标签<a>的属性如表1-7所示。

表1-7 超链接标签<a>的属性

1.href指定链接地址

每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。URL（Uniform Resource Locator）中文名字为“统一资源定位器”，指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个链接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此，链接主要分以下两种：

● 绝对路径，如http：//www.sina.com.cn

● 相对路径，如news/index.html

绝对路径：包含了标识Internet上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称。相对路径是以当前文件所在路径为起点，进行相对文件的查找。一个相对的URL不包括协议和主机地址信息，表示它的路径与当前文档的访问协议和主机名相同，甚至有相同的目录路径。通常只包含文件夹名和文件名。甚至只有文件名。可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件。此时，浏览器链接的目标文档处在同一服务器或同一文件夹下。

① 如果链接到同一目录下，只需输入要链接文件的名称。如<a href=\"8.html\"></a>

② 要链接到下级目录中的文件，只需先输入目录名，然后加\"/\"，再输入文件名。如<a href=\"book/8.html\">第八章</a>

③ 要链接到上一级目录中文件，则先输入\"../\"，再输入文件名。如<a href=\"../html/book/8.html\">HTML基础教程</a>

2.设定链接的目标窗口

target属性值如表1-8所示。

表1-8 target属性值

3.锚点链接

浏览页面时，如果页面内容较多会使页面的长度很长，需要不断拖拉滚动条才能看到具体的内容，这样操作起来很不方便。定义锚点链接后，单击超链接就可以直接链接到页面中的具体位置。

这里的两处name值保持一致。

注意1：属性name是不可缺少的。

注意2：href属性赋的值若是锚点的名字，必须在锚点名前边加一个“＃”号。

4.空链接

所谓空链接是指光标指向链接文字后光标呈手形，但没有链接到任何页面，仍然停留在当前页面。

5.邮件链接

※ 范例代码 1.11.html

※ 范例效果图

范例效果如图1.12所示。

图1.12 超链接标签的综合示例

1.4 上机练习

1.创建一个简单的网页，要求网页的标题是“个人简介”，网页文本内容自定义，保存到以自己名字命名的文件夹中，HTML文件名为index.html。

2.写出HTML文件的总体结构。

3.在IE浏览器中，如何查看网页的HTML源文件。

4.设计页面如图1.13所示。要求背景颜色值为lightcyan，“桃花庵歌”字体为标题2，“唐寅”字体为华文行楷，直线的长度分别为50px，80%，80%，高度分别为5，7，6，颜色分别为黄色、蓝色和红色。

图1.13 基本标签的应用

5.设计页面如图1.14所示。

图1.14 文本标签的应用

第2章 HTML进阶

【本章要点】

▲表格的基本结构

▲表格属性的具体应用

▲表格的页面布局

▲图片与多媒体元素在页面中的具体应用

2.1 表格标签

表格是常用的页面元素，制作网页经常要借助表格进行排版，在网页布局方面，表格起着举足轻重的作用，通过设置表格以及单元格的属性，对页面中的元素进行准确定位，表格能够有序地排列数据又能对页面进行更加合理的布局。灵活地使用表格的背景、框线等属性可以得到更加美观的效果。

HTML表格是由行和列组成的二维表格，由行和列构成一个个单元格，在其中可以放置文本、图像等相关网页元素。每一列的最上方可以定义列标题，用来突出显示该列的主题，表格也可以定义标题，如图2.1所示，这些都可以通过HTML中具体的标签来实现。

图2.1 表格的形式

在网页中使用表格有如下几个优点：

....