《讲HTML新特性》PPT课件.ppt

《《讲HTML新特性》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《讲HTML新特性》PPT课件.ppt（119页珍藏版）》请在金锄头文库上搜索。

1、HTML5HTML5编程编程编程编程第第2讲讲 HTML5概述概述 课程描述课程描述课程描述课程描述互联网上的应用程序被称为互联网上的应用程序被称为互联网上的应用程序被称为互联网上的应用程序被称为WebWebWebWeb应用程序，应用程序，应用程序，应用程序，WebWebWebWeb应用程序应用程序应用程序应用程序使用使用使用使用WebWebWebWeb文档（网页）来表现用户界面，而文档（网页）来表现用户界面，而文档（网页）来表现用户界面，而文档（网页）来表现用户界面，而WebWebWebWeb文档都遵文档都遵文档都遵文档都遵循标准循标准循标准循标准HTMLHTMLHTMLHTML格式。格式。

2、格式。格式。HTML5HTML5HTML5HTML5是最新的是最新的是最新的是最新的HTMLHTMLHTMLHTML标准。之前的版标准。之前的版标准。之前的版标准。之前的版本本本本HTML4.01HTML4.01HTML4.01HTML4.01于于于于1999199919991999年发布。年发布。年发布。年发布。10101010多年过去了，互联网已经多年过去了，互联网已经多年过去了，互联网已经多年过去了，互联网已经发生了翻天覆地地变化。原有的标准已经不能满足各种发生了翻天覆地地变化。原有的标准已经不能满足各种发生了翻天覆地地变化。原有的标准已经不能满足各种发生了翻天覆地地变化。原有的标准已经

3、不能满足各种WebWebWebWeb应用程序的需求。本章就和读者一起来了解一下最应用程序的需求。本章就和读者一起来了解一下最应用程序的需求。本章就和读者一起来了解一下最应用程序的需求。本章就和读者一起来了解一下最新标准的新标准的新标准的新标准的HTML5HTML5HTML5HTML5的概貌。的概貌。的概貌。的概貌。 本章知识点本章知识点p1.1 HTML1.1 HTML基础基础 p1.2 HTML41.2 HTML4基础基础 （自学）（自学）p1.3 HTML51.3 HTML5的新特性的新特性 1.1 HTML基础基础 p1.1.1 1.1.1 什么是什么是HTML HTML p1.1.2

4、HTML1.1.2 HTML的历史的历史 1.1.1 什么是什么是HTML pHTMLHTML是是HyperTextHyperText Markup Language Markup Language（即超文本标记（即超文本标记语言）的缩写，它是通过嵌入代码或标记来表明文本语言）的缩写，它是通过嵌入代码或标记来表明文本格式的国际标准。用它编写的文件扩展名是格式的国际标准。用它编写的文件扩展名是.html.html或或. .htmhtm，这种网页文件的内容通常是静态的。，这种网页文件的内容通常是静态的。pHTMLHTML语言中包含很多语言中包含很多HTMLHTML标记，它们可以被标记，它们可以被W

5、ebWeb浏览浏览器解释，从而决定网页的结构和显示的内容。这些标器解释，从而决定网页的结构和显示的内容。这些标记通常成对出现，例如记通常成对出现，例如和和就是常用的就是常用的标记对，语法格式如下：标记对，语法格式如下： 数据数据 / 基本的HTML结构标记 结构标记结构标记具体描述具体描述标记标记HTML文档的开始和结束文档的开始和结束标记文件头的开始和结束。标记文件头的开始和结束。HTML文档的头文档的头部中可以包含脚本、部中可以包含脚本、CSS样式表和网页标题样式表和网页标题等信息。这里指的脚本通常是等信息。这里指的脚本通常是Java Script脚脚本，具体情况将在第本，具体情况将在第2

6、章介绍；关于章介绍；关于CSS样式样式表的具体情况将在第表的具体情况将在第4章介绍章介绍标记文件头中的文档标题标记文件头中的文档标题标记文件体部分的开始和结束标记文件体部分的开始和结束标记文档中的注释部分标记文档中的注释部分【例1-1】 p一个使用基本结构标记文档的一个使用基本结构标记文档的HTMLHTML文档实例。文档实例。 HTML文件标题文件标题. !-是是HTMLHTML文档中的注释符，它们文档中的注释符，它们之间的代码不会被解析。之间的代码不会被解析。 1.1.2 HTML的历史的历史 p19901990年，欧洲原子物理研究所的英国科学家年，欧洲原子物理研究所的英国科学家Tim Ti

7、m Berners-LeeBerners-Lee发明了发明了WWWWWW（World Wide WebWorld Wide Web）。）。通过通过WebWeb，用户可以在一个网页里比较直观的表，用户可以在一个网页里比较直观的表示出互联网上的资源。因此，示出互联网上的资源。因此，Tim Berners-LeeTim Berners-Lee被称为互联网之父。被称为互联网之父。 p最早的关于最早的关于HTMLHTML的公开描述是由的公开描述是由Tim Berners-Tim Berners-LeeLee于于19911991年发表一篇叫做年发表一篇叫做HTMLHTML标签标签的文章，的文章，其中描述了

8、其中描述了1818个元素，这就是关于个元素，这就是关于HTMLHTML的最简的最简单的设计。其中的单的设计。其中的1111个元素还保留在个元素还保留在HTML4HTML4中。中。 HTML的历史的历史p19931993年，年，InternetInternet工程任务组（工程任务组（Internet Internet Engineering Task ForceEngineering Task Force，IETFIETF）发布了第）发布了第1 1部部HTMLHTML规范建议。规范建议。19941994年，年，IETFIETF成立了成立了HTMLHTML工作工作组，该工作组于组，该工作组于199

9、51995年完成了年完成了HT ML 2.0HT ML 2.0设计，设计，并于同年发布了并于同年发布了HTML 3.0HTML 3.0，对，对HTML 2.0HTML 2.0进行了进行了扩展。扩展。pHTML 4.01HTML 4.01发布于发布于19991999年，直至将现在仍然有大年，直至将现在仍然有大量的网页是基于量的网页是基于HTML 4.01HTML 4.01的，它的应用周期超的，它的应用周期超过过1010年，因此是到目前为止，影响最广泛的年，因此是到目前为止，影响最广泛的HTMLHTML版本。版本。HTML的历史的历史p2004年，超文本应用技术工作组（年，超文本应用技术工作组（W

