第1章 网页制作基础知识

第1章 (2)

网页制作基础知识 (2)

1.1 网页制作基础知识 (2)

1.1.1 网页的定义和分类 (2)

1.1.2 网页的基本概念 (4)

1.1.3 网页的基本组成元素 (5)

1.2 Dreamweaver CS5概述 (8)

1.2.1 启动与退出Dreamweaver CS5 (8)

1.2.2 Dreamweaver CS5的主界面 (9)

1.3 网页标准技术与XHTML (11)

1.3.1 网页结构语言 (12)

1.3.2 了解XHTML (14)

1.3.3 XHTML的基本语法结构 (15)

1.3.4 使用XHTML标签 (18)

1.4 上机练习：编写代码实现简单网页 (26)

小结 (27)

习题1 (28)

第1章

网页制作基础知识

随着Internet技术的应用及普及，越来越多的网站很快建立起来了，网络已经渗入到人们的生活中，并已成为生活的一个重要组成部分，而网页在整个网络中占据了绝对的分量，几乎所有的网络活动都与网页有关。随之，网页的设计技术已成为最热门的计算机技术类别之一，越来越多的人希望学习网页设计与制作的技术，同时很多企业在录用员工时，都希望员工掌握一定的网页设计技术基础。

网页是一种数字化的媒体，相对于传统媒体而言，网页媒体继承了平面媒体的信息量大，内容丰富且具有可保存性的特点，同时又可承载更多类型的媒体内容，例如文本、图像、动画、音频和视频等。

设计网页是一项从艺术设计到页面制作再到后台开发的系统工程，需要应用多种技术，使用各种相关的软件才能完成。在学习设计网页时，需要首先了解网页的各种技术，网页布局、网页配色，以及涉及的软件。除此之外，使用最新版本的网页制作软件也可以最大限度提高网页制作的效率。

随着国内互联网开发理论的发展，越来越多的网站开始更注重网页的界面设计，通过优化和美化界面取得竞争的主动权，吸引更多用户。网页界面设计的作用在于为网页提供一个美观且易于与用户交互的图形化接口，帮助用户更方便地浏览网页内容，使用网页的各种功能。同时，优秀的界面设计可以为用户提供一种美的视觉享受。

若想学习网页设计与制作，需先了解一些网页的基本知识，如网页的定义、分类以及网页制作的基本步骤和规则等。

本章将讲解网页制作的基础知识，为以后学习网页制作打一些基础。

1.1 网页制作基础知识

学习网页制作应先了解网页的基本概念，学好这些知识是制作出漂亮、美观的网页的前提，并为日后的学习打好基础。

1.1.1 网页的定义和分类

上网时浏览的一个个页面就是网页，网页又称为Web页，其中的图像、文字、超级链接等是构成网页的基本元素，如图1-1所示即为中国诗歌网站的首页。网页可按其在网站中的位置分类，也可按其表现形式分类。下面将分别进行讲解。

图1-1 中国诗歌网站首页

1．按位置分类

按网页在网站中的位置可将其分为主页和内页，主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页；内页是指与主页相链接的页面，也就是网站的内部页面。

一些网站的首页并非主页，其作用只是为了欢迎访问者或者引导访问者进入主页，所以首页并不一定就是主页。

2．按表现形式分类

按网页的表现形式可将其分为静态网页和动态网页，具体含义如下。

（1）静态网页

指用HTML语言编写的网页，一般以.htm、.html、.shtml、.xml等扩展名。在HTML格式的页面中，可以出现各种动态效果，如GIF格式的动画、Flash动画、滚动字母等。其制作方法简单易学，但灵活性比较差。

静态网页有如下特点：

第个静态网页都有一个固定的URL，网页URL以. htm、.html、.shtml等见形式为后缀。

网页内容一旦发布到网站服务器上，每个网页都是一个独立的文件。

静态网页的内容相对稳定，有搜索引擎容易检索到。

静态网页没有数据库的支持，因此在网站维护和制作方面工作量都比较大，当网站信息量很大时，完全以静态网页的方式来建立网站，是比较困难的。

