作者：龙马工作室编著
出版社：信息技术第二出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML+CSS+JavaScript网页制作从新手到高手试读：
前言
计算机是现代信息社会的重要工具，掌握丰富的计算机知识、正确熟练地操作计算机已成为信息时代对每个人的要求。为满足广大读者的学习需要，针对不同学习对象的接受能力，总结了多位计算机高手、高级设计师及计算机教育专家的经验，精心编写了这套“从新手到高手”丛书。丛书主要内容
本套丛书涉及读者在日常工作和学习中各个常见的计算机应用领域，在介绍软硬件的基础知识及具体操作时均以读者经常使用的版本为主，在必要的地方也兼顾了其他版本，以满足不同领域读者的需求。本套丛书主要包括以下品种。本书特色零基础、入门级的讲解
无论读者是否从事相关行业，是否使用过HTML、CSS和JavaScript，都能从本书中找到最佳的起点。本书入门级的讲解，可以帮助读者快速地进入高手的行列。精心排版，实用至上
双色印刷既美观大方，又能够突出重点、难点。精心编排的内容能够帮助读者深入理解所学知识并实现触类旁通。实例为主，图文并茂
在介绍的过程中，每一个知识点均配有实例辅助讲解，每一个操作步骤均配有对应的插图加深认识。这种图文并茂的方法，能够使读者在学习过程中直观、清晰地看到操作过程和效果，便于深刻理解和掌握相关知识。高手指导，扩展学习
本书在每章的最后以“高手私房菜”的形式为读者提炼了各种高级操作技巧，在全书最后的“高手秘籍篇”中，还总结了大量系统实用的操作方法，以便读者学习到更多的内容。双栏排版，超大容量
本书采用双栏排版的格式，大大扩充了信息容量，在约400页的篇幅中容纳了传统图书700多页的内容。这样，就能在有限的篇幅中为读者奉送更多的知识和实战案例。书盘结合，互动教学
本书配套的多媒体教学光盘内容与书中知识紧密结合并互相补充。在多媒体光盘中，我们仿真工作、学习中的真实场景，帮助读者体验实际工作环境，并借此掌握日常所需的知识和技能以及处理各种问题的方法，达到学以致用的目的，从而大大增强了本书的实用性。光盘特点12小时全程同步视频教学录像
教学录像涵盖本书所有知识点，详细讲解每个实例及实战案例的操作过程和关键点。读者可轻松地掌握书中所有的HTML、CSS和JavaScript的方法和技巧，而且扩展的讲解部分可使读者获得更多的知识。超多、超值资源大放送
随书奉送HTML标签速查表、19小时完美网站建设全能教学录像、18小时Dreamweaver CS5、hotoshop CS5 和 FlashCS5 网页三剑客教学录像、8 个大型 ASP 网站完整源代码及运行说明、精彩CSS+DIV布局赏析电子书、精选JavaScript应用实例电子书、网页制作常见问题处理手册、精彩网站配色方案赏析电子书、颜色代码查询表、颜色英文名称查询表以及本书内容教学用PPT文件等超值资源，以方便读者扩展学习。配套光盘运行方法
1 将光盘印有文字的一面朝上放入DVD光驱中,几秒钟后光盘会自动运行。
2 在 Windows 7 操作系统中 , 系统会弹出【自动播放】对话框，单击【运行 MyBook. exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹，双击光盘文件夹中的MyBook.exe文件，也可以运行光盘系统。
在Windows 8操作系统中，桌面右上角会显示快捷操作界面，单击该界面后，在其列表中选择【运行MyBook.exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹，双击光盘文件夹中的MyBook.exe文件，也可以运行光盘系统。
3 光盘运行后会首先播放片头动画，之后便可进入光盘的主界面。
4 单击【教学录像】按钮，在弹出的菜单中依次选择相应的篇、章、录像名称，即可播放相应录像。
5 单击【赠送资源】按钮，在弹出的菜单中选择赠送资源名称，即可打开相应的赠送资源文件夹。
6 单击【素材文件】、【结果文件】或【教学用PPT】按钮，即可打开相对应的文件夹。
7 单击【光盘使用说明】按钮，即可打开“光盘使用说明.pdf”文档，该说明文档详细介绍了光盘在电脑上的运行环境和运行方法等。
8 选择【操作】【退出本程序】菜单项，或者单击光盘主界面右上角的【关闭】按钮，即可退出本光盘系统。创作团队
本书由龙马工作室策划编著，孔长征任主编，李震、赵源源任副主编，参与本书编写、资料整理、多媒体开发及程序调试的人员有孔万里、乔娜、周奎奎、祖兵新、董晶晶、王果、陈小杰、左琨、邓艳丽、崔姝怡、侯蕾、左花苹、刘锦源、普宁、王常吉、师鸣若、钟宏伟、陈川、刘子威、徐永俊、朱涛和张允等。
在编写过程中，我们竭尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请广大读者不吝指正。若您在学习过程中产生疑问，或有任何建议，可发送电子邮件至zhangyi@ptpress.com.cn。编者
第1篇 HTML篇
第1章 HTML与CSS网页设计概述
第2章 HTML文档的基本结构
第3章 HTML网页文字设计
第4章 网页色彩和图片设计
第5章 网页表格设计
第6章 网页表单设计
第7章 网页框架设计
第8章 网页多媒体设计第1章 HTML与CSS网页设计概述
本章视频教学录像：20分钟
本章导读
网页是Internet上最基本的文档，主要是作为网站的一部分，但也可以独立存在。HTML和CSS是所有网页制作技术的核心与基础。HTML是Web页面的描述性语言，而CSS则是为HTML制定样式的机制，能控制浏览器如何显示HTML文档中的每个元素及其内容，从而弥补了HTML对网页格式化功能的不足。本章将带领大家了解HTML与CSS的一些概念性知识，同时理解网页与网站的关系。
重点导读
了解HTML的基本概念
了解CSS的基本概念
了解网页与网站
1.1 HTML的基本概念
本节视频教学录像：6分钟
在使用HTML创建网页之前，需要了解创建网页的利器——HTML，以及HTML的诞生时间及发展过程。同时，还需要了解HTML与XHTML的区别。
1.1.1 什么是 HTML
HTML（HyperText Mark-up Language）即超文本标记语言，它是 W3C（Worid Wide Web Consortium）组织推荐使用的一个国际标准，是一种用来制作超文本文档的简单标记语言。我们在浏览网页时，看到的丰富的视频、文字、图片等内容都是通过浏览器解析HTML表现出来的。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，一直被用作WWW（万维网）的信息表示语言。
通过介绍，我们知道了超文本标记语言的英文缩写为HTML，理解超文本标记语言的关键是理解“超文本”和“标记语言”。
之所以叫超文本，是因为它不仅可以加入文字的文本文件，还可以加入链接、图片、声音、动画、影视等内容。使用HTML描述的文件，需要通过Web浏览器显示出效果。
所谓标记语言，是指在纯文本文件里包含了HTML指令代码。这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。在HTML中，每个用来作为标签的符号都是一条指令，它告诉浏览器如何显示文本。这些标签均由“<”和“>”符号，以及一个字符串组成。而浏览器的功能是对这些标记进行解释后，显示出文字、图像、动画和播放声音等。【范例1.1】 制作简单的HTML实例（代码清单1-1-1-1）
因为网页文件是纯文本文件，在设计网页时甚至可以使用任何文本编辑软件（如Windows XP 下的记事本软件），而浏览制作好的网页只需要任何一款浏览器软件即可。下面使用 Windows XP 中的记事本来制作一个简单的 HTML 实例。
1 在本地Windows XP操作系统中，选择【开始】【附件】【记事本】命令，打开记事本软件。
2 输入页面的主题标记，每个HTML页面都要包含这些主题标记，如代码清单1-1-1-1。
01
02
03
04
05
06
07
我的第一个HTML实例
08
09
10
本页显示黑色背景，白色文本
11
12
3 从记事本软件主菜单上选择【文件】【另存为】命令，打开【另存为】对话框，如下图所示。
4 从底部的【保存类型】下拉列表框中选择【所有文件】，【编码】下拉列表框采用默认即可，然后在【文件名】文本框中键入“mypage. html”。
提示 【另存为】对话框中的【编码】下拉列表框用于选择文件储存数据的格式。
5 单击【保存】按钮就会将 mypage.html文档保存到相应的位置。例如，本示例中的mypage.html 将 会 保 存 到 F:\webpages\chapter1中，在F:\webpages\chapter1中，可以看到它的图标就是网页文件的图标，如下图所示。
6 这时双击该HTML文档，就会自动打开浏览器，并显示该HTML文档的内容，效果如下图所示。
提示 HTML 文件既可以保存为 *.html 文件，也可以保存为*.htm 文件，HTML网页文件可以使用这两种扩展名，并且这两种扩展名没有本质的区别，之所以使用*.htm 格式的文件，主要是因为在某些较旧的系统上不能识别4 位的文件扩展名。
1.1.2 HTML 的发展
HTML最初由欧洲原子核研究委员会的伯纳斯•李（Barners-Lee）发明，后来被Mosaic（世界上第一个被普遍使用的网页浏览器）作为网页解释语言，并随着Mosaic的流行而逐渐成为网页语言的事实标准。
在整个20世纪90年代，网络呈爆炸式增长，越来越多的网页设计者和浏览器开发者参与到网络中来，每一个人都会有不同的想法和目标，每一个人都会按照自己的想法和目标参与到网络中来。网页设计者都会按照自己的想法和目标编写网页，而浏览器的开发者则可能和网页设计者的想法不同，他会按照自己的方式去呈现网页。
当网页的设计者和浏览器的开发者发生分歧时，必然带来不同的呈现。这时候，设计者要面向所有用户，就必须为每种浏览器创作不同的网页而实现相同的呈现，这就势必增加创作的成本。因此，只有网页的设计者和浏览器的开发者都按照同一个规范编写和呈现网页时，才不会导致互联网的分裂，正是这个原因促使各浏览器开发厂商协调起来共同实现同一个HTML规范。
在 Internet 工程任务组（Internet Engineering Task Force，IETF）的支持下，根据过去的通用实践，于 1995 年整理和发布了 HTML 2.0。后来的 HTML+ 和 HTML 3.0 也提出了很好的建议，并添加了大量丰富的内容，但是这些版本还未能上升到创建一个规范的程度。因此许多厂商实际上并未严格遵守这些版本的格式。1996年，W3C的HTML工作组编撰和整理了通用的实践，并于第二年公布了 HTML 3.2 规范。
1998 年，W3C 将版本稳定在 HTML 4.0，这个版本被证明是非常合理的，它引入了样式表、脚本、框架、嵌入对象、双向文本显示、更具表现力的表格、增强的表单及为残疾人提供了可访问性。而 1999 年公布的 HTML 4.01 是对 HTML 4.0 的精修。
HTML每个版本的推出都是在对用户体验的反馈进行分析的基础上进行的，而且新版本的推出使得网页设计者和浏览器开发者都能很好地实现他们的目标，相对应的，使用新版本设计的网页使网页浏览者的体验更丰富。
提示 在 HTML4.01 之后，业界普遍认为 HTML 已经到了穷途末路的地步，对 Web 标准的焦点也开始转移到 XML 和 XHTML 上，HTML 被放在了次要的位置。然而在此期间，HTML 体现了顽强的生命力，主要的网站内容还是基于 HTML 的。而且，最新版本的 HTML5.0 正在开发并日趋成熟，势必成为互联网的又一次革命，不过现在使用最多的还是 HTML4.01。所以本书的HTML 部分也将围绕 HTML4.01 展开介绍。
1.1.3 HTML与XHTML
HTML与XHTML定义了两种不同的网页设计语言，浏览器不会显示这些语言的代码，但是这些语言代码却可以告诉浏览器该如何显示网页的内容，如文本、图像、视频等。这些语言还将告诉用户如何通过特殊的超文本链接来制作交互式的网页，这些网页可以把网页（在本地计算机或Internet上其他人的计算机上）与其他Internet资源连接起来。
我们已经介绍过HTML，但是你可能还听说过XHTML，它们只是许多标记语言中的两种，也有很多不同之处。实际上，HTML是网页标记语言家族中的一匹黑马。HTML是基于标准通用标记语言 (Standard Generalized Markup Language，SGML)。当初创建SGML时，创造者的目的是让它成为一个，也是唯一一种标记元语言（metalanguage），这样其他所有文档中的标记元素都可用它来实现。从象形文字到HTML都可以由SGML来定义，而不需要使用其他标记语言。
但是SGML的问题在于它太广泛、太全面了，以至于依靠人类似乎没有办法使用它。要想高效地使用SGML，需要用及其昂贵和复杂的工具，而这些工具的使用远远超出了那些非专业的HTML爱好者编写一些HTML文档所能及的范围。因此，HTML采用了部分SGML标准，而不是全部，这样就消除了很多深奥难懂的东西，HTML才得以容易地使用。
W3C认识到SGML太过庞大，不适合用来描述非常流行的HTML，而对于用来处理不同网络文档的其他类似HTML的标记语言的需求正在急速增长。因此，W3C定义了可扩展标记语言，也就是 XML(Extensible Markup Language)。和 SGML 一样，XML 也是独立而正式的标记元语言，它使用了SGML中的部分特性来定义标记语言，摒弃了很多不适合HTML这类语言的SGML特性，并简化了SGML的其他元素，以使它们更容易得到使用和理解。
但是，由于 HTML 4.01 不与 XML 兼容，因此 W3C 又提供了 XHTML，HTML 的重写版本，以使其能够与XML相兼容。XHTML试图用XML更加严格的规则来支持HTML4.01所有最新的特性。这种努力总地来说十分有效，但它确实产生了非常多的差别，例如，在HTML中标签名不区分大小写（但是许多Web作者把它们写为大写，以便让标记代码更容易读），但在XHTML中，标签名必须小写（这也是XHTML区别于HTML的那些更严格的规则之一）。
1.2 CSS的基本概念
本节视频教学录像：4分钟
如果说HTML是网页的骨肉，那么就可以认为CSS让一个网页拥有了灵魂，通过CSS控制网页的显示效果，可以让我们创建的网页更加绚丽多彩。本节先介绍一些CSS的基本概念，了解什么是CSS以及CSS在网页设计中的重要作用。
1.2.1 什么是CSS
CSS 是英语 Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。
所谓层叠，就是将一组样式在一起层叠使用，控制某一个或者多个HTML标记，按样式表中的属性依次显示。
所谓样式表，就是样式化HTML的一种方法。HTML是文档的内容，而样式表是文档的表现或者说外观。
1.2.2 CSS在网页设计中的作用
CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单地说，就是在设计网页内容时，只需要在HTML文档中编辑，而编辑控制网页的显示外观代码时，可以在一个CSS文件中进行，最后在HTML文档中链接该CSS文件即可。
将内容和样式分开在现实中有很多好处，通过将文档中的这两层分开，可以轻松地增加、移除或更新HTML文档内容，而不影响网页布局。也可以很简单地改变整个站点的字体，而不用在制作的HTML中辛苦地找寻每一个标签。将这两层分开还可以让一个网络团队工作得更有效率：视觉效果设计师能专注于设计，内容编辑也可以专注于内容——两者可以互不干扰。如果你是一个人，就会发现内容与表现形式的分开也可以让你保持“思维框”的独立。
另外，一个CSS样式可以用于多个页面，甚至整个站点，因此CSS具有良好的易用性和扩展性。从总体来说，使用CSS不仅能够弥补HTML对网页格式化功能的不足，如段落间距、行距、字体变化和大小等，还可以使用CSS动态更新页面格式，排版定位等操作。【范例1.2】 简单HTML+CSS实例制作（代码清单1-2-2-1）
可以将CSS定义在HTML文档的每个标记里，或者是以
13
14
15
HTML
16
XHTML
17
DIV
18
CSS
19
20
【运行效果】在网页浏览器中打开HTML文档，就可以看到如下图所示的显示效果。
在本节示例中，HTML定义的网页结构使用CSS设置输出格式，可以将格式和结构分离。只要在CSS中改变某些属性，使用这个样式的所有HTML标记就都会更新。
1.3 网页与网站
本节视频教学录像：8分钟
网页是网站的必要组成部分，而一个功能丰富的网站不仅仅包括网页，还可能包括一些资源，如视频文件、声音文件等，另外网站还可能需要一些软件支持，如MySQL数据库等。在开发网站时，要理解URL的概念，以及了解一些开发工具的使用方法。本节介绍这些基本的概念。
1.3.1 网页与网站的关系
在介绍网页和网站的关系之前，先了解网页与网站的定义。网页又叫Web页，它实际上是一个文件，存放在和Internet相连的某个服务器上。网页又分为静态网页和动态网页两种。静态网页是事先编写好放在站点上的，所有访问同一个页面的用户看到的都是相同的内容。例如，下图展示的就是清华大学院系设置栏目的网页。
动态网页是能够与访问者进行交互的网页。它能够针对不同访问者的不同需要，将不同的信息反馈给访问者，从而实现与访问者之间的交互。例如，当访问淘宝网并登录账户时，网页会显示关于你添加到购物车中的商品信息以及购买过商品的信息，等等。如下图显示的查看购物车时显示的网页。
那什么是网站呢？可以简单地认为网站就是由许多网页文件集合而成的，这些网页通过超链接连接在一起，至于多少网页集合在一起才能称作网站并没有明确的规定，即使只有一个网页也能称为网站。在一般情况下，每个网站都有一个被称为主页（HomePage）或者首页的特殊页面。当访问者访问该服务器时，网站服务器首先将主页传递给访问者。主页就是网站的“大门”，起着引导访问者浏览网站的作用，作为网站的起始点和汇总点，网站有些什么内容，更新了什么内容，全都通过主页告诉访问者。例如，下图展示的是清华大学的主页。
但是，网站又不止这么简单，因为网站也是基于B/S结构的软件，还需要使用到多种软件和技术。例如，大部分网站需要使用数据库管理系统（如MySQL、Oracle等），存储和管理网站中的数据，以及通过服务器端编程语言（如PHP、JSP等）动态响应结果等。
关于网页和网站的区别，我们需要牢记的是，网页不等于网站，网页只是网站的一部分，负责前台的显示，网站要比网页复杂，一个好的网站需要好的规划和好的设计。网页就简单得多，但是网页设计是网站设计的基础，只有学好了网页设计，才能组织好网站设计。
提示 网页后缀名通常为.html或.htm，另外还有以.asp、.jsp、.php等为后缀名的动态网页文件。这 3 种格式的动态网页文件是指在 HTML 文档中嵌入了.net、Java、PHP 编程语言，需要注意这些动态网页是不能直接在用户浏览器上解析的。总之，这些不同类型的后缀名代表不同类型的网页文件。
1.3.2 建立网站的一般流程
当网站开发好后，首先需要注册一个域名，域名是互联网上的一个名称，在全世界，没有重复的域名。域名是由"."分隔的几部分组成，如china.com、baidu.com、cnki.net等格式。域名一旦被注册，除非注册人到期后取消，否则其他人不能再使用这个名称。然后需要购买网站空间或者购买服务器搭建机房，网站空间用来存放网站内容和网站文件，如网页、图片、音乐等资料。最后就可以上线推广自己的网站了。
1.3.3 URL简介
可在Web上访问的每一个文件或文档都具有一个唯一的地址，这种地址称为统一资源定位符（Uniform Resource Locator，URL）。统一资源标识符（Uniform ResourceIdentifer，URI）一词有时可与URL互换使用，但它是一个更为一般性的术语，URL只是URI中的一种。Web连接设备使用URL地址在一台特定的服务器上找到一个特定的文件，以便下载它并将其显示给用户（或者把它用于其他用途。Web上的文件并非全部用于显示）。
Web URL 遵守一种标准的语法，它可以分解为几个主要部分 , 每一个部分都向客户端和服务器传达特定的信息。例如，URL为http://www.example.com/examples/example.html的含义，如下表所示。
1.3.4 常用的网页编辑工具
俗话说：“工欲善其事，必先利其器”。在真正编写HTML代码之前，有必要搭建自己的开发环境。本节将介绍几款代码编辑的常用工具，读者可以选择使用。
除了本节即将介绍的Notepad++以及Dreamweaver之外，还有很多其他优秀的代码编辑软件，如Aptana、SciTE、gVIM、UltraEdit等，限于篇幅不再一一介绍。
1. Notepad++
Notepad++是一款免费开源的跨平台代码编辑器，Notepad++的功能十分强大，例如，具备语法高亮显示及语法折叠功能，而且支持的程序语言有HTML、XML、CSS、JavaScript、C、C++、Java、PHP等。用户可以自定程序语言，自定的程序语言不仅有语法高亮显示功能，而且有语法折叠功能。
注解关键字及运算符也可以由用户自己设定；可以实现字词的自动完成功能，用户可以制作自己的API列表，按【Ctrl+Backspace】组合键即可启动字词自动完成功能；支持多窗口同步编辑，即可同时显示两个视窗对比排列。用户不但能在两个不同的窗口内开启两个不同文件，而且能在两个不同的窗口内开启一个单独文件进行同步编辑等。
用户可以在Notepad++官方网站（http://notepad-plus-plus.org/）免费获得最新版本的Notepad++安装程序（编写本书时，Notepad++的最新版本是v6.2.2）。安装完成后，新建一个HTML文档，就可以编写HTML代码了，其工作界面如下图（左）所示。
2. Dreamweaver
提到网页设计就不能不提Dreamweaver，它是目前最流行的网页设计所见即所得的工具之一。官网下载地址为http://www.adobe.com/cn/downloads.html，读者可以在该网页内找到Dreamweaver，并根据自己的情况选择试用下载或者购买该软件。
Dreamweaver CS6 是由 Adobe 公司收购 Macromedia 后推出的最新版本。它是一款专业的Web设计及开发工具，可用于网站应用程序的设计、编码以及开发等工作。在业界，通常会将Dreamweaver、Flash和Fireworks一起称为“网页三剑客”，可见其地位的重要性。Dreamweaver CS6 的一个显著特点就是可以将各种网页制作的相关工具紧密联系起来，同时又有很好的插件体系，这些使 Dreamweaver CS6 可以通过第三方插件进行补充，变得更加强大和易于使用，其工作界面如下图（右）所示。
3. 用 Dreamweaver 创 建 一 个HTML文档
在系统桌面双击 Adobe Dreamweaver CS6 图标，打开 Dreamweaver CS6 工作界面，如下图所示。
在菜单栏中选择【文件】【新建】，在出现的对话框的【页面类型】一栏中选择【HTML】，并在【文档类型】下拉列表框中选择【HTML 4.01 Transitional】，如下图所示。
随后单击右下角的【创建】按钮，即可创建一个新的HTML文档，如下图所示。
高手私房菜
本节视频教学录像：2分钟
技巧：如何查看网页的HTML代码
要查看网页的HTML代码，在Firefox浏览器打开的网页中单击鼠标右键，在弹出的快捷菜单中选择“查看页面源代码”，如下图所示。这是了解HTML工作原理和学习他人示例的好方法，需要牢记的是，很多商业网站使用复杂的HTML代码，它们可能难以阅读和理解，但是不要气馁。
第2章 HTML文档的基本结构
本章视频教学录像：17分钟
高手指引
HTML和其他任何一门语言相比，语法都是最简单的。但在编写HTML文档时，必须遵循HTML的语法规则。一个完整的HTML文档由标题、段落、列表、表格、文本，即嵌入的各种对象组成，这些逻辑上统一的对象称为元素，HTML使用标签来描述这些元素。实际上整个HTML文档就是由元素与标签组成的文本文件，由浏览器解析它们显示出美妙的网页，也可以在浏览器打开的网页中，通过相应的“查看源文件”命令查看网页中的HTML代码。
重点导读
掌握基本的HTML文档结构
了解HTML标签、元素及属性
掌握标准属性的基本内容
2.1 基本的HTML文档结构示例
本节视频教学录像：2分钟
一个HTML文档由4个基本部分组成，如代码清单2-1-1所示。
⑴ 文档类型声明，这表明该文档是 HTML 文档。
⑵ html 标签对，用于标示 HTML 文档的开始和结束
⑶ head 标签对，其间的内容构成 HTML 文档的开头部分，包含一些辅助性元素，这些辅助性元素也将会在本章详细介绍。
⑷ body 标签对，其间的内容构成 HTML 文档的主体部分。【范例2.1】 基本的 HTML 文档（代码清单 2-1-1）
01
02
03
04
05
06
07
08
这里放主题内容
09
10
尽管看上去很简单，但这确实是个完整、有效、合格的文档。创建的每个网页都将从与其类似的框架开始。下面，将更详细地讨论这些组成部分。
2.2 HTML文档的基本结构
本节视频教学录像：4分钟
上一节介绍了HTML文档的构成部分，其中包括文档类型声明、html标签对、head标签对。本节将对这些组成部分进行详细的介绍。
2.2.1 文档类型的声明
在代码清单2-1-1中有如下代码。
这是HTML文档的文档类型声明部分，所有的HTML文档开始于文档类型声明（Document Type Declaration，DTD），文档类型声明是必须的组成部分，正如其名称所示，它声明了文档的类型及其所遵守的标准规则集。当声明一种DTD时，实际上是在告诉浏览器：“我，这个网站的开发者，会用以下规范来编写我的代码，你应该用我所遵守的规范来显示网页”。大多数现代浏览器在实际显示网页时会根据声明的DTD的不同而有差异。HTML 的每种风格都有相应的文档类型声明。本书所介绍的 HTML 4.01 有 3 个版本，分别可以用3个DTD来定义。
1. HTML 4.01 Strict DTD
这种文档类型比较严格，那些已经不推荐使用的元素和属性不能包含在该文档类型的定义中，对于出现在框架集中的元素和属性也不能包含在该文档类型定义中。
这种文档类型使用下面的文档类型声明。
2. HTML 4.01 Transitional DTD
这种文档类型比较广泛，使用得比较多，它不排除 Strict DTD 中不推荐使用的元素和属性，因此包含的元素比 Strict DTD 要多。
这种文档类型使用下面的文档类型声明。
3. HTML 4.01 Frameset DTD
这种文档类型更宽泛，它不但包含了 Transitional DTD 所包含的元素和属性，还包含框架集中的元素和属性。
这种文档类型使用下面的文档类型声明。
提示 在HTML文档中选择使用文档类型很重要，本书采用的是HTML 4.01 Transitional文档类型。需要注意的是，如果在HTML文档中手工编写文档类型，则必须严格按本节示例那样书写，另外专业的HTML网页编辑器（如dreamweaver等）会按照操作自动在HTML文档头部生成相应的文档类型声明。
打开Dreamweaver CS6，在菜单栏选择【文件】【新建】，打开【新建文档】对话框（见下图）。选中左栏的【空白页】选项，然后在【页面类型】一栏中选中HTML，最后在对话框右下角的【文档类型】下拉列表中选择【HTML 4.01 Transitional】，单击【创建】按钮，新建一个用HTML 4.01的Transitional类型声明的HTML文档，如代码清单2-2-1-1所示。【范例2.2】 文档类型的声明（代码清单 2-2-1-1）
01
02
03
04
05
06
07
08
09
2.2.2 标签对和属性
标签位于HTML文档的最前面，用来标识HTML文档的开始。而标签恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，这两个标签必须成对使用。在标签之间是文档的头部和主体，文档的头部由标签
定义，而主体由标签定义。下面的代码将有助于弄清标签对的位置。01
02
03
04
05
06
07
08
09
该标签有两个基本属性——dir属性和lang属性，其中dir属性指定浏览器用什么方向来显示包含在元素中的文本。将它用于html标签中时，决定文本在整个文档中将以什么方向显示。当它用在其他标签中时，只决定那个标签中内容的显示方向。这个属性有ltr和rtl两个属性值，分别表示文本从左到右显示和从右到左显示，然而，显示的结果还要看文档的内容和浏览器对 HTML 4.01 的支持程度。例如，代码清单 2-2-2-1 定义文本从右向左读。【范例2.3】 标签对和属性（代码清单 2-2-2-1）
01
02
03
04
05
06
07
08 读左向右从惯习，言语的家国些一于对
09
10
【运行结果】在网页中浏览，显示效果如下图所示。
试读结束[说明：试读内容隐藏了图片]