10、eb Hypertext Application Technology Working Group，WHATWG）开始研发）开始研发HTML5。2007年，万维网联盟年，万维网联盟（World Wide Web Consortium，W3C）接受了）接受了HTML5草案，并成立了专门的工作团队。并于草案，并成立了专门的工作团队。并于2008年年1月发布了第月发布了第1个个HTML5的正式草案。的正式草案。p2010年，时任苹果公司年，时任苹果公司CEO的乔布斯发表了一篇名为的乔布斯发表了一篇名为对对flash的思考的思考的文章，指出随着的文章，指出随着HTML5的完善和推的完善和推广，以后再观

11、看视频等多媒体时就不再依靠广，以后再观看视频等多媒体时就不再依靠flash插件了。插件了。这引起了主流媒体对这引起了主流媒体对HTML5的兴趣。的兴趣。p目前目前HTML5的标准草案已进入了的标准草案已进入了W3C制定标准制定标准5大程序大程序的第的第1步。预期要到步。预期要到2022年才会成为年才会成为 W3C 推荐标准。推荐标准。HTML5无疑会成为未来无疑会成为未来10年最热门的互联网技术。年最热门的互联网技术。1.2 HTML4基础（自学）基础（自学） 1.2.1 设置网页背景和颜色设置网页背景和颜色 1.2.2 设置字体属性设置字体属性1.2.3 超级链接超级链接 1.2.4 图像和

12、动画图像和动画 1.2.5 表格表格1.2.6 使用框架使用框架1.2.7其他常用标签其他常用标签跳转到第三部分1.2.1 设置网页背景和颜色设置网页背景和颜色p可以在可以在标签中通过标签中通过backgroundbackground属性属性设置网页的背景图片，例如：设置网页的背景图片，例如：pp可以在可以在标签中通过标签中通过backcolorbackcolor属性属性设置网页的背景图片，例如：设置网页的背景图片，例如：p标签中的常用属性标签中的常用属性 属性属性说明说明BACKGROUND文档的背景图像文档的背景图像BGCOLOR文档的背景色文档的背景色TEXT文档中文本的颜色文档中文本的

13、颜色LINK文档中链接的颜色文档中链接的颜色VLINK文档中已被访问过的链接的颜色文档中已被访问过的链接的颜色ALINK文档中正被选中的链接的颜色文档中正被选中的链接的颜色1.2.2 设置字体属性设置字体属性 可以使用可以使用标签对网页中的文字设标签对网页中的文字设置字体属性，包括选择字体和设置字体大小置字体属性，包括选择字体和设置字体大小等，例如：等，例如：设置字体设置字体.faceface属性用于设置字体类型，属性用于设置字体类型，sizesize属性用属性用于设置字体大小。也可以使用于设置字体大小。也可以使用colorcolor属属性设置字体的颜色。性设置字体的颜色。【例例1-2】 使用

14、使用定义加粗字体，使用定义加粗字体，使用定义定义倾斜字体，使用倾斜字体，使用定义下划线字体。这些定义下划线字体。这些标签可以混合使用，定义同时具有多种属性的字体。标签可以混合使用，定义同时具有多种属性的字体。 p定义加粗、倾斜和下划线字体，代码如下：定义加粗、倾斜和下划线字体，代码如下：加粗加粗 倾斜倾斜 下划下划线线 浏览浏览【例例1-2】的结果的结果 【例例1-3】 p可以单独定义可以单独定义和和之间元素的属性。比之间元素的属性。比较常用的属性是较常用的属性是alighaligh# #，# #可以是可以是leftleft、centercenter或或rightright。LeftLeft表

15、示文字居左，表示文字居左，centercenter表表示文字居中，示文字居中，rightright表示文字居右。表示文字居右。 p 将将【例例1-21-2】定义的文字居中显示，代码如下：定义的文字居中显示，代码如下：加粗加粗 倾斜倾斜 下划线下划线【例例1-4】 p下面的代码可以定义下面的代码可以定义H1H1、H2H6H2H6标题的文标题的文字。字。这是标题这是标题 1这是标题这是标题 2这是标题这是标题 3这是标题这是标题 4这是标题这是标题 5这是标题这是标题 6浏览浏览【例例1-4】的结果的结果 1.2.3 超级链接超级链接 在超级链接中必须明确指定转向文档的位置和文件在超级链接中必须明

16、确指定转向文档的位置和文件名。可以使用名。可以使用URLURL（统一资源定位器，（统一资源定位器，Uniform Uniform Resource LocatorResource Locator）指定文档的具体位置，它的）指定文档的具体位置，它的构成如下：构成如下：protocol:/ machine.name:portdirectoryfilename其中其中protocolprotocol是访问该资源所采用的协议，即访问是访问该资源所采用的协议，即访问该资源的方法，主要的协议包括：该资源的方法，主要的协议包括： HTTPHTTP，超文本传输协议，该资源是，超文本传输协议，该资源是HTMLH

17、TML文件。文件。 FileFile，用于访问本地计算机上的文件资源。，用于访问本地计算机上的文件资源。 FTPFTP，文件传输协议。，文件传输协议。 NewsNews，表明该资源是网络新闻。，表明该资源是网络新闻。一个典型的一个典型的URL p下面是一个典型的下面是一个典型的URLURL：phttp:/ p在在和和标签之间定义超级链接的显示文本，标签之间定义超级链接的显示文本，hrefhref属性定义要转向的网址或文档。属性定义要转向的网址或文档。p在超级链接的定义代码中，除了指定转向文档在超级链接的定义代码中，除了指定转向文档外，还可以使用外，还可以使用targettarget属性来设置单

18、击超级链属性来设置单击超级链接时打开网页的目标框架。可以选择接时打开网页的目标框架。可以选择_blank_blank（新建窗口）、（新建窗口）、_parent_parent（父框架）、（父框架）、_self_self（相同框架）和（相同框架）和_top_top（整页）等目标框架。比（整页）等目标框架。比较常用的目标框架为较常用的目标框架为_blank_blank（新建窗口）。（新建窗口）。 【例例1-5】 p 定义一个新的超级链接，显示文本为定义一个新的超级链接，显示文本为“在新在新窗口中打开窗口中打开PHPPHP网站网站”，代码如下：，代码如下：在新窗在新窗口中打开口中打开PHP网站网站电子