由于静态网页的交互性较差，在交互和实时性方面受到限制。

（2）动态网页

这类网页使用ASP、PHP、JSP和CGI等程序生成，具有动态效果，其制作方法较静态网页

复杂。常见形动态网页是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

动态网页有如下特点：

动态网页一般以数据库技术为基础，这对于降低网站的维护工程量大有好处。

采用的动态网页技术制作的网站可以实现更多的功能，如在线调查、互动交流等功能。

动态网页不独立存在于服务器上的网页，只有在请求服务器时才返回一个完整的网页。

动态网页中的“？”对搜索引擎检索存在一定的问题，采用动态网页的网站在进行搜索时，植根做一定的技术处理才能适应搜索引擎的要求。

静态网页和动态网页不是以网页中是否包含动态元素来区分的，而是针对客户端与服务器端是否发生交互行为而言的。不发生交互的是静态网页，发生交互的是动态网页。

1.1.2 网页的基本概念

在网页制作过程中常常会遇到一些专业名词，如站点、发布、浏览器、导航条、超级链接、表单、URL、IP地址以及域名，需掌握其具体含义才能在网页制作过程中轻松操作。下面分别讲解这些专业名词。

站点：站点是一个管理网页文档的场所，简单地讲，一个个网页文档链接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。

发布：发布就是把制作好的网页上传到网络中的过程。

浏览器：浏览器是一种把互联网上的文本文档和其他类型的文件翻译成网页的软件。通过浏览器，可以快捷地连接Internet。目前使用人数最多的浏览器是Microsoft公司的IE浏览器，电脑中安装了操作系统都会捆绑安装IE浏览器，如图1-1所示为IE浏览器打开的网页。另外，还有很多其他浏览器可供用户安装使用，如腾讯TT浏览器、火狐浏览器、360安全浏览器以及搜狗浏览器等。

图1-2 百度

导航条：导航条就如同一个网站的路标，有了它就不会在浏览网站时“迷路”，如图1-4所示。导航条链接着各个页面，只要单击导航条中的超级链接就能进入相应的页面。

超级链接：超级链接在网页中起着重要的作用，主要用于将不同页面链接起来，链接的范围可以是同一站点内的页面，也可以是其他网站的页面。超级链接主要有文字链接和图像链接等，通常将鼠标指针移动到网页对象上，如果该对象是一个超级链接，鼠标指

针会变为一个手形，如图1-2所示。单击超级链接就能打开其指定的目标网页。

图1-2 导航条

表单：表单是具有交互性的动态网页，常用于在注册网站会员和申请邮箱等活动时提交用户信息。如图1-3所示为申请126邮箱的表单。

图1-3注册邮箱

URL （Uniform / Universal Resource Locator）统一资源定位器：URL是指全球资源定位器，即主要用于指明通信协议和地址的方式，如https://www.wendangku.net/doc/4d18638373.html,就是一个完整的

URL。“http://”形式的URL用于表示网页的Internet位置，而“ftp//”则用于表示文件

传输的一种URL形式。

IP地址：IP地址就是为连接在Internet上的每一个主机分配的一个32bit地址，Internet 上的每台主机的IP地址都是唯一的，就像生活中的门牌号，在网络中就命名为IP地址。

IP地址分为A、B、C、D、E 5类，常用的是B和C两类，如192.168.1.1为一个C类

IP地址。

域名：域名就如同是网站的地址，Internet中任何网站的域名都是全世界唯一的，所以域名也就是网站的网址，如https://www.wendangku.net/doc/4d18638373.html,就是新浪网站的域名。域名是由固定的网络

域名管理组织在全球进行统一管理的，用户需到各地的网络管理机构进行申请，申请成

功后才能获取域名，然后将其与网站服务器的IP地址绑定，访问者通过域名就可以访问

服务器中的网页了。

1.1.3 网页的基本组成元素

网页是由多种元素组成的。文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。而其他的很多元素（如超级链接等）都是基于这两种基本元素而创建的。

从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。网页的界面只包含内置元素，而不包含窗体元素。以内容来划分，一般的网页界面包括网站Logo、导航条、Banner、内容栏和版尾5部分。

