作者：金景文化
出版社：数字艺术出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML+CSS+JavaScript网页设计实用教程试读：
前言
随着互联网的不断发展和成熟，网页的概念已经深入人心，越来越多的人群开始接触网页设计，网页的设计和制作不再是网页设计师的专利。或许我们用网页制作方面的软件就能设计出一个简单的网页。这样对于网页初学者来说，是不是只要精通一门软件就可以掌握整个网站前台的开发呢？答案当然是否定的。软件仅仅只是一个工具，要想真正掌握整个网站前台的制作，必须追究整个网站前台制作的深层次内容，这样在设计网页时就要掌握以下超文本标记语言HTML的有关知识，完成对网页结构的了解，再依据结构添加CSS样式，呈现出一个美观、大方的网页，最后加上JavaScript脚本代码，表现网页的动态行为。
本书从网页设计初学者的角度出发，由浅入深地讲解HTML+CSS+JavaScript这些网站前台设计语言，在对这些设计语言理论知识点讲解的同时配合大量的实例进行形象分析。理论与实践的结合可以为网页设计初学者提供一个很好的入门。
本书章节安排
本书详细介绍了网站前台设计中所需要的三种设计语言：HTML、CSS和JavaScript，在此基础上，重点讲述了怎样将这三种设计语言结合起来实现网页设计效果。书中使用大量案例对网页设计中的重点、难点进行深层次讲解，促进读者对新知识点的消化。案例也会从设计者眼光看待网页的制作，启发读者设计灵感。
本书共分为22章，每章的内容如下。
第1章 HTML基础
，简单讲解了一些网站与网页的基本知识和三种网站前台设计语言在网页中的作用。主要讲解了HTML中文档结构、标签形式、代码规范以及编写HTML代码的方式等。第2章 HTML整体结构设置，主要介绍了整个网页的HTML结构，包括HTML的头部标签和主体标签等。
第3章 HTML中文本与段落设置，主要介绍了网页中文本的一些标签处理，了解一些网页文字在HTML中的简单设置方法，还介绍了怎样在网页文本中插入水平线、滚动文本等。
第4章 HTML中列表设置，重点介绍了HTML中五种列表标签以及它们各自的使用案例。
第5章 HTML中图像设置，主要介绍了网页中图像的一些格式，重点介绍了在网页中插入图片的HTML标签。
第6章 HTML中超链接设置，主要介绍了在网页中创建超链接、锚点链接和图像超链接的方法，了解一下相对路径和绝对路径。
第7章 HTML中多媒体设置，主要介绍了在网页中插入多媒体标签、背景音乐以及普通视频的方法。
第8章 HTML中表单元素的设置，主要介绍了表单标签，重点介绍了表单元素的使用。
第9章 HTML中表格和Div的应用，主要介绍了网页中表格创建的具体方法，重点介绍了表格的属性、单元行和单元格的属性，了解Div的应用。
第10章 HTML中框架的设置，简单介绍了使用框架组织网页的方法，主要讲解框架集以及框架的一些标签等。
第11章 CSS样式基础，主要介绍了CSS样式在网页中的作用以及在HTML页面中使用CSS样式的方法。重点介绍了CSS样式的语法和基本的CSS选择器。
第12章 使用CSS设置文字和段落样式，主要介绍了设置网页中文字和段落CSS样式的基本方法。
第13章 使用CSS设置列表和背景样式，主要介绍了在CSS样式中设置网页中三种常见列表样式和设置网页背景样式的方法。
第14章 使用CSS设置图片和超链接样式，主要介绍了如何定义网页中图片和链接的一些CSS样式，重点介绍了怎样定义图片的边框、缩放、对齐CSS样式。
第15章 使用鼠标效果和CSS滤镜，主要介绍了CSS的滤镜知识以及一些常见用法，重点介绍了如何使用CSS定义鼠标的效果。
第16章 CSS布局，主要介绍了CSS的盒模型、CSS布局理念、布局中的浮动与定位以及其他几种具体的布局方法，也简单介绍了Div标签与Span标签的区别、CSS布局与传统表格布局的区别。
第17章 JavaScript基础，主要介绍了JavaScript的发展和特点、JavaScript在网页中的作用以及怎样在网页中使用JavaScript。
第18章 JavaScript的语法基础，主要介绍了JavaScript基础语法、JavaScript交互基本方法，重点介绍了JavaScript变量、JavaScript数据类型、JavaScript运算符、JavaScript条件语句和循环语句。
第19章 JavaScript中的事件响应，主要介绍了JavaScript中的常用事件，有click事件、change事件、select事件、focus事件、load事件和onblur事件等。
第20章 JavaScript中的函数，主要介绍了JavaScript中函数的定义和使用以及JavaScript中的核心对象等。
第21章 JavaScript实现网页动态效果，主要介绍了JavaScript中的一些使用案例，用JavaScript实现网页文字特效、网页图像特效和导航菜单特效。
第22章 综合案例，通过四个典型的商业网站案例制作，介绍使用HTML+CSS+JavaScript制作网站页面的方法和技巧。
本书特点
全书内容丰富，知识点条理清晰，通过22章的内容，为读者全面系统地介绍了网站前台设计的三种语言，采用理论知识与案例结合的办法使知识融会贯通。
本书主要有以下特点。
●案例经典，上手快速，语言通俗易懂，讲解清晰，除了图书配合多媒体教学讲解外，我们对书中的配图也做了详细、清晰的标注，每步一图，让读者学习起来更加轻松，阅读更加容易。
●本书主要从初学者角度入手，由浅入深，循序渐进地讲解了网站前台设计中的三种语言并详细地通过实例介绍了它们各自的用法。
●本书通过知识点与案例相结合的方法讲解了网站前台设计中的三种语言，可以尽量使读者少走弯路。
●本书配套光盘中提供了书中所有案例的源文件和相关素材，并且书中每个案例都录制了相关的视频教学，方便读者边学边练。
PPT课件及其下载说明
本书正文中所述PPT课件已作为学习资料提供下载，扫描右侧二维码即可获得文件下载方式。PPT内容包括本书所涉及的理论知识、软件讲解和软件设置操作，以及实例的技术要点和最终效果。PPT课件的结构完整，便于相关课程的讲师根据自己的实际需求完善课件，提高教学质量。
如果大家在阅读或使用过程中遇到任何与本书相关的技术问题或者需要什么帮助，请发邮件至szys@ptpress.com.cn，我们会尽力为大家解答。第1章HTML基础
课堂学习目标：
★了解Internet相关的概念和知识
★理解HTML、CSS样式和JavaScript在网页中的作用
★掌握HTML和XHTML的相关基础知识
★掌握编写HTML的方法
★了解网页设计制作的基本流程
目前，有许多可视化的网页制作软件，如Dreamweaver，它提供了强大的可视化操作界面，所见即所得，使用非常方便。但是所有网页的本质都是HTML语言，一个优秀的网页设计者不但需要能够熟练的掌握可视化网页制作软件，更应该熟悉HTML语言，具备一定的HTML语言的基本知识是非常必要的。1.1了解Internet相关知识
本节将介绍有关Internet的相关知识，包括TCP/IP协议、IP地址等，这些知识对于理解网页制作技术的基础原理是非常重要的，理解Internet相关知识，便于为后面学习网页制作打下良好的基础。1.1.1 TCP/IP协议
TCP/IP是Transmission Control Protocol/Internet Protocol的缩写，中文为“传输控制协议/网际协议”。它是Internet所采用的标准协议，主要包括TCP、IP、UDP和ICMP等协议。
TCP/IP协议使用客户端/服务器模式进行通信。TCP/IP通信是点对点的，即通信是网络中的一台主机与另一台主机之间的。当前Internet上的数据都是通过TCP/IP在网络上进行控制和转发的。
提示：
TCP/IP协议可以让不同结构的主机、不同操作系统的主机通过网络连接。在TCP/IP协议中，HTTP协议用于浏览网页，FTP协议用于Internet文件共享。1.1.2 IP地址和域名
IP地址是分配给网络上计算机的一组由32位二进制数值组成的编号，来对网络中计算机进行标识。为了方便记忆地址，采用了十进制标记法，每个数值小于等于255，数值中间用“.”隔开。一个IP地址对应一台计算机并且是唯一的。这里提醒大家注意的是所谓的唯一是指在某一时间内唯一，如果使用动态IP，那么每一次分配的IP地址是不同的，这就是动态IP，在使用网络的这一时段内，这个IP是唯一的指向正在使用的计算机的；另一种是静态IP，它是固定将这个IP地址分配给某计算机使用的。网络中的服务器就是使用的静态IP地址。
IP地址是一组数字，人们记忆起来不够方便，因此人们给每个计算机赋予了一个具有代表性的名字，这就是主机名。主机名由英文字母或数字组成。将主机名和IP地址对应起来，这就是域名，方便大家记忆。
域名和IP地址是可以交替使用的，但一般域名还是要通过转换成IP地址才能找到相应的主机，这就是上网的时候经常用到的DNS域名解析服务。1.1.3 URL
URL 是 Universal Resource Locater 的缩写，中文为“统一资源定位地址”，也称“全球资源定位器”。前面已经了解了什么是域名，可以通过域名比较方便地访问网络上的网站。但是一个域名只能对应一个IP地址（通常是一个网站）。访问网站上的具体内容，必须通过URL来实现。
URL，通俗地讲就是平常所说的网址，例如http://www.baidu.com/index.html，就是一个完整的URL。通过域名下的目录访问该网站所需要的网页， http://代表采用http协议访问。
通过URL，可以精准地定位网络上的各种资源，除了网页文件以外，还可以定位图片、音乐和视频等。如果直接输入域名访问网站，URL将会指向该网站的默认主页。例如，在浏览器的地址栏中输入www.163.com与输入www.163.com/index.html是访问同样的网页，如图1-1所示。图1-11.1.4 Web浏览器
浏览器是安装在电脑中用来查看因特网中网页的一种工具，每一个因特网的用户都要在电脑上安装浏览器来“阅读”网页中的信息，这是使用因特网的最基本的条件，就好像我们要用电视机来收看电视节目一样。目前大多数用户所用的Windows操作系统中已经内置了浏览器IE。
目前主流的浏览器如图1-2所示，分别介绍如下。图1-2
●IE浏览器
微软公司开发的Microsoft Internet Explorer浏览器，简称IE，目前最高版本是11.0。IE浏览器是集成在Windows操作系统中的，所以也是使用最为普遍的一种浏览器，国内大多数用户都使用该浏览器。
●Firefox浏览器
中文称为火狐浏览器，拥有独立的内核。火狐浏览器体积小，运行速度非常快。
●Google Chrome浏览器
中文称为谷歌浏览器，采用Webkit核心，采用了“内置高速缓存”的优化技术，使得Chrome浏览器速度非常快。
●Opera浏览器
Opera浏览器安全性能高，漏洞比IE和Firefox浏览器要少得多，浏览速度快，占用内存也比较小。
●Safari浏览器
Safari是苹果开发的浏览器，借以同其他竞争对手抗衡。采用Webkit核心，速度很快，不过兼容性和扩展性略有逊色。
需要注意的是，尽管各种不同的浏览器界面大致相同，但是对于浏览使用了特效的同一个网页，显示的效果也可能不同，即便是同一个公司的不同版本的浏览器也有这样的状况。因此，在网页设计制作过程中应该考虑到浏览对象的不同而选择不同的设计制作方式。例如如果网站主要面对的对象是国内用户，而国内用户大多使用Windows自带的浏览器，就可以选择目标浏览器是IE，同时要兼顾一下还在使用低版本IE浏览器的用户；如果面对的对象是海外用户，而海外很多人习惯使用Firefox或Google Chrome浏览器，就可以选择Firefox或Google Chrome浏览器。
提示：
目前，国内还有很多其他的浏览器，例如遨游、搜狗、腾迅TT等，这些浏览器都是以IE为核心的，在IE浏览器核心的基础上添加一些其他的功能，页面的显示效果与IE浏览器中的显示效果基本相同。1.2网页与网站
作为上网的主要依托，网页由于人们频繁地使用网络而变得越来越重要，这使得网页设计也得到了发展。网页讲究的是排版布局，其目的就是提供一种布局更合理、功能更强大、使用更方便的形式给每一个浏览者，使他们能够愉快、轻松、快捷地了解网页所提供的信息。1.2.1 网页与网站的关系
网页是Internet的基本信息单位，英文为Web Page。一般网页上都会有文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容。进入网站首先看到的是其主页，主页集成了指向二级页面以及其他网站的链接。浏览者进入主页后可以浏览相应的网页内容并找到感兴趣的主题链接，通过单击该链接可以跳转到其他网页，如图1-3所示腾讯网站首页面。图1-3
提示：
在网页中，文本内容是最常见的，早期的网页就是全部由文本构成的。随着技术的发展，网页中逐步添加了图像、动画、音乐、视频等多媒体内容，从而使网页更加美观，更具有视觉冲击力。
网站，英文为Web Site。简单来说网站是多个网页的集合，其中包括一个首页和若干个分页。那什么是首页呢？首页即是访问这个网站时第一个打开的网页。除了首页，其他的网页即是分页了，图1-4所示为新浪网站“新闻中心”的一个分页。网站是多个网页的集合，但它又不是简单的集合，这要根据该网站的内容来决定，比如由多少个网页构成、如何分类等。当然一个网站也可以只有一个网页即首页，但是这种情况很少见，也不向大家推荐。图1-41.2.2 静态网页与动态网页
静态网页是相对于动态网页而言的，并不是说网页中的元素都是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页，网页中的GIF动画， Flash，以及Flash按钮等都会发生变化。
静态网页的执行过程大致如下。
1．浏览器向网络中的服务器发出请求，指向某个静态网页；
2．服务器接到请求后将指定的静态网页传输给浏览器，此时传送的只是文本文件；
3．浏览器接到服务器传来的文件后解析HTML标签，将结果显示出来。
动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。
动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网站技术生成的网页都成为动态网页。在动态网页网址中有一个标志性的符号——“?”，如图1-5所示。图1-5
提示：
动态网页是与静态网页相对应的，静态网页的URL后缀是以.htm、.html、.shtml、.xml等常见形式出现的。而动态网页的URL后缀是以.asp、jsp、php、perl、cgi等形式出现的。1.3HTML、CSS与JavaScript
想要学好网页设计制作，就必须掌握HTML、CSS样式和JavaScript这三种语言。这三种语言在网页设计制作过程中起着非常重要的作用。本节将向读者介绍HTML、CSS样式和JavaScript的关系，以及在网页设计制作过程中的作用。1.3.1 HTML、CSS和JavaScript代码
在网页中使用HTML和CSS样式相互结合，才能够表现出多姿多彩的网页效果。如果想在网页中实现一些动态的交互效果，则必须在网页中加入相应的JavaScript脚本。
知识点：HTML代码
在操作系统中，打开记事本，在记事本中编写如下的HTML代码。
HTML页面
这是一个简单的HTML页面
这里编写的是一个基础的HTML页面，完整的HTML代码，以标签开始，以标签结束。在该页面中并没有包含CSS样式和JavaScript脚本。
在编写HTML的记事本中执行“文件>另存为”命令，将其保存为.html格式文件，使用IE浏览器打开该网页文件，可以看到网页效果，如图1-6所示。图1-6
通过上面的操作可以发现，使用记事本就可以编写HTML代码，不需要任何专业软件工具，并且使用IE浏览器可以查看网页（.html文件）的效果。
知识点：CSS样式代码
在记事本中打开刚刚编写的HTML文件，在
与标签之间添加如下的CSS样式代码，这是内部CSS样式的完整形式，以标签结束。保存网页代码，在IE浏览器中预览页面，可以看到页面的效果，如图1-7所示。图1-7
通过与前面没有使用CSS样式的网页相比较，可以发现网页标题文字发生了变化，这就是CSS样式起到的作用。
知识点：JavaScript代码
使用记事本打开刚刚编写的HTML页面，在
与标签之间添加如下的JavaScript脚本代码。JavaScript脚本代码是以标签结束。这里所添加的JavaScript脚本代码用来在打开网页时弹出一个提示框。保存网页代码，在IE浏览器中预览页面，可以看到使用JavaScript实现的弹出提示窗口的效果，如图1-8所示。图1-8
使用JavaScript脚本代码可以在网页中实现许多动态交互效果。JavaScript脚本代码可以直接编写在HTML代码中。1.3.2 HTML在网页中的作用
HTML的英文全称是HyperText Markup Language，中文称为“超文本置标语言”，也称“超文本标记语言”。使用HTML就可以制作标准的网页。注意， HTML只是一种标记语言，它只能建议浏览器以什么方式或结构显示网页内容，这不同于程序设计语言。因此，HTML是比较简单易学的，初学者只需要掌握HTML的一些常用标签即可。
HTML是Internet上用于设计制作网页的主要语言。网页中所包括的图像、动画、表单和多媒体等复杂的元素，其基础本质都是HTML。图1-9所示为腾讯网的首页，其中包括了多种复杂的网页元素，在网页空白位置单击鼠标右键，在弹出菜单中执行“查看源”命令，可以在记事本中看到该网页的源代码依然为HTML，如图1-10所示。图1-9图1-101.3.3 CSS在网页中的作用
网页发展的前期，HTML语言是可以标记页面文档中的段落、标题、表格和链接等格式的，但随着网络的快速发展，HTML语言越来越不能满足网页效果多样化的需求。为了解决这个问题，1997年万维网联盟（W3C）颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1。随后，CSS样式又得到了更多的完善和充实。
CSS样式是目前唯一的网页排版布局样式标准。CSS样式可以使任何浏览器都按所设置的属性显示网页元素的布局和外观格式。1.3.4 JavaScript在网页中的作用
HTML和CSS样式相互结合，可以制作出精美的静态网页，但这样的静态网页缺少交互性。随着用户对于网页需求的不断提升，网页如果缺少一定的交互性，也就无法吸引浏览者。
出于这样一种需求，越来越多的网页开发者在网页中加入JavaScript来实现网页中的交互效果。在网页中加入JavaScript使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态和交互的页面功能。
JavaScript是一种基于对象的脚本语言，JavaScript在网页中用于开发Internet客户端的应用程序。JavaScript可以与HTML和CSS样式相结合，在网页中实现与Web用户的交互功能。1.4HTML网页技术
HTML网页技术是一切网页技术的基础，只有学好HTML技术，才能够制作出精美的网站。
HTML主要运用标签使页面文件显示出预期的效果，也就是在文本文件的基础上，加上一系列的网页元素展示效果，最后形成后缀名为.htm或.html的文件。当读者通过浏览器阅读HTML文件时，浏览器负责解释插入到HTML文本中的各种标签，并以此为依据显示文本的内容。把HTML语言编写的文件称为HTML文本，HTML语言即网页的描述语言。1.4.1 HTML概述
在介绍HTML语言之前，不得不介绍万维网（World Wide Web）。万维网是一种建立在因特网上的、全球性的、交互的、多平台的和分布式的信息资源网络。它采用HTML语法描述超文本（Hypertext）文件。Hypertext一词有两个含意：一个是链接相关联的文件；另一个是内含多媒体对象的文件。
HTML是Internet中用于编写网页的主要语言， HTML提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件。通过HTTP通信协议，HTML文件可以在万维网上进行跨平台的文件交换。
HTML文件制作简单，且功能强大，支持不同数据格式的文件导入，其主要特点如下。
1．HTML文档容易创建，只需要一个文本编辑器就可以完成；
2．HTML文件存储容量小，能够尽可能快速在网络中进行传输和显示；
3．HTML文件与操作平台无关，HTML独立于操作系统平台，能够与多种平台兼容，只需要一个浏览器就可以在操作系统中浏览网页文件；
4．简单易学，不需要很深的编程知识；
5．HTML具有扩展性，HTML的广泛应用带来了加强功能、增加标识符等要素，HTML采取了类元素的方式，为系统扩展提供了保证。
提示：
HTML文件可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。1.4.2 HTML文档结构
HTML的所有标题都是由“<”和“>”括号括起来，如。在起始标签的标签名前加上符号“/”便是其终止标签，如。HTML文档内容要包含在与标签之间，完整的HTML网页文档应该包括头部和主体两大部分。
HTML文件基本结构如下。
网页头部部分
网页主体内容部分
●……
告诉浏览器HTML文件开始和结束，标签出现在HTML文档的第一行，用来表示HTML文档的开始。标签出现在HTML文档的最后一行，用来表示HTML文档的结束。两个标签一定要一起使用，网页中的所有其他内容都需要放在与之间。
●
……网页的头标签，用来定义HTML文档的头部信息。该标签也是成对使用的。
●
……在
标签之后就是与标签了，该标签也是成对出现的。与标签之间为网页主体内容和其他用于控制内容显示的标签。1.4.3 HTML中的标签形式绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间的部分是元素体，例如
…。第一个元素都有名称和可选择的属性，元素的名称和属性都在起始标签内标明。知识点：普通标签
普通标签是由一个起始标签和一个结束标签所组成的，其语法格式如下。
其中，x代表标签名称。
加粗文字
标签之中还可以附加一些属性，用来实现或完成某些特殊效果或功能，例如，下面的代码。
其中，a、a、……a为属性名称，而v、v、……v则是其所对12n12n应的属性值。属性值加不加引号，目前所使用的浏览器都可接受，但根据W3C的新标准，属性值是要加引号的，所以最好养成加引号的习惯。
知识点：空标签
虽然大部分的标签是成对出现的，但也有一些是单独存在的，这些单独存在的标签称为空标签，其语法格式如下。
同样，空标签也可以附加一些属性，用来完成某些特殊效果或功能，例如，下面的代码。
W3C定义的新标准（X H T M L1.0/H T M L4.0）建议：空标签应以/结尾，即
如果附加属性，则格式如下。
例如，下面的代码。
目前所使用的浏览器对于空标签后面是否要加/并没有严格要求，即在空标签最后加/和没有加/不影响其功能，但是如果希望文件能满足最新标准，最好加上/。
提示：
其实HTML还有其他更为复杂的语法，使用技巧也非常的多，作为一种语言，它有很多的编写原则并且以很快的速度发展着。1.4.4 编写HTML时需要注意的问题
HTML由标签和属性构成，在编写HTML文档时，需要注意以下几点。
1．“<”和“>”是任何标签的开始和结束。元素的标签需要使用这对尖括号括起来，并且在结束标签的前面加上符号“/”，如
。2．在HTML代码中不区分大小写。
3．任何空格和回车在HTML代码中均不起作用。为了HTML代码的清晰，建议不同的标签之间使用回车进行换行。
4．在HTML标签中可以添加各种属性设置，例如下面的HTML代码。
这里是段落文本
5．需要正确地输入HTML标签。输入HTML标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示。
6．在HTML代码中合理的使用注释。注释语句只会出现在HTML代码中，不会在浏览器中显示。1.5了解XHTML
XHTML是当前HTML版本的发展和延伸。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难。对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。1.5.1 什么是XHTML
XHTML是HTML的一种扩展，即Extensible HyperText Markup Language的缩写，表示XHTML是可扩展的超文本标记语言，与HTML相比，具有更加规范的书写标准、更好的跨平台能力。
HTML是一种基本的网页设计语言，XHTML是一种基于XML（可扩展标记语言）的标识语言，看起来与HTML非常相似，只有一些细节的重要区别。XHTML就是一种扮演着类似HTML角色的XML，所以，本质上说，XHTML是一种过渡技术，融合了部分XML的强大功能及大多数HTML的简单特性。
XHTML 1.0是在HTML4.0的基础上进行优化和改进的新语言，它与HTML最主要的不同之处在于：XHTML元素一定要正确地嵌套，XHTML元必须要关闭，标签名称必须使用小写字母，XHTML文档必须拥有根元素。1.5.2 XHTML的文档结构
首先看一个最简单的XHTML页面实例，其代码如下。
文档内容部分
在这段代码中，包含了一个XHTML页面必须具有的页面结构，其具体结构包含下面几个部分。
●文档类型声明部分
文档类型声明部分由 元素定义，其对应的页面代码如下。
●元素和名字空间
元素是XHTML文档中必须使用的元素，所有的文档内容（包括文档头部内容和文档主体内容）都要包含在元素之中，元素的语法结构如下。
文档内容部分
起始标签和结束标签一起构成一个完整的元素，其包含的内容要写在起始和结束标签之间。
名字空间是元素的一个属性，写在元素起始标签里面，其在页面中的相应代码如下。
名字空间属性用xmlns来表示，用来定义识别页面标签的网址。
●文档头部内容
网页头部元素
也是XHTML文档中必须使用的元素，其作用是定义页面头部的信息，其中可以包含标题元素、元素等，元素的语法结构如下。头部内容部分元素所包含的内容不会显示在浏览器的窗口中，但是部分内容会显示在浏览器的特定位置，例如标题栏等。●标题元素
页面标题元素
在预览和发布页面时，页面标题中包含的文本会显示在浏览器的标题栏中。
●文档主体元素
主体元素
用来定义页面所要显示的内容，页面的信息主要通过页面主体来传递，在元素中，可以包含所有页面元素，元素的语法结构如下。页面主体定义了以上几个元素后，便构成了一个完整的XHTML页面。而且以上所有元素都是XHTML页面所必须具有的基本元素。1.5.3 XHTML的代码规范
在使用XHTML语言进行网页制作时，必须要遵循一定的语法规范。具体内容可以分为以下几点。
●标签和属性名称必须小写
在XHTML文档中，标签和标签的属性都必须小写。
正确的写法如下。
这里是box中的内容
错误的写法如下。
这里是box中的内容
●属性值必须加英文双引号
在XHTML文档中，属性的值需要用英文双引号“""”括起来。
正确的写法如下。
这里是box中的内容
错误的写法如下。
这里是box中的内容
●所有标签，包括空标签都需要关闭
在XHTML文档中，所有的标签都必须关闭，不允许没有关闭的标签存在于代码中。
正确的写法如下。
文档内容
文档内容
错误的写法如下。
文档内容
文档内容
●所有标签必须正确嵌套
XHTML中，当标签进行嵌套时，必须按照打开标签的顺序进行关闭。
正确嵌套标签的代码示例如下。
错误的嵌套标签的代码示例如下。
XHTML中还有一些严格强制执行的嵌套限制，这些限制包括以下几点。
2．
标签中不能包含
3．
4．
5．
●使用编码表示特殊字符
在XHTML页面内容中，所有的特殊字符都要用编码表示，例如&必须要用&的形式。
例如下面的HTML代码：
在XHTML中必须要写成：
●推荐使用CSS样式控制页面外观
在XHTML中，推荐使用CSS样式控制页面的外观，实现页面的结构和表现相分离，相应地会有部分外观属性不推荐使用，例如align属性等。
●使用页面注释
XHTML中使用作为页面注释，在页面中相应的位置使用注释可以使文档结构更加清晰，其示例代码如下。
●推荐通过链接调用外部脚本
XHTML中使用在注释中插入脚本，但是在XML浏览器中会被简单地删除，导致脚本或样式的失效，推荐使用外部链接来调用脚本，调用脚本的代码如下。
提示：
language是指所使用的语言的版本，type是指所使用脚本语言等的种类，src是指脚本文件所在路径。1.5.4 XHTML的文档类型
文档类型（DOCTYPE）的选择将决定页面中可以使用哪些元素和属性，同时将决定级联样式能否实现，下面详细讲解关于DOCTYPE的定义和选择问题。
文档类型又可以写为DOCTYPE，是Document Type的简写，在页面中用来说明页面所使用的XHTML是什么版本。制作XHTML页面，一个必不可少的关键组成部分就是DOCTYPE声明，只有确定了一个正确的DOCTYPE，XHTML里的标识和级联样式才能正常生效。
在XHTML 1.0中有3种文档类型定义（DTD）声明可以选择：过渡的（Transitional）、严格的（Strict）、框架的（Frameset），分别介绍如下。
●过渡的DTD（Transitional）
这是一种要求不很严格的DTD，允许用户使用一部分旧的HTML标签来编写XHTML文档，帮助用户慢慢适应XHTML的编写，过渡的DTD的写法如下。
●严格的DTD（Strict）
这是一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如
等，严格的DTD的写法如下。
●框架的DTD（Frameset）
这是一种专门针对框架页面所使用的DTD，当页面中包含有框架元素时，就要采用这种DTD，框架的DTD的写法如下。
使用严格的DTD来制作页面当然是最理想的方式，但对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性。DOCTYPE的声明一定要放置在XHTML文档的头部。
在2001 年5 月份，W3C 发布了XHTML 1.1 版。其规范和1.0版中的严格类型基本相似，其DTD的写法如下：
1.5.5 名字空间
名字空间的英文是Namespace，含义就是通过一个网址指向来识别页面上的标签。在XHTML中使用的是xmlns，也就是XHTMLNamespace 的缩写。用来识别XHTML页面上的标签的网址指向是http://www.w3.org/1999/xhtml。关于名字空间定义的完整写法如下：
当使用可视化的网页开发工具新建文档时，选择适当的格式的文档类型，DOCTYPE的声明和名字空间的声明都会自动生成。到目前为止，XHTML的4种文档类型的名字空间都是http://www.w3.org/1999/xhtml。
提示：
w3.org的校验不会由于这个属性没有出现在要校验的XHMTL文档中而报告错误。这是因为xmlns=http://www.w3.org/1999/xhtml是一个固定的值，即使文档里没有包含它，它也会自动加上。1.5.6 使用XHTML的优势
XHTML是面向结构的语言，其设计不像HTML仅仅是为了网页的设计和表现，XHTML主要用于对网页内容进行结构设计。严谨语法结构有利于浏览器进行解析处理。
XHTML另一方面也是XML的过渡语言。XML是完全面向结构的设计语言，XHTML能够帮助快速适应结构化的设计，以便于平滑过渡到XML，并能于XML和其他程序语言之间进行良好的交互，帮助扩展其功能。
使用XHTML的另一个优势是它非常严密。当前网络上的HTML的使用极其混乱，不完整的代码、私有标签的定义、反复杂乱的表格嵌套等，使得页面的体积越来越庞大，而浏览器为了要兼容这些HTML也跟着变得非常庞大。
XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。XHTML是Web标准家族的一部分，能很好地用在无线设备等其他用户代理上。1.6两种编写HTML的方法
网页文件即扩展名为htm或html的文件，本质上是文本类型的文件，网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。
由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器来打开或编辑HTML文件，例如Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。1.6.1 使用记事本编写
HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows操作系统自带的记事本中进行编辑，其优点是方便快捷，缺点是无任何语法提示、无行号提示和格式混乱等，初学者使用困难。课堂案例 使用记事本编写HTML页面
案例位置：光盘\源文件\第1章\1-6-1.html
视频位置：光盘\视频\第1章\使用记事本编写HTML页面.swf
难易指数：★☆☆☆☆
学习目标：掌握在记事本中编写HTML代码的方法
最终效果如图1-11所示。图1-11
01 在Windows 操作系统中执行“开始>所有程序>附件>记事本”命令，如图1-12所示。打开记事本窗口，如图1-13所示。图1-12图1-13
02 在记事本中编写网页HTML代码，所编写的HTML代码如下。
03 完成在记事本中HTML代码的编写，如图1-14所示。执行“文件>另存为”命令，弹出“另存为”对话框，将文件保存为“光盘\源文件\第1章\1-6-1.html”，如图1-15所示。图1-14图1-15
提示：
注意，在将记事本中编写的HTML代码保存为网页html格式时，需要注意“编码”选项的设置。默认情况下，需要将“编码”设置为U T F-8，否则，网页中的中文在浏览器中可能会显示为乱码。
04 单击“保存”按钮，即可将记事本编写的HTML代码保存为网页文件，在浏览器中预览该网页文件，可以看到网页的效果，如图1-16所示。图1-161.6.2 使用Dreamweaver编写
著名的网页三剑客之一，是网页制作的主流软件，其优点是有所见即所得地设计视图，能够通过鼠标拖放直接创建并编辑网页文件，自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮显示等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，本书在讲解HTML、CSS和JavaScript时就是使用Dreamweaver软件。
知识点：Dreamweaver代码工具
在Dreamweaver CS6 的代码视图中会以不同的颜色显示HTML代码，帮助用户区分各种标签，同时用户也可以自己指定标签或代码的显示颜色。总体看来，代码视图更像是一个常规的文本编辑器，只要单击代码的任意位置，就可以开始添加或修改代码了，如图1-17所示。图1-17
●“打开文档”按钮
单击该按钮，在其弹出菜单中列出了当前在Dreamweaver中打开的文档，选中其中一个文档，即可在当前的文档窗口中显示所选择的文档代码。
●“显示代码浏览器”按钮
单击该按钮，即可以显示光标所在位置的代码浏览器，在代码浏览器中显示光标所在标签中所应用的CSS样式设置。
●“折叠整个标签”按钮
折叠一组开始和结束标签之间的内容。将光标定位在需要折叠的标签中即可，比如将光标置于
标签内，然后单击该按钮，Dreamweaver即可将其首尾对应的标签区域进行折叠。如果在按住Alt键的同时，单击“折叠整个标签”按钮，则Dreamweaver将折叠外部的标签。“折叠整个标签”按钮的功能只能对规则的标签区域起作用，如果标签不够规则，则不能实现折叠效果。
●“折叠所选”按钮
将所选中的代码折叠。可以直接选择多行代码，单击该按钮，代码折叠后，将鼠标光标移动到标签上的时候，可以看到标签内被折叠的相关代码。
●“扩展全部”按钮
单击该按钮，可以还原页面中所有折叠的代码。如果只希望展开某一部分的折叠代码，只要单击该部分折叠代码左侧的展开按钮即可。
●“选择父标签”按钮
选择插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则Dreamweaver最终将选择最外面的和标签。例如，将光标置于
●“选取当前代码段”按钮
选择插入点的那一行的内容及其两侧的圆括号、大括号或方括号。如果反复单击此按钮且两侧的符号是对称的，则Dreamweaver最终将选择该文档最外面的大括号、圆括号或方括号。
●“行号”按钮
单击该按钮，可以在代码视图左侧显示HTML代码的行号，默认情况下，该按钮为按下状态，即默认显示代码行号。
●“高亮显示无效代码”按钮
试读结束[说明：试读内容隐藏了图片]