19、邮件超级链接的定义电子邮件超级链接的定义 p在在HTMLHTML语言中，电子邮件超级链接的定语言中，电子邮件超级链接的定义代码如下：义代码如下：我的邮箱我的邮箱命名锚记（书签）命名锚记（书签） p超级链接还可以定义在本网页内跳转，超级链接还可以定义在本网页内跳转，从而实现类似目录的功能。比较常见从而实现类似目录的功能。比较常见的应用包括在网页底部定义一个超级的应用包括在网页底部定义一个超级链接，用于返回网页顶端。首先需要链接，用于返回网页顶端。首先需要在跳转到的位置定义一个标识（锚），在跳转到的位置定义一个标识（锚），在在DreamWeaverDreamWeaver中这种定义位置的标识中这种定

20、义位置的标识被称为命名锚记（在被称为命名锚记（在FrontPageFrontPage中被称中被称为书签）。为书签）。p例如，可以在网页的顶部定义锚例如，可以在网页的顶部定义锚toptop，代码如下：代码如下：p在在标记中增加了一个标记中增加了一个namename属性，表属性，表示这是一个名字为示这是一个名字为toptop的锚。的锚。转向同一文档中有锚的地方转向同一文档中有锚的地方 p创建锚是为了在创建锚是为了在HTMLHTML文档中创建一些链文档中创建一些链接，通过这些链接可以方便地转向同一接，通过这些链接可以方便地转向同一文档中有锚的地方，代码如下：文档中有锚的地方，代码如下：转到锚转到锚n

21、amep如果如果HREFHREF属性的值是指定一个锚，则必属性的值是指定一个锚，则必须在锚名前面加一个须在锚名前面加一个“#”#”符号。例如，符号。例如，在网页的尾部添加如下代码：在网页的尾部添加如下代码：返回顶部返回顶部 1.2.4 图像和动画图像和动画 pHTMLHTML语言中使用语言中使用 标签来处理图像，例如：标签来处理图像，例如：psrcsrc属性用于指定图像文件的文件名，包括文属性用于指定图像文件的文件名，包括文件所在的路径。这个路径既可以是相对路径，件所在的路径。这个路径既可以是相对路径，也可以是绝对路径。也可以是绝对路径。 标记还有如下的属性标记还有如下的属性 altalt：当

22、鼠标光标移动到图像上时显示：当鼠标光标移动到图像上时显示的文本。的文本。 alignalign：图像的对齐方式，包括：图像的对齐方式，包括toptop（顶（顶端对齐）、端对齐）、bottom bottom （底部对齐）、（底部对齐）、middlemiddle（居中对齐）、（居中对齐）、leftleft（左侧对齐）（左侧对齐）和和rightright（右侧对齐）。（右侧对齐）。 borderborder：图像的边框宽度。：图像的边框宽度。 width width 图像的宽度。图像的宽度。 height height 图像的高度。图像的高度。 hspacehspace 定义图像左侧和右侧的空白。定

23、义图像左侧和右侧的空白。 vspacevspace 定义图像顶部和底部的空白。定义图像顶部和底部的空白。使用使用标记来处理动画标记来处理动画 p例如，在网页中插入一个多媒体文件例如，在网页中插入一个多媒体文件clock.aviclock.avi，代码如下：，代码如下：pdynsrcdynsrc属性用于指定动画文件的文件名，属性用于指定动画文件的文件名，包括文件所在的路径。包括文件所在的路径。startstart属性用于属性用于指定动画开始播放的时间，指定动画开始播放的时间，fileopenfileopen表表示网页打开时即播放动画。示网页打开时即播放动画。 1.2.5 表格表格 p在在HTML

24、HTML语言中表格由语言中表格由标签对标签对定义定义p表格内容由表格内容由 和和标记对标记对定义。定义。 定义表格中的一行，定义表格中的一行，通常出现在通常出现在 之间，用之间，用于定义一个单元格于定义一个单元格 【例例1-6】 p定义一个定义一个3 3行行3 3列的表格，代码如下：列的表格，代码如下：                图图1-3 浏览浏览【例例1-6】的结果的结果   浏览浏览【例例1-6】的结果的结果 1通栏通栏 p被合并的单元格会跨越多个单元格，这种被合并的单元格会跨越多个单元格，这种

25、合并的单元格被称为通栏。通栏可以分为合并的单元格被称为通栏。通栏可以分为横向通栏和纵向通栏两种，横向通栏和纵向通栏两种，td =#用于定义横向通栏，用于定义横向通栏， =#用于定义纵向通栏。用于定义纵向通栏。# #表示通表示通栏占据的单元格数量。栏占据的单元格数量。 2表格大小和边框宽度表格大小和边框宽度 p在在标记中表格的大小用标记中表格的大小用width=#width=#和和height=#height=#属性说明。前者为表宽，后者为表属性说明。前者为表宽，后者为表高，高，# #是以像素为单位的整数，也可以是百是以像素为单位的整数，也可以是百分比。在分比。在【例例1-51-5】中，可以看到

26、中，可以看到widthwidth属性属性的使用。的使用。p边框宽度由边框宽度由border=#border=#属性定义，属性定义，# #为宽度值，为宽度值，单位是像素。例如，下面的单位是像素。例如，下面的HTMLHTML代码定义了代码定义了一个边框宽度为一个边框宽度为4 4的表格。的表格。 3背景颜色背景颜色 在在HTML语言中，可以使用语言中，可以使用bgcolor属性设置单元格的背属性设置单元格的背景颜色，格式为景颜色，格式为bgcolor=#。#是是16进制的进制的6位数，格位数，格式为式为rrggbb，分别表示红、绿、蓝三色的分量，或者是，分别表示红、绿、蓝三色的分量，或者是16种已定

