作者：宋灵香,赵静
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
21天学通HTML5+CSS3(第2版)试读：
前言
千里之行，始于足下！
——老子“21天学编程系列”自2009年1月上市以来一直受到广大读者的青睐。该系列中的不少图书从一上市就登上了编程类图书销售排行榜的前列，很多大、中专院校也将该系列中的一些图书作为教材使用。目前这些图书已经多次印刷、改版。可以说，“21天学编程系列”是自2009年以来，国内原创计算机编程图书颇具影响力的品牌之一。
为了使该系列图书能紧跟技术和教学的发展，更加适合读者学习和学校教学，我们结合最新技术和读者的建议，推出了该系列中的HTML5+CSS3分册。
本书有何特色
1.细致体贴的讲解
为了让读者更快地上手，本书特别设计了适合初学者的学习方式，用准确的语言总结概念、用直观的图示演示过程、用详细的注释解释代码、用形象的比方帮助记忆，效果如下图所示。
1 知识点介绍 准确、清晰是其显著特点，一般放在每一节开始位置，让零基础的读者了解相关概念，顺利入门。
2 实例 书中出现的完整实例，以章节顺序编号，便于检索和循序渐进地学习、实践。实例通常放在每节知识点介绍之后。
3 示例代码 与实例编号对应，层次清楚、语句简洁、注释丰富，体现了代码优美的原则，有利于读者养成良好的代码编写习惯。对于大段程序，均在每行代码前设定编号便于学习。
4 运行程序 对实例给出运行结果和对应图示，帮助读者更直观地理解示例代码。
5 深入学习 对实例代码中的关键代码行逐一解释，有助于读者掌握相关概念和知识。
6 贴心提示 为了便于读者阅读，全书还穿插着一些技巧、提示等小贴士，体例约定如下。
· 说明：通常是一些说明介绍，让读者加深印象或提供建议、解决问题的方法。
· 注意：提出学习过程中需要特别注意的一些知识点和内容，或者相关信息。
7 习题 每章最后提供专门的测试习题，供读者检验所学知识是否已牢固掌握。
8 微课 使用手机App（例如微信）扫描二维码，可在线观看配套教学微课。
经作者多年的培训和授课发现，以上讲解方式是非常适合初学者学习的方式，读者按照这种方式学习，会非常轻松、顺利地掌握本书知识。
在本书中，所有的内容是基于HTML+CSS实现的。
2.实用超值的配套资源
为了帮助读者比较直观地学习，本书提供超值配套资源，内容包括多媒体视频、电子教案（PPT）和实例源代码等。
使用浏览器访问本书页面（http：//www.broadview.com.cn/33631），可在“下载资源”处查看和下载本书配套资源文件。
· 多媒体视频
本书配有长达10 小时的教学视频，讲解关键知识点界面操作和书中的一些综合练习题。作者亲自配音、演示，手把手教授读者使用（见下图）。
· 电子教案（PPT）
本书可以作为高校相关课程的教材或课外辅导书，所以作者特别为本书制作了电子教案（PPT），以方便老师教学使用。
推荐的学习计划
本书作者在长期从事相关培训或教学实践过程中，归纳了适合初学者的学习模式，并参考了多位专家的意见，为读者总结了合理的学习时间分配方式，列表如下。续表
本书适合哪些读者阅读
本书非常适合以下人员阅读：
· 网页设计人员。
· 网页开发人员。
· 网页制作爱好者和入门者。
· Web前端开发人员。
· 大学生或IT技术培训班学员。
本书编者
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
· 下载资源：本书如提供示例代码及资源文件，均可在 下载资源 处下载。
· 提交勘误：您对书中内容的修改意见可在 提交勘误 处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
· 交流互动：在页面下方 读者评论 处留下您的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http：//www.broadview.com.cn/33631
第1章 了解网页
本章开头将解释一些与互联网相关的常用技术，以及制作网页时通常需要涉及的领域、考虑的问题等。本章的知识点很多但并不难理解，读者千万不要被那些可怕的名词或者代码给吓住。虽然HTML（Hyper Text Markup Language，超文本标记语言）标签很多，但在找到规律后就会觉得千篇一律。好比分不清蔬菜的人去大卖场买菜，头一次进去真的很无奈，至少在笔者眼里，感觉都是绿色的“草”。但是多去两次后就可以很轻松地做这件事了。实际上，学习HTML不会比买菜难。
本章的知识点如下。
· 网页的概念和分类：了解网页的概念、静态网页和动态网页的不同。
· 网页浏览器的工作原理：知道网页浏览器的工作原理。
· HTML、XHTML、HTML5的概念：了解这3个概念的异同点。
· HTML应用：通过本章最后的示例，演示一个简单的HTML页面的开发步骤。
1.1 什么是网页
21 世纪是信息化的时代，互联网使用者可以在 Internet 上通过网页浏览信息，如新闻、图片等；也可以通过互联网发布信息，如招聘信息、各种广告；
或者是追赶潮流，加入现今十分流行的微博、博客、自媒体一族。然而这些都离不开互联网的这扇窗户——网页。本节将介绍网页的相关知识。1.1.1 网页概述
网页其实是在这个世界的某一个地方某一台计算机上的一个文件，通过互联网，也就是Internet将两个不同的地址相连，把人们的信息传达到网络世界的各个角落。人们通过互联网，可以在世界的任何一个地方互相交流沟通。
什么是互联网？互联网是一种概念，一个虚拟的东西。人们可以通过浏览器浏览新浪、百度等页面，但是不会有人说“浏览互联网”。互联网指的正是把所有网页链接在一起的巨大信息交流形式，它基于很多的协议来体现出它的表现形式。1989年，欧洲粒子物理实验室的科学家们提出了一个分类互联网信息的协议。这个协议极大地推动了互联网的发展和普及，后来它有了一个十分响亮的名字——WWW（World Wide Web），中文名又称万维网（Wan Wei Wang）。可以认为，从20世纪90年代开始，互联网进入了Web 1.0的时代。
在早期的Web 1.0时代，大部分网页只有文字、图像信息，这个时候最典型的互联网标志就是门户网站，比如新浪、搜狐。从2001年开始，人们认为互联网开始进入Web 2.0时代，这时的网页可以包含动画、音频、视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序。互联网开始更注重个人化的网络服务，任何使用网络的人，都可以参与到网页的制作中。
笼统地说，网页主要由3部分组成：结构、表现和行为。对应的标准也分为3类，其中大部分都是由W3C（World Wide Web协会）所制定，这其中就包括HTML和CSS（Cascading Style Sheets）。对于制作网页的初学者来说，一定要分清楚HTML和CSS的不同。
说明
HTML标准基于语义学，通过标签来应用语义的过程。使用起来像是打手语，做一个手势，告诉对方代表了什么意思。不同的是，这里的手势换成了标签。
比如使用＜table＞，这是一个表格标签，意思是“将在这里放入一个表格”。那么这个表格该如何表现在浏览者的面前呢？比如它的颜色、边框粗细等。而CSS的出现就为设计者解决了这些问题，如图1.1和图1.2所示，下面列出了2个不同样式的表格。图1.1 粗边框的表格图1.2 细边框的表格
图1.1和图1.2都是有着一个3×3表格的页面，但在浏览器中的外表却不同。图1.1表格的边框较粗，图1.2表格的边框较细，而且两个边框的颜色也不一样。这是因为它们使用了不同的CSS样式表。
所以通俗地说，HTML 决定了页面的结构，而 CSS 修饰了页面中的这些内容。如果把制作网页比作一个人在设计一间屋子，那么 HTML 语言用于明确这个屋子内要放入哪些家具，如床、书柜、椅子等；而CSS的作用就是改变这些家具的样式，如床的样式、书柜的样式、椅子的样式等。1.1.2 静态网页
在网站设计中，纯粹的HTML格式网页通常被称为“静态网页”，早期的网站一般都是由静态网页组成的。静态网页的特点是不论在何时何地浏览这个网页，看到的形式和内容都相同，且只能浏览，用户无法与网站进行互动。也就是说，用户无法提供信息给网站，让网站响应使用者的需求。【实例1-1】一个静态页面。【运行程序】效果如图1.3所示，它只能被浏览而不能交互。图1.3 静态页面示例【深入学习】静态页面由 HTML 编写，扩展名一般为.htm、.html、.shtml、.xml 等。静态网页只能单纯地在网页中展示文字与图片，功能听起来似乎简单，但它是所有网页的基础要素，其重要性自然也是不言而喻。
在静态网页中，整个网页的主要结构与网页的显示控制都必须利用HTML实现。在HTML格式的网页上，可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等。这些“动态效果”只是视觉上的，与动态网页是不同的概念。1.1.3 动态网页
动态网页是与静态网页相对应的，动态网页指网页的内容可以根据某种条件的改变而自动改变。如腾讯公司Qzone空间里，常常会有一些使用者嵌入一个小小的计数器功能，当有人单击设计者的网页时，计数器的值会自动增加。这个计数器就是动态的。再比如论坛、社区网，当用户在登录页面输入正确的用户名和密码后会成功登录，如果输入的用户名或者密码错误，页面会提示用户输入的是错误信息，这也是典型的动态页面。
同时，与静态网页的后缀不同，动态网页是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，而且动态网页网址中有一个标志性的符号“？”。一个典型的动态网页的URL（Uniform Resource Locator，译为统一资源定位地址）形式为 http：//www.…cn/ip/index.asp？id=1。那么，动态网页与网页上的各种动画、滚动字幕等视觉上的动态效果为什么不是一个概念呢？
动态网页可以是纯文字内容的，也可以是包含各种动画内容的。这些只是网页具体内容的表现形式，并不是利用动态技术生成的页面，它不能根据用户的要求来更新页面。而一个网页，无论是否具有动态效果，只有采用了动态网站技术生成的网页，才可以被称为动态网页。
注意
分清楚静态页面和动态页面的区别很重要，概念清晰才能进一步理解哪些是 HTML 语言可以做到的，哪些是不允许的，从而避免在学习的过程中钻牛角尖。
在了解了动态网页的概念之后，下面通过一个动态网页的例子来说明动态页面是如何和用户互动的。图 1.4 是一个动态页面的第一个页面，填入一个已注册用户的信息，如用户名为appleing，密码为 1234567，系统检查到用户名和密码是正确的，即可跳转到用户页面，如图1.5所示。
注意
这种功能是静态页面无法做到的。或者说，仅仅依靠HTML代码是无法写出这种效果的。图1.4 userLogin.jsp页面图1.5 用户页面
图 1.5 所示的页面显示了该用户可以使用的功能，包括用户邮件服务和用户短消息服务。这种针对使用者的设计是动态页面典型的功能标志。而如果用户输入错误的用户名和密码，比如用户名为bupt，密码为bupt，系统检查到用户名和密码是错误的，页面会跳出错误信息，显示登录失败。登录失败的页面如图1.6所示。图1.6 登录报错页面
以上是一个典型的动态页面的例子，用户输入不同的信息，则页面显示不同的结果。动态页面比静态页面显得更智能、更人性化，而理解 HTML 页面则是学习动态页面的必备基础知识。1.1.4 动态页面和静态页面的联系
早期的动态网页主要采用CGI（Common Gateway Interface）技术，是HTTP服务器与用户或其他机器上的程序进行“交谈”的一种工具，其程序需运行在网络服务器上，可以使用多种不同的程序语言（如Visual Basic、Delphi或C/C++等）编写合适的CGI程序。
当用户在页面上留言，输入一段信息，接着单击确定按钮时，此时都是在客户端上工作。而接下来浏览器会将用户的信息传递到CGI 程序，于是CGI程序在服务器上按照预定的方法进行处理。虽然CGI技术已经应用了很长时间而且功能比较强大，但由于其有编程困难、效率低下、修改复杂等缺点而逐渐被新技术取代。目前常用的技术有3种，这3种技术在制作网页上各有特色。在互联网领域中，它们的格局像三国分立的局面一样，都占有市场的一席之地，这3种技术就是PHP脚本语言、ASP脚本语言和JSP脚本语言。
1.PHP脚本语言
PHP即Hypertext Preprocessor（超文本预处理器），是目前在Internet上应用得较为广泛的脚本语言，其语法借鉴了 C、Java、Perl 等语言。它对编程能力的要求不高，只需少量的编程知识就可以使用PHP建立一个交互的Web站点。
它与HTML语言具有非常好的兼容性，因此它可以与HTML结合使用从而更好地实现页面控制，即直接在脚本代码中加入HTML标签，或者在HTML标签中加入脚本代码。PHP提供了标准的数据库接口使得连接数据库比较方便，另外还具有扩展性强、可以进行面向对象编程等特点。
2.ASP脚本语言
ASP即Active Server Pages（动态服务器页面），是微软开发的一种语言，它本身没有专门的编程语言，而是允许用户使用许多已有的脚本语言编写 ASP 的应用程序。它的工作方式是在Web服务器端运行，运行后再将运行结果以HTML的格式传送至客户端的浏览器。正因为如此，ASP要比一般的脚本语言安全得多。
ASP可以包含HTML标签，也可以直接存取数据库及使用可扩充的ActiveX控件，因此ASP的程序编写比HTML更方便且更有灵活性。但ASP技术基本局限于微软的操作系统平台，主要工作环境是微软的IIS应用程序结构，而且ActiveX对象具有平台特性，所以ASP技术的跨平台性不是很好，即实现在跨平台Web服务器上工作不是很容易。
3.JSP脚本语言
JSP即Java Server Pages（Java服务器页面），它由Sun Microsystem推出，以Java Servlet和整个Java体系的Web开发技术为基础。JSP和ASP在技术方面有许多相似之处，不过ASP一般只应用于微软的平台。而JSP可以在大多数的服务器上运行，而且采用JSP技术开发的应用程序比采用 ASP 开发的应用程序更具有可维护性和可管理性，所以 JSP 技术被业界认为是未来最有发展前途的动态网站技术。
这3种技术目前是制作动态页面的主流，而且在未来一段时间内，PHP、ASP、JSP也会在竞争中共存。对熟悉微软服务器的程序员来说，使用 ASP 技术更容易得心应手。对 Linux的爱好者来说，采用 PHP 技术是比较合适的选择。对于可维护性和可管理性要求较高的设计者，使用JSP技术更合适，尤其是在构建大型网站的应用中。
注意
动态页面的制作相对于HTML页面要复杂很多，了解动态页面的制作方式和HTML页面的关联能够帮助初学者学习、理解静态页面。
事实上，动态页面的设计是离不开HTML的，每一个动态网页开发者都必须掌握HTML语言。在实际应用的网页中，动态网站中包含大量的 HTML 代码，合理结合静态页面和动态页面可以使网页设计更加灵活。
此外，设计者应该明白，动态网站不一定全比静态网页好，动态网站的交互性可能会带来安全隐患。而且动态网站的信息都是从数据库中读取的，当负荷过大时可能造成网站崩溃；动态网站对搜索引擎不是很友好，在一些搜索页面中也不容易被查到，这样会影响网站的推广。
因此，无论是从HTML在网页设计中的基础地位还是其优点来说，熟练掌握HTML都是很重要的基础。掌握了这个基础后再向动态页面设计的道路前进，会更轻松地驾驭动态页面的使用技术。1.1.5 网页浏览器的工作原理
Windows系统中自带了IE浏览器，普通用户在使用它浏览网页时，很多时候都忽视了自己在使用的浏览器。对于一个页面设计者来说，了解浏览器的原理可以令设计者找到适合把网页展示给用户的途径。
那么用户是如何使用浏览器浏览网页的呢？WWW应用采用了B/S（Browser/Server）结构（即浏览器/服务器结构）。在这种结构下，用户工作界面是通过 WWW 浏览器来实现的，主要的事务逻辑在服务器端（Server）实现，极少部分的事务逻辑在前端（Browser）实现。这样大大简化了客户端的计算机载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本。因此，用户只需安装浏览器即可浏览页面，不需要知道服务器端用的是什么操作系统或服务器端是怎么处理浏览器发出的请求的，可以方便地查看自己想看到的内容。
浏览器的工作原理可以分为以下几个步骤来理解，如图1.7所示。（1）浏览器通过HTML表单或超链接请求指向一个应用程序的URL。（2）服务器收到用户的请求。（3）服务器执行已接受创建的指定应用程序。（4）应用程序通常基于用户输入的内容，执行所需要的操作。（5）应用程序把结果格式化为网络服务器和浏览器能够理解的文档，即通常所说的HTML网页。（6）网络服务器最后将结果返回到浏览器中。图1.7 浏览器的工作原理流程图
图1.7展示了从用户在浏览器中输入网址到浏览器显示页面的工作过程。WWW的基础是HTTP协议，Web浏览器就是用于通过URL来获取并显示Web网页的一种软件工具。URL用于指定要取得的Internet上资源的位置与方式。
因此，并不是所有浏览器都支持HTML语言标签。在这种情况下，需要在HTML中添加具有声明作用的代码，相关的知识点在本书后面的章节中会详细介绍。
1.2 HTML和HTML5
HTML最初仅允许研究人员以一种非常高效的方式在互联网上共享信息。随着网页浏览器这一工具变得复杂、多样化之后，设计人员可以在页面中放入更多不同形式的文件，比如图像、音频。因此，网页开发人员开始为 HTML 语言加入了更多的标签，使得本来设计简单的HTML变得丰富起来。1.2.1 超文本标记语言HTML
HTML 是一种用来制作超文本文档的简单标记语言，用其编写的超文本文档称为 HTML文档，它能独立于各种操作系统平台。
自1990年以来，HTML一直被用作World Wide Web的标准表示语言，用于描述Homepage的格式设计，以及它与 WWW 上其他 Homepage 的连接信息。作为一种最为基础的语言，人们使用它描述的文件，并需要通过WWW浏览器显示出效果。
之所以被称为超文本，是因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。HTML用于展示页面的表现形式，如页面的布局、页面的颜色、页面中的内容等。
HTML已经成为全球信息网的基础。它提供标准化的方法将信息格式化并经由Internet传送给全世界的使用者。HTML 为人们的传送和接收信息带来了革命性的变化。但是 HTML 主要是被设计为资料显示之用的。
一个简单的HTML页面结构如下所示。1.2.2 可扩展超文本标记语言XHTML
XHTML是W3C在2000年公布发行的，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言），是一种增强了的 HTML。它的可扩展性和灵活性将适应未来网络应用的更多需求，是基于XML的应用。可以说XHTML就是HTML的一个升级版本，它们之间的区别很小，在实际使用中，有时很难分清它们之间的界线。
HTML的焦点几乎完全集中在信息应如何显示，而不是信息的内容及它的结构上，所以新规则中需要引入XML。XML和HTML的作用不一样，它们的区别很大。XML目前推荐、遵循的是W3C于新世纪初发布的XML1.0。它和HTML一样，都来自SGML。它最初的设计目的是补充 HTML 的不足，能以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
虽然 XML 的数据转换能力很强大，几乎可以替代 HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此开发者在HTML4.0的基础上，用XML的规则对其进行一些扩展，由此得到了XHTML。简单地说，建立XHTML的目的是为了实现HTML向XML的过渡。
正是因为这样，XHTML文档必须小写，因为XML是大小写敏感的，如＜H1＞和＜h1＞就是不同的标签。此外，在XHTML中要求标签必须有始有终。当然从页面设计者的角度来说，无论是HTML还是XHTML的代码写法都是正确的。为了使写法更严谨，使用XHTML的写法未尝不可。
一个标准的XHTML页面结构如下所示。1.2.3 HTML5的设计理念
回顾HTML的发展历程，从XML的补充到XHTML的规范，都没有得到较好的发展。特别是XHTML2，对语法解析过于严格，严重地违背了著名的Postel法则——“发送时要保守；接收时要开放。”
Postel法则是对自己发送出去的东西要严格要求，而对接收的东西则要放松限制。HTML5的设计理念就遵循了这个法则，同时也强调了其兼容性、实用性和互操作性。
1.化繁为简
为了做到尽可能的简化，HTML5避免了一些不必要的复杂设计，例如DOCTYPE的改进：在过去的 XHTML 版本中，第一行的 DOCTYPE 过于冗长，没有几个人能记得住，在实际的Web开发中也没有什么意义。而在HTML5中就非常简单：
＜!DOCTYPE html＞
HTML5改进的方面有：
· 简化了DOCTYPE。
· 简化了字符集声明。
· 以浏览器的原生能力替代脚本代码的实现。
· 简单而强大的HTML5 API。
为了让一切变得简单，HTML5可谓下足了功夫，同时为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，尽量避免有任何歧义和模糊出现。
2.向下兼容
遵循Postel法则的HTML5有着很强的兼容能力。在这方面，HTML5没有颠覆性地革新，允许存在不严谨的写法，例如：一些标签的属性值没有使用引号括起来，标签属性中包含大写字母，有的标签没有闭合，等等。然而这些不严谨的错误处理方案在HTML5的规范中都有着明确的规定，也希望在未来浏览器的支持中有着一致的支持。当然对于Web开发者来说，还是严谨一点好。
而对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。在HTML5的规范中也考虑了这方面的内容。如在HTML5中，input标签的type属性增加了很多类型，当浏览器不支持这些类型时，默认会将其视为text实现了降级。
3.支持合理存在的内容
HTML5的设计者们花费了大量的精力来研究通用的行为。例如，Google分析了上百万个页面，从中提取了DIV标签的id名称，例如很多人都是这样标记导航区域的：
既然这种情况很常见，HTML5就会想办法去改进，所以就直接增加了一个nav标签，用于导航区域。
4.解决实用性的问题
对于一些 HTML 无法实现的功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置、实时获取信息等应用，通常会开发一些相应的插件去间接地实现。HTML5 的设计者们研究了这些需求，开发了一系列用于Web应用的接口。
HTML5 的规范制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。正是因为开放，才能得到更加全面的发展。一切以用户需求为最终目的，用户需要什么，它就规范什么。所以当你在使用HTML5的新功能时，会发现这正是期待已久的东西。
5.最终用户优先
这个设计理念本质上是一种解决冲突的机制。在遇到无法解决的冲突时，规范会把最终用户的诉求放在第一位。因此，HTML5的绝大部分功能都是非常实用的。HTML5规范的制定遵循如下的优先顺序：
用户 ＞ 编写HTML的开发者 ＞ 浏览器厂商 ＞ 规范制定者 ＞ 纯粹性的理论
可见，用户与开发者的重要性要远远高于规范和理论。譬如，有很多用户都需要实现一个新的功能，HTML5规范的设计者们就会研究这种需求，并纳入规范；当Web开发者写了不够严谨的代码时，HTML5 却规范了一套错误处理机制，接纳这种不严谨的做法。所以，当你在使用HTML5时，会发现它比以前的版本友好多了。
6.通用访问
这个原则可以分成以下三个方面。
· 可访问性：HTML5考虑了残障用户的需求，以屏幕阅读器为基础的元素也已经被添加到规范当中。
· 媒体中立：HTML5规范不仅仅是为某些浏览器而设计的。也许有一天，HTML5的新功能在不同的设备和平台上都能运行。
· 支持所有语种。1.2.4 HTML页面的开发工具
HTML最常见的有3种开发工具，分别是记事本、Dreamweaver和EditPlus。
1.记事本
记事本是 Windows 系统自带的简单的文本编辑软件，但由于大部分代码都是纯文本的，所以使用记事本可以编写任何网页。不过对于需要编辑大量代码的稍大型网页，记事本就显得不是那么适合了，但对于初学者来说，记事本是较好的练习工具。在记事本中写好内容后，别忘记修改文档的扩展名，因为记事本默认的扩展名是txt，而HTML网页的扩展名是.html或.htm。
2.Dreamweaver开发工具
Dreamweaver是MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器。它是一款服务于专业网页设计师的视觉化网页开发工具，利用它可以制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver最大的特点是所见即所得。可以使用它的网站地图快速制作网站雏形，设计、更新和重组网页。此外，Dreamweaver可以自动生成源代码，大大提高了网页开发人员的工作效率。但是Dreamweaver也存在缺点，在一些复杂的网页中难以精确达到与浏览器完全一致的显示效果，同时其产生的代码效率比较低。
Dreamweaver是一款可视化编辑工具，Dreamweaver工作状态的操作界面如图1.8所示。Dreamweaver不仅支持静态页面的编写，而且还支持PHP、ASP、JSP 等动态网页的编写与调试。对于网页设计初学者来说，Dreamweaver是一款比较好的入门软件，即使对HTML、HTML5不太熟悉，也能做出漂亮的网页来。
Dreamweaver的工作界面是分割成一块块的窗口，这些工具窗口可以按照用户自定义的样式自由设定。从图1.8中可以看到，最引人注意的2个工作区域分别是代码区和预览区。
3.EditPlus开发工具
EditPlus是韩国出品的一款小型编辑器，利用插件它可以处理文本、HTML和程序语言，操作界面如图1.9所示，有点类似记事本，但拥有无限制的撤销与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览等功能。之所以说它是一款非常好用的HTML编辑器，是因为除了支持颜色标记、HTML标记，它还同时支持C、C++、Perl、Java，另外还内建完整的HTML＆CSS指令功能。图1.8 Dreamweaver的操作界面图1.9 EditPlus的操作界面
最方便的是，EditPlus会在自己的窗口中结合IE浏览器，让用户可以直接预览编辑好的网页，若没有安装IE，也可以自己指定浏览器路径。
由于Dreamweaver的适用性目前已经超过了EditPlus，因此在大多数情况下，设计人员的第一选择已经是Dreamweaver。
1.3 实战：编写一个简单的页面（HTML和HTML5）
本实例的目的在于展示一个页面制作的完整代码，其中涉及一个重要的概念——网页的超链接。单独的页面如同一本书中的一页，把所有的页面链接在一起，如同把所有的书页装订在一起，使之被称为书，而所有的页面链接在一起就称之为网站。
超链接是网页独有的特色技术，如在下面的实例中，单击“这是我的第一个网页，我喜欢HTML！您可以单击这里”链接，页面会跳转到搜狐主页。首先打开记事本，输入如实例 1-2所示的页面源码。【实例1-2】编写一个带链接的简单页面。
注意
＜a herf=""＞的功能是链接其他页面，＜a＞是HTML标签。【深入学习】输入结束后，在记事本中将文件另存为以.html为后缀名的网页文件，如图1.10所示。将页面保存为一个具体的页面文件存放在计算机中，并且命名为“编写一个简单的页面.html”。
最后在浏览器中打开的效果如图1.11所示，这就是已经完成的页面。单击“浏览进入搜狐，查找你感兴趣的东西”这一链接，（如果用户的计算机已经连接上互联网）则页面会转入搜狐的主页。图1.10 编写一个简单的页面图1.11 页面的效果图
前面还只是一个基本的HTML网页，如何将这个网页转化为HTML5页面呢？其实只要替换开始的DOCTYPE和＜html＞标签就可以了。【实例1-3】编写一个带链接的简单HTML5页面。
读者可以再次保存这个页面，用浏览器打开，对比两者的效果。因为这里并没有使用HTML5的新标签，所以内容和显示效果都没有变化。
1.4 小结
本章首先介绍了大家所理解的网页究竟是动态还是静态的。然后回顾了 HTML 的发展历史，包括从HTML到XML再到XHTML的演变，其中重点介绍了HTML5的设计理念、增加的原生功能及其带来的好处。本章最后通过两个简单的页面了解了 HTML 的完整结构，也对比了HTML和HTML5在实际页面编写中的区别。本章非常简单，只是一些网页发展中的术语介绍，后面会教读者如何真正地动手编写网页。
1.5 本章习题
一、填空题
1.网页是由______、______和______这3个部分组成的。
2.静态页面使用 HTML 编写，通常扩展名一般为______、______、______、______等。与静态网页的后缀不同，动态网页是以________、________、________等形式为后缀。
3.最常见的简单易用的页面开发工具是______。
二、选择题
1.在下列后缀名中，表示静态页面的是（）。
A.jsp
B.asp
C.html
D.php
2.下列不属于页面开发工具的是（）。
A.Dreamweaver
B.Photoshop
C.EditPlus
D.记事本
3.在下列选项中，不属于静态页面文件的是（）。
A.HTML
B.XHTML
C.XML
D.JSP
三、简答题
1.在向下兼容方面，HTML5有着很强的兼容能力，允许存在不严谨的写法。这一设计理念遵循的是什么法则？
2.在纸上分别手写出HTML的DOCTYPE和HTML5的DOCTYPE。
第2章 了解HTML网页的结构
最初创建 HTML 的目的是创建一种文本描述语言，而它发展至今，成了一种标记语言，以十分直观的方式告诉浏览器页面中的内容。而在 HTML 出现以前，创建一个可以展示文档内容、包含多媒体信息、具备丰富多彩动态效果的文件是一件难以想象的事情。这意味着如果想通过网络传递信息，只能通过Word这类软件来操作。HTML的出现令很多不擅长使用软件的人一样可以享受网络带来的快捷性和便利性，要学习HTML5，就必须先掌握以下这些HTML基础知识。
本章主要的知识点如下。
· 通过怎样的方法来查看网页的源码。
· HTML语言的使用方法。
· 学习HTML页面基本的结构和标签。
· 通过HTML页面的实例了解如何制作简单的页面。
2.1 用记事本打开一个页面
文件扩展名是操作系统用来标志文件格式的一种机制。扩展名一般跟在文件名的后面，由一个分割符号隔开。如film.avi、.avi等就说明该film文件是一个视频，扩展名就如同文件的身份说明，区别了文件的类别和作用。
HTML 页面的文件后缀名是.html 或者.htm。在一般情况下，系统默认使用网页浏览器打开。在这种情况下，使用者无法看到页面代码，实际看到的是页面制作的最后展示结果。【实例2-1】通过此例学习第一个页面。【运行程序】效果如图2.1所示，这是一个静态页面。图2.1 学习第一个页面【深入学习】通过记事本打开网页文件可以看到代码，右击网页空白处，在弹出的快捷菜单中选择“查看源文件”命令。系统会默认在记事本中打开源码，在这个页面的代码中包含了文本内容、CSS的样式表、一个简单的提交表单。
一个完整的HTML文档包含两类事物：标签和页面内容。放在
试读结束[说明：试读内容隐藏了图片]