1．Logo

Logo（意译为标识，标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现。其制作要点如下。

Logo的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo 醒目，让浏览者能很快看到。

站点的Logo虽然有动态的，但不是所有的站点都适宜用动态Logo，且动态Logo的动作频率也不能太大，否则可能会适得其反。Logo的内容通常包括特定的图形和文本，Logo具体内容与开发网站的企业文化紧密结合，以体现网站的特色。

一些简单的Logo也可以只包含文本，通过对文本进行各种变化来体现网站的特色。

右侧的图像包含20个大型知名企业的商标，这些商标往往与其官方网站的Logo一致。

图1-4 Logo图标

2．Banner

Banner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。其标准尺寸有468×60像素、392×60像素、234×60像素、125×125像素、120×90像素、120×60像素、88×31像素及120×240像素等。其中，468×60像素和88×31像素的Banner 使用最多，468×60像素的Banner文件大小应在15KB左右，而88×31像素的Banner文件大小最好在5KB左右。除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，如图1-5所示。

图1-5 Banner图标

3．导航栏

导航栏是网页重要的设计内容，网页中的导航栏是帮助用户快速访问所需内容的辅助工具。根据网站的大小经及内容多少，一个网页可以设置多个导航栏，还可以设置多级的导航栏以显示更多的导航内容。在导航条的设计中，还可以采用Flash或脚本等实现的动画元素吸引用户访问。如图1-6所示。

图1-6 按钮式导航栏

导航栏内包含的是实现网站功能的按钮或链接，其项目的数量也不宜过多。一般情况下，同级别的项目数量以3～7个为宜。超过这一数量后，应尽量放到下一级别处理。设计合理的导航条可以有效地提高用户访问网站的效率。

导航栏按照放置的位置可分为横排和竖排两种；按照表现形式则有图像导航、文本导航和框架导航等。导航栏的制作需注意以下几点。

最好不用图片导航，如必须使用应减小图片大小。

内容丰富的网站可以使用框架导航，这样可以快速地在网站内的各栏目之间跳转，且只需下载一次导航页面。

在栏目不多的情况下，通常使用一排，如一般的个人网站或企业网站；如果导航栏目太多，可分两排或多排进行排列，如图1-7所示。

图1-7 多排导航栏

4．内容栏

内容栏是网页内容的主体，通常可以由一个或多个子栏组成，包含网页提供的所有信息和服务项目。

内容栏的内容既可以是图像，也可以是文本，或图像和文本结合的各种内容。

在设计内容栏时，用户可以先独立地设计多个子栏，然后再将这些子栏拼接在一起，形成整体的效果。同时，还可以对子栏进行优化排列，提高用户体验。

如网页的内容较少，则可以使用单独的内容栏，通过添加大量的图像使网页更加美观。

5．文本

因文本体积小、在网络上传输速度较快、用户可以很方便地浏览和下载，故成为了网页的主要信息载体。网页中文本的样式多变，风格不一，吸引人的网页通常都具有美观的文本样式。文本的样式可通过对网页文本的属性进行设置来调整，在后面的章节将详细讲解这方面的知识。

网页中最主要的元素就是文本，文本编辑操作对网页的整体起着决定作用。编辑文本时需注意以下几点。

文本的颜色需要能够明显地与背景区别开来，让浏览者能清楚地看到文本。

每行文字最好为20～30个汉字的长度，并注意段落的区分和缩进，以便于阅读。

同版面文本样式不宜过多，最好在3种以内。

5．图像

图像比文本更具有生动性和直观性，它可以传递一些文本不能传载的信息，如网站标识、背景等一般都是图像。

图像是网页中不可或缺的元素，使用图像时除了美观外，还应考虑它对网页下载速度的影响。在选择图片时应注意以下几点。

图像应采用淡色系列的背景，能与主题分离的则用浅色标志或文字背景。

图像的主题要清晰可见，所表达的含义要简单明了。

图像中的文字要求清晰可辨，不可出现朦胧、辨识不清的情况。