27、义好的颜色名称。种已定义好的颜色名称。 【例例1-7】 下面的下面的HTML代码定义表格的背景颜色为代码定义表格的背景颜色为C0C0C0（灰色）。（灰色）。 表格表格域名域名说明说明浏览浏览【例例1-7】的结果的结果 1.2.6 使用框架使用框架 p框架（框架（FrameFrame）可以将浏览器的窗口分）可以将浏览器的窗口分成多个区域，每个区域可以单独显示成多个区域，每个区域可以单独显示一个一个HTMLHTML文件，各个区域也可以相关文件，各个区域也可以相关联地显示某一个内容。例如，可以将联地显示某一个内容。例如，可以将索引放在一个区域，文件内容显示在索引放在一个区域，文件内容显示在另一个区域

28、。框架通常的使用方法是另一个区域。框架通常的使用方法是在一个框架中放置可供选择的链接目在一个框架中放置可供选择的链接目录，而将录，而将HTMLHTML文件显示在另一个框架文件显示在另一个框架中。中。 定义框架的基本代码定义框架的基本代码 .1标签标签 p 元素中包含了框架不能被显示元素中包含了框架不能被显示时的替换内容。时的替换内容。2标签标签 p元素是一个框架容器，它将窗口分元素是一个框架容器，它将窗口分成长方形的子区域，即框架。在一个框架设置成长方形的子区域，即框架。在一个框架设置文档中，文档中，取代了取代了位置，紧接位置，紧接之后。之后。p的基本属性包括的基本属性包括rowsrows和和

29、colscols，它们，它们定义了框架设置元素中的每个框架的尺寸大小。定义了框架设置元素中的每个框架的尺寸大小。rowsrows值从上到下给出了每行的高；值从上到下给出了每行的高；colscols值从左值从左到右给出了每列的宽。到右给出了每列的宽。p框架是可以嵌套的，也就是说可以在框架是可以嵌套的，也就是说可以在中还可以包含一个或多个中还可以包含一个或多个标签。标签。3标签标签 标签包含多个标签包含多个标签。每个标签。每个元素定元素定义一个子窗口。义一个子窗口。标签的属性说明如下：标签的属性说明如下： name 框架名称。框架名称。 src 框架内容框架内容URL。 longdesc 框架的长

30、篇描述。框架的长篇描述。 frameborder 框架边框。框架边框。 marginwidth 边距宽度。边距宽度。 marginheight 边距高度。边距高度。 noresize 禁止用户调整框架尺寸。禁止用户调整框架尺寸。 scrolling 规定了行内框架中是否需要滚动条。规定了行内框架中是否需要滚动条。【例例1-8】 p定义框架的例子。定义框架的例子。p首先创建首先创建3 3个个HTMLHTML文件，文件，a.htmla.html、b.htmlb.html和和c.htmlc.html。a.htmla.html的代码如下：的代码如下：b.html c.htmlp单击超链接，将在单击超链

31、接，将在mainmain框架中打开对应的网页。框架中打开对应的网页。b.htmlb.html的代码如下：的代码如下： b.htmlpc.htmlc.html的代码如下：的代码如下： c.html定义框架的网页代码定义框架的网页代码 定义框架的例子定义框架的例子此网页使用了框架，但您的浏览器不支持框架。此网页使用了框架，但您的浏览器不支持框架。浏览浏览【例例1-8】的结果的结果 单击单击c.html超链接的网页界面超链接的网页界面 1.2.7其他常用标签其他常用标签 1 1 2 2 标签标签 3 3标签标签 4 4 标签标签 5 5 1 p 标签可以定义文档中的分区或节（标签可以定义文档中的分区

32、或节（division/sectiondivision/section），可以把），可以把文档分割为独立的、不同的部分。在文档分割为独立的、不同的部分。在HTML4HTML4中，中， 标签对涉及网页标签对涉及网页布局很重要。布局很重要。p【例例1-91-9】 使用使用 标签定义标签定义3 3个分区，背景色分别为红、绿、蓝，个分区，背景色分别为红、绿、蓝，代码如下：代码如下： 标题标题1 正文正文1 标题标题2 正文正文2 标题标题3 正文正文3浏览浏览【例例1-9】的结果的结果 2标签标签 p 标签是标签是HTMLHTML中的换行符。在中的换行符。在 XHTML XHTML 中，把结束标签放在

33、开始标签中，把结束标签放在开始标签中，即中，即 /。p【例例1-101-10】 使用使用 标签的例子标签的例子. .第一段第一段第二段第二段第三段第三段浏览浏览【例例1-10】的结果的结果 3标签标签 p标签用于定义预格式化的文本。标签用于定义预格式化的文本。其中的文本会以等宽字体显示，并保留空格和换行其中的文本会以等宽字体显示，并保留空格和换行符。符。标签通常可以用来显示源代码。标签通常可以用来显示源代码。p【例例1-111-11】 使用使用标签显示标签显示【例例1-91-9】中的代码。中的代码。<html><body> <div style=backgroun

34、d-color:#FF0000> <h3>标题标题1</h3> <p>正文正文1</p></div><div style=background-color:#00FF00> <h3>标题标题2</h3> <p>正文正文2</p></div><div style=background-color:#0000FF> <h3>标题标题3</h3> <p>正文正文3</p></body><

35、/html>浏览浏览【例例1-11】的结果的结果 【例例1-12】 p演示演示 标签的使用方法。标签的使用方法。 北京北京 上海上海 天津天津 北京北京 上海上海 天津天津浏览浏览【例例1-12】的结果的结果 5 p标签可以用来组合文档中的行内标签可以用来组合文档中的行内元素。它可以在行内定义一个区域，也就元素。它可以在行内定义一个区域，也就是一行内可以被是一行内可以被划分成好几个区域，划分成好几个区域，从而实现某种特定效果。从而实现某种特定效果。p本身没有任何属性，如果不对本身没有任何属性，如果不对spanspan应用样式，那么应用样式，那么spanspan元素中的文本与元素中的文本与

