HTML5
主讲：邓舒婷 QQ：1979995109 电话：13878874836
教学方式： 考核： 违纪惩罚： 1.3次旷课取消考试资格 2.每次旷课平时成绩扣十分 1.讲授（主要是理论方面） 2.实践演示 3.项目指导（3次大作业） 考核： 平时成绩（平时考勤60+作业40）40%+期末作品成绩60% 违纪惩罚： 1.3次旷课取消考试资格 2.每次旷课平时成绩扣十分
学习内容 HTML基础 什么是HTML？ HTML的历史 ？ HTML4基础 HTML5的新特性
HTML基础：什么是HTML HTML是HyperText Markup Language（即超文本标记语言）的缩写，它是通过嵌入代码或标记来表明文本格式的国际标准。用它编写的文件扩展名是.html或.htm，这种网页文件的内容通常是静态的。 HTML语言中包含很多HTML标记，它们可以被Web浏览器解释，从而决定网页的结构和显示的内容。这些标记通常成对出现，例如<HTML>和</HTML>就是常用的标记对，语法格式如下： <标记名> 数据 </标记名>
HTML结构标记 <HTML> <HEAD> <TITLE> HTML文件标题.</TITLE> </HEAD> <BODY> </BODY> </HTML>
HTML基础： HTML的历史 1990年，欧洲原子物理研究所的英国科学家Tim Berners-Lee发明了WWW（World Wide Web）。通过Web，用户可以在一个网页里比较直观的表示出互联网上的资源。因此，Tim Berners-Lee被称为互联网之父。 最早的关于HTML的公开描述是由Tim Berners-Lee于1991年发表一篇叫做《HTML标签》的文章，其中描述了18个元素，这就是关于HTML的最简单的设计。其中的11个元素还保留在HTML4中。
HTML基础： HTML的历史 1993年，Internet工程任务组（Internet Engineering Task Force，IETF）发布了第1部HTML规范建议。1994年，IETF成立了HTML工作组，该工作组于1995年完成了HT ML 2.0设计，并于同年发布了HTML 3.0，对HTML 2.0进行了扩展。 HTML 4.01发布于1999年，直至将现在仍然有大量的网页是基于HTML 4.01的，它的应用周期超过10年，因此是到目前为止，影响最广泛的HTML版本。
HTML基础： HTML的历史 2004年，超文本应用技术工作组（Web Hypertext Application Technology Working Group，WHATWG）开始研发HTML5。2007年，万维网联盟（World Wide Web Consortium，W3C）接受了HTML5草案，并成立了专门的工作团队。并于2008年1月发布了第1个HTML5的正式草案。 2010年，时任苹果公司CEO的乔布斯发表了一篇名为《对flash的思考》的文章，指出随着HTML5的完善和推广，以后再观看视频等多媒体时就不再依靠flash插件了。这引起了主流媒体对HTML5的兴趣。 目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。
HTML4基础 设置网页背景和颜色 设置字体属性 超级链接 图像和动画 表格 使用框架 其他常用标签
1.2.1 设置网页背景和颜色 可以在<BODY>标签中通过background属性设置网页的背景图片，例如： 1.2.1 设置网页背景和颜色 可以在<BODY>标签中通过background属性设置网页的背景图片，例如： <BODY background="Greenstone.bmp"> 可以在<BODY>标签中通过backcolor属性设置网页的背景图片，例如： <BODY bgcolor="#00FFFF">
<BODY>标签中的常用属性 说明 BACKGROUND 文档的背景图像 BGCOLOR 文档的背景色 TEXT 文档中文本的颜色 LINK 文档中链接的颜色 VLINK 文档中已被访问过的链接的颜色 ALINK 文档中正被选中的链接的颜色
1.2.2 设置字体属性 face属性用于设置字体类型，size属性用于设置字体大小。也可以使用color属性设置字体的颜色。 1.2.2 设置字体属性 可以使用<font>…</font>标签对网页中的文字设置字体属性，包括选择字体和设置字体大小等，例如： <font face="黑体" size="4">设置字体.</font> face属性用于设置字体类型，size属性用于设置字体大小。也可以使用color属性设置字体的颜色。
【例1-2】 使用<b>…</b>定义加粗字体，使用<i>…</i>定义倾斜字体，使用<u>…</u>定义下划线字体。这些标签可以混合使用，定义同时具有多种属性的字体。 定义加粗、倾斜和下划线字体，代码如下： <p><b>加粗</b> <i>倾斜</i> <u>下划线</u></p>
浏览【例1-2】的结果
【例1-3】 可以单独定义<p>和</p>之间元素的属性。比较常用的属性是aligh＝#，#可以是left、center或right。Left表示文字居左，center表示文字居中，right表示文字居右。 将【例1-2】定义的文字居中显示，代码如下： <p align="center"><b>加粗</b> <i>倾斜</i> <u>下划线</u></p>
【例1-4】 下面的代码可以定义H1、H2……H6标题的文字。 <h1>这是标题 1</h1>
浏览【例1-4】的结果
1.2.3 超级链接 在超级链接中必须明确指定转向文档的位置和文件名。可以使用URL（统一资源定位器，Uniform Resource Locator）指定文档的具体位置，它的构成如下： protocol:// machine.name[:port]／directory／filename 其中protocol是访问该资源所采用的协议，即访问该资源的方法，主要的协议包括： HTTP，超文本传输协议，该资源是HTML文件。 File，用于访问本地计算机上的文件资源。 FTP，文件传输协议。 News，表明该资源是网络新闻。
一个典型的URL 下面是一个典型的URL： http://www.php.net/downlaod.php 通常网站都会指定默认的文档，所以直接输入http://www.php.net就可以访问到PHP网站的首页文档。 下面是一个定义超级链接的例子： <a href="http://www.php.net">PHP网站</a>
target属性 在<a>和</a>标签之间定义超级链接的显示文本，href属性定义要转向的网址或文档。 在超级链接的定义代码中，除了指定转向文档外，还可以使用target属性来设置单击超级链接时打开网页的目标框架。可以选择_blank（新建窗口）、_parent（父框架）、_self（相同框架）和_top（整页）等目标框架。比较常用的目标框架为_blank（新建窗口）。
【例1-5】 定义一个新的超级链接，显示文本为“在新窗口中打开PHP网站”，代码如下： <a target="_blank" href="http://www.php.net">在新窗口中打开PHP网站</a>
电子邮件超级链接的定义 在HTML语言中，电子邮件超级链接的定义代码如下： <a href="mailto:johney2008@sina.com">我的邮箱</a>
命名锚记（书签） 超级链接还可以定义在本网页内跳转，从而实现类似目录的功能。比较常见的应用包括在网页底部定义一个超级链接，用于返回网页顶端。首先需要在跳转到的位置定义一个标识（锚），在DreamWeaver中这种定义位置的标识被称为命名锚记（在FrontPage中被称为书签）。 例如，可以在网页的顶部定义锚top，代码如下： <a name="top" id="top"></a> 在<a>标记中增加了一个name属性，表示这是一个名字为top的锚。
转向同一文档中有锚的地方 创建锚是为了在HTML文档中创建一些链接，通过这些链接可以方便地转向同一文档中有锚的地方，代码如下： <A HREF="url#name">转到锚name</A> 如果HREF属性的值是指定一个锚，则必须在锚名前面加一个“#”符号。例如，在网页的尾部添加如下代码： <a href="#top">返回顶部</a>
1.2.4 图像和动画 HTML语言中使用<img>标签来处理图像，例如： <img src="pic.gif"> 1.2.4 图像和动画 HTML语言中使用<img>标签来处理图像，例如： <img src="pic.gif"> src属性用于指定图像文件的文件名，包括文件所在的路径。这个路径既可以是相对路径，也可以是绝对路径。
<img>标记还有如下的属性 alt：当鼠标光标移动到图像上时显示的文本。 align：图像的对齐方式，包括top（顶端对齐）、bottom （底部对齐）、middle（居中对齐）、left（左侧对齐）和right（右侧对齐）。 border：图像的边框宽度。 width 图像的宽度。 height 图像的高度。 hspace 定义图像左侧和右侧的空白。 vspace 定义图像顶部和底部的空白。
使用<img>标记来处理动画 例如，在网页中插入一个多媒体文件clock.avi，代码如下： <img border="0" dynsrc="clock.avi" start="fileopen" width="321" height="321"> dynsrc属性用于指定动画文件的文件名，包括文件所在的路径。start属性用于指定动画开始播放的时间，fileopen表示网页打开时即播放动画。
1.2.5 表格 在HTML语言中表格由<table>…</table>标签对定义 1.2.5 表格 在HTML语言中表格由<table>…</table>标签对定义 表格内容由<tr>…</tr>和<td>…</td>标记对定义。<tr>…</tr>定义表格中的一行，<td>…</td>通常出现在<tr>…</tr>之间，用于定义一个单元格
【例1-6】 定义一个3行3列的表格，代码如下： <table width="200" border="1"> <tr> <td> </td> </tr> <td> </td>图1-3 浏览【例1-6】的结果 </table>
浏览【例1-6】的结果
1．通栏 被合并的单元格会跨越多个单元格，这种合并的单元格被称为通栏。通栏可以分为横向通栏和纵向通栏两种，<td colspan=#>用于定义横向通栏，<tr rowspan=#>用于定义纵向通栏。#表示通栏占据的单元格数量。
2．表格大小和边框宽度 在<table>标记中表格的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以像素为单位的整数，也可以是百分比。在【例1-5】中，可以看到width属性的使用。 边框宽度由border=#属性定义，#为宽度值，单位是像素。例如，下面的HTML代码定义了一个边框宽度为4的表格。 <table border="4" width="100%" id="table1"> …… </table>
3．背景颜色 在HTML语言中，可以使用bgcolor属性设置单元格的背景颜色，格式为bgcolor=#。#是16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量，或者是16种已定义好的颜色名称。
【例1-7】 下面的HTML代码定义表格的背景颜色为C0C0C0（灰色）。 <table border="1" width="100%" id="table1"> <tr> <td colspan="2" bgcolor="#C0C0C0"> <p align="center">表格</td> </tr> <td bgcolor="#C0C0C0"> <p align="center">域名</td> <p align="center">说明</td> …… </table>
浏览【例1-7】的结果
1.2.6 使用框架 框架（Frame）可以将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文件，各个区域也可以相关联地显示某一个内容。例如，可以将索引放在一个区域，文件内容显示在另一个区域。框架通常的使用方法是在一个框架中放置可供选择的链接目录，而将HTML文件显示在另一个框架中。
定义框架的基本代码 <html> <head> <title>...</title> </head> <noframes>...</noframes> <frameset> <frame src="url"> …… </frameset> </html>
1．<noframe>标签 <noframe>元素中包含了框架不能被显示时的替换内容。
2．<frameset>标签 <frameset>元素是一个框架容器，它将窗口分成长方形的子区域，即框架。在一个框架设置文档中，<frameset>取代了<body>位置，紧接<head>之后。 <frameset>的基本属性包括rows和cols，它们定义了框架设置元素中的每个框架的尺寸大小。rows值从上到下给出了每行的高；cols值从左到右给出了每列的宽。 框架是可以嵌套的，也就是说可以在<frameset>中还可以包含一个或多个<frameset>标签。
3．<frame>标签 <frameset>标签包含多个<frame>标签。每个<frame>元素定义一个子窗口。<frame>标签的属性说明如下： name 框架名称。 src 框架内容URL。 longdesc 框架的长篇描述。 frameborder 框架边框。 marginwidth 边距宽度。 marginheight 边距高度。 noresize 禁止用户调整框架尺寸。 scrolling 规定了行内框架中是否需要滚动条。
【例1-8】 定义框架的例子。 首先创建3个HTML文件，a.html、b.html和c.html。a.html的代码如下： <a href="b.html" target="main">b.html</a> <br> <a href="c.html" target="main">c.html</a> 单击超链接，将在main框架中打开对应的网页。b.html的代码如下： <h1> b.html</h1> c.html的代码如下： <h1> c.html</h1>
定义框架的网页代码 <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> <title>定义框架的例子</title> </head> <frameset framespacing="1" border="1" bordercolor= #333399 frameborder="yes"> <frameset cols="150,*"> <frame name="left" target="main" src="a.html" scrolling="auto" frameborder=1> <frame name="main" src="b.html" scrolling="auto" noresize frameborder=1> </frameset> <noframes> <body> <p>此网页使用了框架，但您的浏览器不支持框架。</p> </body> </noframes> </html>
浏览【例1-8】的结果
单击c.html超链接的网页界面
1.2.7其他常用标签 1．<div> 2．<br>标签 3．<pre>标签 4．<li>标签 5．<span>
1．<div> <div> 标签可以定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分。在HTML4中，<div> 标签对涉及网页布局很重要。 【例1-9】 使用<div> 标签定义3个分区，背景色分别为红、绿、蓝，代码如下： <div style="background-color:#FF0000"> <h3>标题1</h3> <p>正文1</p> </div> <div style="background-color:#00FF00"> <h3>标题2</h3> <p>正文2</p> <div style="background-color:#0000FF"> <h3>标题3</h3> <p>正文3</p>
浏览【例1-9】的结果
2．<br>标签 <br>标签是HTML中的换行符。在 XHTML 中，把结束标签放在开始标签中，即<br/>。 【例1-10】 使用<br>标签的例子. 第一段<br>第二段<br>第三段
浏览【例1-10】的结果
3．<pre>标签 <pre> <html> <body> <div style="background-color:#FF0000"> <h3>标题1</h3> <p>正文1</p> </div> <div style="background-color:#00FF00"> <h3>标题2</h3> <p>正文2</p> <div style="background-color:#0000FF"> <h3>标题3</h3> <p>正文3</p> </body> </html>
浏览【例1-11】的结果
【例1-12】 演示<li>标签的使用方法。 <ol> <li>北京</li> <ul> </ul>
浏览【例1-12】的结果
5．<span> <span >标签可以用来组合文档中的行内元素。它可以在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。 <span>本身没有任何属性，如果不对span应用样式，那么span元素中的文本与其他文本不会任何视觉上的差异。因此，这里不介绍<span >标签的使用实例，在本书后面的很多例子中会使用到<span >标签。
HTML5的新特性 简化的文档类型和字符集 HTML5的新结构 HTML5的新增内联元素 支持动态页面 全新的表单设计 强大的绘图和多媒体功能 打造桌面应用的一系列新功能 获取地理位置信息 支持多线程 废弃的标签
1.3.1 简化的文档类型和字符集 <!DOCTYPE> 声明位于HTML文档中的最前面的位置，它位于 <html> 标签之前。该标签告知浏览器文档所使用的HTML或 XHTML规范。 在HTML4中，<!DOCTYPE>标签可以声明三种 DTD 类型，分别表示严格版本（Strict）、过渡版本（Transitional）和基于框架（Frameset）的 HTML 文档。
【例1-13】 使用<!DOCTYPE>标签的例子。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1．HTML4严格版本（Strict）DTD 如果需要干净的标记，避免表现层的混乱，可以使用此类型。通常与层叠样式表（CSS）配合使用。【例1-9】中定义的<!DOCTYPE>标签就是严格版本的DTD。
2．HTML4过渡版本（Transitional）DTD 过渡版本DTD可以包含 W3C所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表（CSS）的浏览器，那么HTML文档就不得不使用 XHTML 的呈现特性了，此时请使用过渡版本DTD。定义过渡版本DTD的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3．HTML4基于框架（Frameset）DTD 如果希望在网页中使用框架，请使用过渡基于框架DTD。定义过渡基于框架DTD的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4．HTML5的<!DOCTYPE>标签 对于初学者而言，前面的内容也许有些复杂，不好理解。不过，好在HTML5对<!DOCTYPE>标签进行了简化，只支持HTML一种文档类型。定义代码如下： <!DOCTYPE HTML> 之所以这么简单，是因为HTML5不再是SGML（Standard Generalized Markup Language，标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源）的一部分，而是独立的标记语言。这样做设计HTML文档时就不需要考虑文档类型了。
5．HTML5的字符集 如果要正确地显示HTML页面，浏览器必须知道使用何种字符集。HTML4的字符集包括ASCII、ISO-8859-1、Unicode等很多类型。 HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下： <meta charset="UTF-8">
1.3.2 HTML5的新结构 HTML5的设计者们认为网页应该像XML文档和图书一样有结构。通常，网页中有导航、网页体内容、工具栏、页眉和页脚等结构。HTML5中增加了一些新的标记以实现这些网页结构，这些新标记及其定义的网页布局
1．<section>标签 <section> 标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。 <h1> HTML5</h1> <p> HTML5是最新的HTML标准...</p> </section>
2．<header>标签 <header>标签用于定义文档的页眉（介绍信息）。 <h1>欢迎光临我的网站</h1> <p>我是启明星</p> </header> <p>网页的其他部分...</p>
浏览【例1-15】的结果
3．<footer>标签 <footer>标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。 【例1-16】 使用<footer>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是启明星</p> </header> <p>网页的其他部分...</p> <footer>本文档创建于2012-10-07</footer>
浏览【例1-16】的结果
4．<nav>标签 <nav>标签用于定义导航链接。 【例1-17】 使用<nav>标签的例子。 <header> <h1>欢迎光临我的网站</h1> <p>我是启明星</p> </header> <nav> <a href="index.asp">首页</a> <a href="intro.asp">简介</a> <a href="contact.asp">联系方式</a> </nav> <p>网页的其他部分...</p> <footer>本文档创建于2012-10-07</footer>
浏览【例1-17】的结果
5．<article>标签 <article>标签用于定义文章或网页中的主要内容。 微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。...... </article>
6．<aside>标签 <aside>标签用于定义主要内容之外的其他内容。 <p>微软在发布Windows Phone 8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。</p> <aside> <h4>HTML5</h4> HTML5是最新的HTML标准。目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。 </aside>
浏览【例1-19】的结果
7．<figure>标签 <figure>标签用于定义独立的流内容（图像、图表、照片、代码等等）。 <p>睡莲</p> <img src="Water lilies.jpg" width="350" height="234" /> </figure>
浏览【例1-20】的结果
1.3.3 HTML5的新增内联元素 1．<mark>标签 2．<time>标签 3．<meter>标签 4．<progress>标签
1．<mark>标签 <mark>标签用于定义带有记号的文本。 <p>目前<mark>HTML5</mark>的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为 W3C 推荐标准。</p>
浏览【例1-21】的结果
2．<time>标签 <time>标签用于定义公历的时间（24小时制）或日期，时间和时区。<time>标签的属性如下： datetime，用于指定日期 / 时间。如果不指定此属性，则元素的内容给定日期 / 时间。其语法格式如下： <time datetime="YYYY-MM-DDThh:mm:ssTZD"> pubdate，用于指定指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期。其语法格式如下： <time pubdate="pubdate">
【例1-22】 使<time>标签的例子。 在笔者编写此书时，几乎所有的主流浏览器都不支持<time>标签。 <p>2013年春节是<time>2013-02-10</time></p> <p>2013年 <time datetime="2013-02-10">春节</time></p> <p><time pubdate="pubdate"></time></p> 在笔者编写此书时，几乎所有的主流浏览器都不支持<time>标签。
3．<meter>标签 <meter>标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现< meter >标签。< meter >标签的属性说明如下： high，定义度量的值位于哪个点，被界定为高的值。 low，定义度量的值位于哪个点，被界定为低的值。 max，定义最大值。默认值是 1。 min，定义最小值。默认值是 0。 optimum，定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。 value 定义度量的值。
【例1-23】 使<meter>标签的例子。 <meter min="0" max="20" value="5"></meter> <meter value="0.1"></meter> <meter value="0.3" optimum="1" high="0.9" low="0.1" max="1" min="0"></meter><span>30%</span> <meter min="0" max="100" value="80"></meter> <meter min="0" max="100" value="100"></meter>
浏览【例1-23】的结果
4．<progress>标签 <progress>标签用于定义定义一个进度条。它的属性说明如下： max，定义完成的值。 value，定义进度条的的当前值，如果不指定value值，则显示一个动态的进度条。
【例1-24】 使<progress>标签的例子。 下载进度： <progress value="85" max="100"></progress> <span id="objprogress">85</span>% <br> 处理中，请稍候： <progress></progress>
1.3.4 支持动态页面 1．菜单 2．右键菜单 3．在<script>标签中使用async属性 1.3.4 支持动态页面 1．菜单 2．右键菜单 3．在<script>标签中使用async属性 4．<details>标签
1．菜单 在HTML5中，可以使用<menu>标签定义菜单，多用于表单中组织控件列表。 属性 说明 autosubmit 如果为 true，那么当表单控件改变时会自动提交 label 文档的背景色 type 定义显示那种类型的菜单。可选值为"context"、"toolbar"和"list"，默认值是 "list"
【例1-25】 使< menu >标签定义一个选择列表的例子。 <menu> <li><input type="checkbox" />ASP</li> <li><input type="checkbox" />PHP</li> <li><input type="checkbox" />JSP</li> </menu>
浏览【例1-25】的结果
使用<menuitem>标签定义菜单项 属性 说明 label 菜单项的标题 icon 菜单项前面显示的图标 onclick 指定单击此菜单项时执行的JavaScript代码
【例1-26】 使用<menu>标签和<menuitem>标签定义一个右键菜单的例子。 <menu type="context" id="mymenu"> <menuitem label="刷新" onclick="window.location.reload();" icon="refresh.ico"></menuitem> <menu label="演示子菜单..."> <menuitem label="子菜单1" onclick="alert('子菜单1');"></menuitem> <menuitem label="子菜单2" onclick="alert('子菜单2');"></menuitem> </menu>
2．右键菜单 HTML5支持在网页中创建和使用自定义的右键菜单。在网页元素中可以使用contextmenu属性指定此元素使用的右键菜单。 【例1-27】定义一个图片，右击其可以弹出【例1-26】定义的右键菜单mymenu。图片的定义代码如下： <img src="Water lilies.jpg" draggable="true" contextmenu="mymenu"/>
右击【例1-27】中图片弹出的右键菜单
3．在<script>标签中使用async属性 async属性是HTML5的新属性。在<script>标签中使用async属性可以指定异步执行指定的脚本。也就是在加载网页的同时执行指定的脚本。如果不指定async属性，则需要等到加载完前面的网页内容，才能开始执行脚本；执行完脚本才能加载后面的网页内容。
【例1-28】 演示一个传统的执行JavaScript脚本的例子。 <!DOCTYPE html> <html> <body> <!-- HTML文件的A部分内容 --> <script type="text/javascript" src="demo.js"></script> <!-- HTML文件的B部分内容 --> </body> </html>
【例1-28】的时序图
【例1-29】 使用async属性异步执行JavaScript脚本的例子。 <!DOCTYPE html> <body> <!-- HTML文件的A部分内容 --> <script type="text/javascript" src="demo_async.js" async="async"></script> <!-- HTML文件的B部分内容 --> </body> </html>
【例1-29】的时序图
4．<details>标签 <details>标签用于描述文档或文档某个部分的细节。 <!DOCTYPE HTML> <html> <body> <details> <summary>数据库文档说明.</summary> <p>本文档用于描述数据库结构.由开发部数据库小组维护。最后修改于2012-10-15</p> </details> </body> </html>
浏览【例1-15】的结果
查看<details> 标签定义的描述文档
1.3.5 全新的表单设计 HTML5支持HTML4中定义的所有标准输入控件，而且新增了下面的新输入控件，从而使HTML5实现了全新的表单设计。关于HTML5表单设计的具体情况将在第3章中介绍。
1.3.6 强大的绘图和多媒体功能 HTML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图： 使用Canvas API动态地绘制各种效果精美的图形； 绘制可伸缩矢量图形（SVG）。 借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第6章介绍使用Canvas API画图的方法；并在第7章介绍绘制可伸缩矢量图形（SVG）的方法。 HTML4在播放音频和视频时都需要借flash等第3方插件。而HTML5新增了<audio>和<video>元素，可以不依赖任何插件地播放音频和视频，以后用户就不需要安装和升级flash插件了，这当然更方便了。本书将在第8章介绍播放音频和视频大方法。
1.3.7 打造桌面应用的一系列新功能 在传统的Web应用程序中，数据存储和数据处理都有服务器端脚本（例如ASP、ASP.NET和PHP等）完成，客户端的HTML语言只负责显示数据，几乎没有处理能力。传统Web应用程序的工作原理如图1-26所示。
1．Web通信 在HTML4中，出于安全考虑，一般不允许一个浏览器的不同框架、不同标签页、不同窗口之间的应用程序互相通信，以防止恶意攻击。如果要实现跨域通信只能通过Web服务器作为中介。但在桌面应用中，经常需要进行跨通信。HTML5提供了这种跨域通信的消息机制。具体情况将在第9章中介绍。
2．本地存储 HTML4的存储能力很弱，只能使用Cookie存储很少量的数据，比如用户名和密码。HTML5扩充了文件存储的能力，可以存储多达5MB的数据。而且还支持WebSQL和IndexedDB等轻量级数据库，大大增强了数据存储和数据检索能力。具体情况将在第10章中介绍。
3．离线应用 传统Web应用程序对Web服务器的依赖程度非常高，离开Web服务器几乎什么都做不了。而使用HTML5可以开发支持离线的 Web 应用程序，在连接不上Web服务器时，可以切换到离线模式；等到可以连接Web服务器时，再进行数据同步，把离线模式下完成的工作提交到Web服务器。具体情况将在第11章中介绍。
1.3.8 获取地理位置信息 越来越多的Web应用需要获取地理位置信息，例如在显示地图时标注自己的当前位置。在HTML4中，获取用户的地理位置信息需要借助第3方地址数据库或专业的开发包（例如，Google Gears API）。HTML5新增了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了很大的方便。具体情况将在第12章中介绍。
1.3.9 支持多线程 提到多线程，大多数人夺回想到Visual C++、Visual C#和Java等高级语言。传统的Web应用程序都是单线程的，完成一件事后才能做其他事情，因此效率不高。HTML5新增了Web Workers对象，使用Web Workers对象可以后台运行JavaScript程序，也就是支持多线程，从而提高了加载网页的效率。具体情况将在第13章中介绍。
1.3.10 废弃的标签 1．表现性元素 2．框架类元素 3．属性类 4．其他类元素
1．表现性元素 废弃的标签 说明 basefont 定义文档中所有文本的默认颜色、大小和字体 big 制作更大的文本 center 对其包围的文本和内容进行水平居中处理 font 规定文本的字体、大小和颜色 s 定义加删除线的文本 strike tt 定义打字机文本 u 定义下划线文本
2．框架类元素 废弃的标签 说明 frame 定义框架集中的子窗口（框架） frameset 定义框架集，用于组织多个窗口（框架） noframes 向浏览器显示无法处理框架的提示文本
3．属性类 废弃的标签 说明 align 对齐属性。它的值可以是left、center、right body标签上的link、vlink、alink、text属性 用定义链接和文本的颜色 body标签上的bgcolor属性 定义文档的背景色 body标签上的height和width属性 定义文档的高度和宽度 iframe元素上的scrolling属性 设置或获取框架是否可被滚动 valign 定义垂直对齐方式 hspace和vspace 设置元素周围的空间 table标签上的cellpadding、cellspacing和border属性 定义表格单元之间的空间和边框 header标签上的profile属性 指定符合数据的轮廓描述的位置 链接标签a上的target属性 指定在何处打开目标 URL img和iframe元素的longdesc属性 指定长的描述内容
4．其他类元素 废弃的标签 说明 acronym 定义首字母缩略词，可以使用abbr取代acronym applet 定义嵌入的 applet，可以使用object取代了applet dir 定义目录列表，可以使用ul取代了dir
1.4 支持HTML5的浏览器 目前绝大多数主流浏览器都支持HTML5，只是支持的程度不同。访问下面的网址就可以测试当前浏览器对HTML5的支持程度，例如使用Chrome 23.0进行测试得分为448（满分为500），如图1-27所示。 http://html5test.com/
国外厂商的主流浏览器对HTML5支持程度的测试结果 版本 得分 Chrome 23.0.1271.64 448 Opera Next 12.10 404 Firefox 16.0 357 Internet Explorer 10.0 320 苹果浏览器 Safari for Windows 5.1.7 278 9.0 138
国内厂商的主流浏览器对HTML5支持程度的测试结果 版本 得分 360极速浏览器 6.0.0.216（测试时显示为Chrome 21） 465 QQ浏览器 6.14 424 搜狗高速浏览器 4.0.2.5906 418 猎豹浏览器 1.5.9.2888（测试时显示为Chrome 17） 393 360安全浏览器 5.0（测试时显示为Internet Explorer 9.0） 137 傲游浏览器 2.5.18.1000（测试时显示为Internet Explorer 9.0） 百度浏览器 2.6