6．按钮

按钮的大小没有具体的规定，如图1-8所示。需注意的是，按钮要和网页的整体效果协调，不要太抢眼。一般采用背景较淡、字体较深的方式，也可采用具有较强对比度的颜色。

图1-8 各式按钮

7.Flash动画

Flash动画越来越多融入了适合自身风格的动画元素来展现形象或者展示信息的网页中。网络广告的形式不断翻新，越来越多的动画技术被应用在网络广告的推广领域。尤其是互动类纯flash 网站风靡网络，已成为影响设计师设计风格的一个重要因素，正因为如此，基于Flash互动式网站也成为了创意思潮的一个风向标。从静止到动起来，从粗糙的动画到对设计师创意的诠释，从动画展示到动画与功能完美的结合，从枯燥的展示到互动和用户体验理念的融入，从单一的软件运用到视频等其他软件和技术与flash的配合，从平面的动态效果到如今三维动画的流行，flash 已经在网页设计中发挥越来越重要的作用。

8．版尾

版尾是整个网页的收尾部分。在这部分内容中，可以声明网页的版权、法律依据以及为用户提供各种提示信息等。如图1-9所示为新浪首页的版尾。

除此之外，在版尾部分还可以提供独立的导航条，为将页面滚动到底部的用户提供一个导航的替代方式。

图1-9 网页版尾

1.2 Dreamweaver CS5概述

随着互联网的迅猛发展，越来越多的人想在网上构建属于自己的“家”。但以往由于创建网页需要较高的技术支持，导致大多数人的梦想无法实现。后来，越来越多的专业性网页设计软件开始进入人们的视野，在诸多的“所见即所得”的网页设计软件中，Dreamweaver无疑是使用最广泛，也是最优秀的一款软件。

Macromedia公司推出的Dreamweaver系列软件经过几代的发展，最新的版本是Dreamweaver CS5。Dreamweaver CS5一经推出，就以其强大的网页设计功能吸引了所有人的眼光，得到用户的广泛好评。下面将详细介绍Dreamweaver CS5的安装、修复及其启动与退出。

1.2.1 启动与退出Dreamweaver CS5

启动Dreamweaver CS5进入软件界面，如下图1-10所示。

若要退出Dreamweaver CS5程序，可以在菜单栏中选择“开始”→“退出”命令，或者使用Ctrl+Q组合键。

图1-10 Dreamweaver CS5界面

1.2.2 Dreamweaver CS5的主界面

启动Dreamweaver CS5软件，在软件主界面中首先显示一个起始页，在这个页面中包括“打开最近的项目”、“新建”和“主要功能”3个方便实用的项目栏，很多项目在初学时经常会用到，建议大家保留。在熟练之后可以在窗口底部选中“不再显示”复选框来隐藏它，如下图所示。

我们可以用新建或打开一个网页的方式进入Dreamweaver CS5的标准工作界面，如下图1-11所示。

图1-11 网页编辑窗口

3．文档工具栏

此工具栏包含一些按钮，它们提供各种“文档”窗口视图(如代码视图、拆分视图和设计视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)，如图1-12所示。

图1-12 文档工具栏

当打开或创建一个网页时，软件就会自动进入文档窗口，在文档区域中进行输入文字、插入表格和编辑图片等操作，就像在Word软件的文档页编辑文字一样。

文档窗口显示当前文档，用户可以通过文档工具栏在代码视图、拆分视图和设计视图三类视图中切换。

设计视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。

在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器

中查看页面时看到的内容。

代码视图：是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如PHP 或ColdFusion 标记语言(CFML))以及任何其他类型代码的手工编码环境，一般初学者较少

用到此视图。

拆分视图：则可使用户在单个窗口中同时看到同一文档的代码视图和设计视图，这给网页编辑提供了很大的方便，而且现在的主流显示器屏幕越来越大，这也大大提高了这一

视图的使用概率，拆分视图，在这个窗口下方为状态栏，它提供了与正在创建或打开的

文档有关的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层

次结构中的任何标签都可以选择该标签及其全部内容，而单击正文选择器可以选