36、其他文本不会任何视觉上的差异。因此，其他文本不会任何视觉上的差异。因此，这里不介绍这里不介绍标签的使用实例，在标签的使用实例，在本书后面的很多例子中会使用到本书后面的很多例子中会使用到标签。标签。 1.3 HTML5的新特性的新特性 1.3.1 1.3.1 简化的文档类型和字符集简化的文档类型和字符集 1.3.2 HTML51.3.2 HTML5的新结构的新结构 1.3.3 HTML51.3.3 HTML5的新增内联元素的新增内联元素 1.3.4 1.3.4 支持动态页面支持动态页面1.3.5 1.3.5 全新的表单设计全新的表单设计1.3.6 1.3.6 强大的绘图和多媒体功能强大的绘图和多

37、媒体功能1.3.7 1.3.7 打造桌面应用的一系列新功能打造桌面应用的一系列新功能1.3.8 1.3.8 获取地理位置信息获取地理位置信息1.3.9 1.3.9 支持多线程支持多线程 1.3.10 1.3.10 废弃的标签废弃的标签 1.3.1 简化的文档类型和字符集简化的文档类型和字符集 p 声明位于声明位于HTMLHTML文档中的最前文档中的最前面的位置，它位于面的位置，它位于 标签之前。标签之前。p该标签告知浏览器文档所使用的该标签告知浏览器文档所使用的HTMLHTML或或 XHTMLXHTML规范。规范。p在在HTML4HTML4中，中，标签可以声明三标签可以声明三种种 DTD DT

38、D 类型，分别表示严格版本类型，分别表示严格版本（StrictStrict）、过渡版本（）、过渡版本（TransitionalTransitional）和基于框架（和基于框架（FramesetFrameset）的）的 HTML HTML 文档。文档。【例例1-13】 p使用使用标签的例子。标签的例子。1HTML4严格版本（严格版本（Strict）DTD p如果需要干净的标记，避免表现层的混乱，如果需要干净的标记，避免表现层的混乱，可以使用此类型。通常与层叠样式表可以使用此类型。通常与层叠样式表（CSSCSS）配合使用。）配合使用。【例例1-91-9】中定义的中定义的标签就是严格版本的标签就是严

39、格版本的DTDDTD。 2HTML4过渡版本（过渡版本（Transitional）DTD p过渡版本过渡版本DTDDTD可以包含可以包含 W3CW3C所期望移入样式表的所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠呈现属性和元素。如果用户使用了不支持层叠样式表（样式表（CSSCSS）的浏览器，那么）的浏览器，那么HTMLHTML文档就不得文档就不得不使用不使用 XHTML XHTML 的呈现特性了，此时请使用过渡的呈现特性了，此时请使用过渡版本版本DTDDTD。定义过渡版本。定义过渡版本DTDDTD的代码如下：的代码如下：3HTML4基于框架（基于框架（Frameset）DTD p

40、如果希望在网页中使用框架，请使用过渡如果希望在网页中使用框架，请使用过渡基于框架基于框架DTDDTD。定义过渡基于框架。定义过渡基于框架DTDDTD的代的代码如下：码如下：4HTML5的的标签标签 p对于初学者而言，前面的内容也许有些复杂，不好理对于初学者而言，前面的内容也许有些复杂，不好理解。不过，好在解。不过，好在HTML5HTML5对对标签进行了简化，标签进行了简化，只支持只支持HTMLHTML一种文档类型。定义代码如下：一种文档类型。定义代码如下：p之所以这么简单，是因为之所以这么简单，是因为HTML5HTML5不再是不再是SGMLSGML（Standard Generalized M

41、arkup LanguageStandard Generalized Markup Language，标，标准通用标记语言，是一种定义电子文档结构和描述其准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起内容的国际标准语言，是所有电子文档标记语言的起源）的一部分，而是独立的标记语言。这样做设计源）的一部分，而是独立的标记语言。这样做设计HTMLHTML文档时就不需要考虑文档类型了。文档时就不需要考虑文档类型了。5HTML5的字符集的字符集 p如果要正确地显示如果要正确地显示HTMLHTML页面，浏览器必须页面，浏览器必须知道使用何种字符集。知道使用何种

42、字符集。HTML4HTML4的字符集包的字符集包括括ASCIIASCII、ISO-8859-1ISO-8859-1、UnicodeUnicode等很多类等很多类型。型。pHTML5HTML5的字符集也得到了简化，只需要使的字符集也得到了简化，只需要使用用UTF-8UTF-8即可，使用一个即可，使用一个metameta标记就可以标记就可以指定指定HTML5HTML5的字符集，代码如下：的字符集，代码如下：1.3.2 HTML5的新结构的新结构 pHTML5HTML5的设计者们认为的设计者们认为网页应该像网页应该像XMLXML文档和文档和图书一样有结构。图书一样有结构。p通常，网页中有导航、通常，

43、网页中有导航、网页体内容、工具栏、网页体内容、工具栏、页眉和页脚等结构。页眉和页脚等结构。pHTML5HTML5中增加了一些新中增加了一些新的标记以实现这些网页的标记以实现这些网页结构，这些新标记及其结构，这些新标记及其定义的网页布局定义的网页布局 1标签标签 p 标签用于定义文档中的区段，例如标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。章节、页眉、页脚或文档中的其他部分。p【例例1-141-14】 使用使用标签的例子。标签的例子。 HTML5 HTML5是最新的是最新的HTML标准标准.2标签标签 p标签用于定义文档的页眉（介绍信息）。标签用于定义文档的页眉（介绍信息）

44、。p【例例1-151-15】 使用使用标签的例子。标签的例子。欢迎光临我的网站欢迎光临我的网站我是启明星我是启明星网页的其他部分网页的其他部分. 浏览浏览【例例1-15】的结果的结果 3标签标签 p标签用于定义区段（标签用于定义区段（sectionsection）或文档的）或文档的页脚。通常，该元素包含作者的姓名、文档的创作页脚。通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。日期或者联系方式等信息。p【例例1-161-16】 使用使用标签的例子。标签的例子。欢迎光临我的网站欢迎光临我的网站我是启明星我是启明星网页的其他部分网页的其他部分.本文档创建于本文档创建于2012-10-

