1.3 初识HTML5
如果想要掌握WebGL，那么开发人员还需要了解一些关于HTML的内容。HTML是WebGL的基础，因为WebGL是在网页里展示的，所以其必然是基于HTML开发的。在正式讲述WebGL之前先来给大家介绍一下HTML的基本内容。
HTML是一种标记语言，其标记以应用文档内容（例如文本）的元素为存在形式，现在HTML的标准为HTML5。下面在介绍各种HTML5的标签时我们会按照其作用进行划分，读者阅读时会更有条理性。在讲解一些比较重要的标签时都会有相应的小案例供大家参考。
1.3.1 HTML5标签简介
HTML5中的一大主要变化是基本理念方面的：将元素对其内容呈现结果的影响和其语义分开。从原理上讲这的确合乎情理，HTML元素负责文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式来控制。
元素由三部分组成，其中有两部分是开始标签和结束标签，夹在两个标签之间的是元素内容，两个标签与它们之间的内容构成了一个元素。从本节开始介绍各个标签的作用，并结合案例来介绍用法与注意事项。
1.3.2 基础标签
在介绍标签时，我们知道标签由开始标签与结束标签组成。例如<html>为开始标签，</html>为结束标签。在标签之间写的是需要发挥的部分（即元素的内容部分），开始标签中有时会有一些属性，这些属性声明了标签的个体属性。下面如果有特别需要注意的局部属性，我们都会标注出来。
与局部属性相对应的就是全局属性，这部分内容在下面小节中会有详细介绍，每段都会有详细的代码与注释以供读者参考。接下来先来看标签中的基础标签都有哪些，在表1-2～表1-10中列出了这些标签及其作用，以及一些标签中的局部属性。
表1-2 基础标签及其作用
表1-2所示为基础标签的描述，接下来我们将这些标签全部应用到一个案例中，这个案例仅为展示这些标签的基本应用，其中还有一些标签会有其特有的属性，在这里并没有具体列出来，这些属性的应用相当简单，读者可以自行查阅资料更改这些代码进行验证。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_1.html。
1 <! DOCTYPE html>
2 <html><head><title>这里为标题， Sample1_1案例</title></head>
3 <body>
4 此处为主体部分
5 <h1>这里为文本标题1</h1>
6 <h2>这里为文本标题2</h2>
7 <h3>这里为文本标题3</h3>
8 <h4>这里为文本标题4</h4>
9 <h5>这里为文本标题5</h5>
10 <h6>这里为文本标题6</h6>
11 <p>这里为段落，本例主要向读者展示先前介绍的标签用法，这些标签为基本标签
12 <hr></br>这里演示在段落中的换行<hr></br>是接着上面的段落。</p><! --此处为html文档注释
13 本案例介绍了基础标签的一些内容-->
14 此处主体结束
15 </body></html>
❑ 第1～2行给出了浏览器关于页面使用哪个HTML版本进行编写的指令，并声明了标题。其中<! DOCTYPE html>声明必须位于html文档的第1行。
❑ 第5～10行为文本标题示例，类似文档中的分级标题，看下面的效果图理解会更加深刻。
❑ 第3～15行为html文档的主体部分，其中向大家展示了标题<h1>～<h6>、段落标签<p>、换行标签与下划线标签<br>和<hr>的基本用法。
下面来看一下案例效果，本案例以及本书中的案例都是在Google Chrome浏览器或者Firefox浏览器上运行的，读者也可以自行选择合适的浏览器运行案例，选择时需要注意浏览器是否支持HTML5特性。图1-3所示为本案例的效果。
图1-3 Sample1_1基础标签案例效果
1.3.3 格式标签
对基础标签有了基本认识后，那么剩下的在标签用法上与其并无差异，只是在功能上有所不同。下面来看一下格式标签及其作用，如表1-3所示，表中列出了格式标签以及它们的描述。
表1-3 格式标签及作用
由于上面列出的这些格式标签在平时用到比较多，所以每个标签都有一个小案例介绍如何使用。但是这些案例仅是向读者展示了最基本的用法，由于还没有讲到属性，所以只能介绍最简单的部分，现在只需将每个标签的基本作用记住即可。
接下来我们先来看一下格式标签中一些比较简单的标签用法，由于每个标签的案例都比较简短，在主体部分每个都是几行代码，所以下面的案例是将几个标签合在一起编写的一个简单案例，读者在阅读时注意区分。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_2.html。
1 <! DOCTYPE HTML>
2 <! --本案例演示了格式标签中使用一部分标签的小案例，剩下一部分会在下面给出-->
3 <html><body>
4 这里演示的为缩写示例：The <abbr title="World Wide Web Consortium">W3C</abbr>
5 was founded in 1994.
6 <p>这里演示加粗文本示例 <b>此处加粗</b>.</p>
7 <! --根据H5规范，粗体为最后选择，没有其他标签适用时才会
8 选择，应先从标题、被强调文本、标记文本等标签中进行选择-->
9 <ul>
10 <! --此处为bdi标签，设置一段文本使其脱离父元素的文本方向设置-->
11 <li>User <bdi>Bob</bdi>: 60 points</li>
12 <li>User <bdi>Jerry</bdi>: 80 points</li>
13 <li>User <bdi>Tom</bdi>: 90 points</li>
14 </ul>
15 <p>接下来显示的为bdo标签，其中可以定义dir属性来覆盖默认的文本方向</p>
16 <bdo dir="rtl"><! --dir的值有rtl从右向左与ltr从左向右两种值-->
17 现在展示的是从右向左的文本方向
18 </bdo><br/>
19 <! --下面几个标签一般还会搭配id、class等一些属性来使用，这些属性在下面会有介绍-->
20 <big>这里演示big标签示例</big><br/>
21 <em>这里演示em标签示例</em><br/>
22 <i>这里演示倾斜标签i示例</i><br/>
23 <small>这里演示small标签</small><br/>
24 此处将演示下标标签的用法
25 <sub>subscript</sub><br/>
26 此处将演示上标标签的用法
27 <sup>superscript</sup><br/>
28 </body></html>
❑ 第4～5行为缩写标签的用法示例，在网页上鼠标悬停到缩写部分会显示出其全称。
❑ 第6～8行为加粗文本示例。一般在使用这个标签之前，我们应该先将6个标题标签、强调标签、标记标签与<strong>标签选中，<b>是在以上标签不适用的情况下最后才使用这个标签。
❑ 第10～14行为<bdi>标签示例，其中的<ul>与<li>标签是无序列表与定义列表项目标签，在后面会有介绍。在发布用户评论或其他无法完全控制的内容时，该标签很有用。
❑ 第15～18行为设置文本方向的标签，其中的dir属性与<bdi>标签中的dir属性一样都有ltr与rtl两种值，<bdi>标签的默认值为auto，但该标签没有此值。
❑ 第19～28行示例的几个标签用法与之前介绍的类似，它们一般使用的时候都会搭配一些属性使用，这样才会有多样的效果。
看完一些标签的使用方法后，我们还需要看一下效果图，毕竟用文字表达不如图像表达直观且更容易使人接受与记住。图1-4所示为上述程序的运行效果。
图1-4 Sample1_2格式标签案例效果
对于上述标签，在外观上能够区分清楚是什么标签，这也便于读者理解记忆。下面我们来看看另外一些格式标签的效果图与开发，本部分除了介绍标签之外也介绍了一些标签中相应的属性，图1-5所示为表格中剩下一些标签的使用效果。
图1-5 Sample1_3格式标签案例效果
对于图1-4与图1-5中所示文本样式，如果只是想要样式，则可以用CSS制作出更好和更多的效果，在后续知识点中会介绍这方面的知识。接下来看一下Sample1_3案例的开发过程，本案例也是格式类中的一部分标签。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_3.html。
1 <html><body>
2 我们来看一下长引用、引用、短引用的标签示例。
3 <blockquote>
4 现在示例为一个长引用示例，之间的所有文本都会从常规文本中分离出来，经常会在左、右两边<br/>
5 缩进（增加外边距），而且有时会使用斜体。也就是说，长引用拥有自己的空间
6 </blockquote>
7 <! --<cite> 标签通常表示它所包含的文本对某个参考文献的引用，把指向其他文档的引用分离出来，
8 尤其是分离传统媒体中的文档，如书籍、杂志、期刊等。如果引用的这些文档有联机版本，
9 还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。-->
10 <cite>
11 现在进行引用示例讲解，引用的文本将以斜体来显示。它的一个隐藏功能是
12 可以使人从文档中自动摘录参考书目
13 </cite><br/>
14 <! --长引用与短引用可以用cite属性定义出引用的来源-->
15 <q>现在为一个短引用示例，短引用中插入了双引号引导。</q>
16 <! --短引用与长引用是一样的，它们在显示上有所不同。如果需要从文本中
17 分离出比较长的内容就用长引用。-->
18 <p>下面介绍显示计算机代码的几种标签</p><br/>
19 <code>此处示例为计算机代码标签</code><br />
20 <! --编程的朋友都习惯计算机代码与文本的格式是不同的，这样方便读者寻找计算机代码片段-->
21 <kbd>此处为从键盘上键入文本的标签示例</kbd><br />
22 <! --该标签用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。-->
23 <tt>这里演示宽体字标签示例</tt><br />
24 <samp>这里为samp标签示例</samp><br />
25 <! --该标签并不经常使用。只有从正常的上下文中将某些短字符序列提取出来，
26 并对它们加以强调的极少情况下，
27 才使用这个标签。-->
28 <var>此处示例定义变量标签</var><br />
29 <! --本标签是计算机文档应用中的另一个小窍门，这个标签经常与 <code> 和 <pre> 标签一起使用，
30 用来显示计算机编程代码范例及类似方面的特定元素。-->
31 <dfn>现在的示例可标记对特殊术语或短语进行定义的标签</dfn></br>
32 <! --本标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，应该将它们与普通文本分开，这样
33 读者可以更好地理解文章当前的主题，此后就不要再对这个术语进行任何标记了。-->
34 <p>接下来再来介绍一下预定义格式文本</p>
35 <pre><! --该标签很适合显示计算机代码，本标签经常与code标签一起使用。
36 其中的width属性定义了每行最大字符数，一般为40、80、132。-->
37 这是预格式文本。
38 它保留了空格
39 和换行。
40 </pre>
41 <! --需要注意的是，制表符（tab）在 <pre> 标签定义块中可以起到应有的作用，每个制表符占据
42 8个字符位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab的实现各不相同。在用
43 <pre> 标签格式化的文档段中使用空格可以确保文本处于正确的水平位置。-->
44 <p>下面显示的标签定义了已知范围或分数值内的标量测量：</p>
45 <meter value="3" min="0" max="10">3/10</meter><br>
46 <meter value="0.6">60%</meter><br/>
47 <! --该标签一般用于查询磁盘用量、查询结果的相关性，不应用于指示进度（在进度条中）。标记进度条
48 应使用 <progress> 标签。IE不支持meter标签。-->
49 接下来介绍进度条标签progress:<progress value="22" max="100">
50 </progress><! --该标签中的max属性表示任务一共需要多少工作，value表示已经完成了多少任务。-->
51 <! —IE 10, Firefox, Opera, Chrome以及Safari 6支持 <progress> 标签。-->
52 </body></html>
❑ 第1～17行为引用与长短引用的示例。本质上长引用与短引用是一样的，它们只是在显示形式上有所不同。而引用标签中的内容一般以斜体显示，如果引用的文档有联机版本，那么还应该有一个链接标签<a>把超链接指向该文本。
❑ 第18～30行为一些计算机代码显示的几种标签示例。有时我们在网上想找一些代码时会发现，如果代码与文本是同一种格式，那么看起来是相当麻烦的，代码格式一般来说应与其他文本有所不同，这几个标签在表现形式上能够区分出来。
❑ 第34～43行为<pre>标签示例。由于该标签保留了空格与换行，所以经常与<code>标签一起使用。但是需要注意的是在定义计算机源代码（比如HTML源代码），请使用符号实体来表示特殊字符，比如"< " 代表"<", "> " 代表">", "& " 代表"&"。
❑ 第44～52行中的<meter>与<progress>标签显示的都是进度条类型，但它们还是有一些区别的。需要标记进度条时应该使用<progress>标签，<meter>中有一些属性我们将在下面介绍。
上面在介绍<pre>标签时说到了符号实体，在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，则必须在HTML源代码中使用字符实体（character entities）。表1-4所示为部分符号实体。
表1-4 符号实体及对应编号
需要注意的是，实体名称区分大小写，HTML中的常用字符实体是不间断空格（ ）。浏览器总是会截断HTML页面中的空格。如果在文本中写10个空格，则在显示该页面之前，浏览器会删除它们中的9个。如需在页面中增加空格的数量，需要使用 字符实体。
简要介绍了符号实体后，我们会在上个程序的<meter>标签中看到了几种属性，但是当时并没有讲解，在接下来的表1-5中将看到该标签中的属性介绍。
表1-5 < meter>标签属性列表
需要注意的是，在form属性的值id中规定此值必须为同一文档中<form>元素的属性值。high属性必须小于max属性值，且必须大于low和min属性值。low属性必须大于min属性值，且必须小于high和max属性值。
1.3.4 表单标签
通过Sample1_2与Sample1_3两个例子我们掌握了大部分格式标签的基本用法，接下来便介绍剩下没有提到的标签用法与一部分表单标签。首先来看一下本部分程序的效果图，图1-6所示为表单标签使用效果。
图1-6 Sample1_4格式标签案例与表单标签效果
看完效果图以后不难发现，这些标签同之前讲的标签在外观表示形式上有所差别，这样便于大家的理解记忆。通过接下来的学习我们将学会如何在网页中制作出基础表单与多种多样的特效形式。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_4.html。
1 <html><body>
2 <p>这里为删除线标签示例"一打有 <del>二十</del> <ins>十二</ins> 件"。</p>
3 <! --大多数浏览器会改写为删除文本和下画线文本，一些老式的浏览器会
4 把删除文本和下画线文本显示为普通文本。-->
5 <p>这里为标记标签示例：出门记着带 <mark>钥匙</mark></p><! --此标签为H5新加的标签-->
6 <p>这里为时间标签示例：我在 <time datetime="2016-10-01">国庆节</time> 会放假。</p>
7 <! --本标签定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。-->
8 <p>从现在开始就要进入表单类标签的学习，在这里将学到在网页世界中
9 经常见到与用到的东西。<br/>
10 首先将要学习的是form标签，下面将是form标签示例：</p>
11 <form action="/example/html/form_action.asp" method="get">
12 <p>姓氏： <input type="text" name="姓氏" /></p>
13 <p>名字： <input type="text" name="名字" /></p>
14 <input type="submit" value="Submit" />
15 </form><! --由于本部分涉及服务器方面的知识，但是这里只介绍关于HTML的基础内容，所以
16 便不叙述服务器方面知识，想了解此方面内容的读者应当阅读相关书籍或资料。-->
17 <p>以上程序显示了基本的form标签如何使用，接下来分步来看一下文本域、密码域、
18 复选框、单选按钮。</p>
19 <form><p>现在为文本域创建示例：</p>
20 名：<input type="text" name="名"><br />
21 姓：<input type="text" name="姓">
22 </form><! --同上面程序，input标签的type属性为text时，即为文本域-->
23 <form><p>现在来看密码域的创建过程，在输入密码时浏览器会将用其他符号代替密码</p>
24 用户：<input type="text" name="用户"><br />
25 密码：<input type="password" name="密码">
26 </form><! --与文本域类似，将input标签的type属性改为password，即建立了一个密码域-->
27 <form><p>现在来看复选框的创建过程</p>
28 我喜欢步行：<input type="checkbox" name="步行"><br />
29 我喜欢汽车：<input type="checkbox" name="汽车">
30 </form><! —将input标签的type属性中改为checkbox，即为复选框的创建-->
31 <form><p>现在来学习单选按钮的创建过程</p>
32 男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />
33 女性：<input type="radio" name="Sex" value="female" />
34 </form><! --当用户单击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态-->
35 </body></html>
❑ 第1～7行为剩余几个格式的标签示例，<del>标签经常会与<ins>标签一起使用以改正错误。标记标签为HTML5中新增加的一项标签，用于强调。最后<time>标签的两个属性中，datatime规定日期时间，pubdata指示文档的发布时间。
❑ 第8～16行为第一个<form>表单示例。一般情况下<form>经常与<input>标签结合使用，因为会经常用到输入文本信息。涉及服务器方面的知识由于篇幅问题就没有介绍，要想了解此方面知识的读者可以自行查阅资料。
❑ 第17～35行为<form>标签与<input>标签结合的几个简单示例，更改<input>标签中的type属性可创建不同类型的表单。在下面的介绍中我们会介绍<input>与<form>两个标签中的其他属性。
上述程序介绍了表单的一部分标签，这使读者对表单有了初步的印象。接下来看一下表单标签中都有什么样的标签。表1-6列出了表单标签中的标签及其描述，学会其中所列这些标签后，我们便能够在网页中制作出各种类型的表单了。先来了解一下这些标签。
表1-6 表单类标签及其描述
看了上一个程序中表单标签的基本用法再结合表1-6列出的标签，读者应该有更深刻的体会，下面我们将介绍剩下的标签用法。由于本部分的标签都会有几个自己的属性，所以在程序中只介绍用到的属性用法，下面我们会将剩下的属性进行介绍。
现在首先来看一下表单标签中未介绍标签的开发过程，图1-7所示为表单标签制作出来后基础版的效果。因为本案例需要对多个标签进行介绍，所以在视觉上会感觉有些杂乱，读者在阅读时应该将每个标签与图对应，这样效果会更好。
图1-7 Sample1_5表单标签效果
看完了效果图后不难发现，上面所介绍的是在生活中常用的一些控件。相信读者心中肯定想要掌握这些控件的实现技术，现在就来介绍这些控件的开发过程。其实它们的原理与上面介绍过的标签开发无异，开发起来并不困难。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_5.html。
1 <html><body>
2 <p>现在示例为下拉列表，您喜欢的汽车牌子：
3 <form><select name="汽车">
4 <option value="沃尔沃">沃尔沃</option>
5 <option value="奔驰">奔驰</option>
6 <option value="菲亚特">菲亚特</option>
7 <option value="奥迪">奥迪</option>
8 </select></form></p>
9 <p>现在示例为有预设值的下拉列表，您喜欢的汽车牌子为：
10 <form><select name="汽车">
11 <option value="沃尔沃">沃尔沃</option>
12 <option value="奔驰">奔驰</option>
13 <option value="菲亚特">菲亚特</option>
14 <option value="奥迪" selected="selected">奥迪</option>
15 </select></form></p>
16 <! --上面为大家演示了两种下拉列表，第一种没有预设值，
17 第二种多了一个selected属性即有预设值-->
18 <p>这里给大家演示多行输入文本</p>
19 <textarea rows="10" cols="30">
20 textarea标签定义多行的文本输入控件，其中文本的字体默认为等宽字体。
21 可以通过 cols和rows属性来规定textarea的尺寸，不过更好的办法是
22 使用CSS的height和width属性。</textarea>
23 <! --在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
24 可以通过wrap属性设置文本输入区内的换行模式-->
25 <p>下面介绍按钮标签：在button元素内部，您可以放置内容，
26 比如文本或图像。这是该元素与使用input元素创建按钮的不同之处。</p>
27 <button type="button">按钮1</button>
28 <form><input type="button" value="按钮2" /></form>
29 <! --需要注意的是，请始终为按钮规定type属性。IE的默认类型是 "button"，
30 而其他浏览器中（包括W3C 规范）的默认值是 "submit"。-->
31 <! --如果在HTML 表单中使用button元素，则不同的浏览器会提交不同的值。IE
32 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交value属性的内容。
33 请在HTML 表单中使用input元素来创建按钮。-->
34 <p>接下来看一下围绕数据的fieldset标签。如果
35 浏览器没有显示边框，则为浏览器版本老旧造成的。</p>
36 <form><fieldset><legend>健康信息</legend>
37 身高：<input type="text" />
38 体重：<input type="text" />
39 </fieldset></form><! --legend标签定义fieldset标签的标题-->
40 <! --当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊
41 方式来显示它们，该标签没有必需或者唯一的属性。-->
42 <p>下面介绍元素组合选项标签optgroup:</p>
43 <select><optgroup label="美国产的车">
44 <option value="ford">福特</option>
45 <option value="chevrolet">雪佛兰</option>
46 </optgroup><optgroup label="德国产的车">
47 <option value="mercedes">奔驰</option>
48 <option value="audi">奥迪</option>
49 </optgroup></select><! --option标签定义下拉列表中一个项目，
50 没有结束标签，常与select一起使用。optgroup元素用于组合选项。当您使用一个长的
51 选项列表时，对相关选项进行组合会使处理更加容易。-->
52 <p>接下来是output标签的使用，output标签定义不同类型的输出</p>
53 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
54 <input type="range" id="a" value="50">100
55 +<input type="number" id="b" value="50">
56 =<output name="x" for="a b"></output><! --需要注意的是，在IE浏览器中不支持这个标签。-->
57 </form></body></html>
❑ 第1～17行为选择列表标签的使用方法。其分为了两种，第二种在option标签中加上了selected属性（即预设值），在网页显示上，它初始时便会显示预设值。option标签经常是与select标签一起来使用的，它定义了下拉列表中的一个项目。
❑ 第18～33行为多行文本标签<textarea>与按钮标签的使用示例。其中多行文本的默认字体为等宽字体。在示例中按钮的实现方式有两种，button标签提供了更为强大的功能和更丰富的内容，但是禁止使用的元素是图像映射。
❑ 第34～51行为<fieldset>标签与组合选项标签<optgroup>的使用方法。<fieldset>标签的使用方法比较简单，并且显示也很特殊，读者容易接受。组合选项标签使用时要注意选项标签的分类，这也是十分简单的。
❑ 第52～57行中看到的不只是output如何输出，也学到了<input>标签type属性中的另外两个属性值。
至此，表单标签基本讲解完毕，但只有这些还是远远不够的，因为这些标签中还有许多元素没有讲述。这些标签只有在各种属性的配合使用下才会有更好的效果，下面就来看一下这些标签的属性及其用法，如表1-7所示。
表1-7 <form>标签的属性值及其描述
说明
上面表1-7介绍了<form>标签在HTML5中的属性，但是这部分要结合服务器来使用。由于篇幅问题并没有讲述服务器，有兴趣的读者可以自己查阅这方面的资料，结合本节介绍的属性来实践。属性是在开始标签中使用的，上面的每个例子中都有标签属性的使用。
表1-7中在介绍<enctype>标签时，并没有介绍其值，现在我们来看一下它。application/x-www-form-urlen coded为在发送前编码所有字符为该属性默认值；multipart/form-data为在使用包含文件上传控件的表单时，必须使用该值；text/plain在编码时将空格转换为“+”号不对特殊字符编码。
通过对前面的案例学习，我们发现<input>标签及其属性的用法很多，并且那只是使用一个type属性所带来的效果，接下来看一下<input>标签的其余属性，表1-8所示为<input>标签的属性值及其描述。
表1-8 <input>标签的属性值及其描述
表1-8所示的这些属性为input元素的属性，其中包含了HTML5中新增的许多属性，接下来我们便来看一下这些属性的应用效果。图1-8所示为input元素属性应用案例效果，由于之前已经讲述了type属性，所以在这里便没有再叙述这部分知识。
图1-8 Sample1_6 input元素属性应用案例效果
看完了案例生成的效果图，就来看一下案例的开发过程。一如前面案例开发过程所示，本案例中大部分标签与属性的使用方法大家应该已经掌握了，现在来具体学一下input元素的局部属性的应用，其与大部分属性应用是相同的，读者学起来会很快。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_6.html。
1 <html><body>
2 <p>单击此图像即为提交，这里用图片代替按钮，alt属性只能与type="image"配合使用。
3 它为图像输入规定的替代文本。</p><form>
4 <p>姓： <input type="text" name="姓" /></p>
5 <p>名： <input type="text" name="名" /></p>
6 <input type="image" src="back.png" alt="Submit" width="64" height="64"/></form>
7 <! --即使alt属性不是必需的属性，但是当输入类型为image时，仍然应该设置该属性。如果
8 不使用该属性，则有可能对文本浏览器或非可视的浏览器造成使用障碍。除了Safari之外，所有
9 主流的浏览器都支持 "alt" 属性。height属性只适用于 <input type="image">，它规定image
10 input的高度。其属性pixel以像素为单位，%为百分比为单位。-->
11 <p>这里是表单的自动完成功能测试，填写并提交表单，然后再输入一遍相同的数据来体
12 验一下自动完成功能。</p><form autocomplete="on">
13 姓：<input type="text" name="姓" /><br />
14 名： <input type="text" name="名" /><br />
15 <input type="submit" /></form><p></p>
16 <! --自动完成功能允许浏览器预测输入的字段。当用户在开始键入字段时，浏览器基于之前键入的值，
17 应该显示出在字段中填写的选项。autocomplete属性适用于 <form>，以及下面的 <input> 类型：
18 text, search, url, telephone, email, password, datepickers, range以及color。-->
19 <p>这里显示加载时自动获得焦点与禁用输入字段示例，使用该属性的input元素获得焦点。</p>
20 <form>
21 姓： <input type="text" name="姓" autofocus><br>
22 名： <input type="text" name="名" disabled="disabled"><br>
23 <input type="submit"></form>
24 <! --被禁用的input元素既不可用，也不可单击。可以设置disabled属性，直到满足某些其他的
25 条件为止（比如选择一个复选框等）。然后，需要通过 JavaScript来删除 disabled值，
26 将input元素的值切换为可用。-->
27 <p>这里显示max与min属性示例，max属性与min属性配合使用，
28 可创建合法值范围。</p><form>
29 输入数量： <input type="number" name="输入数量" min="0" max="10" />
30 <input type="submit" /></form>
31 <! --max和min属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local,
32 month, time以及week。-->
33 <p>这里为输入段字符最大长度属性示例：</p><form>
34 <p>姓： <input type="text" name="姓" maxlength="85" /></p>
35 <p>名： <input type="text" name="名" maxlength="55" /></p>
36 <input type="submit" value="Submit" />
37 <! --maxlength属性规定输入字段的最大长度，以字符个数计。
38 maxlength属性与 <input type="text"> 或 <input type="password"> 配合使用。-->
39 </form><p>此处示例为可接受多个值的上传字段，请尝试在浏览文件时选取一个以上的文件。
40 </p><form>选择图片：<input type="file" name="img" multiple="multiple" />
41 <input type="submit" /></form>
42 <p>这里pattern属性规定验证输入字段的模式，输入时请按要求输入3个字母的国家代码：
43 </p><form>国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
44 title="3个字母的国家代码" />
45 <input type="submit" /></form>
46 <! --模式指的是正则表达式，pattern属性适用于以下 <input> 类型：text, search,
47 url, telephone, email以及password。pattern属性规定用于验证输入字段的模式。-->
48 <p>接下来演示输入字段预期值的属性，提供可描述输入字段预期值的提示信息，
49 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。</p><form>
50 <input type="search" name="user_search" placeholder="输入字段预期值" />
51 <input type="submit" /></form>
52 <! --placeholder属性适用于以下的 <input> 类型：text, search, url, password等。-->
53 <p>接下来我们演示的为required与size属性，required属性规定必须在提交之前填写输入字段。
54 如果不填写任何内容，则会有提示出现。</p><form>
55 姓名： <input type="text" name="usr_name" required="required" size="35"/>
56 <input type="submit" value="提交" /></form>
57 <! --required属性适用于以下 <input> 类型：text, search, url, telephone, email,
58 password, date pickers, number, checkbox, radio以及file。-->
59 </body></html>
❑ 第2～10行image属性应用案例。在使用该属性时需要注意的是图片的位置放置，需将图片放到与html文件同一个文件夹下，如果还有上层文件，那么在路径上增加上层文件。alt属性为用户由于某些原因无法查看图像时提供了备选信息。
❑ 第11～26行自动完成与获得焦点属性应用。在平时浏览网页时我们登录一些账号输入开头的字母或数字后便会给出提示，这便是autocomplete属性开启的原因。有了autofoucs属性，我们会发现网页打开后焦点自动会获得到该input元素上。
❑ 第27～41行为max与maxlength属性的应用。应用这几个属性时只需规定好相应的数值即可。max与min一起使用规定了一段范围，maxlength一般用在有字数限制的文本输入input元素时。
❑ 第42～59行为验证输入字段属性、字段预期值属性与required属性的应用。这些在我们日常上网时都会遇到。验证输入字段与required属性在不满足条件时都会弹出提示，字段预期值在初始加载进界面后会显示预期设置的值。
目前为止我们便将表单标签的基础内容学习完毕，本节的内容有些繁杂，知识点零碎且每点都比较容易接受。
1.3.5 图像、链接、列表标签
下面来看一下图像类、链接类与列表类的标签介绍，表1-9所示为图像链接列表标签及其描述，我们先来总体学习一下这些标签。
表1-9 图像链接列表标签及其描述
看完这些标签的类型与描述后，先来看一下由这些标签制作出来的网页效果，通过观察这些标签效果，我们再来深究一下它们的具体用法。图1-9所示为图像链接列表标签应用实例。图中有一个图片加载失败信息，这是故意写错路径名进而显示alt属性的。
图1-9 Sample1_7图像链接列表标签应用案例效果
本部分标签因为篇幅问题分成了两部分，我们刚才看到的效果图为第一部分标签案例的示意图。本部分标签为图像标签与一部分列表标签的示例，表1-9列出的Canvas标签由于是本书的重点内容，所以放到了1.6节进行细致的讲述，先来看一下Sample1_7的案例开发过程。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_7.html。
1 <html><head><title>Sample1_7</title></head><body>
2 <p>这里演示img标签及其属性的用法，本标签创建的是被引用图像的占位空间。</p>
3 <img src="pic/H5.jpg" alt="W3C的正式HTML5徽标" height="128" width="128" />
4 <img src="pic/H523.jpg" alt="W3C的正式HTML5徽标" height="128" width="128" />
5 <! --src和alt为该标签的必需属性，在HTML中img标签没有结束标签，
6 第二个img标签演示如果图像不能显示，则显示alt属性。-->
7 <p>接下来演示的是为设置背景图片，如果图片小于页面那么图片会重复。</p>
8 <body background="pic/background1.png">
9 <p>接下来演示的是设置图像的对齐方式：</p>
10 <h2>未设置对齐方式的图像：</h2>
11 <p>图像 <img src ="pic/back.png"> 在文本中</p>
12 <h2>已设置对齐方式的图像：</h2>
13 <p>图像 <img src="pic/back.png" align="bottom"> 在文本中的对齐方式为bottom</p>
14 <p>图像 <img src ="pic/back.png" align="middle"> 在文本中的对齐方式为middle</p>
15 <p>图像 <img src ="pic/back.png" align="top"> 在文本中的对齐方式为top</p>
16 <! --其中bottom对齐方式是默认的对齐方式-->
17 <p>现在把图像作为链接来使用：
18 <a href="Sample1_6.html">
19 <img border="0" src="pic/back.png" /></a></p>
20 <p>现在演示带有可供单击区域的图像地图，其中每个区域都是一个超链接，
21 请单击图像上的星球，把它们放大。</p>
22 <img src="pic/xingqiu.jpg" border="0" usemap="#planetmap" alt="星球" />
23 <map name="planetmap" id="planetmap">
24 <area shape="circle" coords="180,139,14" href ="pic/jinxing.png"
25 target ="_blank" alt="金星" />
26 <area shape="circle" coords="129,161,10" href ="pic/shuixing.png"
27 target ="_blank" alt="水星" />
28 <area shape="rect" coords="0,0,110,260" href ="pic/sun.jpg"
29 target ="_blank" alt="太阳" /></map>
30 <! --area标签定义图像映射中的区域，它总会嵌套在map中，shape属性定义了区域形状，coords
31 为区域的坐标值，一般4个坐标值为矩形的左上角与右下角的坐标值x, y;3个值为圆形
32 的原点坐标与半径；多边形poly的坐标为x 1, y 1, x 2, y 2, .., xn, yn。-->
33 <! --img元素中的 "usemap" 属性引用map元素中的 "id" 或 "name" 属性（根据浏览器而定），
34 所以应同时向map元素添加"id" 和 "name" 属性。以上几个例子在涉及href属性时
35 给出的是路径位置，这里也可以给URL。target属性值blank为在新链接中打开。-->
36 <p>接下来演示一下无序列表的使用，首先看到的是不同类型的无序列表：</p>
37 <h4>Disc 项目符号列表：</h4>
38 <ul type="disc">
39 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
40 </ul><h4>Circle 项目符号列表：</h4>
41 <ul type="circle">
42 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
43 </ul><h4>Square 项目符号列表：</h4>
44 <ul type="square">
45 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ul>
46 <p>下面将看到嵌套类型的无序列表：</p>
47 <h4>一个嵌套列表：</h4><ul>
48 <li>咖啡</li><li>茶
49 <ul><li>红茶</li><li>绿茶</li></ul>
50 </li><li>牛奶</li></ul>
51 <! --标签li定义列表项目，无序列表标签ul常与有序列表标签ol一起使用。-->
52 </body></html>
❑ 第2～6行为<img>标签的示例。在HTML中本标签没有结束标签，src与alt属性为必需属性。src指示出图片的路径，alt是提示属性。有的浏览器不支持<img>标签或者由于路径传错没有图片，这时alt的内容便会显示出来本案例中演示了在路径错误时显示alt信息的用法。
❑ 第7～16行为设置背景图片与设置图像对齐方式示例。设置背景图片时，如果图片小于页面，则默认设置为重复贴图。在下面的案例中我们会介绍背景图片的一些放置位置以及重复方式的用法。其对齐方式读者可以自行观察运行图并进行实验。
❑ 第17～35行中介绍了如何将图片作为链接或者图片的局部作为链接使用。其中<area>标签配合shape、coords属性指定局部区域的形状与位置。具体的用法已在注释中给出，target属性是打开链接的方式。
❑ 第36～52行为一部分列表标签的应用。在这里演示了不同类型的无序列表的应用，标签<li>定义了列表项目，常与列表标签一起使用。列表中也可以嵌套列表，在本案例中对此也有介绍，一般的列表类型都为上面介绍的几种。
看完前一部分的标签开发过程后，我们来学习剩下一部分的标签开发。在本案例中用到的几个链接统一规定将Sample1_4.html作为主页，在跳转主页时都跳转到此页上。另外对于图片路径，我们统一放到了pic目录下，读者练习时注意一下这些问题。
接下来看一下案例的开发过程。如果有读者在运行过程中加载不出图片，则应该是在设置路径时出现了一些问题。应该仔细确认图片的位置，然后再根据图片所在位置更改URL，之后再进行实验。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_8.html。
1 <html><head><title>Sample1_8</title></head><body>
2 <p>接下来看一下有序列表的使用，我们看到的是不同类型的有序列表：</p>
3 <h4>数字列表：</h4>
4 <ol><li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol>
5 <h4>字母列表：</h4>
6 <ol type="A">
7 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol>
8 <h4>小写字母列表：</h4>
9 <ol type="a">
10 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol>
11 <h4>罗马字母列表：</h4>
12 <ol type="I">
13 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ol>
14 <h4>小写罗马字母列表：</h4>
15 <ol type="i">
16 <li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li>
17 </ol><! --有序列表的默认类型为阿拉伯数字，其余还有字母、小写字母、罗马字母等。-->
18 <p>接下来看一下定义列表标签dl的用法：</p>
19 <h2>一个定义列表：</h2>
20 <dl>
21 <dt>计算机</dt>
22 <dd>用来计算的仪器 ... ...</dd>
23 <dt>显示屏</dt>
24 <dd>以视觉方式显示信息的装置 ... ...</dd>
25 </dl>
26 <! --<dl> 标签用于结合 <dt>（定义列表中的项目）和 <dd>（描述列表中的项目）-->
27 <! --<menu>与<command>两个标签在各大主流浏览器中都不支持，由于<menuitem>只有Firefox浏览器
28 支持，所以这3个标签在这里不介绍。-->
29 <p>现在看一下超链接标签a的用法：</p>
30 <a href="http://www.baidu.com">Baidu</a>
31 <! --<a>用于从一个页面链接到另一个页面，在用于样式表时，<link> 标签得到了几乎
32 所有浏览器的支持，但是几乎没有浏览器支持其他方面的应用，所以在此便不再介绍link标签-->
33 <p>现在看一下HTML5标准中新增的标签nav的用法，本例中暂定案例1_4为主页：</p>
34 <nav><a href="Sample1_4.html">主页</a>
35 <a href="Sample1_3.html">前一页</a>
36 <a href="Sample1_5.html">后一页</a></nav>
37 <! --<nav> 标签定义导航链接的部分，IE 8以及之前的版本不支持本标签，其余的主流
38 浏览器都支持本标签。-->
39 <p>接下来看一下同一页面内的跳转：<br/>
40 <a href="#C4">查看章节 4。</a></p>
41 <h2>章节1</h2>
42 <p>这里是章节内容</p>
43 <h2>章节2</h2>
44 <p>这里是章节内容</p>
45 <h2>章节3</h2>
46 <p>这里是章节内容</p>
47 <h2><a name="C4">章节 4</a></h2>
48 <p>这里是章节内容</p>
49 //……这里省略了部分代码，读者可以自行查阅随书源代码来查看
50 <p>被锁在框架中了吗？</p>
51 <a href="Sample1_4.html" target="_top">请单击这里！</a>
52 <! --target属性设置为_top，这个目标使得文档载入包含这个超链接的窗口，用 _top目标将会清除所有被
53 包含的框架并将文档载入整个浏览器窗口。-->
54 </body></html>
❑ 第2～17行为有序列表的标签应用。在上一个案例中我们介绍了无序列表标签的使用，有序列表与无序列表在显示时一个是有顺序的排列，而另一个没有顺序排列。有序列表想要按顺序排列一般应在列表项目前面加上表明顺序的数字字母等，就是有序列表的不同种类。
❑ 第18～26行定义了列表标签<dl>的用法。它经常会与<dt>（定义列表中的项目标签）、<dd>（描述列表中的项目标签）一起来定义列表，读者看着运行图学习即可。
❑ 第27～38行演示了链接标签的用法。在HTML5中新增的<nav>标签定义导航链接的部分，在平时浏览网页时不会单纯在一个页面浏览肯定会单击链接等切换页面，其中上一页、下一页、主页等链接便是由此标签定义的。
❑ 第39～54行为在同一页面下跳转。除了不同页面切换，有时我们浏览一个网页到最下面部分时想回到顶部，如果没有回到顶部这个按钮，那么只能拖拉滚动条来实现。这个示例便是在同一页面的某处添加信息，本页中如有需要跳转到该部分单击链接即可。
目前为止，图像、链接、列表标签的开发已完毕，本部分标签不多，但是每个标签的属性都不少，读者在学习时应将注意力放到各属性上。幸运的是，不少属性的作用与前面标签中的属性是一样的，读者学起来不会太难。
1.3.6 表格、元信息等标签
到目前为止需要学的主要标签将要介绍完毕，接下来介绍一下剩下的标签。这部分的标签表格与元信息我们会详细介绍，剩下部分的标签因为用到次数较少便不再赘述其开发过程，表1-10所示为表格、元信息等标签及其描述。
表1-10 表格、元信息等标签及其描述
表格标签<table>定义了HTML表格，简单的表格由table及一个或多个tr、th或td组成。复杂的HTML表格可能会包括caption、col、colgroup、thead、tfoot以及tbody元素。我们现在来看一下第一个表格类程序，图1-10所示为表格标签的案例效果。
图1-10 Sample1_9表格标签应用案例效果
本案例是本章的第一个表格类案例，通过案例运行效果图与标签介绍，我们便可以使用本部分介绍的表格标签案例创造出各种样式的且在日常生活中需要的类型表格，现在就来看一下案例Sample1_9的开发过程。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_9.html。
1 <html><head><title>Sample1_9</title></head><body>
2 <p>从现在开始学习表格标签的使用，首先看到的是table标签的用法：</p>
3 <h4>只有一行一列的表格：</h4>
4 <table border="1"><tr>
5 <td>100</td>
6 </tr></table>
7 <h4>一行三列的表格：</h4>
8 <table border="1"><tr>
9 <td>100</td><td>200</td><td>300</td>
10 </tr></table>
11 <h4>两行三列的表格：</h4>
12 <table border="1">
13 <tr><td>100</td><td>200</td><td>300</td></tr>
14 <tr><td>400</td><td>500</td><td>600</td></tr></table>
15 <! --每个表格由table标签开始，表格行由tr标签开始，每个数据由td标签开始。-->
16 <p>现在学习的是带有边框的表格：</p>
17 <h4>带有普通的边框：</h4>
18 <table border="1"><tr>
19 <td>100</td><td>200</td></tr>
20 <tr><td>300</td><td>400</td></tr></table>
21 <h4>带有粗的边框：</h4>
22 <table border="8"><tr>
23 <td>100</td><td>200</td></tr>
24 <tr><td>300</td><td>400</td></tr></table>
25 <h4>带有很粗的边框：</h4>
26 <table border="15">
27 <tr><td>100</td><td>200</td></tr>
28 <tr><td>300</td><td>400</td></tr></table>
29 <h4>这个表格没有边框：</h4>
30 <table><tr>
31 <td>100</td><td>200</td><td>300</td></tr>
32 <tr><td>400</td><td>500</td><td>600</td>
33 </tr></table>
34 <! --上面演示的均为边框示例，其中没边框时可以不加border属性，也可以使其值为0。
35 border属性为边框的宽度。-->
36 <p>接下来演示表格中的标题与如何为表格添加标题：</p>
37 <h4>表头：</h4>
38 <table border="1">
39 <tr><th>姓名</th><th>电话</th><th>电话</th></tr>
40 <tr><td>张三</td><td>123456</td><td>123455</td>
41 </tr></table>
42 <h4>垂直的表头：</h4>
43 <table border="1"><tr><th>姓名</th><td>李四</td>
44 </tr><tr><th>电话</th><td>12345</td>
45 </tr><tr><th>电话</th><td>21345</td></tr></table>
46 <h4>这个表格有一个标题，以及粗边框：</h4>
47 <table border="6">
48 <caption>这是标题</caption><tr>
49 <td>100</td><td>200</td><td>300</td></tr>
50 <tr><td>400</td><td>500</td><td>600</td></tr></table>
51 <! --表格的属性，行用tr来表示，td表示列，th相当于表头，table表示表格，
52 这几个标签构成表单最基本的形式。th为表格中的表头，caption为表格的标题。-->
53 </body></html>
❑ 第2～15行演示了基础的表格标签的使用方法。我们都知道表格中有行与列，所以在HTML中它们都有相应的标签，tr标签表示表格的一行，td标签表示表格每行中的一项数据，在一般情况下<table>会经常与<tr><td>一起使用。
❑ 第16～35行为表格的边框效果示例。表格标签中的border属性为边框的宽度属性，不设置这个属性时默认为0。在设置边框宽度时应该本着合适的原则，一般情况下设置border值为1或者不设置。
❑ 第36～53行为表格标题的示例。由于表格标签中th属性为表格中的表头，设计表格时即为第1行内容，所以th为表格内部的内容。而caption为表格的标题，其位置是在表格的外部。我们看本案例的运行效果时可以看到这些的区别。
由于篇幅有限，所以本节的标签分为三部分进行介绍，它们其实可以组合成为一个程序，但是这样代码有些长不利于读者学习。上面的示例为第一部分，接下来看一下第二部分的案例运行图，图1-11所示为部分表格标签效果。
图1-11 Sample1_10 表格标签应用案例效果
本部分案例主要讲述了表格中各种边框的显示形式与表格的嵌套形式。这些形式在CSS中也可以进行设置，程序中会具体分析在什么情况下用到哪种形式，有时层叠样式表比本节演示的要简单，有时不如本节演示的简单，我们来看一下具体的案例开发。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_10.html。
1 <html><head><title>Sample1_10</title></head><body>
2 <p>接下来演示如何定义跨行或跨列的表格单元格：</p>
3 <h4>横跨两列的单元格：</h4>
4 <table border="1"><tr>
5 <th>姓名</th><th colspan="2">电话</th></tr>
6 <tr><td>张三</td><td>123456</td><td>123455</td></tr></table>
7 <h4>横跨两行的单元格：</h4>
8 <table border="1"><tr>
9 <th>姓名</th><td>李四</td></tr>
10 <tr><th rowspan="2">电话</th><td>12345</td></tr>
11 <tr><td>21345</td></tr></table>
12 <! --colspan属性规定表头单元格可横跨的列数，rowspan属性规定表头单元格可横跨的行数。-->
13 <p>接下来演示一下在表格内如何使用其他类型的标签</p>
14 <table border="1"><tr><td>
15 <p>这是一个段落。</p><p>这是另一个段落。</p>
16 </td><td>这个单元包含一个表格：
17 <table border="1"><tr>
18 <td>100</td><td>200</td></tr>
19 <tr><td>300</td><td>400</td>
20 </tr></table></td>
21 </tr><tr>
22 <td>这个单元包含一个列表：
23 <ul><li>苹果</li><li>香蕉</li><li>菠萝</li>
24 </ul></td><td>HELLO</td>
25 </tr></table>
26 <! —从本部分可以看出，如果想在表格内部嵌套一些其他标签，则直接在td标签内部继续添加标签即可。-->
27 <p>现在我们要演示单元格边沿与内容的距离，以及单元格之间的距离这两个属性的应用：</p>
28 <h4>没有cellpadding，即单元格与内容之间没有距离：</h4>
29 <table border="1"><tr>
30 <td>100</td><td>200</td></tr>
31 <tr><td>300</td><td>400</td></tr></table>
32 <h4>带有cellpadding，即单元格与内容之间有距离：</h4>
33 <table border="1" cellpadding="10"><tr>
34 <td>100</td><td>200</td></tr>
35 <tr><td>300</td><td>400</td></tr></table>
36 <! --cellpadding属性规定单元边沿与其内容之间的空白。-->
37 <h4>带有cellspacing:</h4>
38 <table border="1" cellspacing="10"><tr>
39 <td>100</td><td>200</td></tr>
40 <tr><td>300</td><td>400</td></tr></table>
41 <! --cellspacing属性规定的是单元之间的空间。从实用角度出发，
42 最好不要规定cellpadding，而是使用CSS来添加内边距。-->
43 </body></html>
❑ 第2～12行演示如何跨行或者跨列的定义表格。colspan属性规定的是可以横跨列数的属性，rowspan为可以横跨的行数属性。这两个属性应用在表头属性中，因为在平时制定表格时只有表格的表头需要合并。
❑ 第13～26行演示在表格内部如何应用其他类型的标签。这里的思想其实就是嵌套，对于上面的案例，我们在表格中嵌套了段落、表格、列表。这里只是一个示例，其他还有很多标签可以嵌套，在这里不多做介绍了。
❑ 第27～43行演示了单元格边沿与内容的距离，以及单元格之间的距离这两个属性的应用。cellpadding与cellspacing的区别在案例中给出了解释，需要注意的是在真正开发中最好不要用cellpadding，使用CSS样式表会更简便。
到目前为止，剩下了为数不多的几个标签没有介绍，其中还包括一些今后开发中不常用的一些标签。由于在WebGL的开发中不常用，所以在此不再赘述。我们先来看一下图1-12所示的剩下的一些标签的案例运行效果。
图1-12 Sample1_11 表格标签应用案例效果
看了这些标签案例的示意图后，不难发现与上一个案例的内容其实是很相近的。所以本部分的标签也是在讲述表格标签的格式与样式。使用过Excel表格的读者都知道表格的排版其实也挺麻烦的，在之前与将要介绍的案例中会包含用得最多的一些格式，现在来看一下案例的开发过程。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_11.html。
1 <html><head><title>Sample1_11</title></head><body>
2 <p>接下来看一下如何向表格与单元格内部添加背景颜色或者背景图片：</p>
3 <h4>为表格添加背景颜色：</h4>
4 <table border="1" bgcolor="red">
5 <tr><td>100</td><td>200</td></tr>
6 <tr><td>300</td><td>400</td></tr></table>
7 <h4>为表格单元添加背景颜色：</h4>
8 <table border="1"><tr>
9 <td bgcolor="red">100</td><td>200</td></tr>
10 <tr><td bgcolor="blue">300</td><td>400</td></tr></table>
11 <p>现在用align属性在单元格中排列内容</p>
12 <table width="400" border="1"><tr>
13 <th align="left">消费项目．...</th>
14 <th align="right">一月</th>
15 <th align="right">二月</th></tr>
16 <tr><td align="left">衣服</td>
17 <td align="right">$100</td>
18 <td align="right">$200</td></tr>
19 <tr><td align="left">化妆品</td>
20 <td align="right">$100</td>
21 <td align="right">$150</td></tr>
22 <tr><td align="left">食物</td>
23 <td align="right">$500</td>
24 <td align="right">$600</td></tr>
25 <tr><th align="left">总计</th>
26 <th align="right">$700</th>
27 <th align="right">$950</th></tr></table>
28 <! --align属性规定单元格内容的水平对齐方式。其值除了left、right之外还有center（居中对齐）、
29 justify（对行进行伸展），这样每行都可以有相等的长度，char将内容对准指定字符。-->
30 <p>接下来演示如何使用 "frame" 属性来控制围绕表格的边框：</p>
31 <p>表格的frame属性为box:</p>
32 <table frame="border"><tr>
33 <th>月份</th><th>消费</th></tr>
34 <tr><td>一月</td><td>$100</td></tr></table>
35 <p>表格的frame属性为above:</p>
36 <table frame="above"><tr>
37 <th>月份</th><th>消费</th></tr>
38 <tr><td>一月</td><td>$100</td></tr></table>
39 <p>表格的frame属性为below:</p>
40 <table frame="below"><tr>
41 <th>月份</th><th>消费</th></tr>
42 <tr><td>一月</td><td>$100</td></tr></table>
43 <p>表格的frame属性为hsides:</p>
44 <table frame="hsides"><tr>
45 <th>月份</th><th>消费</th></tr>
46 <tr><td>一月</td><td>$100</td></tr></table>
47 <p>表格的frame属性为vsides:</p>
48 <table frame="vsides"><tr>
49 <th>月份</th><th>消费</th></tr>
50 <tr><td>一月</td><td>$100</td></tr></table>
51 <! --frame属性无法在IE中正确地显示。除了以上示意的5个值之外，还有void（不显
52 示外边框）、lhs（显示左边的外侧边框）、rhs（显示右边的外侧边框）、border（在所有边上显示外边框）。不过
53 从实用角度出发，最好不要规定frame，而是使用CSS来添加边框样式。-->
54 </body></html>
❑ 第2～10行为如何向表格内部添加背景颜色或者背景图片。它们的实质是一样的，我们这里只介绍了背景颜色的添加，图片的添加过程与之前添加图片的步骤是一致的。只需将程序中的bgcolor去掉再增加图片位置即可。
❑ 第11～29行为align属性的介绍。该属性定义了单元格中内容的排列。其值除了left、right之外还有center、justify、char，它们分别表示居中、对行进行伸展、内容对准指定字符。
❑ 第30～54行展示的是frame属性的应用。这个属性是控制围绕表格边框的，读者在学习这个属性时需要将每个属性值对应的效果记清楚。因为这个属性值有很多可选项，这里只列了其中一部分，读者可以全部试一下，其值在注释中已经列出。
到此为止我们介绍完了HTML中的标签，因为本书的主体部分并不是HTML，所以介绍的这些标签省略了一部分，但是这些足以应付在今后开发WebGL时遇到的问题。我们在此只是介绍了其中的基础用法，所以在今后的开发中我们还应该多学习此方面的更多知识。
1.3.7 HTML5中的全局属性
在上面介绍标签时就不止一遍地说过局部属性与全局属性，局部属性在介绍标签时我们已经介绍过局部属性中比较重要的一部分了，剩下的一些不常用的局部属性不再介绍。现在讲述一下HTML中的全局属性，如表1-11所示。
表1-11 HTML全局属性
全局属性适用于HTML中的各种标签，因为这些属性在平时开发的时候会经常用到，所以我们在本节中将其集中起来，然后将每个属性详细地介绍给大家，其中有一两个没介绍是因为主流浏览器并未支持该属性。现在先来看一下图1-13所示的部分全局属性示例。
图1-13 Sample1_12全局属性应用案例效果
在本例中演示了全局属性中的一部分，因为这些属性可以在支持全局属性的标签中使用，基本为全部的标签，所以这里只是演示了其中几种标签的全局变量的使用方法，在应用时读者也可以使用别的标签进行试验。下面我们来看一下程序的开发过程。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_12.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_12</title>
3 <script type="text/javascript">
4 function change_header(){
5 document.getElementById("myHeader").innerHTML="Nice day! "; }</script>
6 <style type="text/css">
7 h1.intro {color:blue; }
8 p.important {color:red; }</style>
9 <! --此处为样式表内容，在后面对此会有介绍，这里不进行详细介绍。-->
10 <style type="text/css">
11 h1.intro1{color:blue; }
12 .important1{background-color:yellow; }</style></head>
13 <body>
14 <p>首先来演示accesskey，其实质就是为某元素设置快捷键，使其获得焦点。</p>
15 <a href="http://www.baidu.com" accesskey="b">百度（accesskey键设为b）</a><br />
16 <a href="http://www.sina.com" accesskey="s">新浪（accesskey键设为s）</a>
17 <! --请使用Alt+accesskey或者Shift+Alt+accesskey来访问带有指定快捷键的元素，一般
18 这个属性用在<a>、<area>、button>、<input>、<label>、<legend>等标签中。-->
19 <p>现在演示class属性的应用，第一个示例为单个class值，
20 第二个示例为一个标签应用多个class值</p>
21 <h1 class="intro">h1标题1演示单个class属性值</h1>
22 <p class="important">请注意这个重要的段落。:)</p>
23 <p>现在演示一下应用多个classs值的案例：</p>
24 <h1 class="intro1 important1">h1演示多个class属性，只要在声明第一个值时加上空
25 格，之后再写入值即可</h1>
26 <! --class属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过
27 JavaScript来改变带有指定class的HTML元素。-->
28 <p>现在来讲述一下规定元素是否可编辑的属性应用：</p>
29 <p contenteditable="true">这里是一段可以编辑的段落，读者可以将光标点到这里自行编辑。</p>
30 <! --需要注意的是，元素中如果未设置contenteditable，则本元素会继承其父类元素。-->
31 <p>接下来看一下规定元素内容文本方向的属性应用：</p>
32 <p dir="rtl">文本方向为从右向左！</p>
33 <! --dir属性在以下标签中无效：<base>、<br>、<frame>、<frameset>、<hr>、<iframe>,
34 <param> 以及 <script>。dir的值有rtl与ltr两个值分别为从右到左与从左到右。-->
35 <p>现在看一下隐藏属性hidden，下面有两段话，一段有隐藏属性一段没有隐藏属性：</p>
36 <p hidden="hidden">这是一段隐藏的段落。</p>
37 <p>这是一段可见的段落。上面还有一段隐藏段落，这里我们只是在做实验。</p>
38 <! --hidden属性也可防止用户查看元素，直到某些条件（比如选择了某个复选框）匹配。
39 JavaScript可以删除 hidden属性，以使此元素可见。-->
40 <h1 id="myHeader">Hello World，这里演示了id属性的应用，用JavaScript取得本
41 元素id然后改变本元素的内容。</h1>
42 <button onclick="change_header()">改变文本</button>
43 <! --id属性规定HTML元素的唯一id, id属性可用作链接锚（link anchor），
44 通过 JavaScript（HTML DOM）或通过 CSS为带有指定id的元素改变或添加样式。-->
45 <p>这里为lang属性值的演示，对于lang属性值，必须使用有效的ISO语言代码。</p>
46 <p lang="fr">Ceci est un paragraphe.</p>
47 <p lang="en">Hello, How are you? </p>
48 <! --本属性可让浏览器调整表达元素内容的方式，可以使网页只显示某种特定语言。-->
49 </body></html>
❑ 第3～12行为开发需要调用的JavaScript脚本与样式表。其基本用法在后面会有介绍，其脚本方法中的getElementById()方法为之后常用的方法，其作用是获得某个元素的id以便进行某些操作。
❑ 第14～27行为accesskey与class属性的开发过程。accesskey属性就是为元素设置快捷键，具体用法在注释中已给出，这里不做介绍。大多数时候class属性用于指向样式表中的类，在前面样式表中我们规定了相应的class的样式，可以通过JavaScript改变class值以实现一些功能。
❑ 第28～49行为contenteditable、dir、hidden、lang属性的用法。这几个属性都比较简单，所以放到了一个案例中。读者可以自己看案例代码进行学习。需要注意的是hidden隐藏属性，我们可运用程序在某些条件下可将其改为可视的这些小技巧。
上面案例为全局属性中的一部分，下面我们来介绍剩下一部分属性。在开发时或多或少都会用到样式表与开发的一些JavaScript脚本，读者在看这些部分时不必着急，因为在下面的章节中会讲到CSS。至于JavaScript，本书开发的重点就是这部分，在以后的章节中我们会介绍这些内容。
图1-14所示为剩下的属性代码运行效果，看完了图后我们便发现本部分案例的内容并不多，但是这部分内容中的脚本有点繁杂，在开发时不进行重点讲述，因为这些东西会在下面的章节中专门介绍。读者看到这部分时可先跳过，主要看属性的开发。
图1-14 Sample1_13全局属性应用案例效果
代码位置：随书源代码/第1章目录下的HTML5/Sample1_13.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_13</title></head>
3 <style type="text/css">
4 #div1 {width:350px; height:70px; padding:10px; border:1px solid #aaaaaa; }
5 </style><script type="text/javascript">
6 function allowDrop(ev){
7 ev.preventDefault(); }
8 function drag(ev){
9 ev.dataTransfer.setData("Text", ev.target.id); }
10 function drop(ev){
11 var data=ev.dataTransfer.getData("Text");
12 ev.target.appendChild(document.getElementById(data));
13 ev.preventDefault(); }</script>
14 <body>
15 <p>现在演示元素是否可拖动的属性draggable，下面一段话可以拖动到文本域中：</p>
16 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br />
17 <p id="drag1" draggable="true" ondragstart="drag(event)">
18 这是一段可移动的段落。请把该段落拖入上面的矩形内。</p>
19 <! --在head部分定义了div的样式，在下一节中会有专门的关于层叠样式表的讲述。
20 ondrop、ondragover、ondragstart为标签中的事件属性，它们表示元素被拖动时运行的脚本、当元素在
21 有效拖放目标上正在被拖动时运行的脚本、在拖动操作开端运行的脚本。这些事件属性表示当触发
22 这些事件时，会调用相应的JavaScript脚本方法，这些方法在head部分中已经写好。-->
23 <p>现在看一下style属性的应用：</p>
24 <h1 style="color:blue; text-align:center">这里为h1标题</h1>
25 <p style="color:red">这里为一个段落</p>
26 <! --style属性规定元素的行内样式（inline style）, style属性将覆盖任何全局样式的设定，-->
27 <p>tabindex属性规定元素的Tab键控制次序，1是第一个</p>
28 <a href="http://www.baidu.com" tabindex="2">Baidu</a><br />
29 <a href="http://www.sina.com" tabindex="1">Sina</a><br />
30 <a href="http://www.w3school.com.cn/" tabindex="3">W3school</a>
31 <! --请尝试使用键盘上的 "Tab" 键在链接之间进行导航。-->
32 <p>下面将演示title属性的使用，title属性规定了元素的额外信息。</p>
33 <abbr title="World Wide Web Consortium">W3C</abbr> was founded in 1994.
34 <! --这些信息通常会在鼠标移到元素上时显示一段工具提示文本，title属性常与form
35 以及a元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是abbr和
36 acronym元素的必需属性。-->
37 <p contenteditable="true" spellcheck="true">这里是可编辑的段落，请尝试编辑文本。</p>
38 <! --spellcheck属性规定是否对元素进行拼写和语法检查。-->
39 </body></html>
❑ 第3～13行为本部分案例的样式表设置与需要的JavaScript脚本。需要说明一下脚本方法是如何调用的。在下面body的标签中我们用到了onload、ondrop等事件，它们的意思在注释中已经给出，在这些事件发生时会调用相应的方法。
❑ 第15～31行为是否可拖动属性、style属性与tabindex属性的应用。事件中调用的方法在这里不介绍，style属性与样式表会在下一节进行介绍、tabindex属性规定了Tab键的控制顺序，在程序里我们设置好值，在应用中按Tab键使用即可。
❑ 第32～39行为title属性的应用。它与title标签不同，在上面示例中我们将简写的内容作为title值写入，这些信息通常会在鼠标移到元素上时显示一段工具提示文本，title属性常与form以及a元素一同使用，以提供关于输入格式和链接目标的信息。
到此为止，我们便介绍完HTML中的全局属性了。其实到现在我们就可以开发出界面精美的网页了，但是还有一些功能实现不了，因为还没有介绍事件，通过事件的发生来调用自行开发的脚本便可以达到自己想要的效果了。
1.3.8 HTML5中的事件
在HTML 4中增加了使事件在浏览器中触发动作的功能，比如用户单击元素时启动JavaScript，页面加载完毕后需要执行哪段代码，元素失去焦点时运行哪段脚本，鼠标单击或者移动时运行什么脚本等。在HTML5中又新加了不少新的事件，我们来看一下这些事件。
表1-12所示为部分事件及其描述，接下来先看一下这些事件的案例开发效果图，如图1-15所示。因为本部分案例是在某些事件发生时才会触发的，所以效果图中不能显现出所有事件的运行效果，读者可自己去验证这些事件。
表1-12 HTML5中的事件
图1-15 Sample1_14全局属性应用案例效果
我们这里只演示一小部分事件，意在向读者介绍事件的基本用法，读者在日后的开发中肯定会遇到其他事件或者应用到其他事件。这里的示例仅为冰山一角，大家还需要自行查阅一些资料以了解事件属性。接下来看一下图1-15所示的案例开发过程。
代码位置：随书源代码/第1章目录下的HTML5/Sample1_14.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_14</title>
3 <script>
4 function printmsg(){ //文档打印之后执行的脚本方法
5 alert("此文档现在正在打印！"); }
6 function load(){ //页面加载完成后需要执行的脚本方法
7 alert("页面已加载！"); }
8 function showMsg(){ //浏览器窗口尺寸发生改变时执行的脚本方法
9 alert("您已改变浏览器窗口的尺寸！"); }
10 function upperCase(){ //元素失去焦点时执行的脚本方法
11 var x=document.getElementById("fname").value;
12 document.getElementById("fname").value=x.toUpperCase(); }
13 function checkField(val){ //在元素值改变时执行的脚本
14 alert("输入值已更改。新值是：" + val); }
15 function copyText(){ //单击鼠标时执行的脚本
16 document.getElementById("field2").value=document.getElementById("field1").value; }
17 function mouseDown(){ //鼠标按下时执行的脚本
18 document.getElementById("p1").style.color="red"; }
19 function mouseUp(){ //鼠标抬起时执行的脚本
20 document.getElementById("p1").style.color="green"; }
21 </script></head>
22 <body onafterprint="printmsg()" onload="load()" onresize="showMsg()">
23 <p>在本部分案例中实验事件执行脚本时只写了alert，这里只是一个示例，
24 在实际开发中应该在对应部分开发出需要的代码。</p>
25 <h1>请尝试打印此文档，这时候会有提示出现。</h1>
26 <p>onbeforeprint事件与onafterprint事件的用法一样，一个是在打印之
27 前执行脚本，一个是在打印之后执行脚本。</p>
28 <! --IE和Firefox支持onafterprint属性。在IE中，
29 onafterprint属性在打印对话框出现之前而不是之后。-->
30 <p>body元素中还有一个onload事件，该事件是在页面加载完毕后执行脚本。</p>
31 <p>onresize事件为当浏览器窗口改变时执行的脚本，本案例也进行了演示，
32 读者可以改变浏览器窗口大小看一下结果。</p>
33 <p>请随意输入一段英文字符，然后把焦点移动到字段外(鼠标单击输入框之外):</p>
34 请随意输入一段英文字符，在本元素失去焦点时小写字母会变为大写字母：
35 <input type="text" name="fname" id="fname" onblur="upperCase()">
36 <p>请修改输入字段中的文本，然后在字段外单击以触发onChange。</p>
37 请输入文本：<input type="text" name="txt" value="Hello"
38 onchange="checkField(this.value)">
39 <p>当按钮被单击时触发函数。此函数把文本从Field1复制到Field2中。</p>
40 Field1: <input type="text" id="field1" value="Hello World! "></br>
41 Field2: <input type="text" id="field2"><br><br>
42 <button onclick="copyText()">复制文本</button>
43 <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
44 请单击文本！当鼠标按钮在段落上被按下时触发mouseDown() 函数，此函数把文本
45 颜色设置为红色。在鼠标按钮被释放时触发mouseUp() 函数，mouseUp() 函数把文本
46 颜色设置为绿色。</p>
47 </body></html>
❑ 第3～21行为事件触发时需要执行的JavaScript脚本。本部分的脚本方法只有alert一句话，丝毫没有技术含量，因为这里只是单纯地告诉读者事件运行时要执行这段代码，读者可根据自己的要求进行开发。
❑ 第22～32行为body元素的一部分。在body元素的起始标签中我们声明了onafterprint、onload、onresize 3个事件，这3个事件何时触发在注释中已经介绍，我们在前面声明的脚本方法在相应的事件发生时执行。
❑ 第33～47行为onblur、onclick、onmousedown、onmouseup几个事件的应用。除失去焦点时执行的脚本事件以外，剩下的几个事件都与鼠标有关系，但是这只是其中一小部分，还有很多关于鼠标的事件我们未介绍，应用这些事件可以完成很多事情。
到此为止，HTML事件便介绍完毕了。因为篇幅有限，所以很多事件没有列出来也没有进行用法解释，读者若是需要这方面的内容，则可以在网上查找相关资料。事件部分并不困难，它的精髓在于JavaScript脚本的开发过程，我们在后面的章节中会将其介绍给大家。