择文档的整个正文。

5．“属性”面板

“属性”面板主要用来检查和编辑当前选定页面元素(如文本和插入的对象)的最常用属性。“属性”面板中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”面板将改为显示该图像的属性(如图像的文件路径、图像的宽度和高度、图像周围的边框等)，如图1-13所示。如果选择了文本，那么“属性”面板也会相应地变化成文本的相关属性。

图1-13 “属性”面板

6．浮动面板组

Dreamweaver CS5中的其他面板组可统称为浮动面板组，这些面板都浮动于编辑窗口之外，包括“CSS样式”面板、“插入”面板、“AP元素”面板、“资源”面板和“文件”面板。在窗口菜单中，选择不同的命令，可以打开设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组，由于此内容相当丰富，我们将在本章后续节都会有讲解。下图1-14所示为浮动面板组。如果显示和隐藏浮动面板组，可在菜单选择“窗口”→“插入”（CSS）等，如图1-15所示。

（1）“插入”面板

“插入”面板包含用于创建和插入对象(例如表格、图像和链接)的按钮。这些按钮按几个类别进行组织，您可以通过从“常用”弹出菜单中选择所需类别来进行切换，如图1-14所示。

（2）“CSS样式”面板

使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性(“当前”模式)，或影响整个文档的规则和属性(“全部”模式)。若要在两种模式之间切换，可单击“CSS样式”面板顶部的切换按钮。使用“CSS 样式”面板还可以在“全部”和“当前”模式下修改CSS属性。

图1-14 窗口中的浮动面板图1-15 “窗口”菜单

（3）“文件”面板

使用“文件”面板可查看和管理Dreamweaver 站点中的文件。

在“文件”面板中查看站点、文件或文件夹时，可以更改查看区域的大小，还可以展开或折叠“文件”面板。当折叠“文件”面板时，它以文件列表的形式显示本地站点、远程站点、测试服务器或SVN 库的内容。在展开时，它会显示本地站点和远程站点、测试服务器或SVN 库中的一个。

1.3 网页标准技术与XHTML

随着计算机技术的发展和数码产品的普及，越来越多的数码设备开始支持智能化和网络化，

除计算机外，各种PDA、手机、机顶盒等数码产品也开始支持浏览网页，然而众多的智能终端在解析网页文档时的标准并不统一，在传统的网页设计中，设计者往往需要针对不同的设备、浏览器软件编写大量兼容性代码。

网页标准化技术的意义在于将所有浏览网页的设备解析网页方式统一起来，这样，设计者只需编写一个网页文档，即可应用到所有的设备中。按照解析网页的模块划分，网页体系主要包括结构、表现和行为三类内容，基于这三类内容，W3C和众多的国际组织建立了网页标准化的规范，定义了标准化的编辑语言。

1.3.1 网页结构语言

网页结构语言的作用是将网页需要的内容以结构化、模块化的方式总结和存储，供表现语言和行为进行调用。网页结构语言包括XHTML 1.0和HTML 5等两种结构语言。其中，XHTML 1.0为当前被广泛使用的标准，而HTML 5标准则是网页未来将被使用的标准。

1．XHTML 1.0结构语言

XHTML语言的特点是严谨和具有严格的结构与书写格式。在2000年1月26日，XHTML 语言正式被W3C（World Wide Web Consortium，万维网联盟，一个定制各种互联网标准的非赢利组织）批准为网页设计的国际标准语言，替代了早期的HTML 3.2和HTML 4.0。

详细内容将在后节中再作介绍。

2．HTML 5结构语言

随着iPhone、iPad等便携式数码设备的普及，传统的XHTML逐渐不能满足人们对网页的图形显示与媒体播放需求。基于此，由W3C（World Wide Web Consortium，万维网联盟）牵头，苹果等公司通力协作开发出了最新的Web结构语言标准，即HTML 5标准。目前，HTML 5标记语言仍处于完善中，但绝大多数最新的Web浏览器都已开始支持其部分标签。