45、07浏览浏览【例例1-16】的结果的结果 4标签标签 p 标签用于定义导航链接。标签用于定义导航链接。p【例例1-171-17】 使用使用 标签的例子。标签的例子。欢迎光临我的网站欢迎光临我的网站我是启明星我是启明星首页首页简介简介联系方式联系方式网页的其他部分网页的其他部分.本文档创建于本文档创建于2012-10-07 浏览浏览【例例1-17】的结果的结果 5标签标签 p标签用于定义文章或网页中的主要内标签用于定义文章或网页中的主要内容。容。p【例例1-181-18】 使用使用标签的例子。标签的例子。微软在发布微软在发布Windows Phone 8时曾表示，移时曾表示，移动版动版IE10在

46、在HTML5上比起上比起IE9将会有长足的将会有长足的进步，看来他们并没有吹嘘。根据外站进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测近日对各大浏览器进行的跑分测试，我们可以看到，试，我们可以看到，IE10的成绩是的成绩是IE9的两倍的两倍有余。有余。.6标签标签 p标签用于定义主要内容之外的其他内容。标签用于定义主要内容之外的其他内容。p【例例1-191-19】 使用使用标签的例子。标签的例子。微软在发布微软在发布Windows Phone 8时曾表示，移动时曾表示，移动版版IE10在在HTML5上比起上比起IE9将会有长足的进步，看将会有长足的进步，看来他

47、们并没有吹嘘。根据外站来他们并没有吹嘘。根据外站WPCentral近日对各大近日对各大浏览器进行的跑分测试，我们可以看到，浏览器进行的跑分测试，我们可以看到，IE10的成绩的成绩是是IE9的两倍有余。的两倍有余。HTML5HTML5是最新的是最新的HTML标准。目前标准。目前HTML5的标准草案的标准草案已进入了已进入了W3C制定标准制定标准5大程序的第大程序的第1步。预期要到步。预期要到2022年才会成为年才会成为 W3C 推荐标准。推荐标准。HTML5无疑会成无疑会成为未来为未来10年最热门的互联网技术。年最热门的互联网技术。浏览浏览【例例1-19】的结果的结果 7标签标签 p标签用于定义

48、独立的流内容（图标签用于定义独立的流内容（图像、图表、照片、代码等等）。像、图表、照片、代码等等）。p【例例1-201-20】 使用使用标签的例子。标签的例子。 睡莲睡莲 浏览浏览【例例1-20】的结果的结果 1.3.3 HTML5的新增内联元素的新增内联元素 1 1标签标签 2 2标签标签 3 3标签标签 4 4标签标签 1标签标签 p标签用于定义带有记号的文本。标签用于定义带有记号的文本。p【例例1-211-21】 使使标签的例子。标签的例子。目前目前HTML5的标准草案已进入了的标准草案已进入了W3C制定标准制定标准5大大程序的第程序的第1步。预期要到步。预期要到2022年才会成年才会成

49、为为 W3C 推荐标准。推荐标准。浏览浏览【例例1-21】的结果的结果 2标签标签 p标签用于定义公历的时间（标签用于定义公历的时间（2424小时制）或日期，小时制）或日期，时间和时区。时间和时区。标签的属性如下：标签的属性如下：p datetimedatetime，用于指定日期，用于指定日期 / / 时间。如果不指定此属时间。如果不指定此属性，则元素的内容给定日期性，则元素的内容给定日期 / / 时间。其语法格式如下：时间。其语法格式如下：p pubdatepubdate，用于指定指示，用于指定指示 元素中的日期元素中的日期 / / 时时间是文档（或最近的前辈间是文档（或最近的前辈 元素）的

50、发布日元素）的发布日期。其语法格式如下：期。其语法格式如下：【例例1-22】 p使使标签的例子。标签的例子。2013年春节是年春节是2013-02-102013年年 春节春节p在笔者编写此书时，几乎所有的主流浏览在笔者编写此书时，几乎所有的主流浏览器都不支持器都不支持标签。标签。 3标签标签 标签用于定义度量衡。仅用于已知最大和最小值标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现的度量。浏览器会使用图形方式表现标签。标签。标签的属性说明如下：标签的属性说明如下： highhigh，定义度量的值位于哪个点，被界定为高的值。，定义度量的值位于哪个点，被界定为高的值。 l

51、owlow，定义度量的值位于哪个点，被界定为低的值。，定义度量的值位于哪个点，被界定为低的值。 maxmax，定义最大值。默认值是，定义最大值。默认值是 1 1。 minmin，定义最小值。默认值是，定义最小值。默认值是 0 0。 optimumoptimum，定义什么样的度量值是最佳的值。如果该值，定义什么样的度量值是最佳的值。如果该值高于高于 high high 属性，则意味着值越高越好。如果该值低属性，则意味着值越高越好。如果该值低于于 low low 属性的值，则意味着值越低越好。属性的值，则意味着值越低越好。 value value 定义度量的值。定义度量的值。【例例1-23】 p使

52、使标签的例子。标签的例子。30%浏览浏览【例例1-23】的结果的结果 4标签标签 标签用于定义定义一个进度条。标签用于定义定义一个进度条。它的属性说明如下：它的属性说明如下： maxmax，定义完成的值。，定义完成的值。 valuevalue，定义进度条的的当前值，如果不，定义进度条的的当前值，如果不指定指定valuevalue值，则显示一个动态的进度条。值，则显示一个动态的进度条。【例例1-24】 p使使标签的例子。标签的例子。下载进度：下载进度：85%处理中，请稍候：处理中，请稍候：1.3.4 支持动态页面支持动态页面 1 1菜单菜单 2 2右键菜单右键菜单3 3在在标签中使用标签中使用a

53、syncasync属性属性4 4标签标签 1菜单菜单 p在在HTML5HTML5中，可以使用中，可以使用标签定义菜单，多标签定义菜单，多用于表单中组织控件列表。用于表单中组织控件列表。p 标签的常用属性如表标签的常用属性如表1-31-3所示。所示。 属性说明autosubmit如果为 true，那么当表单控件改变时会自动提交label文档的背景色type定义显示那种类型的菜单。可选值为context、toolbar和list，默认值是 list【例例1-25】 p使使标签定义一个选择列表的例子。标签定义一个选择列表的例子。ASPPHPJSP浏览浏览【例例1-25】的结果的结果 使用使用标签定义

54、菜单项标签定义菜单项 p 标签的常用属性如表标签的常用属性如表1-41-4所示。所示。 属性属性说明说明label菜单项的标题菜单项的标题icon菜单项前面显示的图标菜单项前面显示的图标onclick指定单击此菜单项时执行的指定单击此菜单项时执行的JavaScript代码代码【例例1-26】 p使用使用标签和标签和 标签定义一个右键菜单的例子。标签定义一个右键菜单的例子。 2右键菜单右键菜单 pHTML5HTML5支持在网页中创建和使用自定义的右键菜支持在网页中创建和使用自定义的右键菜单。在网页元素中可以使用单。在网页元素中可以使用contextmenucontextmenu属性指属性指定此元

55、素使用的右键菜单。定此元素使用的右键菜单。p【例例1-271-27】定义一个图片，右击其可以弹出定义一个图片，右击其可以弹出【例例1-261-26】定义的右键菜单定义的右键菜单mymenumymenu。图片的定义。图片的定义代码如下：代码如下：右击右击【例例1-27】中图片弹出的右键菜单中图片弹出的右键菜单 3在在标签中使用标签中使用async属性属性 pasyncasync属性是属性是HTML5HTML5的新属性。的新属性。p在在标签中使用标签中使用asyncasync属性可以指属性可以指定异步执行指定的脚本。也就是在加载网定异步执行指定的脚本。也就是在加载网页的同时执行指定的脚本。页的同时

56、执行指定的脚本。p如果不指定如果不指定asyncasync属性，则需要等到加载属性，则需要等到加载完前面的网页内容，才能开始执行脚本；完前面的网页内容，才能开始执行脚本；执行完脚本才能加载后面的网页内容。执行完脚本才能加载后面的网页内容。【例例1-28】 p演示一个传统的执行演示一个传统的执行JavaScriptJavaScript脚本的例子。脚本的例子。 【例例1-28】的时序图的时序图 【例例1-29】 p使用使用asyncasync属性异步执行属性异步执行JavaScriptJavaScript脚本的例子。脚本的例子。 【例例1-29】的时序图的时序图 4标签标签 p标签用于描述文档或文

57、档某个部分的细节。标签用于描述文档或文档某个部分的细节。p【例例1-301-30】 使用使用标签描述文档细节的例子。标签描述文档细节的例子。数据库文档说明数据库文档说明.本文档用于描述数据库结构本文档用于描述数据库结构.由开发部数据库小组维护。最后修由开发部数据库小组维护。最后修改于改于2012-10-15浏览浏览【例例1-15】的结果的结果 查看查看 标签定义的描述文档标签定义的描述文档 1.3.5 全新的表单设计全新的表单设计 pHTML5HTML5支持支持HTML4HTML4中定义的所有标准输入控中定义的所有标准输入控件，而且新增了下面的新输入控件，从而件，而且新增了下面的新输入控件，从

58、而使使HTML5HTML5实现了全新的表单设计。实现了全新的表单设计。p关于关于HTML5HTML5表单设计的具体情况在后面介表单设计的具体情况在后面介绍。绍。1.3.6 强大的绘图和多媒体功能强大的绘图和多媒体功能 HTML4HTML4几乎没有绘图的功能，通常只能显示已有的图片；几乎没有绘图的功能，通常只能显示已有的图片；而而HTML5HTML5则集成了强大的绘图功能。在则集成了强大的绘图功能。在HTML5HTML5中可以通过中可以通过下面的方法进行绘图：下面的方法进行绘图： 使用使用Canvas APICanvas API动态地绘制各种效果精美的图形；动态地绘制各种效果精美的图形； 绘制可

59、伸缩矢量图形（绘制可伸缩矢量图形（SVGSVG）。）。借助借助HTML5HTML5的绘图功能，既可以美化网页界面，也可以实的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第现专业人士的绘图需求。本书将在第6 6章介绍使用章介绍使用Canvas APICanvas API画图的方法；画图的方法；HTML4HTML4在播放音频和视频时都需要借在播放音频和视频时都需要借flashflash等第等第3 3方插件。方插件。而而HTML5HTML5新增了新增了和和元素，可以不依赖任元素，可以不依赖任何插件地播放音频和视频，以后用户就不需要安装和升何插件地播放音频和视频，以后用户就不需

60、要安装和升级级flashflash插件了，这当然更方便了。插件了，这当然更方便了。1.3.7 打造桌面应用的一系列新功能打造桌面应用的一系列新功能 p在传统的在传统的WebWeb应用程序中，数据存储和数据处理都有服应用程序中，数据存储和数据处理都有服务器端脚本（例如务器端脚本（例如ASPASP、ASP.NETASP.NET和和PHPPHP等）完成，客户等）完成，客户端的端的HTMLHTML语言只负责显示数据，几乎没有处理能力。传语言只负责显示数据，几乎没有处理能力。传统统WebWeb应用程序的工作原理如图应用程序的工作原理如图1-261-26所示。所示。 1Web通信通信 p在在HTML4HT

61、ML4中，出于安全考虑，一般不允许中，出于安全考虑，一般不允许一个浏览器的不同框架、不同标签页、不一个浏览器的不同框架、不同标签页、不同窗口之间的应用程序互相通信，以防止同窗口之间的应用程序互相通信，以防止恶意攻击。如果要实现跨域通信只能通过恶意攻击。如果要实现跨域通信只能通过WebWeb服务器作为中介。服务器作为中介。p但在桌面应用中，经常需要进行跨通信。但在桌面应用中，经常需要进行跨通信。HTML5HTML5提供了这种跨域通信的消息机制。提供了这种跨域通信的消息机制。2本地存储本地存储 pHTML4HTML4的存储能力很弱，只能使用的存储能力很弱，只能使用CookieCookie存储很少量

62、的数据，比如用户名和密码。存储很少量的数据，比如用户名和密码。HTML5HTML5扩充了文件存储的能力，可以存储扩充了文件存储的能力，可以存储多达多达5MB5MB的数据。而且还支持的数据。而且还支持WebSQLWebSQL和和IndexedDBIndexedDB等轻量级数据库，大大增强了等轻量级数据库，大大增强了数据存储和数据检索能力。数据存储和数据检索能力。3离线应用离线应用 p传统传统WebWeb应用程序对应用程序对WebWeb服务器的依赖程度服务器的依赖程度非常高，离开非常高，离开WebWeb服务器几乎什么都做不服务器几乎什么都做不了。而使用了。而使用HTML5HTML5可以开发支持离线