相比传统的HTML和XHTML，HTML 5更专注于用户对娱乐的需求，追求以更高的效率、更丰富的内容和对外部插件（如Flash、ActiveX等）更少的需求来展示网页，其具有以下几种特性，如表1-1所示。

表1-1 HTML 5的新特性

HTML 5新增了多种语义化的结构标签，允许用户使用这些标签对网页进行划分，从而使网页代码更加直观。同时，HTML 5还简化了文档类型声明的内容，一个典型的HTML 5文档结构如下所示。

<--!版头-->

<--!导航条-->

<--!主体文章内容-->

<--!侧栏内容-->

<--!版尾-->

与XHTML相比，HTML 5的标签更富有语义化。通过以上的代码，用户可以方便地定制网页中的结构化内容，从而使网页更加模块化，在Web浏览器中看起来更加规整。

3.网页表现语言

网页表现语言的作用是为网页的结构语言定义尺寸、位置、背景，以及文本的各种效果。目前网页表现的国际标准语言为CSS样式表技术。

CSS（Cascading Style Sheets，层叠样式表）是一种由W3C定义的数据表格式，其作用是为XML、HTML以及XHTML等结构化的文档添加样式描述，从而实现对文档中内容的排版和美化。

在传统的网页文档中，HTML语言以混合结构与表现的方式显示内容，由于没有统一的样式管理，每个页面即使是相同的标记都必须一一进行更改，从而大大增加了维护的时间、成本及效率。随着网站内页面的不断更新、扩展，需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS。

在页面设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单修改，就可以改变同一页面的不同部分，或者页

数不同的网页的外观和格式。

CSS为标记语言提供了一种样式描述，定义了其中的元素显示方式。CSS在设计领域中是一个突破，仅仅通过CSS样式表就能够使网页开发人员控制所有出现在网页中的外观及布局，并且可以为每种标记语言的元素和应用该元素的每个页面定义所需要的样式。简单的改变样式，所有与之相关的元素都会自动更新。

CSS的出现还使网页文档中结构与表现的分离成为可能。将CSS与XHTML文档相结合，除了可以完全实现HTML语言所能实现的功能外，还增强了对各种网页元素的精确控制，从而使网页中各种元素以精确到像素的方式显示，丰富了网页元素的内涵。

4.网页行为语言

之前的网页结构语言和网页表现语言共同作用可以为用户呈现网页的整体画面，然而，网页是一种交互性的媒体，其除了可以呈现内容外，还可以根据用户的界面操作响应各种事件，此时，就需要用到网页的行为语言。

网页的行为语言包括多种类型，例如JavaScript、JScript以及VBScript等。由于这些语言之间语法各有特点，且支持的Web浏览器各不相同，使得网页设计者往往需要花费大量的精力进行调试，因此，ECMA国际（European Computer Manufacturers Association，欧洲计算机制造商协会，一个国际性信息和电信标准化组织）以NetScape（网景）公司开发的JavaScript脚本语言为基础，定义了ECMAScript脚本语言标准。

ECMAScript并非具体的脚本编程语言，而是吸收多种脚本语言的特点和规范，制定的一种标准。符合该标准的脚本编程语言都可被称作ECMAScript。例如，由Mozilla FireFox浏览器支持的JavaScript和微软Internet Explorer支持的Jscript等都是符合ECMAScript的子集、具体实现或扩展。

注意：

在网页设计领域中，所经常提到的js并不是一种脚本语言，而是多种脚本语言的结合体。这些脚本语言之间具有很多的相同之处，但并非完全相同。例如，在IE浏览器中，所允许使用的就是Jscript，而在FireFox、Safari和Opera等浏览器中，则使用的是最早由NetScape和Sun提供的JavaScript。除此之外，还有iCab浏览器，其所采用的也是符合ECMAScript的InScript脚本语言等。

ECMAScript通过一种被称作DOM（Document Object Model，文档对象模型）的技术实现对各种结构化文档的控制，可以根据程序的指令，动态地改变文档中的内容以及描述文档的CSS代码。随着技术的发展，越来越多的网页开始采用ECMAScript的子集脚本编写各种特效、交互响应等。

除了直接应用于网页各种ECMAScript脚本外，应用于Adobe Flash和Flex的ActionScript脚本语言也是ECMAScript的一个子集。在微软的ASP程序中，也可以使用符合ECMAScript标准的Jscript语言进行编写。

1.3.2 了解XHTML

XHTML（Extensible Hyper Text Markup Language），即可扩展的超文本标记语言，是由HTML （Hyper Text Markup Language，超文本置标语言）发展而来的一种网页编写语言，也是目前最常见的网页编写语言之一。XHTML结构语言相比早期的HTML，最大的特点就是将网页的结构内容与简单的排版表现功能分离，避免了数据内容的臃肿，提高了网页文档被搜索引擎检索的效率。

使用XHTML编写的网页文档结构更加规范，体积更小，代码也更加精炼。基于这些优点，XHTML 迅速取代了传统的HTML，成为网络中应用最广泛的结构语言。

1.3.3 XHTML的基本语法结构

相对于HTML而言，XHTML的语法更加规范和严格，使用XHTML书写的代码更加简洁、易于判读。编写XHTML文档之前，必须了解XHTML的基本结构。常用的是XHTML 1.0它规定了三种XML 文档类型，以对应各自的DTD。DTD用来表示文档的类型，比如：XHTML 1.0 Transitional，它包含文档的代码规范。网页浏览器就是根据DTD来解析各种语言编写网页，然后反将网页以图形化方式显示出来。

在Dreamweaver CS5的“新建文档”窗口，选择“文档类型”，就可设置DTD类型，默认为“XHTML 1.0 Transitional”，在如图1-16所示。

图1-16 Dreamweaver CS5新建文档

1.XHTML 1.0 的三种 XML 文档类型

（1）STRICT（严格类型）即XHTML 1.0 Strict。

如果需要干净的标记，避免表现上的混乱，就选择此文档类型，它一般与层叠样式表（CSS）配合使用。声明代码如下：

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"https://www.wendangku.net/doc/4d18638373.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">

（2）TRANSITIONAL（过渡类型）即XHTML 1.0 Transitional。

当不得不要用 XHTML 来表现特性，以及对那些不支持层叠样式表的浏览器时，可选择该文档类型。声明代码如下：

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"https://www.wendangku.net/doc/4d18638373.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（3）FRAMESET（框架类型）即XHTML 1.0 Frameset。

该类型是专门为框架网页设计的，若设计网页中需要使用框架，则必须选用这个文档类型。比如，需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"https://www.wendangku.net/doc/4d18638373.html,/TR/xhtml1/DTD/xhtml1-frameset.dtd">

还有其它类型这里不作介绍，有兴趣的读者可以自己去学习。

2．XHTML结构

XHTML编写的文档拥有固定的结构，包括声明、根元素、头部元素、主体元素4个部分。

打开Dreamweaver CS5，执行“文件”→“新建”命令，建立一个空白网页文档。单击“文

档”工具栏中的“代码”视图按钮，可看到一个典型的XHTML代码的文档。如图1-17所示。

图1-17 代码视图

"https://www.wendangku.net/doc/4d18638373.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

为了便于大家对XHTML文档结构标记的进一步理解，用图1-18再作一说明。

图1-18 XHTML文档结构示意

注意：为便于理解，在以上代码中，用“”将该文档的每一段都进行了注释。在XHTML文档中，标签“”以及其之间的内容不会被浏览器解析，也就是说在浏览状态下这些内容是看不见的，但这些用来对代码进行说明的内容在代码行中可以存在。

2．声明部分

XHTML在HTML的基础上增加了声明部分，即标签。在上面的代码中，“”部分为文档的DTD，其他则为HTML命名空间部分，也就是XHTML的根元素。HTML的命名空间部分（html根标签）还包括文档头（head标签）和文档主体（body 标签）部分。

该标签用于定义文档的类型，并设置XHTML的版本。在为XHTML文档进行声明时应注意，该标签必须大写。

XHTML语言编写的文档扩展名与HTML文档相同，既可以是htm，也可以是html。目前，所有的网页浏览器都可以完全解析XHTML文档。