63、的可以开发支持离线的 Web Web 应用程序，在连接不上应用程序，在连接不上WebWeb服务器时，服务器时，可以切换到离线模式；等到可以连接可以切换到离线模式；等到可以连接WebWeb服务器时，再进行数据同步，把离线模式服务器时，再进行数据同步，把离线模式下完成的工作提交到下完成的工作提交到WebWeb服务器。具体情服务器。具体情况将在第况将在第1111章中介绍。章中介绍。1.3.8 获取地理位置信息获取地理位置信息 p越来越多的越来越多的WebWeb应用需要获取地理位置信应用需要获取地理位置信息，例如在显示地图时标注自己的当前位息，例如在显示地图时标注自己的当前位置。在置。在HTML4HT

64、ML4中，获取用户的地理位置信中，获取用户的地理位置信息需要借助第息需要借助第3 3方地址数据库或专业的开方地址数据库或专业的开发包（例如，发包（例如，Google Gears APIGoogle Gears API）。）。HTML5HTML5新增了新增了GeolocationGeolocation API API规范，可以规范，可以通过浏览器获取用户的地理位置，这无疑通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了很大的方便。给有相关需求的用户提供了很大的方便。1.3.9 支持多线程支持多线程 p提到多线程，大多数人夺回想到提到多线程，大多数人夺回想到Visual Visual

65、C+C+、Visual C#Visual C#和和JavaJava等高级语言。传统等高级语言。传统的的WebWeb应用程序都是单线程的，完成一件应用程序都是单线程的，完成一件事后才能做其他事情，因此效率不高。事后才能做其他事情，因此效率不高。HTML5HTML5新增了新增了Web WorkersWeb Workers对象，使用对象，使用Web Web WorkersWorkers对象可以后台运行对象可以后台运行JavaScriptJavaScript程程序，也就是支持多线程，从而提高了加载序，也就是支持多线程，从而提高了加载网页的效率。网页的效率。1.3.10 废弃的标签废弃的标签1 1表现性

66、元素表现性元素2 2框架类元素框架类元素 3 3属性类属性类 4 4其他类元素其他类元素 1表现性元素表现性元素 废弃的标签废弃的标签说明说明basefont定义文档中所有文本的默认颜色、大小和字体定义文档中所有文本的默认颜色、大小和字体big制作更大的文本制作更大的文本center对其包围的文本和内容进行水平居中处理对其包围的文本和内容进行水平居中处理font规定文本的字体、大小和颜色规定文本的字体、大小和颜色s定义加删除线的文本定义加删除线的文本strike定义加删除线的文本定义加删除线的文本tt定义打字机文本定义打字机文本u定义下划线文本定义下划线文本2框架类元素框架类元素 废弃的标签废

67、弃的标签说明说明frame定义框架集中的子窗口（框架）定义框架集中的子窗口（框架）frameset定义框架集，用于组织多个窗口（框架）定义框架集，用于组织多个窗口（框架）noframes向浏览器显示无法处理框架的提示文本向浏览器显示无法处理框架的提示文本3属性类属性类 废弃的标签废弃的标签说明说明align对齐属性。它的值可以是对齐属性。它的值可以是left、center、rightbody标签上的标签上的link、vlink、alink、text属性属性用定义链接和文本的颜色用定义链接和文本的颜色body标签上的标签上的bgcolor属性属性定义文档的背景色定义文档的背景色body标签上的标

68、签上的height和和width属性属性定义文档的高度和宽度定义文档的高度和宽度iframe元素上的元素上的scrolling属性属性设置或获取框架是否可被滚动设置或获取框架是否可被滚动valign定义垂直对齐方式定义垂直对齐方式hspace和和vspace设置元素周围的空间设置元素周围的空间table标签上的标签上的cellpadding、cellspacing和和border属性属性定义表格单元之间的空间和边框定义表格单元之间的空间和边框header标签上的标签上的profile属性属性指定符合数据的轮廓描述的位置指定符合数据的轮廓描述的位置链接标签链接标签a上的上的target属性属性指

69、定在何处打开目标指定在何处打开目标 URLimg和和iframe元素的元素的longdesc属性属性指定长的描述内容指定长的描述内容4其他类元素其他类元素 废弃的标签废弃的标签说明说明acronym定义首字母缩略词，可以使用定义首字母缩略词，可以使用abbr取代取代acronymapplet定义嵌入的定义嵌入的 applet，可以使用，可以使用object取代了取代了appletdir定义目录列表，可以使用定义目录列表，可以使用ul取代了取代了dir1.4 支持支持HTML5的浏览器的浏览器 p目前绝大多数主流浏览器都支持目前绝大多数主流浏览器都支持HTML5HTML5，只是支持的，只是支持的

70、程度不同。访问下面的网址就可以测试当前浏览器程度不同。访问下面的网址就可以测试当前浏览器对对HTML5HTML5的支持程度，例如使用的支持程度，例如使用Chrome 23.0Chrome 23.0进行测进行测试得分为试得分为448448（满分为（满分为500500），如图），如图1-271-27所示。所示。http:/ 浏览器浏览器版本版本得分得分Chrome23.0.1271.64448Opera Next12.10404Firefox16.0357Internet Explorer10.0320苹果浏览器苹果浏览器 Safari for Windows5.1.7278Internet Ex

71、plorer9.0138国内厂商的主流浏览器对国内厂商的主流浏览器对HTML5支持程度的支持程度的测试结果测试结果 浏览器浏览器版本版本得分得分360极速浏览器极速浏览器6.0.0.216（测试时显示为（测试时显示为Chrome 21）465QQ浏览器浏览器6.14424搜狗高速浏览器搜狗高速浏览器4.0.2.5906418猎豹浏览器猎豹浏览器1.5.9.2888（测试时显示为（测试时显示为Chrome 17）393360安全浏览器安全浏览器5.0（测试时显示为（测试时显示为Internet Explorer 9.0）137傲游浏览器傲游浏览器2.5.18.1000（测试时显示为（测试时显示为Internet Explorer 9.0）137百度浏览器百度浏览器2.6137