可以编辑XHTML语言的软件很多，包括专业网页设计软件（如Adobe Dreamweaver，Microsoft Expression Web等）以及各种文本编辑软件（例如Windows记事本、UltraEdit、Notepad ++以及vi和emacs等）。

一个典型的XHTML文档由各种以尖括号“<>”括住的标签组成，主要包括DTD（Document Type Definition，文档类型声明）、HTML命名空间等两个部分。

文档头的作用是提供网页文档的媒体标记（meta标签）、标题标记（title标签）以及加载的各种外部描述性文档（style标签）或脚本文档（script标签）等，而文档的主体部分则用于存储各种显示于网页中的数据。

3.XHTML标签

XHTML的所有内容都存放特定的标签中，子级标签被嵌套于父级标签内容。每个标签都包含多个属性和属性的值。

标签：是XHTML中的元素，它的作用是为文档添加指定的各种内容。比如，简单的换行符标签“
”等。XHTML 文档的根元素“”、头部元素“”以及主

体元素“”等都是特殊标签。

属性：属性是对标签的定义，它为标签添加一个功能。比如，学生有“学号”、“姓名”、“专业”等。这都是对学生的描述。

属性的值：属性值是属性的表述。比如，某学生的学号“001”，姓名为“王小”，专业为“物联网”就是属性的值。作为标签值就是为标签设置具体的数值或内容。例如，图

像标签“”设置图像的URL地址，也就是将URL地址作为属性值，添加到scr

属性中去。

4. XHTML语法特色

（1）XHTML 所有标签必须被闭合

对于成对的标签一般都会被闭合，如果单独不成对的标签，应在标签的最后加一个“/”对进行闭合处理，比如，“
”、“”等。

例如：An image:

A break:

（2）XHTML 所有元素和属性必须小写

这是由XHTML规范定义决定的，标签名和属性对大小写敏感，必须是小写的英文字母。例如，“”和“”表示不同的标签。

（3）属性值必须加引号

在XHTML中必须为属性加引号，例如“

（4）所有属性都要被赋值

与HTML不同，XHTML中，属性必须要赋值，如果属性没有值的话，则以属性名作为属性值赋值。例如，。

（5）不要在注释内容中使用“--”

“--”只能出现在注释的开头和结束。

例如：的写法是错误的。

而的写法是正确的。

1.3.4 使用XHTML标签

XHTML文档的核心是XHTML标签，标签是用来实现或体现某项内容的最小单位，它几乎涵盖了网页设计的绝大多数需求，所以说在学习XHTML语言时，除了要知道语言结构以外，更多是学习掌握这些标签的使用方法要求，并在熟练使用的基础上掌握各自的特点。

为了对XHTML语言以及标签有一个整体直观的了解，现看下面的一个例子。

在Dreamweaver CS5的启动界面如图1-10所示，在菜单栏选择“文件”→“新建”命令，打开如图1-16所示的“新建文档”对话框，单击右下角的“创建”得到网页编辑窗口。如果要在网页中实现有文本、表格（表格单元格中还有值）和图像，其结果如图1-19所示。在编辑页面内可以通过窗口菜单操作的方式来实现，也可以通过XHTML语言代码的方式来实现。本例代码的方

式来实现。请大家把设计的结果与代码行进行逐一对照，自己看看标签的大概用法与作用。

图1-19 代码运行后设计结果

实现图1-19所示的设计结果的代码如下：

这学期我们学习网页设计与制作这门课。

下面是一个表格：

下面插入一张《华山》图片：

通过以上的对比学习，下面就开始进行比较具体的讲解。

在XHTML中根据功能来分主要有三种标签，即布局标签、内容标签和复合标签。

（1）布局标签

它是以结构模块的方式显示在网页中，构成一个能够识别的矩形区域。因局部标签定义了一个矩形的区域块，所以又被称为块状标签。在该块状区域内又可添加其它的布局标签。常见的局面标签主有以下几种。

div标签

div是英文“division”的缩写，其含意是区划、分割区域。在网页文档中，“