text plain/html与text plain/plain有什么区别
点击联系发帖人
时间：2017-08-03 04:46
HTML和Plain Text的区别_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
HTML和Plain Text的区别
请问HTML和Plain Text这两种在e-mail中有什么区别哦？各有什么好处？
前者支持HTML语法 后者是纯文本 也就是说前者可以把邮件弄成网页一样 可以添加链接 图片 动画 框架等等 后者就是个记事本要说好处 前者好看啊 还能插入多媒体资料 但需要接收方同样支持HTML 否则就会看到一堆代码 并且代码越多 邮件自然也就越大
采纳率：43%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包LINUX题目，进来看看，先给100分，答对加分哦。。你懂的！！哈~~~-
LINUX题目，进来看看，先给100分，答对加分哦。。你懂的！！哈~~~-
win10和deepin linux双系统装的时候出问题 先装的win10,然后装linux装到一 ：
linux 系统数据是坏的
linux写脚本,需要ls只显示前10个文件,怎么实现? ：
ls -1 | sort -u | head -10,建议看《linux就该这么学》一书,命令熟记于...
Macbook 之前把苹果系统格了装了Linux,现在可以把Linux格了直接装win10吗? ：
苹果系统的镜像没有iso的,应该都是dmg格式镜像,当然有些高手自己用dmg做了iso的另当别论,苹...
linux关机命令-t参数,能否给个实例?如10秒后关机。 是否是 shutdown -h -t 1... ：
shutdown -h 10 shutdown -h now 前者是,10 秒后,关机 后者是立刻关...
为什么我虚拟机的linux系统IP是10.0.2.15 ：
因为你的虚拟机选择的是nat联网方式,将主机虚拟成10.0.2.1然后随机给虚拟机一个10.0.2....
你好!戴尔台式机主系统win10,再装linux双系统的时候会自动弹出enter power ：
电脑安装双系统必须有个基本过程,那就是必须先安装低版本的系统,然后安装高版本的系统,你的操作过程不允...
Linux怎么切换回window10 ：
您好,爱应用为您解答: 你的Win7 Ubuntu14.10双系统是先装好的Win7,然后再除了系统...
如何装linux win10双系统 ：
具体方法如下: 不管您要安装哪种Linux系统,首先给硬盘划分一个空白分区。 1、准备LinuxMi...
我先有win10然后安装Linux的,装Linux分区的时候分了一个efi分区然后把Linux ：
你是说把linux给装到efi分区了?老天,你哪能往那里面装系统?别说linux了,连windows...
win10和linux怎么解决双系统引导问题 ：
安装参考(我用的LinuxMint): 1、准备 LinuxMint启动盘启动电脑,进入LinuxL...db:: 3.31::Transport Agent Text To HTML Conversion Problem 9k
Widget settings form goes hereHTML 5开发基础—进入WebGL 世界的第一道坎 - 异步社区
HTML 5开发基础—进入WebGL 世界的第一道坎
第1章 HTML5开发基础——进入WebGL世界的第一道坎
本书是介绍WebGL技术的一本书，但是在进入WebGL世界之前我们需要迈过HTML门槛，因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了，那么开发WebGL就是一件遥不可及的事情。
那么到底何为HTML呢？HTML（HyperText Markup Language，超文本标记语言）诞生于20世纪90年代初，其为标准通用标记语言下的一个应用。其中“超文本”是指页面内可以包含图片、链接、程序等非文字元素。其结构由“头”与“主体”两部分组成。大家先来看一下HTML的发展背景。
1.1 HTML的发展简史
1.1.1 HTML的由来
作为一个组织或者个人在万维网上放置开始点的页面称为主页，主页中通常包括指向其他相关页面的超级链接。所谓超级链接，就是一种统一资源定位器（URL）指针，通过激活它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站。超文本标记语言（HTML）是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口等），创造出功能强大的网页。
1.1.2 HTML的历史
现在业界常常习惯于用数字来描述HTML的版本（如HTML5），但是最初的时候并没有HTML1，而是由IETF团队于1993年发布的一个草案，并不是成形的标准。两年之后，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC 1866发布的。
有了以上的两个历史版本，HTML的发展可谓突飞猛进。1997年，HTML3.2成为W3C的推荐标准。之后在1998年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。HTML5的第一份正式草案已于日公布，仍需要继续完善。表1-1所示为具体时间线。
表1-1 W3C HTML规范和时间线
时 间 线
HTML 5（草案）
HTML 5（正式推荐标准）
上面简述了一下HTML的发展历史，其诞生至今已过20多年，限于篇幅这里只是简单介绍一下，在很多专门介绍HTML的书或者网站上都会有详细的介绍，本书的重点并不是这些，所以简单一带而过。
1.2 HTML5概述
HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代丰富Web内容的相关技术的总称。其中最重要的三项技术是HTML5核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。
HTML5核心规范定义了用以标记内容的元素，并明确其含义。CSS可用于控制标记过的内容呈现在用户面前的外貌。JavaScript则可以用来操纵HTML文档的内容以及响应用户的操作，此外要想使用HTML5新增元素的一些为编程目的设计的特性，也需要用到JavaScript。
看不懂上面所说的内容不要紧，在下面几节中将较为详细地介绍HTML元素、CSS和JavaScript。
1.2.1 HTML5的新标准
为了应对漫长的标准化过程以及标准落后于常见用法的情况，HTML5及其相关技术是作为一系列小标准制定的，其中一些标准的内容只有几页，涉及的只是一个高度细化的方面。当然，也会有一些标准的内容有几百页，包含了相关功能的几乎所有方面。
这样做有利也有弊，好处是可以加快标准制定步伐；主要的弊端在于难以全面掌握制定中的各个标准的情况以及这些标准之间的关系，技术规范的质量也有所下降。有些标准中存在着一些歧义，致使浏览器中的实现出现了不一致的情况。
最大的不足之处要算没有一条可用来评估HTML5达标情况的基准线。W3C公布过一个正式的HTML5徽标，如图1-1所示，但是它并不代表对HTML5标准及相关技术的全面支持。
▲图1-1 W3C的正式HTML5徽标
1.2.2 HTML5引入的新特性
“我们想做的事情已经不再是通过浏览器观看视频或收听音频，或者在一部手机上运行浏览器。我们希望通过不同的设备，在任何地方都能够共享照片、网上购物、阅读新闻，以及查找信息。虽然大多数用户对HTML5和开放Web平台并不熟悉，但是它们正在不断改进用户体验”。这是日W3C的HTML工作组正式发布HTML5的正式推荐标准（W3C Recommendation）时万维网联盟创始人蒂姆·伯纳斯·李（Tim Berners-Lee）所说的一段话，这意味着新的标准带来的改变是巨大的，我们来看一下HTML 5引入的新特性。
HTML5的一大改进就是支持在浏览器中直接播放视频和音频文件。这是W3C对插件风靡现象的一种反应。原生多媒体支持再结合其他HTML特性可望大有作为。
HTML5最大的变化之一是添加了“canvas”元素，这是对插件风靡现象的另一反应，它提供了一个绘图平面，开发人员可以用它来完成一些绘制。使用“canvas”就必须用到JavaScript。
HTML5引入了一些用来分开元素的含义和内容呈现方式的特性和规则。这是HTML5中的一个重要概念，它反映出制作和使用HTML内容的方式的多样性。同时也给开发者带来一些负担，这是因为开发者需要先标记内容然后再定义其呈现方式。
1.2.3 HTML5现状
HTML5正式推荐标准虽然已经推出，但其标准还仍在继续被改动，虽然其中有一些调整，但是变化不大。这意味着本书现在所讲的内容与今后新出的标准有出入，但是标准正式出炉还需要等好些年，最终版本与现在的版本差别应该不会很大。
浏览器支持与否是决定HTML5命运的一项至关重要的因素。各浏览器越快统一对标准的支持，HTML5 标准落到实处也就越快。从图1-2中可以看出在2012年时全球浏览器市场分布，那些支持HTML5的浏览器的用户量节节攀升，不支持的浏览器的用户量却在逐步萎缩。
▲图1-2 年全球浏览器市场分布
最流行的那些浏览器基本都已实现了许多HTML特性。本书示例演示效果时所用浏览器是谷歌的Chrome或者Mozilla的Firefox。从国际上看，通过对比各独立内核浏览器（IE、Firefox、Chrome、Safari、Opera）发现，各大浏览器对标准的支持都有显著的提高。
移动平台上主流的浏览器（iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0）目前对标准的支持度均高于60%，其中表现居首的是Chrome for Android，而支持度相对较低的Android Browser的支持度也在60%以上，如图1-3所示。
▲图1-3 移动浏览器对HTML5的支持
上述内容虽然不是很详细，但是介绍了HTML的基本知识。由于本书的重点不在这方面，限于篇幅，只能简要介绍。若有读者想详细了解这些内容，可以找一些专门讲解HTML的资料或者网站查阅。
1.3 初识HTML5
如果想要掌握WebGL，那么开发人员还需要了解一些HTML的内容，这是WebGL的基础，因为WebGL是在网页里展示的，那么其必然是基于HTML开发的。所以先来给大家介绍一下HTML的基本内容。
HTML是一种标记语言，其标记以应用于文档内容（例如文本）的元素为其存在形式。现在HTML的标准为HTML5，在下面介绍各种HTML5的标签时，我们会按照其作用去划分，增加读者阅读的条理性。在讲解到一些比较重要的标签时都会有相应的小案例供大家理解。
1.3.1 HTML5标签简介
HTML5中的一大变化是基本信念方面的：将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这的确合乎情理。HTML元素负责确定文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。
元素由三部分组成，其中有两部分称为标签：开始标签和结束标签。夹在两个标签之间的是元素的内容，两个标签与它们之间的内容构成了一个元素。从本节开始我们就来介绍各个标签的作用，并结合案例来介绍用法与注意事项。
1.3.2 基础标签
在介绍标签时，我们知道标签由开始标签与结束标签组成。例如&html&为开始标签，&/html&为结束标签。在标签之间写的是元素的内容部分。开始标签中有时会有一些属性，这些属性声明了标签的个体属性。下面如果有需要特别注意的局部属性时，我们都会标注出来。
与局部属性相对应的就是全局属性，这部分内容在下面小节中会有详细的介绍，每段都会有详细的代码与注释供读者参考。接下来我们先来看标签中的基础标签都有哪些，在表1-2～表1-10中我们列出了这些标签及其作用与一些标签中的局部属性。
表1-2 基础标签及作用
&!DOCTYPE&
定义文档类型
定义HTML文档
定义文档的标题
定义文档的主体
定义文本标题
定义简单的折行，即换行
定义水平线
表1-2所示为基础标签的描述。接下来我们将这些标签全部应用到一个案例中，本案例中只是展示了这些标签的基本应用。其中还有一些标签有其特有的属性，在这里并没有具体列出来，但是这些属性的应用相当简单，读者可以自行查阅资料更改这些代码进行试验。
代码位置：见随书源代码/第1章目录下的HTML5/Sample1_1.html。
&!DOCTYPE html&
&html&&head&&title&这里为标题，基础标签案例&/title&&/head&
此处为主体部分
&h1&这里为文本标题1&/h1&
&h2&这里为文本标题2&/h2&
&h3&这里为文本标题3&/h3&
&h4&这里为文本标题4&/h4&
&h5&这里为文本标题5&/h5&
&h6&这里为文本标题6&/h6&
&p&这里为段落，本例主要为向读者展示先前介绍的标签的用法，这些标签为基本标签
&hr&&/br&这里演示在段落中的换行&hr&&/br&这里接着上面的段落。&/p&&!--此处为html文档注释
本案例介绍了基础标签的一些内容--&
此处主体结束
&/body&&/html&
第1、2行为指示浏览器关于页面使用哪个 HTML 版本进行编写的指令，并声明了标题。其中&!DOCTYPE html&声明必须是html文档的第一行。
第5～10行为文本标题示例，类似文档中的分级标题，看图1-4所示的效果图，理解会更加深刻。
第3～15行为html文档的主体部分，其中向大家展示了标题&h1&～&h6&、段落标签&p&、换行标签与下划线标签&br&和&hr&的基本用法。
下面我们来看一下案例效果。本案例以及本书中的案例都是在谷歌的Chrome浏览器或者Firefox浏览器上运行的，读者也可以自行选择合适浏览器运行案例，选择时需要注意浏览器是否支持HTML5特性。图1-4所示为本案例的效果。
▲图1-4 Sample1_1案例效果示例图
1.3.3 格式标签
对基础标签有了基本认识后，那么剩下的标签在用法上与其并无太多差异，只是在功能上有所不同。下面我们来看一下格式标签及其作用，如表1-3所示，表中列出了格式标签都有哪些并给出了对它们的描述。
表1-3 格式标签及作用
定义文档作者联系信息
定义粗体文本
定义文本的文本方向
定义文字方向
定义大号文本
&blockquote&
定义长的引用
定义居中文本
定义计算机代码文本
定义被删除文本
定义定义项目
定义强调文本
定义斜体文本
定义被插入文本
定义键盘文本
定义有记号的文本
定义预定义范围内的文本
定义预格式文本
&progress&
定义任何类型的任务进度
定义短的引用
定义ruby注释的解释
定义ruby的注释
定义加删除线的文本
定义计算机代码样本
定义小号文本
定义加删除线文本
定义上标文本
定义下标文本
定义打字机文本
定义下划线文本
定义文本的变量部分
定义文本的字体、尺寸和颜色
定义若浏览器不支持&ruby&元素时显示的内容
定义语气更加强烈的强调文本
上面列出的这些格式标签在平时用到得比较多，所以会用一个小案例对每个标签的用法进行介绍。但是这些案例仅仅是向读者展示了这些标签最基本的用法，这里还没有讲到属性，所以只得介绍最简单的部分，大家现在只需将每个标签的基本作用记住即可。
接下来我们先来看一下格式标签里一些比较简单的标签的用法，由于每个标签的例子都比较简短，在主体部分每个都是几行或者一两行代码，所以下面的案例是将几个标签合在一起写的一个简单案例，读者在阅读时注意区分即可。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_2.html。
&!DOCTYPE HTML&
&!--本案例演示了格式标签的一部分标签使用的小案例，剩下一部分会在下面给出--&
&html&&body&
这里演示的为缩写示例：The &abbr title="People's Republic of China"&PRC&/abbr&
was founded in 1949.
&p&这里演示加粗文本示例 &b&此处加粗&/b&.&/p&
&!--根据HTML5规范，粗体为最后的选择，没有其他标签适用时才会
选择，应先从标题、被强调文本、标记文本等标签中选择--&
&!--此处为bdi标签，设置一段文本使其脱离父元素的文本方向设置--&
&li&User &bdi&hrefs&/bdi&: 60 points&/li&
&li&User &bdi&jdoe&/bdi&: 80 points&/li&
&li&User &bdi&tom&/bdi&: 90 points&/li&
&p&接下来示例的为&bdo&标签，其中可以通过定义dir属性来覆盖默认文本方向&/p&
&bdo dir="rtl"&&!--dir的值有rtl右向左与ltr左向右两种值--&
现在展示的是从右向左的文本方向
&/bdo&&br/&
&!--下面几个标签一般还会搭配着id、class等一些属性使用，这些属性在下面会有介绍--&
&big&这里演示&big&标签示例&/big&&br/&
&em&这里演示&em&标签示例&/em&&br/&
&i&这里演示倾斜标签&i&示例&/i&&br/&
&small&这里演示&small&标签&/small&&br/&
此处将演示下标标签用法
&sub&subscript&/sub&&br/&
此处将演示上标标签用法
&sup&superscript&/sup&&br/&
&/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-5所示为上述程序的效果图。
▲图1-5 Sample1_2案例效果示例图
对于上述标签，从外观上就能够区分清楚是什么标签，也便于读者的理解记忆。下面我们来看看另外一些格式标签的效果图与应用，本部分除了介绍标签之外，我们也介绍了一些标签相应的属性，图1-6所示为表1-3中剩余的一些标签的使用效果图。
对于图1-5与图1-6中所示文本样式，如果只是想要样式，可以用CSS做出更好的与更多的效果，在下面的小节中我们也会介绍这方面的知识。接下来我们来看一下Sample1_3案例的开发过程，本案例中使用的也是格式类中的一部分标签。
▲图1-6 Sample1_3案例效果示例图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_3.html。
&html&&body&
我们来看一下引用、长引用、短引用标签的示例：
&blockquote&
现在示例为一个长引用示例，之间的所有文本都会从常规文本中分离出来，经常会在左、右两边&br/&
进行缩进（增加外边距），而且有时会使用斜体。也就是说，长引用拥有它们自己的空间。
&/blockquote&
&!--&cite& 标签通常表示它所包含的文本对某个参考文献的引用，把指向其他文档的引用分离出来，
尤其是分离那些传统媒体中的文档，如书籍、期刊，等等。如果引用的这些文档有联机版本，
还应该把引用包括在一个 &a& 标签中，从而把一个超链接指向该联机版本。--&
现在进行引用示例讲解，引用的文本将以斜体显示。它的一个隐藏功能是
它可以使你或者其他人从文档中自动摘录参考书目
&/cite&&br/&
&!--长引用与短引用可以用cite属性定义出引用的来源--&
&q&现在为一个短引用示例，短引用中插入了双引号引导。&/q&
&!--短引用与长引用是一样的，它们是在显示上有所不同。如果需要从文本中
分离出比较长的内容用长引用就好。--&
&p&下面介绍几种显示计算机代码的标签&/p&&br/&
&code&此处示例为计算机代码标签&/code&&br /&
&!—熟悉编程的读者都知道计算机代码与文本的格式是不同的，这样方便了读者寻找计算机代码片段--&
&kbd&此处为从键盘上键入文本的标签示例&/kbd&&br /&
&!--该标签用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。--&
&tt&这里演示的宽体字标签示例&/tt&&br /&
&samp&这里为&samp&标签示例&/samp&&br /&
&!--该标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，
对它们加以强调的极少情况下，
才使用这个标签。--&
&var&此处示例定义变量标签&/var&&br /&
&!--本标签是计算机文档中应用的另一个小窍门，这个标签经常与 &code& 和 &pre& 标签一起使用，
用来显示计算机编程代码范例及类似方面的特定元素。--&
&dfn&现在示例的是可标记那些对特殊术语或短语的定义标签&/dfn&&/br&
&!--尽量少用本标签为妙。作为一种通用样式，尤其在技术文档中，应该将它们与普通文本分开，这样
读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。--&
&p&接下来我们再来介绍一下预定义格式文本&/p&
&pre&&!--该标签很适合显示计算机代码，所以本标签经常与&code&标签一起使用。
其中的width属性定义了每行最大字符数，一般为40、80、132。--&
这是预格式文本。
&!--需要注意的是制表符（tab）在 &pre& 标签定义的块当中可以起到应有的作用，每个制表符占据
8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用
&pre& 标签格式化的文档段中使用空格，可以确保文本处于正确的水平位置。--&
&p&下面显示的标签定义已知范围或分数值内的标量测量：&/p&
&meter value="3" min="0" max="10"&3/10&/meter&&br&
&meter value="0.6"&60%&/meter&&br/&
&!--该标签一般用于查询磁盘用量、结果的相关性，不应用于指示进度（在进度条中）。标记进度条，
应使用 &progress& 标签。Internet Explorer 不支持&meter&标签。--&
接下来我们介绍进度条标签progress：&progress value="22" max="100"&
&/progress&&!--该标签中的max属性表示任务一共需要完成多少工作，value表示已经完成了多少任务。--&
&!--Internet Explorer 10, Firefox, Opera, Chrome以及Safari 6支持&progress&标签。--&
&/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 符号实体及对应编号
显 示 结 果
实 体 名 称
实 体 编 号
&（IE不支持）
需要注意的是，实体名称对大小写敏感，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-7所示。
▲图1-7 Sample1_4格式标签案例与表单标签效果示例图
看完效果图以后我们不难发现，这些标签同之前讲的标签在外观表示形式方面有所差别，这样便于大家的理解记忆。通过接下来的学习，我们将学会如何在网页中制作出基础表单与多种多样的特效形式。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_4.html。
&html&&body&
&p&这里为删除线标签示例——有 &del&二十&/del& &ins&十二&/ins& 件。&/p&
&!--大多数浏览器会改写为删除文本和下划线文本，一些老式的浏览器会
把删除文本和下划线文本显示为普通文本--&
&p&这里为标记标签示例：出门记着带 &mark&钥匙&/mark&&/p&&!--此标签为HTML5新加的标签--&
&p&这里为时间标签示例：我在 &time datetime=""&国庆节&/time& 会放假。&/p&
&!--本标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的--&
&p&从现在开始我们就要进入表单类标签的学习，在这里我们将学到日常生活中在网页世界中
经常见到与用到的东西。&br/&
我们首先将要学习的是form标签，下面将是form标签示例：&/p&
&form action="/example/html/form_action.asp" method="get"&
&p&姓氏: &input type="text" name="姓氏" /&&/p&
&p&名字: &input type="text" name="名字" /&&/p&
&input type="submit" value="Submit" /&
&/form&&!--由于本部分涉及服务器方面的知识，但是这里只是在介绍关于HTML的基础内容，所以
便不叙述服务器方面知识，想了解此方面内容的读者应当找一些专业讲解此方面内容的书籍资料来学习。--&
&p&以上程序示例了一个基本的form标签如何使用，接下来我们分步来看一下文本域、密码域、复选框、单
选按钮。&/p&
&form&&p&现在为文本域的创建示例：&/p&
名：&input type="text" name="名"&&br /&
姓：&input type="text" name="姓"&
&/form&&!--同上面程序一样，input标签的type属性为text时即为文本域--&
&form&&p&现在我们来看密码域的创建过程，在输入密码时浏览器将会用其他符号代替密码&/p&
用户：&input type="text" name="用户"&&br /&
密码：&input type="password" name="密码"&
&/form&&!--与文本域类似，将input标签的type属性改为password即为建立了一个密码域--&
&form&&p&现在我们来看复选框的创建过程&/p&
我喜欢步行：&input type="checkbox" name="步行"&&br /&
我喜欢汽车：&input type="checkbox" name="汽车"&
&/form&&!—将input标签的type属性改为checkbox即创建了复选框--&
&form&&p&现在我们来学习单选按钮的创建过程&/p&
男性：&input type="radio" checked="checked" name="Sex" value="male" /&&br /&
女性：&input type="radio" name="Sex" value="female" /&
&/form&&!--当用户单击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态--&
&/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 表单类标签及其描述
&optqroup&
定义选择列表中相关选项的组合
定义输入控件
定义输出的一些类型
定义生成密钥
定义供用户输入的HTML表单
&textarea&
定义多行的文本输入控件
定义&fieldset&元素的标题
&fieldset&
定义围绕表单中元素的边框
定义选择列表（下拉列表）
定义&input&元素的标注
&datalist&
定义下拉列表
定义选择列表中的选项
看了上一个程序中表单标签的基本用法后，再结合表1-6所列出的标签，读者应该有更深刻的体会。下面我们将对剩下的标签用法进行介绍。由于本部分的标签都会有几个属性，在程序只介绍一下用到的属性，以后我们会对剩下的属性进行介绍。
现在大家首先来看一下表单标签剩下的那些未介绍的标签的开发过程，图1-8所示为通过表单标签做出来后的基础版的效果图。因为本案例需要对多个标签进行介绍，所以在视觉上便会显得有些杂乱，读者在阅读时应该将每个标签与图对应着看，效果会更好。
▲图1-8 Sample1_5效果示例图
看完了效果图后我们不难发现，上面所介绍的是我们在实际中常用的一些控件，相信读者在心中肯定跃跃欲试，想要掌握这些控件的实现技术。现在我们就来介绍这些控件的开发过程，其实原理与上面介绍过的标签开发无异，开发起来并不困难。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_5.html。
&html&&body&
&p&现在示例下拉列表，您喜欢的汽车牌子：
&form&&select name="汽车"&
&option value="沃尔沃"&沃尔沃&/option&
&option value="奔驰"&奔驰&/option&
&option value="菲亚特"&菲亚特&/option&
&option value="奥迪"&奥迪&/option&
&/select&&/form&&/p&
&p&现在示例有预设值的下拉列表，您喜欢的汽车牌子为：
&form&&select name="汽车"&
&option value="沃尔沃"&沃尔沃&/option&
&option value="奔驰"&奔驰&/option&
&option value="菲亚特"&菲亚特&/option&
&option value="奥迪" selected="selected"&奥迪&/option&
&/select&&/form&&/p&
&!--上面为大家演示了两种下拉列表，第一种没有预设值，
第二种多了一个selected属性即设定预设值--&
&p&这里将要给大家演示多行输入文本&/p&
&textarea rows="10" cols="30"&
Textarea标签定义多行的文本输入控件，其中文本的字体默认为等宽字体。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是
使用 CSS 的 height 和 width 属性。&/textarea&
&!--在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
可以通过wrap属性设置文本输入区内的换行模式--&
&p&下面我们将要介绍按钮标签：在 button 元素内部，您可以放置内容，
比如文本或图像。这是该元素与使用&input&元素创建的按钮之间的不同之处&/p&
&button type="button"&按钮1&/button&
&form&&input type="button" value="按钮2" /&&/form&
&!--需要注意的是请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，
而其他浏览器中（包括 W3C 规范）的默认值是 "submit"--&
&!--如果在 HTML 表单中使用&button&元素，不同的浏览器会提交不同的值。Internet Explorer
将提交 &button& 与 &button/& 之间的文本，而其他浏览器将提交 value 属性的内容。
请在 HTML 表单中使用 &input& 元素来创建按钮--&
&p&接下来我们来看一下围绕数据的&fieldset&标签：如果
浏览器没有显示边框，则为浏览器版本老旧造成的&/p&
&form&&fieldset&&legend&健康信息&/legend&
身高：&input type="text" /&
体重：&input type="text" /&
&/fieldset&&/form&&!--&legend&标签定义&fieldset&标签的标题--&
&!--当一组表单元素放到 &fieldset& 标签内时，浏览器会以特殊
方式来显示它们，该标签没有必需或者唯一的属性--&
&p&下面我们来介绍元素组合选项标签&optgroup&:&/p&
&select&&optgroup label="美国产的车"&
&option value="ford"&福特&/option&
&option value="chevrolet"&雪佛兰&/option&
&/optgroup&&optgroup label="德国产的车"&
&option value="mercedes"&奔驰&/option&
&option value="audi"&奥迪&/option&
&/optgroup&&/select&&!--&option&标签定义下拉列表中一个项目，
没有结束标签，常与select一起使用。&optgroup& 元素用于组合选项。当您使用一个长的
选项列表时，对相关的选项进行组合会使处理更加容易--&
&p&接下来我们看到是&output&标签的使用，&output&标签定义不同类型的输出&/p&
&form oninput="x.value=parseInt(a.value)+parseInt(b.value)"&0
&input type="range" id="a" value="50"&100
+&input type="number" id="b" value="50"&
=&output name="x" for="a b"&&/output&&!--需要注意的是在IE浏览器中不支持这个标签--&
&/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&标签的属性值及其描述
accept-charset
charset_list
规定服务器可处理的表单数据字符集
当提交表单时向何处发送表单数据
autocomplete
规定是否用表单的自动完成功能
下面会有介绍
规定在发送表单数据之前如何对其编码
规定用于发送form-data的HTTP方法
规定表单的名称
novalidata
novalidata
如果使用该属性，则提交表单时不进行验证
_blank/_self/_parent/_top/framename
规定在何处打开action URL
表1-7介绍了&form&标签在HTML 5中的属性，但是这部分都得结合服务器使用。由于篇幅问题我们并没有讲述服务器的知识，有兴趣的读者可以自己查阅这方面的资料，结合着本节介绍的属性来实践。属性是在开始标签中使用的，上面的每个例子中都有标签属性的使用。
表1-7中，我们在介绍&enctype&标签时没有介绍其值，现在我们来看一下。application/x-www-form-urlencoded：在发送前编码所有字符，为该属性默认值，multipart/form-data：在使用包含文件上传控件的表单时必须使用该值，text/plain：编码时空格转换为“+”号，不对特殊字符编码。
通过前面的案例学习过程我们发现，&input&标签及其属性的用法极其繁多，并且那只是使用了一个type属性所带来的效果。接下来我们来看一下&input&标签的其余属性，如表1-8所示。
表1-8 &input&标签的属性值及其描述
规定通过文件上传来提交的文件类型
定义图像输入的替代文本
autocomplete
规定是否使用输入字段的自动完成功能
规定输入字段在页面加载时是否获得焦点
规定&input&元素首次加载时应当被选中
当&input&元素加载时禁用此元素
规定输入字段所属的一个或多个表单
覆盖表单的action属性
formenctype
下面有介绍
覆盖表单的enctype属性
formmethod
覆盖表单的method属性
formnovalidata
formnovalidata
覆盖表单的novalidata属性
formtarget
同表单的target属性值
覆盖表单的target属性
定义&input&字段的高度
datalist-id
引用包含输入字段的预定义选项的datalist
number/data
规定输入字段的最大值
规定输入字段中的字符的最大长度
number/data
规定输入字段的最小值
如果使用该属性则允许使用一个以上的值
field_name
定义&input&元素的名称
regexp_pattern
规定输入字段的值的模式或格式
placeholder
规定帮助用户填写输入字段的提示
规定输入字段为只读
指示输入字段的值是必需的
number_of_char
规定输入字段的宽度
定义以提交按钮形式显示的图像的URL
规定输入字的合法数字间隔
之前的示例中已包含全部的值
规定&input&元素的类型
规定&input&元素的值
规定&input&字段的宽度
表1-8所示的这些属性即为&input&元素的属性，其中包含了HTML5中新增的许多属性，接下来我们便来看一下这些属性的应用效果。图1-9为&input&元素属性应用案例效果，由于之前已经讲述了type属性，所以在这里便没有再叙述这部分知识。
▲图1-9 Sample1_6案例效果图
看完了案例生成的效果图，我们就来看一下案例的开发过程。如前面案例开发过程所示，本案例的大部分标签与属性的使用方法大家应该已经掌握了，我们现在来具体学一下&input&元素的局部属性的应用，其与大部分属性的应用是相同的，读者学起来会很快。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_6.html。
&html&&body&
&p&单击此图像即为提交，这里为用图片代替按钮，alt 属性只能与type="image"配合使用
它为图像输入规定替代文本&/p&&form&
&p&姓: &input type="text" name="姓" /&&/p&
&p&名: &input type="text" name="名" /&&/p&
&input type="image" src="back.png" alt="Submit" width="64" height="64"/&&/form&
&!--即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果
不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。除了 Safari，所有
主流的浏览器都支持 "alt" 属性。height 属性只适用于 &input type="image"&，它规定 image
input 的高度。其属性pixel以像素为单位，%以百分比为单位--&
&p&这里是表单的自动完成功能测试，填写并提交表单，然后再输入一遍相同的数据的开头来体
验一下自动完成功能&/p&&form autocomplete="on"&
姓:&input type="text" name="姓" /&&br /&
名: &input type="text" name="名" /&&br /&
&input type="submit" /&&/form&&p&&/p&
&!--自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，
应该显示出在字段中填写的选项。autocomplete 属性适用于 &form&，以及下面的 &input& 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color--&
&p&这里显示的为加载时自动获得焦点与禁用输入字段示例，使用该属性input元素获得焦点&/p&
姓: &input type="text" name="姓" autofocus&&br&
名: &input type="text" name="名" disabled="disabled"&&br&
&input type="submit"&&/form&
&!--被禁用的 input 元素既不可用，也不可单击。可以设置 disabled 属性，直到满足某些其他的
条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，
将 input 元素的值切换为可用--&
&p&这里显示的为max与min属性示例，max 属性与 min 属性配合使用，
可创建合法值范围&/p&&form&
输入数量: &input type="number" name="输入数量" min="0" max="10" /&
&input type="submit" /&&/form&
&!--max 和 min 属性适用于以下 &input& 类型：number, range, date, datetime, datetime-local,
month, time 以及 week。--&
&p&这里为输入段字符最大长度属性示例：&/p&&form&
&p&姓: &input type="text" name="姓" maxlength="85" /&&/p&
&p&名: &input type="text" name="名" maxlength="55" /&&/p&
&input type="submit" value="Submit" /&
&!--maxlength 属性规定输入字段的最大长度，以字符个数计。
maxlength 属性与 &input type="text"& 或 &input type="password"& 配合使用--&
&/form&&p&此处示例可接受多个值的上传字段，请尝试在浏览文件时选取一个以上的文件。
&/p&&form&选择图片：&input type="file" name="img" multiple="multiple" /&
&input type="submit" /&&/form&
&p&这里为通过pattern 属性规定用于验证输入字段的模式，输入时请按要求输入3个字母的国家代码：
&/p&&form&国家代码：&input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" /&
&input type="submit" /&&/form&
&!--模式指的是正则表达式，pattern 属性适用于以下 &input& 类型：text, search,
url, telephone, email 以及 password 。pattern 属性规定用于验证输入字段的模式。--&
&p&接下来我们演示的是输入字段预期值属性，提供可描述输入字段预期值的提示信息，
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。&/p&&form&
&input type="search" name="user_search" placeholder="输入字段预期值" /&
&input type="submit" /&&/form&
&!--placeholder 属性适用于以下的 &input& 类型：text, search, url,
password等。--&
&p&接下来我们演示的为required与size属性，required属性规定必需在提交之前填写输入字段。
如果不填写任何内容，则会有提示出现。&/p&&form&
姓名: &input type="text" name="usr_name" required="required" size="35"/&
&input type="submit" value="提交" /&&/form&
&!--required 属性适用于以下 &input& 类型：text, search, url, telephone, email,
password, date pickers, number, checkbox, radio 以及 file。--&
&/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 图像链接列表标签及其描述
定义图像地图内部的区域
定义图像映射
定义命令按钮
&figcaption&
定义&figure&元素的标题
定义超链接
定义文档与外部资源的关系
定义导航链接
定义无序列表
定义有序列表
定义列表的项目
定义定义列表
定义定义列表中的项目
定义定义列表中项目的描述
定义命令的菜单/列表
定义媒介内容的分组，以及它们的标题
&menuitem&
定义用户可以从弹出菜单调用的命令/菜单项目
定义图形，在1.6节中我们会专门讲这部分的内容
看完这些标签的类型与描述后，接下来我们先来看一下运用这些标签做出来的网页效果。通过对这些标签效果的观察，我们再来深究一下它们的具体用法。图1-10为图像链接列表标签应用实例图。图中有一个图片加载失败，这是因为我们故意写错路径名进而显示alt属性。
因为篇幅问题本部分标签分成了两部分，我们刚才所看到的效果图为其中的第一部分标签案例的示意图，本部分标签为图像标签与一部分列表标签的示例。表1-9列出的&canvas&标签由于是本书的重点内容，所以我们将其放到了1.6节细致地讲述。我们先来看一下Sample1_7的案例开发过程。
▲图1-10 Sample1_7案例效果图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_7.html。
&html&&head&&title&Sampel1_7&/title&&/head&&body&
&p&这里我们演示img标签及其属性的用法，本标签创建的是被引用图像的占位空间&/p&
&img src="pic/H5.jpg"
alt="W3C的正式HTML5徽标" height="128" width="128" /&
&img src="pic/H523.jpg"
alt="W3C的正式HTML5徽标" height="128" width="128" /&
&!--src和alt为该标签的必需属性，在HTML中img标签没有结束标签，
第二个img标签为演示如果图像不能显示则显示alt属性--&
&p&接下来我们来演示的为设置背景图片，如果图片小于页面那么图片会重复&/p&
&body background="pic/background1.png"&
&p&接下来我们演示的是设置图像的对齐方式：&/p&
&h2&未设置对齐方式的图像：&/h2&
&p&图像 &img src ="pic/back.png"& 在文本中&/p&
&h2&已设置对齐方式的图像：&/h2&
&p&图像 &img src="pic/back.png" align="bottom"& 在文本中的对齐方式为bottom&/p&
&p&图像 &img src ="pic/back.png" align="middle"& 在文本中的对齐方式为middle&/p&
&p&图像 &img src ="pic/back.png" align="top"& 在文本中的对齐方式为top&/p&
&!--其中bottom对齐方式是默认的对齐方式--&
&p&现在我们把图像作为链接来使用：
&a href="Sampel1_6.html"&
&img border="0" src="pic/back.png" /&&/a&&/p&
&p&现在我们演示的为创建带有可供单击区域的图像地图，其中每个区域都是一个超链接，
请单击图像上的星球，把它们放大。&/p&
&img src="pic/xingqiu.jpg" border="0" usemap="#planetmap" alt="星球" /&
&map name="planetmap" id="planetmap"&
&area shape="circle" coords="180,139,14" href ="pic/jinxing.png"
target ="_blank" alt="金星" /&
&area shape="circle" coords="129,161,10" href ="pic/shuixing.png"
target ="_blank" alt="水星" /&
&area shape="rect" coords="0,0,110,260" href ="pic/sun.jpg"
target ="_blank" alt="太阳" /&&/map&
&!--area标签定义图像映射中的区域，总会嵌套在map中，shape属性定义了区域形状，coords
为区域的坐标值一般的4个坐标值为定义的矩形的左上角与右下角的坐标值x、y三个值为圆形
的原点坐标与半径，多边形poly的坐标为x1,y1,x2,y2,…,xn,yn--&
&!--img 元素中的 "usemap" 属性引用 map 元素中的“id”或“name”属性（根据浏览器），
所以我们同时向 map 元素添加了“id”和“name”属性。在以上几个例子中涉及href属性时
我们给出的是路径位置，这里也可以给URL。设置target的属性值为blank表示在新链接中打开--&
&p&接下来我们来演示一下无序列表的使用，首先我们看到的是不同类型的无序列表：&/p&
&h4&Disc 项目符号列表：&/h4&
&ul type="disc"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ul&&h4&Circle 项目符号列表：&/h4&
&ul type="circle"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ul&&h4&Square 项目符号列表：&/h4&
&ul type="square"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ul&
&p&下面我们将看到嵌套类型的无序列表：&/p&
&h4&一个嵌套列表：&/h4&&ul&
&li&咖啡&/li&&li&茶
&ul&&li&红茶&/li&&li&绿茶&/li&&/ul&
&/li&&li&牛奶&/li&&/ul&
&!--标签&li&定义列表项目，常和无序列表标签&ul&与有序列表标签&ol&一起使用--&
&/body&&/html&
第2～6行为&img&标签的示例，在HTML中&img&标签没有结束标签，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。
&html&&head&&title&Sample1_8&/title&&/head&&body&
&p&接下来我们来看一下有序列表的使用，我们看到的是不同类型的有序列表：&/p&
&h4&数字列表：&/h4&
&ol&&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&字母列表：&/h4&
&ol type="A"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&小写字母列表：&/h4&
&ol type="a"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&罗马字母列表：&/h4&
&ol type="I"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&小写罗马字母列表：&/h4&
&ol type="i"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ol&&!--有序列表的类型默认为阿拉伯数字，其余的还有大写字母、小写字母、罗马字母等。--&
&p&接下来我们来看一下定义定义列表标签&dl&的用法：&/p&
&h2&一个定义列表：&/h2&
&dt&计算机&/dt&
&dd&用来计算的仪器 ……&/dd&
&dt&显示器&/dt&
&dd&以视觉方式显示信息的装置 ……&/dd&
&!--&dl& 标签用于结合 &dt&（定义列表中的项目）和 &dd&（描述列表中的项目）--&
&!--&menu&与&command&两个标签在各大主流浏览器中都不支持，&menuitem&只有Firefox浏览器
支持，所以在这里不再介绍这三个标签。--&
&p&现在我们来看一下超链接标签&a&的用法：&/p&
&a href=""&Baidu&/a&
&!--&a&用于从一张页面链接到另一张页面，在用于样式表时，&link& 标签得到了几乎
所有浏览器的支持。但是几乎没有浏览器支持该标签其他方面的用途，所以在此便不再介绍&link&标签--&
&p&现在我们来看一下HTML5标准中新增的标签&nav&的用法，本例中我们暂定Sample1_4为主页：&/p&
&nav&&a href="Sampel1_4.html"&主页&/a&
&a href="Sampel1_3.html"&前一页&/a&
&a href="Sampel1_5.html"&后一页&/a&&/nav&
&!--&nav& 标签定义导航链接的部分，Internet Explorer 8 以及之前的版本不支持本标签，其余的
主流浏览器都是支持本标签的。--&
&p&接下来我们来看一下在同一页面内的跳转：&br/&
&a href="#C4"&查看 章节 4。&/a&&/p&
&h2&章节 1&/h2&
&p&这里是章节内容&/p&
&h2&章节 2&/h2&
&p&这里是章节内容&/p&
&h2&章节 3&/h2&
&p&这里是章节内容&/p&
&h2&&a name="C4"&章节 4&/a&&/h2&
&p&这里是章节内容&/p&
//…这里省略了部分代码，读者可以自行查阅中的源代码。
&p&被锁在框架中了吗？&/p&
&a href="Sampel1_4.html" target="_top"&请单击这里！&/a&
&!--将target属性设置为“_top”这个目标使得文档载入包含这个超链接的窗口，用“_top”目标将会
清除所有被包含的框架并将文档载入整个浏览器窗口。--&
&/body&&/html&
第2～17行为有序列表的标签应用，在上一个案例中我们介绍了无序列表标签的使用，有序列表与无序列表的区别就表现在显示时一个有顺序的排列，一个没有顺序排列。想要按顺序排列，一般就是列表项目前面加上表明顺序的数字字母等，就是有序列表的不同种类。
第18～26行示例了定义列表标签&dl&的用法，其经常会与&dt&（定义列表中的项目标签）、&dd&（描述列表中的项目标签）一起使用来定义列表，读者看着示例学习即可。
第27～38行演示了链接标签的用法，在HTML5中新增的&nav&标签定义导航链接的部分。我们平时在浏览网页时不会单纯在一个页面中浏览，肯定会单击链接之类的切换页面，其中的上一页、下一页、主页等链接便是由此标签定义的。
第39～54行示例的内容为在同一页面下跳转。除了在不同页面之间切换，有时我们浏览一个网页到最下面部分时想回到顶部，如果没有“回到顶部”这个按钮，我们只能拖拉滚动条来实现这一功能。这里的示例便是在同一页面的某处添加信息，本页中如有需要跳转到该部分，单击链接即可。
到此为止已完成对图像、链接、列表标签开发的讲解。本部分标签不多，但是每个标签的属性都不少，读者在学习这部分知识时应将注意力放到各属性上。幸运的是，不少的属性与前面标签中的属性的作用是一样的，读者学起来上手不会太慢的。
1.3.6 表格、元信息等标签
到本章为止我们已介绍完需要学的主要部分的标签，接下来便来介绍一下其他标签。这部分的表格标签与元信息我们会详细介绍，剩下部分的标签因为用到次数较少便不再赘述其开发过程。表1-10所示为表格、元信息等标签及其描述。
表1-10 表格、元信息等标签及其描述
定义对象的参数
定义嵌入对象
定义表格标题
为外部应用程序定义容器
定义表格中的表头单元格
定义客户端脚本
定义表格中的行
定义表格中的单元
定义媒介源
定义表格中的表头内容
定义声音内容
定义表格中的主体内容
定义关于文档的信息
定义表格中的表注内容
定义关于HTML文档的元信息
&colgroup&
定义表格中供格式化的列组
定义页面中所有链接的默认地址或默认目标
定义表格中一个或多个列的属性值
&noscript&
定义针对不支持客户端脚本的用户的代替内容
定义用在媒体播放器中的文本轨道
表格标签&table&定义了HTML表格，简单的表格由table及一个或多个tr、th或td元素组成。复杂点的HTML表格可能会包括caption、col、colgroup、thead、tfoot以及tbody元素。那么我们现在便来看一下第一个表格类程序，图1-11所示为表格标签的案例效果图。
▲图1-11 Sample1_9案例效果图
本案例是我们本章节的第一个表格类案例，通过案例运行效果图与标签介绍我们便可以想到通过使用本部分介绍的表格标签案例能够创造出各种样式的且在日常生活中需要的类型的表格，那么现在就来看一下案例Sample1_9的开发过程。
代码位置：见书中源代码/第1章目录下的HTML5/Sample1_9.html。
&html&&head&&title&Sample1_9&/title&&/head&&body&
&p&从现在开始我们便来学习表格标签的使用，我们首先看到的是&table&标签的用法：&/p&
&h4&只有一行一列的表格：&/h4&
&table border="1"&&tr&
&td&100&/td&
&/tr&&/table&
&h4&一行三列的表格：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&
&/tr&&/table&
&h4&两行三列的表格：&/h4&
&table border="1"&
&tr&&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&&/tr&&/table&
&!--每个表格由&table&标签开始，表格行由&tr&标签开始，每个数据由&td&标签开始。--&
&p&现在我们学习的是带有边框的表格：&/p&
&h4&带有普通的边框：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有粗的边框：&/h4&
&table border="8"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有很粗的边框：&/h4&
&table border="15"&
&tr&&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&这个表格没有边框：&/h4&
&table&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&
&/tr&&/table&
&!--上面演示的全为边框示例，其中没边框时可以不加border属性，也可以使其值为0。
border属性用于设置边框的宽度。--&
&p&接下来我们来演示表格中的标题与怎么样为表格添加标题：&/p&
&h4&表头：&/h4&
&table border="1"&
&tr&&th&姓名&/th&&th&电话&/th&&th&电话&/th&&/tr&
&tr&&td&张三&/td&&td&123456&/td&&td&123455&/td&
&/tr&&/table&
&h4&垂直的表头：&/h4&
&table border="1"&&tr&&th&姓名&/th&&td&李四&/td&
&/tr&&tr&&th&电话&/th&&td&12345&/td&
&/tr&&tr&&th&电话&/th&&td&21345&/td&&/tr&&/table&
&h4&这个表格有一个标题，以及粗边框：&/h4&
&table border="6"&
&caption&这是我的标题&/caption&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&&/tr&&/table&
&!--表格的属性，行用&tr&表示，&td&表示列，&th&相当于表头，&table&表示表格，
这几个标签构成表单最基本的样子。&th&为表格中的表头，&caption&为表格的标题。--&
&/body&&/html&
第2～15行演示了基础的表格标签的使用方法。我们都知道表格中有行与列，所以在HTML中它们都有相应的标签，&tr&标签定义表格的一行，&td&标签定义表格每行中的一项数据，在一般情况下&table&会经常与&tr&、&td&一起使用的。
第16～35行为表格的边框效果示例，表格标签中的border属性用于设置边框的宽度属性，不设置这个属性时默认为0。在设置边框宽度时应该本着合适的原则，一般情况下我们设置border值为1或者不设置就行。
第36～53行为表格标题的示例。表格标签中&th&属性定义表格中的表头，设计表格时即为第一行内容，所以&th&为表格内部的内容。而caption属性用于设置表格的标题，其位置是在表格的外部，通过本部分案例的运行可以看到这些区别。
由于篇幅问题，所以将本小节的标签分为了3部分介绍。这3部分其实可以组合成为一个程序，但是这样做代码过长，有点不利于读者学习，所以我们将其分为了3部分。上面的示例为第一部分的示例，接下来我们来看一下第二部分的案例运行效果图，如图1-12所示。
▲图1-12 Sample1_10案例效果图
本部分案例主要讲述了表格的各种边框的显示形式与表格的嵌套形式。这些形式在CSS中也可以设置，编程时要具体分析什么情况下用到哪种形式，有时层叠样式表比本节演示的要简单，有时不如本节演示的简单，我们来看一下具体的案例开发。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_10.html。
&html&&head&&title&Sample1_10&/title&&/head&&body&
&p&接下来我们将演示如何定义跨行或跨列的表格单元格：&/p&
&h4&横跨两列的单元格：&/h4&
&table border="1"&&tr&
&th&姓名&/th&&th colspan="2"&电话&/th&&/tr&
&tr&&td&张三&/td&&td&123456&/td&&td&123455&/td&&/tr&&/table&
&h4&横跨两行的单元格：&/h4&
&table border="1"&&tr&
&th&姓名&/th&&td&李四&/td&&/tr&
&tr&&th rowspan="2"&电话&/th&&td&12345&/td&&/tr&
&tr&&td&21345&/td&&/tr&&/table&
&!--colspan 属性规定表头单元格可横跨的列数，rowspan 属性规定表头单元格可横跨的行数。--&
&p&接下来我们来演示一下在表格内如何使用其他类型的标签&/p&
&table border="1"&&tr&&td&
&p&这是一个段落。&/p&&p&这是另一个段落。&/p&
&/td&&td&这个单元包含一个表格：
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&
&/tr&&/table&&/td&
&td&这个单元包含一个列表：
&ul&&li&苹果&/li&&li&香蕉&/li&&li&菠萝&/li&
&/ul&&/td&&td&HELLO&/td&
&/tr&&/table&
&!--从本部分可以看出，如果想在表格内部嵌套一些其他标签则直接在&td&标签内部继续添加标签即可。--&
&p&现在我们要演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用：&/p&
&h4&没有 cellpadding，即单元格与内容没有距离：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有 cellpadding，即单元格与内容有距离：&/h4&
&table border="1" cellpadding="10"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&!--cellpadding 属性规定单元边沿与其内容之间的空白。--&
&h4&带有 cellspacing：&/h4&
&table border="1" cellspacing="10"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&!--cellspacing 属性规定的是单元之间的空间。从实用角度出发，
最好不要规定 cellpadding，而是使用 CSS 来添加内边距。--&
&/body&&/html&
第2～12行演示如何定义跨行或者跨列的表格，colspan属性规定的是可以横跨的列数，rowspan为可以横跨的行数属性，这两个属性应用在表头属性中，因为我们平时制定表格时只有表格的表头需要合并。
第13～26演示的为在表格内部如何应用其他类型的标签，这里的思想其实就是嵌套。上面的案例中我们在表格中嵌套了段落、表格、列表，这里只是一个示例，还可以嵌套其他很多标签，我们在这里不多介绍了。
第27～43行演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用，cellpadding与cellspacing的区别我们在案例中进行了解释。需要注意的是在真正开发中我们最好不要用这两个属性，使用CSS样式表会更简便。
到这里为止只有剩下为数不多的几个标签没有介绍了，其中还包括一些今后在WebGL开发中不常用的一些标签，所以在此我们不再赘述了。那么我们先来看一下图1-13所示的剩下的一些标签的案例运行效果图。
▲图1-13 Sample1_11案例效果图
看了这部分标签案例的示意图不难发现其与上一个案例的内容其实是相近的，所以学习本部分标签的同时，也是在温习表格标签的格式与样式的内容。做过Excel表格的读者都知道表格的排版其实也挺麻烦的，在我们之前与将要介绍的案例中会包含用得最多的一些格式，我们现在来看一下案例的开发过程。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_11.html。
&html&&head&&title&Sample1_11&/title&&/head&&body&
&p&接下来我们来看一下如何向表格与单元格内部添加背景颜色或者背景图片：&/p&
&h4&为表格添加背景颜色：&/h4&
&table border="1" bgcolor="red"&
&tr&&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&为表格单元格添加背景颜色：&/h4&
&table border="1"&&tr&
&td bgcolor="red"&100&/td&&td&200&/td&&/tr&
&tr&&td bgcolor="blue"&300&/td&&td&400&/td&&/tr&&/table&
&p&现在我们来看一下用align属性在单元格中排列内容&/p&
&table width="400" border="1"&&tr&
&th align="left"&消费项目&/th&
&th align="right"&一月&/th&
&th align="right"&二月&/th&&/tr&
&tr&&td align="left"&衣服&/td&
&td align="right"&$100&/td&
&td align="right"&$200&/td&&/tr&
&tr&&td align="left"&化妆品&/td&
&td align="right"&$100&/td&
&td align="right"&$150&/td&&/tr&
&tr&&td align="left"&食物&/td&
&td align="right"&$500&/td&
&td align="right"&$600&/td&&/tr&
&tr&&th align="left"&总计&/th&
&th align="right"&$700&/th&
&th align="right"&$950&/th&&/tr&&/table&
&!--align属性规定单元格内容的水平对齐方式。其值除了left、right之外还有center（居中对齐）、
justify（对行进行伸展，这样每行都可以有相等的长度）、char（将内容对准指定字符）。--&
&p&接下来我们来演示如何使用“frame”属性控制围绕表格的边框：&/p&
&p&表格的frame属性为border：&/p&
&table frame="border"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为above：&/p&
&table frame="above"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为below:&/p&
&table frame="below"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为hsides:&/p&
&table frame="hsides"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为vsides：&/p&
&table frame="vsides"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&!--frame 属性无法在 Internet Explorer 中正确地显示。除了以上示意的五个值之外，还有void
（不显示外边框）、lhs（显示左边的外侧边框）、rhs（显示右边的外侧边框）。不过
从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加边框样式。--&
&/body&&/html&
第2～10行示例如何向表格内部添加背景颜色或者背景图片，这些操作的实质是一样的，我们这里只介绍了背景颜色的添加，图片的添加过程与之前其他示例中添加图片的步骤是一致的。只需要将程序中的bgcolor改掉，再增加图片的位置即可。
第11～29行为align属性的介绍，该属性定义了单元格中的内容的排列。其值除了left、right之外，还有center、justify、char，分别表示居中、对行进行伸展、内容对准指定字符。
第30～54行展示的是frame属性的应用，这个属性控制围绕表格的边框。读者在学习这个属性时需要将每个属性值对应的效果记清楚，因为这个属性的值可选的有很多，这里只列了其中一部分，读者还可以全部试一下，我们在注释中已经列出其他值。
到此为止我们便介绍完了HTML中的标签，因为本书的主体部分并不是HTML，所以我们只是介绍了这些标签的部分属性，但是这些足以应付在今后开发WebGL时遇到的问题。我们只是介绍了其中的基础用法，所以今后的开发中还应该多学习此方面的更多知识。
1.3.7 HTML5中的全局属性
在上面介绍标签时我们就不止一遍地说过局部属性与全局属性（见表1-11），在介绍标签时我们已经介绍过一部分比较重要的局部属性了，剩下的一些不常用的局部属性我们便不再介绍。现在我们便来讲述一下HTML中的全局属性。
表1-11 HTML全局属性
contenteditable
规定元素内容是否可以编辑
规定激活元素的快捷键
规定元素中内容的文本方向
规定元素是否可拖动
规定元素不再相关
规定元素的唯一id
用于存储页面或应用程序的私有定制数据
contextmenu
规定元素的上下文菜单。上下文菜单在用户单击元素时显示
规定元素内容的语言
spellcheck
规定是否对元素进行拼写和语法检查
规定元素的行内CSS样式
规定元素的Tab键次序
规定有关元素的额外信息
规定是否应该翻译元素内容
规定元素的一个或多个类名（引用样式表中的类）
规定在拖动被拖动数据时是否进行复制、移动或链接
全局属性适用于HTML中的各种标签，因为在平时开发的时候会经常用到这些属性，所以我们在本小节中将其集中起来，然后对每个属性进行详细的介绍；其中有一两个没介绍，是因为主流浏览器并未支持该属性。现在我们先来看一下图1-14所示的部分全局属性示例图。
▲图1-14 Sample1_12案例效果图
本例中我们演示了全局属性中的一部分，因为这些属性可以在支持全局属性的标签中使用，基本为全部的标签，所以我们这里只是示例了其中几种标签的全局变量的使用。在应用时读者也可以使用别的标签进行试验。下面我们来看一下程序的开发过程。
代码位置：见书中源代码/第1章目录下的HTML5/Sample1_12.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_12&/title&
&script type="text/javascript"&
function change_header(){
document.getElementById("myHeader").innerHTML="Nice day!";}&/script&
&style type="text/css"&
h1.intro {color:}
p.important {color:}&/style&
&!--此处为样式表内容，在后面会有介绍，这里不详细介绍。--&
&style type="text/css"&
h1.intro1{color:}
.important1{background-color:}&/style&&/head&
&p&我们首先来演示accesskey，其实质就是为某元素设置快捷键，使其获得焦点。&/p&
&a href="" accesskey="b"&百度（accesskey键设为b）&/a&&br /&
&a href="" accesskey="s"&新浪（accesskey键设为s）&/a&
&!--请使用“Alt+accesskey”或者“Shift+Alt+accesskey”来访问带有指定快捷键的元素，一般
本属性是用在&a&、&area&、button&、&input&、&label&、&legend&等标签中。--&
&p&现在我们来演示class属性的应用，第一个示例为单个class值，
第二个示例为一个标签应用多个class值&/p&
&h1 class="intro"&h1标题1演示单个class属性值&/h1&
&p class="important"&请注意这个重要的段落。:)&/p&
&p&现在我们来演示一下应用多个classs值的案例：&/p&
&h1 class="intro1 important1"&h1演示多个class属性，只要在声明第一个值时加上空
格后写之后的值即可&/h1&
&!--class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过
JavaScript 来改变带有指定 class 的 HTML 元素。--&
&p&现在我们来讲述一下规定元素是否可编辑的属性的应用:&/p&
&p contenteditable="true"&这里是一段可以编辑的段落，读者可以将光标点到这里自行编辑。&/p&
&!--需要注意的是元素中如果未设置contenteditable时，本元素会继承其父类元素。--&
&p&接下来我们来看一下规定元素内容文本方向的属性的应用：&/p&
&p dir="rtl"&文本方向为从右向左!&/p&
&!--dir 属性在以下标签中无效：&base&、&br&、&frame&、&frameset&、&hr&、&iframe&、
¶m& 以及 &script&。dir有rtl与ltr两个值，分别为右到左与左到右。--&
&p&现在我们来看一下隐藏属性hidden，下面有两段话，一段有隐藏属性，一段没有隐藏属性：&/p&
&p hidden="hidden"&这是一段隐藏的段落。&/p&
&p&这是一段可见的段落。上面还有一段隐藏段落，这里我们只是在做实验。&/p&
&!--hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。
然后，JavaScript 可以删除 hidden 属性，以使此元素可见。--&
&h1 id="myHeader"&Hello World，这里我们演示的为id属性的应用，用JavaScript取得本
元素id然后改变本元素的内容。&/h1&
&button onclick="change_header()"&改变文本&/button&
&!--id 属性规定 HTML 元素的唯一 id，id 属性可用作链接锚（Link Anchor），
通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。--&
&p&这里为lang属性值的演示，lang属性值必须使用有效的ISO语言代码。&/p&
&p lang="fr"&Ceci est un paragraphe.&/p&
&p lang="en"&Hello , How are you?&/p&
&!--本属性是为让浏览器调整其表达元素内容的方式，可以使网页只显示某种特定语言。--&
&/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-15为剩下的属性的代码运行效果。看完了图后我们便发现本部分案例内容并不多，但是这部分内容中的脚本方法有点繁杂，我们开发时不进行重点讲述，因为会在下面的章节中专门介绍这些内容。读者看到这部分时先跳过这里，主要看属性的开发。
▲图1-15 Sample1_13案例效果图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_13.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_13&/title&&/head&
&style type="text/css"&
#div1 {width:350height:70padding:10border:1px solid #}
&/style&&script type="text/javascript"&
function allowDrop(ev){
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();}&/script&
&p&现在我们演示元素是否可拖动的属性draggable，下面一段文本可以被拖动到文本域中：&/p&
&div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&&/div&&br /&
&p id="drag1" draggable="true" ondragstart="drag(event)"&
这是一段可移动的段落。请把该段落拖入上面的矩形。&/p&
&!--在head部分我们定义了div的样式，这里不进行解释，下一节中会有专门的层叠样式表的讲述。
ondrop、ondragover、ondragstart为标签中的事件属性，表示元素被拖动时运行的脚本、当元素在
有效拖放目标上正在被拖动时运行的脚本、在拖动操作开端运行的脚本。这些事件属性表示当触发
这些事件时，会调用相应的JavaScript脚本方法，这些方法在head部分中已经写好。--&
&p&现在我们来看一下style属性的应用：&/p&
&h1 style="color:text-align:center"&这里为h1标题&/h1&
&p style="color:red"&这里为一个段落&/p&
&!--style 属性规定元素的行内样式（Inline Style），style属性将覆盖任何全局的样式设定。--&
&p&tabindex 属性规定元素的 Tab 键控制次序，1是第一个：&/p&
&a href="" tabindex="2"&Baidu&/a&&br /&
&a href="" tabindex="1"&Sina&/a&&br /&
&a href=".cn/" tabindex="3"&W3school&/a&
&!--请尝试使用键盘上的 "Tab" 键在链接之间进行导航。--&
&p&下面我们将演示title属性的使用，title 属性规定关于元素的额外信息。&/p&
&abbr title="People's Republic of China"&PRC&/abbr& was founded in 1949.
&!--通常会在鼠标移到元素上时显示一段工具提示文本，title 属性常与 form
以及 &a& 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和
&acronym& 元素的必需属性。--&
&p contenteditable="true" spellcheck="true"&这里是可编辑的段落，请试着编辑文本。&/p&
&!--spellcheck 属性规定是否对元素进行拼写和语法检查。--&
&/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-16所示。因为本部分案例是在某些事件发生时才会触发的，所以效果图中不能显现出所有事件的运行效果，读者应该自己去验证这些事件。
表1-12 HTML5中的事件
onafterprint
文档打印后运行的脚本
onbeforeprint
文档打印前运行的脚本
页面加载介绍后运行的脚本
当浏览器窗口被调整大小时触发
一旦页面已下载时触发
元素失去焦点时运行的脚本
在元素值被改变时运行的脚本
当元素失去焦点时运行的脚本
当元素中文本被选中后触发
在提交表单时触发
在用户按下按键时触发
onkeypress
在用户敲击按钮时触发
在用户释放按键时触发
元素上发生鼠标单击时触发
ondblclick
元素上发生鼠标双击时触发
onmousedown
当在元素上按下鼠标按钮时触发
onmousemove
当鼠标指针移动到元素上时触发
当在元素上释放鼠标按钮时触发
onmouseout
当鼠标指针移出元素时触发
onmouseover
当鼠标指针移动到元素上时触发
▲图1-16 Sample1_14案例效果图
我们这里只示例一小部分事件，意在向读者介绍事件的基本用法，读者在日后的开发中肯定会遇到其他事件或者应用到其他事件。这里的举例仅为冰山一角，大家还需要自行查阅一些资料了解事件属性。接下来我们来看一下图1-16所示的案例开发过程。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_14.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_14&/title&
function printmsg(){
//文档打印之后执行的脚本方法
alert("此文档现在正在打印！");}
function load(){
//页面加载完成后需要执行的脚本方法
alert("页面已加载！");}
function showMsg(){
//浏览器窗口尺寸改变时执行的脚本方法
alert("您已改变浏览器窗口的尺寸！");}
function upperCase(){
//元素失去焦点时执行的脚本方法
var x=document.getElementById("fname").
document.getElementById("fname").value=x.toUpperCase();}
function checkField(val){
//在元素值改变时执行的脚本
alert("输入值已更改。新值是：" + val);}
function copyText(){
//单击鼠标时执行的脚本
document.getElementById("field2").value=document.getElementById("field1").}
function mouseDown(){
//鼠标按下时执行的脚本
document.getElementById("p1").style.color="red";}
function mouseUp(){
//鼠标抬起时执行的脚本
document.getElementById("p1").style.color="green";}
&/script&&/head&
&body onafterprint="printmsg()" onload="load()" onresize="showMsg()"&
&p&本部分案例中我们试验的事件执行脚本时只写了alert，这里只是一个示例，
在实际开发中我们应该在对应部分开发自己需要的代码。&/p&
&h1&请试着打印此文档，这时候会有提示出现。&/h1&
&p&onbeforeprint事件与onafterprint事件的用法一样，只是一个是在打印之
前执行脚本，一个是在打印之后执行脚本。&/p&
&!--Internet Explorer 和 Firefox 支持 onafterprint 属性。在 IE 中，
onafterprint 事件在打印对话框出现之前而不是之后发生。--&
&p&&body&元素中还有一个onload事件，该事件表示在页面加载完毕后执行脚本。&/p&
&p&onresize事件表示当浏览器窗口改变时执行脚本，本案例也进行了示例，
读者可以改变一下浏览器窗口大小看一下结果。&/p&
&p&请随意输入一段英文字符，然后把焦点移动到字段外（鼠标单击输入框之外）：&/p&
请随意输入一段英文字符，在本元素失去焦点时小写字母会变为大写字母：
&input type="text" name="fname" id="fname" onblur="upperCase()"&
&p&请修改输入字段中的文本，然后在字段外单击以触发 onchange。&/p&
请输入文本：&input type="text" name="txt" value="Hello"
onchange="checkField(this.value)"&
&p&当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。&/p&
Field1: &input type="text" id="field1" value="Hello World!"&&/br&
Field2: &input type="text" id="field2"&&br&&br&
&button onclick="copyText()"&复制文本&/button&
&p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"&
请单击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本
颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp()函数把文本
的颜色设置为绿色。&/p&
&/body&&/html&
第3～21行为事件触发时需要执行的JavaScript脚本。本部分的脚本方法只有alert一句话，丝毫没有技术含量，因为这里只是单纯地告诉读者事件运行时执行这段代码，读者在开发时应根据需要进行开发。
第22～32行为body元素的一部分示例。在body元素的起始标签中我们声明了onafterprint、onload、onresize三个事件，这三个事件何时触发我们在注释中已经介绍，我们在前面声明的脚本方法在相应的事件发生时执行。
第33～47行为onblur、onclick、onmousedown、onmouseup几个事件的应用示例。除失去焦点时执行的脚本事件，剩下的几个事件都与鼠标有关系，但是这只是其中一小部分，还有很多关于鼠标的事件我们未介绍，应用这些事件我们可以完成很多事情。
到此为止，我们便介绍完毕HTML事件了。因为篇幅有限，所以很多事件没有列出来，也没有进行示例用法解释，读者若是需要了解这方面的内容，可以在网上查找相关资料。学习事件部分并不困难，它的精髓在JavaScript脚本的开发过程中，我们在后面的章节会介绍。
1.4 初识CSS
CSS层叠样式表用来规定HTML文档的呈现形式外观和格式编排。本节我们会向读者简要介绍CSS，因为此部分不是我们开发的重点。我们会讲到如何创建和应用CSS样式等，为我们将来的开发打下基础。把样式添加到HTML中是为了解决内容与表现分离的问题。
HTML标签原本被设计用于定义文档内容。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于HTML标签与属性不断地被添加到HTML的规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难，所以W3C在HTML 4.0之外创造出样式。
1.4.1 CSS简介
样式表定义如何显示HTML元素，样式通常保存在外部的“.css”文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS可以称得上Web设计领域的一个突破。
我们作为开发者可以为每个元素定义好样式，并将其应用到不同的页面中。也可以进行全局的布置，只需要简单地改变样式然后在网站中的所有元素均会自动地更新。像这样的工作方式大大减少了我们的开发时间，提高了效率。
h1 {color: font-size:14}。
上述代码为CSS的基本定义，并且代码中定义了多种样式信息。可以在单个的HTML元素、HTML页的头元素、或一个外部的CSS文件中规定样式。甚至可以在同一个HTML文档内部引用多个外部样式表。
一般而言，所有的样式会根据下面的规则层}
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
HTML和Plain Text的区别
请问HTML和Plain Text这两种在e-mail中有什么区别哦？各有什么好处？
前者支持HTML语法 后者是纯文本 也就是说前者可以把邮件弄成网页一样 可以添加链接 图片 动画 框架等等 后者就是个记事本要说好处 前者好看啊 还能插入多媒体资料 但需要接收方同样支持HTML 否则就会看到一堆代码 并且代码越多 邮件自然也就越大
采纳率：43%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包LINUX题目，进来看看，先给100分，答对加分哦。。你懂的！！哈~~~-
LINUX题目，进来看看，先给100分，答对加分哦。。你懂的！！哈~~~-
win10和deepin linux双系统装的时候出问题 先装的win10,然后装linux装到一 ：
linux 系统数据是坏的
linux写脚本,需要ls只显示前10个文件,怎么实现? ：
ls -1 | sort -u | head -10,建议看《linux就该这么学》一书,命令熟记于...
Macbook 之前把苹果系统格了装了Linux,现在可以把Linux格了直接装win10吗? ：
苹果系统的镜像没有iso的,应该都是dmg格式镜像,当然有些高手自己用dmg做了iso的另当别论,苹...
linux关机命令-t参数,能否给个实例?如10秒后关机。 是否是 shutdown -h -t 1... ：
shutdown -h 10 shutdown -h now 前者是,10 秒后,关机 后者是立刻关...
为什么我虚拟机的linux系统IP是10.0.2.15 ：
因为你的虚拟机选择的是nat联网方式,将主机虚拟成10.0.2.1然后随机给虚拟机一个10.0.2....
你好!戴尔台式机主系统win10,再装linux双系统的时候会自动弹出enter power ：
电脑安装双系统必须有个基本过程,那就是必须先安装低版本的系统,然后安装高版本的系统,你的操作过程不允...
Linux怎么切换回window10 ：
您好,爱应用为您解答: 你的Win7 Ubuntu14.10双系统是先装好的Win7,然后再除了系统...
如何装linux win10双系统 ：
具体方法如下: 不管您要安装哪种Linux系统,首先给硬盘划分一个空白分区。 1、准备LinuxMi...
我先有win10然后安装Linux的,装Linux分区的时候分了一个efi分区然后把Linux ：
你是说把linux给装到efi分区了?老天,你哪能往那里面装系统?别说linux了,连windows...
win10和linux怎么解决双系统引导问题 ：
安装参考(我用的LinuxMint): 1、准备 LinuxMint启动盘启动电脑,进入LinuxL...db:: 3.31::Transport Agent Text To HTML Conversion Problem 9k
Widget settings form goes hereHTML 5开发基础—进入WebGL 世界的第一道坎 - 异步社区
HTML 5开发基础—进入WebGL 世界的第一道坎
第1章 HTML5开发基础——进入WebGL世界的第一道坎
本书是介绍WebGL技术的一本书，但是在进入WebGL世界之前我们需要迈过HTML门槛，因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了，那么开发WebGL就是一件遥不可及的事情。
那么到底何为HTML呢？HTML（HyperText Markup Language，超文本标记语言）诞生于20世纪90年代初，其为标准通用标记语言下的一个应用。其中“超文本”是指页面内可以包含图片、链接、程序等非文字元素。其结构由“头”与“主体”两部分组成。大家先来看一下HTML的发展背景。
1.1 HTML的发展简史
1.1.1 HTML的由来
作为一个组织或者个人在万维网上放置开始点的页面称为主页，主页中通常包括指向其他相关页面的超级链接。所谓超级链接，就是一种统一资源定位器（URL）指针，通过激活它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站。超文本标记语言（HTML）是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口等），创造出功能强大的网页。
1.1.2 HTML的历史
现在业界常常习惯于用数字来描述HTML的版本（如HTML5），但是最初的时候并没有HTML1，而是由IETF团队于1993年发布的一个草案，并不是成形的标准。两年之后，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC 1866发布的。
有了以上的两个历史版本，HTML的发展可谓突飞猛进。1997年，HTML3.2成为W3C的推荐标准。之后在1998年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。HTML5的第一份正式草案已于日公布，仍需要继续完善。表1-1所示为具体时间线。
表1-1 W3C HTML规范和时间线
时 间 线
HTML 5（草案）
HTML 5（正式推荐标准）
上面简述了一下HTML的发展历史，其诞生至今已过20多年，限于篇幅这里只是简单介绍一下，在很多专门介绍HTML的书或者网站上都会有详细的介绍，本书的重点并不是这些，所以简单一带而过。
1.2 HTML5概述
HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代丰富Web内容的相关技术的总称。其中最重要的三项技术是HTML5核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。
HTML5核心规范定义了用以标记内容的元素，并明确其含义。CSS可用于控制标记过的内容呈现在用户面前的外貌。JavaScript则可以用来操纵HTML文档的内容以及响应用户的操作，此外要想使用HTML5新增元素的一些为编程目的设计的特性，也需要用到JavaScript。
看不懂上面所说的内容不要紧，在下面几节中将较为详细地介绍HTML元素、CSS和JavaScript。
1.2.1 HTML5的新标准
为了应对漫长的标准化过程以及标准落后于常见用法的情况，HTML5及其相关技术是作为一系列小标准制定的，其中一些标准的内容只有几页，涉及的只是一个高度细化的方面。当然，也会有一些标准的内容有几百页，包含了相关功能的几乎所有方面。
这样做有利也有弊，好处是可以加快标准制定步伐；主要的弊端在于难以全面掌握制定中的各个标准的情况以及这些标准之间的关系，技术规范的质量也有所下降。有些标准中存在着一些歧义，致使浏览器中的实现出现了不一致的情况。
最大的不足之处要算没有一条可用来评估HTML5达标情况的基准线。W3C公布过一个正式的HTML5徽标，如图1-1所示，但是它并不代表对HTML5标准及相关技术的全面支持。
▲图1-1 W3C的正式HTML5徽标
1.2.2 HTML5引入的新特性
“我们想做的事情已经不再是通过浏览器观看视频或收听音频，或者在一部手机上运行浏览器。我们希望通过不同的设备，在任何地方都能够共享照片、网上购物、阅读新闻，以及查找信息。虽然大多数用户对HTML5和开放Web平台并不熟悉，但是它们正在不断改进用户体验”。这是日W3C的HTML工作组正式发布HTML5的正式推荐标准（W3C Recommendation）时万维网联盟创始人蒂姆·伯纳斯·李（Tim Berners-Lee）所说的一段话，这意味着新的标准带来的改变是巨大的，我们来看一下HTML 5引入的新特性。
HTML5的一大改进就是支持在浏览器中直接播放视频和音频文件。这是W3C对插件风靡现象的一种反应。原生多媒体支持再结合其他HTML特性可望大有作为。
HTML5最大的变化之一是添加了“canvas”元素，这是对插件风靡现象的另一反应，它提供了一个绘图平面，开发人员可以用它来完成一些绘制。使用“canvas”就必须用到JavaScript。
HTML5引入了一些用来分开元素的含义和内容呈现方式的特性和规则。这是HTML5中的一个重要概念，它反映出制作和使用HTML内容的方式的多样性。同时也给开发者带来一些负担，这是因为开发者需要先标记内容然后再定义其呈现方式。
1.2.3 HTML5现状
HTML5正式推荐标准虽然已经推出，但其标准还仍在继续被改动，虽然其中有一些调整，但是变化不大。这意味着本书现在所讲的内容与今后新出的标准有出入，但是标准正式出炉还需要等好些年，最终版本与现在的版本差别应该不会很大。
浏览器支持与否是决定HTML5命运的一项至关重要的因素。各浏览器越快统一对标准的支持，HTML5 标准落到实处也就越快。从图1-2中可以看出在2012年时全球浏览器市场分布，那些支持HTML5的浏览器的用户量节节攀升，不支持的浏览器的用户量却在逐步萎缩。
▲图1-2 年全球浏览器市场分布
最流行的那些浏览器基本都已实现了许多HTML特性。本书示例演示效果时所用浏览器是谷歌的Chrome或者Mozilla的Firefox。从国际上看，通过对比各独立内核浏览器（IE、Firefox、Chrome、Safari、Opera）发现，各大浏览器对标准的支持都有显著的提高。
移动平台上主流的浏览器（iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0）目前对标准的支持度均高于60%，其中表现居首的是Chrome for Android，而支持度相对较低的Android Browser的支持度也在60%以上，如图1-3所示。
▲图1-3 移动浏览器对HTML5的支持
上述内容虽然不是很详细，但是介绍了HTML的基本知识。由于本书的重点不在这方面，限于篇幅，只能简要介绍。若有读者想详细了解这些内容，可以找一些专门讲解HTML的资料或者网站查阅。
1.3 初识HTML5
如果想要掌握WebGL，那么开发人员还需要了解一些HTML的内容，这是WebGL的基础，因为WebGL是在网页里展示的，那么其必然是基于HTML开发的。所以先来给大家介绍一下HTML的基本内容。
HTML是一种标记语言，其标记以应用于文档内容（例如文本）的元素为其存在形式。现在HTML的标准为HTML5，在下面介绍各种HTML5的标签时，我们会按照其作用去划分，增加读者阅读的条理性。在讲解到一些比较重要的标签时都会有相应的小案例供大家理解。
1.3.1 HTML5标签简介
HTML5中的一大变化是基本信念方面的：将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这的确合乎情理。HTML元素负责确定文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。
元素由三部分组成，其中有两部分称为标签：开始标签和结束标签。夹在两个标签之间的是元素的内容，两个标签与它们之间的内容构成了一个元素。从本节开始我们就来介绍各个标签的作用，并结合案例来介绍用法与注意事项。
1.3.2 基础标签
在介绍标签时，我们知道标签由开始标签与结束标签组成。例如&html&为开始标签，&/html&为结束标签。在标签之间写的是元素的内容部分。开始标签中有时会有一些属性，这些属性声明了标签的个体属性。下面如果有需要特别注意的局部属性时，我们都会标注出来。
与局部属性相对应的就是全局属性，这部分内容在下面小节中会有详细的介绍，每段都会有详细的代码与注释供读者参考。接下来我们先来看标签中的基础标签都有哪些，在表1-2～表1-10中我们列出了这些标签及其作用与一些标签中的局部属性。
表1-2 基础标签及作用
&!DOCTYPE&
定义文档类型
定义HTML文档
定义文档的标题
定义文档的主体
定义文本标题
定义简单的折行，即换行
定义水平线
表1-2所示为基础标签的描述。接下来我们将这些标签全部应用到一个案例中，本案例中只是展示了这些标签的基本应用。其中还有一些标签有其特有的属性，在这里并没有具体列出来，但是这些属性的应用相当简单，读者可以自行查阅资料更改这些代码进行试验。
代码位置：见随书源代码/第1章目录下的HTML5/Sample1_1.html。
&!DOCTYPE html&
&html&&head&&title&这里为标题，基础标签案例&/title&&/head&
此处为主体部分
&h1&这里为文本标题1&/h1&
&h2&这里为文本标题2&/h2&
&h3&这里为文本标题3&/h3&
&h4&这里为文本标题4&/h4&
&h5&这里为文本标题5&/h5&
&h6&这里为文本标题6&/h6&
&p&这里为段落，本例主要为向读者展示先前介绍的标签的用法，这些标签为基本标签
&hr&&/br&这里演示在段落中的换行&hr&&/br&这里接着上面的段落。&/p&&!--此处为html文档注释
本案例介绍了基础标签的一些内容--&
此处主体结束
&/body&&/html&
第1、2行为指示浏览器关于页面使用哪个 HTML 版本进行编写的指令，并声明了标题。其中&!DOCTYPE html&声明必须是html文档的第一行。
第5～10行为文本标题示例，类似文档中的分级标题，看图1-4所示的效果图，理解会更加深刻。
第3～15行为html文档的主体部分，其中向大家展示了标题&h1&～&h6&、段落标签&p&、换行标签与下划线标签&br&和&hr&的基本用法。
下面我们来看一下案例效果。本案例以及本书中的案例都是在谷歌的Chrome浏览器或者Firefox浏览器上运行的，读者也可以自行选择合适浏览器运行案例，选择时需要注意浏览器是否支持HTML5特性。图1-4所示为本案例的效果。
▲图1-4 Sample1_1案例效果示例图
1.3.3 格式标签
对基础标签有了基本认识后，那么剩下的标签在用法上与其并无太多差异，只是在功能上有所不同。下面我们来看一下格式标签及其作用，如表1-3所示，表中列出了格式标签都有哪些并给出了对它们的描述。
表1-3 格式标签及作用
定义文档作者联系信息
定义粗体文本
定义文本的文本方向
定义文字方向
定义大号文本
&blockquote&
定义长的引用
定义居中文本
定义计算机代码文本
定义被删除文本
定义定义项目
定义强调文本
定义斜体文本
定义被插入文本
定义键盘文本
定义有记号的文本
定义预定义范围内的文本
定义预格式文本
&progress&
定义任何类型的任务进度
定义短的引用
定义ruby注释的解释
定义ruby的注释
定义加删除线的文本
定义计算机代码样本
定义小号文本
定义加删除线文本
定义上标文本
定义下标文本
定义打字机文本
定义下划线文本
定义文本的变量部分
定义文本的字体、尺寸和颜色
定义若浏览器不支持&ruby&元素时显示的内容
定义语气更加强烈的强调文本
上面列出的这些格式标签在平时用到得比较多，所以会用一个小案例对每个标签的用法进行介绍。但是这些案例仅仅是向读者展示了这些标签最基本的用法，这里还没有讲到属性，所以只得介绍最简单的部分，大家现在只需将每个标签的基本作用记住即可。
接下来我们先来看一下格式标签里一些比较简单的标签的用法，由于每个标签的例子都比较简短，在主体部分每个都是几行或者一两行代码，所以下面的案例是将几个标签合在一起写的一个简单案例，读者在阅读时注意区分即可。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_2.html。
&!DOCTYPE HTML&
&!--本案例演示了格式标签的一部分标签使用的小案例，剩下一部分会在下面给出--&
&html&&body&
这里演示的为缩写示例：The &abbr title="People's Republic of China"&PRC&/abbr&
was founded in 1949.
&p&这里演示加粗文本示例 &b&此处加粗&/b&.&/p&
&!--根据HTML5规范，粗体为最后的选择，没有其他标签适用时才会
选择，应先从标题、被强调文本、标记文本等标签中选择--&
&!--此处为bdi标签，设置一段文本使其脱离父元素的文本方向设置--&
&li&User &bdi&hrefs&/bdi&: 60 points&/li&
&li&User &bdi&jdoe&/bdi&: 80 points&/li&
&li&User &bdi&tom&/bdi&: 90 points&/li&
&p&接下来示例的为&bdo&标签，其中可以通过定义dir属性来覆盖默认文本方向&/p&
&bdo dir="rtl"&&!--dir的值有rtl右向左与ltr左向右两种值--&
现在展示的是从右向左的文本方向
&/bdo&&br/&
&!--下面几个标签一般还会搭配着id、class等一些属性使用，这些属性在下面会有介绍--&
&big&这里演示&big&标签示例&/big&&br/&
&em&这里演示&em&标签示例&/em&&br/&
&i&这里演示倾斜标签&i&示例&/i&&br/&
&small&这里演示&small&标签&/small&&br/&
此处将演示下标标签用法
&sub&subscript&/sub&&br/&
此处将演示上标标签用法
&sup&superscript&/sup&&br/&
&/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-5所示为上述程序的效果图。
▲图1-5 Sample1_2案例效果示例图
对于上述标签，从外观上就能够区分清楚是什么标签，也便于读者的理解记忆。下面我们来看看另外一些格式标签的效果图与应用，本部分除了介绍标签之外，我们也介绍了一些标签相应的属性，图1-6所示为表1-3中剩余的一些标签的使用效果图。
对于图1-5与图1-6中所示文本样式，如果只是想要样式，可以用CSS做出更好的与更多的效果，在下面的小节中我们也会介绍这方面的知识。接下来我们来看一下Sample1_3案例的开发过程，本案例中使用的也是格式类中的一部分标签。
▲图1-6 Sample1_3案例效果示例图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_3.html。
&html&&body&
我们来看一下引用、长引用、短引用标签的示例：
&blockquote&
现在示例为一个长引用示例，之间的所有文本都会从常规文本中分离出来，经常会在左、右两边&br/&
进行缩进（增加外边距），而且有时会使用斜体。也就是说，长引用拥有它们自己的空间。
&/blockquote&
&!--&cite& 标签通常表示它所包含的文本对某个参考文献的引用，把指向其他文档的引用分离出来，
尤其是分离那些传统媒体中的文档，如书籍、期刊，等等。如果引用的这些文档有联机版本，
还应该把引用包括在一个 &a& 标签中，从而把一个超链接指向该联机版本。--&
现在进行引用示例讲解，引用的文本将以斜体显示。它的一个隐藏功能是
它可以使你或者其他人从文档中自动摘录参考书目
&/cite&&br/&
&!--长引用与短引用可以用cite属性定义出引用的来源--&
&q&现在为一个短引用示例，短引用中插入了双引号引导。&/q&
&!--短引用与长引用是一样的，它们是在显示上有所不同。如果需要从文本中
分离出比较长的内容用长引用就好。--&
&p&下面介绍几种显示计算机代码的标签&/p&&br/&
&code&此处示例为计算机代码标签&/code&&br /&
&!—熟悉编程的读者都知道计算机代码与文本的格式是不同的，这样方便了读者寻找计算机代码片段--&
&kbd&此处为从键盘上键入文本的标签示例&/kbd&&br /&
&!--该标签用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。--&
&tt&这里演示的宽体字标签示例&/tt&&br /&
&samp&这里为&samp&标签示例&/samp&&br /&
&!--该标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，
对它们加以强调的极少情况下，
才使用这个标签。--&
&var&此处示例定义变量标签&/var&&br /&
&!--本标签是计算机文档中应用的另一个小窍门，这个标签经常与 &code& 和 &pre& 标签一起使用，
用来显示计算机编程代码范例及类似方面的特定元素。--&
&dfn&现在示例的是可标记那些对特殊术语或短语的定义标签&/dfn&&/br&
&!--尽量少用本标签为妙。作为一种通用样式，尤其在技术文档中，应该将它们与普通文本分开，这样
读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。--&
&p&接下来我们再来介绍一下预定义格式文本&/p&
&pre&&!--该标签很适合显示计算机代码，所以本标签经常与&code&标签一起使用。
其中的width属性定义了每行最大字符数，一般为40、80、132。--&
这是预格式文本。
&!--需要注意的是制表符（tab）在 &pre& 标签定义的块当中可以起到应有的作用，每个制表符占据
8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用
&pre& 标签格式化的文档段中使用空格，可以确保文本处于正确的水平位置。--&
&p&下面显示的标签定义已知范围或分数值内的标量测量：&/p&
&meter value="3" min="0" max="10"&3/10&/meter&&br&
&meter value="0.6"&60%&/meter&&br/&
&!--该标签一般用于查询磁盘用量、结果的相关性，不应用于指示进度（在进度条中）。标记进度条，
应使用 &progress& 标签。Internet Explorer 不支持&meter&标签。--&
接下来我们介绍进度条标签progress：&progress value="22" max="100"&
&/progress&&!--该标签中的max属性表示任务一共需要完成多少工作，value表示已经完成了多少任务。--&
&!--Internet Explorer 10, Firefox, Opera, Chrome以及Safari 6支持&progress&标签。--&
&/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 符号实体及对应编号
显 示 结 果
实 体 名 称
实 体 编 号
&（IE不支持）
需要注意的是，实体名称对大小写敏感，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-7所示。
▲图1-7 Sample1_4格式标签案例与表单标签效果示例图
看完效果图以后我们不难发现，这些标签同之前讲的标签在外观表示形式方面有所差别，这样便于大家的理解记忆。通过接下来的学习，我们将学会如何在网页中制作出基础表单与多种多样的特效形式。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_4.html。
&html&&body&
&p&这里为删除线标签示例——有 &del&二十&/del& &ins&十二&/ins& 件。&/p&
&!--大多数浏览器会改写为删除文本和下划线文本，一些老式的浏览器会
把删除文本和下划线文本显示为普通文本--&
&p&这里为标记标签示例：出门记着带 &mark&钥匙&/mark&&/p&&!--此标签为HTML5新加的标签--&
&p&这里为时间标签示例：我在 &time datetime=""&国庆节&/time& 会放假。&/p&
&!--本标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的--&
&p&从现在开始我们就要进入表单类标签的学习，在这里我们将学到日常生活中在网页世界中
经常见到与用到的东西。&br/&
我们首先将要学习的是form标签，下面将是form标签示例：&/p&
&form action="/example/html/form_action.asp" method="get"&
&p&姓氏: &input type="text" name="姓氏" /&&/p&
&p&名字: &input type="text" name="名字" /&&/p&
&input type="submit" value="Submit" /&
&/form&&!--由于本部分涉及服务器方面的知识，但是这里只是在介绍关于HTML的基础内容，所以
便不叙述服务器方面知识，想了解此方面内容的读者应当找一些专业讲解此方面内容的书籍资料来学习。--&
&p&以上程序示例了一个基本的form标签如何使用，接下来我们分步来看一下文本域、密码域、复选框、单
选按钮。&/p&
&form&&p&现在为文本域的创建示例：&/p&
名：&input type="text" name="名"&&br /&
姓：&input type="text" name="姓"&
&/form&&!--同上面程序一样，input标签的type属性为text时即为文本域--&
&form&&p&现在我们来看密码域的创建过程，在输入密码时浏览器将会用其他符号代替密码&/p&
用户：&input type="text" name="用户"&&br /&
密码：&input type="password" name="密码"&
&/form&&!--与文本域类似，将input标签的type属性改为password即为建立了一个密码域--&
&form&&p&现在我们来看复选框的创建过程&/p&
我喜欢步行：&input type="checkbox" name="步行"&&br /&
我喜欢汽车：&input type="checkbox" name="汽车"&
&/form&&!—将input标签的type属性改为checkbox即创建了复选框--&
&form&&p&现在我们来学习单选按钮的创建过程&/p&
男性：&input type="radio" checked="checked" name="Sex" value="male" /&&br /&
女性：&input type="radio" name="Sex" value="female" /&
&/form&&!--当用户单击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态--&
&/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 表单类标签及其描述
&optqroup&
定义选择列表中相关选项的组合
定义输入控件
定义输出的一些类型
定义生成密钥
定义供用户输入的HTML表单
&textarea&
定义多行的文本输入控件
定义&fieldset&元素的标题
&fieldset&
定义围绕表单中元素的边框
定义选择列表（下拉列表）
定义&input&元素的标注
&datalist&
定义下拉列表
定义选择列表中的选项
看了上一个程序中表单标签的基本用法后，再结合表1-6所列出的标签，读者应该有更深刻的体会。下面我们将对剩下的标签用法进行介绍。由于本部分的标签都会有几个属性，在程序只介绍一下用到的属性，以后我们会对剩下的属性进行介绍。
现在大家首先来看一下表单标签剩下的那些未介绍的标签的开发过程，图1-8所示为通过表单标签做出来后的基础版的效果图。因为本案例需要对多个标签进行介绍，所以在视觉上便会显得有些杂乱，读者在阅读时应该将每个标签与图对应着看，效果会更好。
▲图1-8 Sample1_5效果示例图
看完了效果图后我们不难发现，上面所介绍的是我们在实际中常用的一些控件，相信读者在心中肯定跃跃欲试，想要掌握这些控件的实现技术。现在我们就来介绍这些控件的开发过程，其实原理与上面介绍过的标签开发无异，开发起来并不困难。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_5.html。
&html&&body&
&p&现在示例下拉列表，您喜欢的汽车牌子：
&form&&select name="汽车"&
&option value="沃尔沃"&沃尔沃&/option&
&option value="奔驰"&奔驰&/option&
&option value="菲亚特"&菲亚特&/option&
&option value="奥迪"&奥迪&/option&
&/select&&/form&&/p&
&p&现在示例有预设值的下拉列表，您喜欢的汽车牌子为：
&form&&select name="汽车"&
&option value="沃尔沃"&沃尔沃&/option&
&option value="奔驰"&奔驰&/option&
&option value="菲亚特"&菲亚特&/option&
&option value="奥迪" selected="selected"&奥迪&/option&
&/select&&/form&&/p&
&!--上面为大家演示了两种下拉列表，第一种没有预设值，
第二种多了一个selected属性即设定预设值--&
&p&这里将要给大家演示多行输入文本&/p&
&textarea rows="10" cols="30"&
Textarea标签定义多行的文本输入控件，其中文本的字体默认为等宽字体。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是
使用 CSS 的 height 和 width 属性。&/textarea&
&!--在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。
可以通过wrap属性设置文本输入区内的换行模式--&
&p&下面我们将要介绍按钮标签：在 button 元素内部，您可以放置内容，
比如文本或图像。这是该元素与使用&input&元素创建的按钮之间的不同之处&/p&
&button type="button"&按钮1&/button&
&form&&input type="button" value="按钮2" /&&/form&
&!--需要注意的是请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，
而其他浏览器中（包括 W3C 规范）的默认值是 "submit"--&
&!--如果在 HTML 表单中使用&button&元素，不同的浏览器会提交不同的值。Internet Explorer
将提交 &button& 与 &button/& 之间的文本，而其他浏览器将提交 value 属性的内容。
请在 HTML 表单中使用 &input& 元素来创建按钮--&
&p&接下来我们来看一下围绕数据的&fieldset&标签：如果
浏览器没有显示边框，则为浏览器版本老旧造成的&/p&
&form&&fieldset&&legend&健康信息&/legend&
身高：&input type="text" /&
体重：&input type="text" /&
&/fieldset&&/form&&!--&legend&标签定义&fieldset&标签的标题--&
&!--当一组表单元素放到 &fieldset& 标签内时，浏览器会以特殊
方式来显示它们，该标签没有必需或者唯一的属性--&
&p&下面我们来介绍元素组合选项标签&optgroup&:&/p&
&select&&optgroup label="美国产的车"&
&option value="ford"&福特&/option&
&option value="chevrolet"&雪佛兰&/option&
&/optgroup&&optgroup label="德国产的车"&
&option value="mercedes"&奔驰&/option&
&option value="audi"&奥迪&/option&
&/optgroup&&/select&&!--&option&标签定义下拉列表中一个项目，
没有结束标签，常与select一起使用。&optgroup& 元素用于组合选项。当您使用一个长的
选项列表时，对相关的选项进行组合会使处理更加容易--&
&p&接下来我们看到是&output&标签的使用，&output&标签定义不同类型的输出&/p&
&form oninput="x.value=parseInt(a.value)+parseInt(b.value)"&0
&input type="range" id="a" value="50"&100
+&input type="number" id="b" value="50"&
=&output name="x" for="a b"&&/output&&!--需要注意的是在IE浏览器中不支持这个标签--&
&/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&标签的属性值及其描述
accept-charset
charset_list
规定服务器可处理的表单数据字符集
当提交表单时向何处发送表单数据
autocomplete
规定是否用表单的自动完成功能
下面会有介绍
规定在发送表单数据之前如何对其编码
规定用于发送form-data的HTTP方法
规定表单的名称
novalidata
novalidata
如果使用该属性，则提交表单时不进行验证
_blank/_self/_parent/_top/framename
规定在何处打开action URL
表1-7介绍了&form&标签在HTML 5中的属性，但是这部分都得结合服务器使用。由于篇幅问题我们并没有讲述服务器的知识，有兴趣的读者可以自己查阅这方面的资料，结合着本节介绍的属性来实践。属性是在开始标签中使用的，上面的每个例子中都有标签属性的使用。
表1-7中，我们在介绍&enctype&标签时没有介绍其值，现在我们来看一下。application/x-www-form-urlencoded：在发送前编码所有字符，为该属性默认值，multipart/form-data：在使用包含文件上传控件的表单时必须使用该值，text/plain：编码时空格转换为“+”号，不对特殊字符编码。
通过前面的案例学习过程我们发现，&input&标签及其属性的用法极其繁多，并且那只是使用了一个type属性所带来的效果。接下来我们来看一下&input&标签的其余属性，如表1-8所示。
表1-8 &input&标签的属性值及其描述
规定通过文件上传来提交的文件类型
定义图像输入的替代文本
autocomplete
规定是否使用输入字段的自动完成功能
规定输入字段在页面加载时是否获得焦点
规定&input&元素首次加载时应当被选中
当&input&元素加载时禁用此元素
规定输入字段所属的一个或多个表单
覆盖表单的action属性
formenctype
下面有介绍
覆盖表单的enctype属性
formmethod
覆盖表单的method属性
formnovalidata
formnovalidata
覆盖表单的novalidata属性
formtarget
同表单的target属性值
覆盖表单的target属性
定义&input&字段的高度
datalist-id
引用包含输入字段的预定义选项的datalist
number/data
规定输入字段的最大值
规定输入字段中的字符的最大长度
number/data
规定输入字段的最小值
如果使用该属性则允许使用一个以上的值
field_name
定义&input&元素的名称
regexp_pattern
规定输入字段的值的模式或格式
placeholder
规定帮助用户填写输入字段的提示
规定输入字段为只读
指示输入字段的值是必需的
number_of_char
规定输入字段的宽度
定义以提交按钮形式显示的图像的URL
规定输入字的合法数字间隔
之前的示例中已包含全部的值
规定&input&元素的类型
规定&input&元素的值
规定&input&字段的宽度
表1-8所示的这些属性即为&input&元素的属性，其中包含了HTML5中新增的许多属性，接下来我们便来看一下这些属性的应用效果。图1-9为&input&元素属性应用案例效果，由于之前已经讲述了type属性，所以在这里便没有再叙述这部分知识。
▲图1-9 Sample1_6案例效果图
看完了案例生成的效果图，我们就来看一下案例的开发过程。如前面案例开发过程所示，本案例的大部分标签与属性的使用方法大家应该已经掌握了，我们现在来具体学一下&input&元素的局部属性的应用，其与大部分属性的应用是相同的，读者学起来会很快。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_6.html。
&html&&body&
&p&单击此图像即为提交，这里为用图片代替按钮，alt 属性只能与type="image"配合使用
它为图像输入规定替代文本&/p&&form&
&p&姓: &input type="text" name="姓" /&&/p&
&p&名: &input type="text" name="名" /&&/p&
&input type="image" src="back.png" alt="Submit" width="64" height="64"/&&/form&
&!--即使 alt 属性不是必需的属性，但是当输入类型为 image 时，仍然应该设置该属性。如果
不使用该属性，就有可能对文本浏览器或非可视的浏览器造成使用障碍。除了 Safari，所有
主流的浏览器都支持 "alt" 属性。height 属性只适用于 &input type="image"&，它规定 image
input 的高度。其属性pixel以像素为单位，%以百分比为单位--&
&p&这里是表单的自动完成功能测试，填写并提交表单，然后再输入一遍相同的数据的开头来体
验一下自动完成功能&/p&&form autocomplete="on"&
姓:&input type="text" name="姓" /&&br /&
名: &input type="text" name="名" /&&br /&
&input type="submit" /&&/form&&p&&/p&
&!--自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，
应该显示出在字段中填写的选项。autocomplete 属性适用于 &form&，以及下面的 &input& 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color--&
&p&这里显示的为加载时自动获得焦点与禁用输入字段示例，使用该属性input元素获得焦点&/p&
姓: &input type="text" name="姓" autofocus&&br&
名: &input type="text" name="名" disabled="disabled"&&br&
&input type="submit"&&/form&
&!--被禁用的 input 元素既不可用，也不可单击。可以设置 disabled 属性，直到满足某些其他的
条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，
将 input 元素的值切换为可用--&
&p&这里显示的为max与min属性示例，max 属性与 min 属性配合使用，
可创建合法值范围&/p&&form&
输入数量: &input type="number" name="输入数量" min="0" max="10" /&
&input type="submit" /&&/form&
&!--max 和 min 属性适用于以下 &input& 类型：number, range, date, datetime, datetime-local,
month, time 以及 week。--&
&p&这里为输入段字符最大长度属性示例：&/p&&form&
&p&姓: &input type="text" name="姓" maxlength="85" /&&/p&
&p&名: &input type="text" name="名" maxlength="55" /&&/p&
&input type="submit" value="Submit" /&
&!--maxlength 属性规定输入字段的最大长度，以字符个数计。
maxlength 属性与 &input type="text"& 或 &input type="password"& 配合使用--&
&/form&&p&此处示例可接受多个值的上传字段，请尝试在浏览文件时选取一个以上的文件。
&/p&&form&选择图片：&input type="file" name="img" multiple="multiple" /&
&input type="submit" /&&/form&
&p&这里为通过pattern 属性规定用于验证输入字段的模式，输入时请按要求输入3个字母的国家代码：
&/p&&form&国家代码：&input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" /&
&input type="submit" /&&/form&
&!--模式指的是正则表达式，pattern 属性适用于以下 &input& 类型：text, search,
url, telephone, email 以及 password 。pattern 属性规定用于验证输入字段的模式。--&
&p&接下来我们演示的是输入字段预期值属性，提供可描述输入字段预期值的提示信息，
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。&/p&&form&
&input type="search" name="user_search" placeholder="输入字段预期值" /&
&input type="submit" /&&/form&
&!--placeholder 属性适用于以下的 &input& 类型：text, search, url,
password等。--&
&p&接下来我们演示的为required与size属性，required属性规定必需在提交之前填写输入字段。
如果不填写任何内容，则会有提示出现。&/p&&form&
姓名: &input type="text" name="usr_name" required="required" size="35"/&
&input type="submit" value="提交" /&&/form&
&!--required 属性适用于以下 &input& 类型：text, search, url, telephone, email,
password, date pickers, number, checkbox, radio 以及 file。--&
&/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 图像链接列表标签及其描述
定义图像地图内部的区域
定义图像映射
定义命令按钮
&figcaption&
定义&figure&元素的标题
定义超链接
定义文档与外部资源的关系
定义导航链接
定义无序列表
定义有序列表
定义列表的项目
定义定义列表
定义定义列表中的项目
定义定义列表中项目的描述
定义命令的菜单/列表
定义媒介内容的分组，以及它们的标题
&menuitem&
定义用户可以从弹出菜单调用的命令/菜单项目
定义图形，在1.6节中我们会专门讲这部分的内容
看完这些标签的类型与描述后，接下来我们先来看一下运用这些标签做出来的网页效果。通过对这些标签效果的观察，我们再来深究一下它们的具体用法。图1-10为图像链接列表标签应用实例图。图中有一个图片加载失败，这是因为我们故意写错路径名进而显示alt属性。
因为篇幅问题本部分标签分成了两部分，我们刚才所看到的效果图为其中的第一部分标签案例的示意图，本部分标签为图像标签与一部分列表标签的示例。表1-9列出的&canvas&标签由于是本书的重点内容，所以我们将其放到了1.6节细致地讲述。我们先来看一下Sample1_7的案例开发过程。
▲图1-10 Sample1_7案例效果图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_7.html。
&html&&head&&title&Sampel1_7&/title&&/head&&body&
&p&这里我们演示img标签及其属性的用法，本标签创建的是被引用图像的占位空间&/p&
&img src="pic/H5.jpg"
alt="W3C的正式HTML5徽标" height="128" width="128" /&
&img src="pic/H523.jpg"
alt="W3C的正式HTML5徽标" height="128" width="128" /&
&!--src和alt为该标签的必需属性，在HTML中img标签没有结束标签，
第二个img标签为演示如果图像不能显示则显示alt属性--&
&p&接下来我们来演示的为设置背景图片，如果图片小于页面那么图片会重复&/p&
&body background="pic/background1.png"&
&p&接下来我们演示的是设置图像的对齐方式：&/p&
&h2&未设置对齐方式的图像：&/h2&
&p&图像 &img src ="pic/back.png"& 在文本中&/p&
&h2&已设置对齐方式的图像：&/h2&
&p&图像 &img src="pic/back.png" align="bottom"& 在文本中的对齐方式为bottom&/p&
&p&图像 &img src ="pic/back.png" align="middle"& 在文本中的对齐方式为middle&/p&
&p&图像 &img src ="pic/back.png" align="top"& 在文本中的对齐方式为top&/p&
&!--其中bottom对齐方式是默认的对齐方式--&
&p&现在我们把图像作为链接来使用：
&a href="Sampel1_6.html"&
&img border="0" src="pic/back.png" /&&/a&&/p&
&p&现在我们演示的为创建带有可供单击区域的图像地图，其中每个区域都是一个超链接，
请单击图像上的星球，把它们放大。&/p&
&img src="pic/xingqiu.jpg" border="0" usemap="#planetmap" alt="星球" /&
&map name="planetmap" id="planetmap"&
&area shape="circle" coords="180,139,14" href ="pic/jinxing.png"
target ="_blank" alt="金星" /&
&area shape="circle" coords="129,161,10" href ="pic/shuixing.png"
target ="_blank" alt="水星" /&
&area shape="rect" coords="0,0,110,260" href ="pic/sun.jpg"
target ="_blank" alt="太阳" /&&/map&
&!--area标签定义图像映射中的区域，总会嵌套在map中，shape属性定义了区域形状，coords
为区域的坐标值一般的4个坐标值为定义的矩形的左上角与右下角的坐标值x、y三个值为圆形
的原点坐标与半径，多边形poly的坐标为x1,y1,x2,y2,…,xn,yn--&
&!--img 元素中的 "usemap" 属性引用 map 元素中的“id”或“name”属性（根据浏览器），
所以我们同时向 map 元素添加了“id”和“name”属性。在以上几个例子中涉及href属性时
我们给出的是路径位置，这里也可以给URL。设置target的属性值为blank表示在新链接中打开--&
&p&接下来我们来演示一下无序列表的使用，首先我们看到的是不同类型的无序列表：&/p&
&h4&Disc 项目符号列表：&/h4&
&ul type="disc"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ul&&h4&Circle 项目符号列表：&/h4&
&ul type="circle"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ul&&h4&Square 项目符号列表：&/h4&
&ul type="square"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ul&
&p&下面我们将看到嵌套类型的无序列表：&/p&
&h4&一个嵌套列表：&/h4&&ul&
&li&咖啡&/li&&li&茶
&ul&&li&红茶&/li&&li&绿茶&/li&&/ul&
&/li&&li&牛奶&/li&&/ul&
&!--标签&li&定义列表项目，常和无序列表标签&ul&与有序列表标签&ol&一起使用--&
&/body&&/html&
第2～6行为&img&标签的示例，在HTML中&img&标签没有结束标签，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。
&html&&head&&title&Sample1_8&/title&&/head&&body&
&p&接下来我们来看一下有序列表的使用，我们看到的是不同类型的有序列表：&/p&
&h4&数字列表：&/h4&
&ol&&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&字母列表：&/h4&
&ol type="A"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&小写字母列表：&/h4&
&ol type="a"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&罗马字母列表：&/h4&
&ol type="I"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&&/ol&
&h4&小写罗马字母列表：&/h4&
&ol type="i"&
&li&苹果&/li&&li&香蕉&/li&&li&柠檬&/li&&li&橘子&/li&
&/ol&&!--有序列表的类型默认为阿拉伯数字，其余的还有大写字母、小写字母、罗马字母等。--&
&p&接下来我们来看一下定义定义列表标签&dl&的用法：&/p&
&h2&一个定义列表：&/h2&
&dt&计算机&/dt&
&dd&用来计算的仪器 ……&/dd&
&dt&显示器&/dt&
&dd&以视觉方式显示信息的装置 ……&/dd&
&!--&dl& 标签用于结合 &dt&（定义列表中的项目）和 &dd&（描述列表中的项目）--&
&!--&menu&与&command&两个标签在各大主流浏览器中都不支持，&menuitem&只有Firefox浏览器
支持，所以在这里不再介绍这三个标签。--&
&p&现在我们来看一下超链接标签&a&的用法：&/p&
&a href=""&Baidu&/a&
&!--&a&用于从一张页面链接到另一张页面，在用于样式表时，&link& 标签得到了几乎
所有浏览器的支持。但是几乎没有浏览器支持该标签其他方面的用途，所以在此便不再介绍&link&标签--&
&p&现在我们来看一下HTML5标准中新增的标签&nav&的用法，本例中我们暂定Sample1_4为主页：&/p&
&nav&&a href="Sampel1_4.html"&主页&/a&
&a href="Sampel1_3.html"&前一页&/a&
&a href="Sampel1_5.html"&后一页&/a&&/nav&
&!--&nav& 标签定义导航链接的部分，Internet Explorer 8 以及之前的版本不支持本标签，其余的
主流浏览器都是支持本标签的。--&
&p&接下来我们来看一下在同一页面内的跳转：&br/&
&a href="#C4"&查看 章节 4。&/a&&/p&
&h2&章节 1&/h2&
&p&这里是章节内容&/p&
&h2&章节 2&/h2&
&p&这里是章节内容&/p&
&h2&章节 3&/h2&
&p&这里是章节内容&/p&
&h2&&a name="C4"&章节 4&/a&&/h2&
&p&这里是章节内容&/p&
//…这里省略了部分代码，读者可以自行查阅中的源代码。
&p&被锁在框架中了吗？&/p&
&a href="Sampel1_4.html" target="_top"&请单击这里！&/a&
&!--将target属性设置为“_top”这个目标使得文档载入包含这个超链接的窗口，用“_top”目标将会
清除所有被包含的框架并将文档载入整个浏览器窗口。--&
&/body&&/html&
第2～17行为有序列表的标签应用，在上一个案例中我们介绍了无序列表标签的使用，有序列表与无序列表的区别就表现在显示时一个有顺序的排列，一个没有顺序排列。想要按顺序排列，一般就是列表项目前面加上表明顺序的数字字母等，就是有序列表的不同种类。
第18～26行示例了定义列表标签&dl&的用法，其经常会与&dt&（定义列表中的项目标签）、&dd&（描述列表中的项目标签）一起使用来定义列表，读者看着示例学习即可。
第27～38行演示了链接标签的用法，在HTML5中新增的&nav&标签定义导航链接的部分。我们平时在浏览网页时不会单纯在一个页面中浏览，肯定会单击链接之类的切换页面，其中的上一页、下一页、主页等链接便是由此标签定义的。
第39～54行示例的内容为在同一页面下跳转。除了在不同页面之间切换，有时我们浏览一个网页到最下面部分时想回到顶部，如果没有“回到顶部”这个按钮，我们只能拖拉滚动条来实现这一功能。这里的示例便是在同一页面的某处添加信息，本页中如有需要跳转到该部分，单击链接即可。
到此为止已完成对图像、链接、列表标签开发的讲解。本部分标签不多，但是每个标签的属性都不少，读者在学习这部分知识时应将注意力放到各属性上。幸运的是，不少的属性与前面标签中的属性的作用是一样的，读者学起来上手不会太慢的。
1.3.6 表格、元信息等标签
到本章为止我们已介绍完需要学的主要部分的标签，接下来便来介绍一下其他标签。这部分的表格标签与元信息我们会详细介绍，剩下部分的标签因为用到次数较少便不再赘述其开发过程。表1-10所示为表格、元信息等标签及其描述。
表1-10 表格、元信息等标签及其描述
定义对象的参数
定义嵌入对象
定义表格标题
为外部应用程序定义容器
定义表格中的表头单元格
定义客户端脚本
定义表格中的行
定义表格中的单元
定义媒介源
定义表格中的表头内容
定义声音内容
定义表格中的主体内容
定义关于文档的信息
定义表格中的表注内容
定义关于HTML文档的元信息
&colgroup&
定义表格中供格式化的列组
定义页面中所有链接的默认地址或默认目标
定义表格中一个或多个列的属性值
&noscript&
定义针对不支持客户端脚本的用户的代替内容
定义用在媒体播放器中的文本轨道
表格标签&table&定义了HTML表格，简单的表格由table及一个或多个tr、th或td元素组成。复杂点的HTML表格可能会包括caption、col、colgroup、thead、tfoot以及tbody元素。那么我们现在便来看一下第一个表格类程序，图1-11所示为表格标签的案例效果图。
▲图1-11 Sample1_9案例效果图
本案例是我们本章节的第一个表格类案例，通过案例运行效果图与标签介绍我们便可以想到通过使用本部分介绍的表格标签案例能够创造出各种样式的且在日常生活中需要的类型的表格，那么现在就来看一下案例Sample1_9的开发过程。
代码位置：见书中源代码/第1章目录下的HTML5/Sample1_9.html。
&html&&head&&title&Sample1_9&/title&&/head&&body&
&p&从现在开始我们便来学习表格标签的使用，我们首先看到的是&table&标签的用法：&/p&
&h4&只有一行一列的表格：&/h4&
&table border="1"&&tr&
&td&100&/td&
&/tr&&/table&
&h4&一行三列的表格：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&
&/tr&&/table&
&h4&两行三列的表格：&/h4&
&table border="1"&
&tr&&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&&/tr&&/table&
&!--每个表格由&table&标签开始，表格行由&tr&标签开始，每个数据由&td&标签开始。--&
&p&现在我们学习的是带有边框的表格：&/p&
&h4&带有普通的边框：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有粗的边框：&/h4&
&table border="8"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有很粗的边框：&/h4&
&table border="15"&
&tr&&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&这个表格没有边框：&/h4&
&table&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&
&/tr&&/table&
&!--上面演示的全为边框示例，其中没边框时可以不加border属性，也可以使其值为0。
border属性用于设置边框的宽度。--&
&p&接下来我们来演示表格中的标题与怎么样为表格添加标题：&/p&
&h4&表头：&/h4&
&table border="1"&
&tr&&th&姓名&/th&&th&电话&/th&&th&电话&/th&&/tr&
&tr&&td&张三&/td&&td&123456&/td&&td&123455&/td&
&/tr&&/table&
&h4&垂直的表头：&/h4&
&table border="1"&&tr&&th&姓名&/th&&td&李四&/td&
&/tr&&tr&&th&电话&/th&&td&12345&/td&
&/tr&&tr&&th&电话&/th&&td&21345&/td&&/tr&&/table&
&h4&这个表格有一个标题，以及粗边框：&/h4&
&table border="6"&
&caption&这是我的标题&/caption&&tr&
&td&100&/td&&td&200&/td&&td&300&/td&&/tr&
&tr&&td&400&/td&&td&500&/td&&td&600&/td&&/tr&&/table&
&!--表格的属性，行用&tr&表示，&td&表示列，&th&相当于表头，&table&表示表格，
这几个标签构成表单最基本的样子。&th&为表格中的表头，&caption&为表格的标题。--&
&/body&&/html&
第2～15行演示了基础的表格标签的使用方法。我们都知道表格中有行与列，所以在HTML中它们都有相应的标签，&tr&标签定义表格的一行，&td&标签定义表格每行中的一项数据，在一般情况下&table&会经常与&tr&、&td&一起使用的。
第16～35行为表格的边框效果示例，表格标签中的border属性用于设置边框的宽度属性，不设置这个属性时默认为0。在设置边框宽度时应该本着合适的原则，一般情况下我们设置border值为1或者不设置就行。
第36～53行为表格标题的示例。表格标签中&th&属性定义表格中的表头，设计表格时即为第一行内容，所以&th&为表格内部的内容。而caption属性用于设置表格的标题，其位置是在表格的外部，通过本部分案例的运行可以看到这些区别。
由于篇幅问题，所以将本小节的标签分为了3部分介绍。这3部分其实可以组合成为一个程序，但是这样做代码过长，有点不利于读者学习，所以我们将其分为了3部分。上面的示例为第一部分的示例，接下来我们来看一下第二部分的案例运行效果图，如图1-12所示。
▲图1-12 Sample1_10案例效果图
本部分案例主要讲述了表格的各种边框的显示形式与表格的嵌套形式。这些形式在CSS中也可以设置，编程时要具体分析什么情况下用到哪种形式，有时层叠样式表比本节演示的要简单，有时不如本节演示的简单，我们来看一下具体的案例开发。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_10.html。
&html&&head&&title&Sample1_10&/title&&/head&&body&
&p&接下来我们将演示如何定义跨行或跨列的表格单元格：&/p&
&h4&横跨两列的单元格：&/h4&
&table border="1"&&tr&
&th&姓名&/th&&th colspan="2"&电话&/th&&/tr&
&tr&&td&张三&/td&&td&123456&/td&&td&123455&/td&&/tr&&/table&
&h4&横跨两行的单元格：&/h4&
&table border="1"&&tr&
&th&姓名&/th&&td&李四&/td&&/tr&
&tr&&th rowspan="2"&电话&/th&&td&12345&/td&&/tr&
&tr&&td&21345&/td&&/tr&&/table&
&!--colspan 属性规定表头单元格可横跨的列数，rowspan 属性规定表头单元格可横跨的行数。--&
&p&接下来我们来演示一下在表格内如何使用其他类型的标签&/p&
&table border="1"&&tr&&td&
&p&这是一个段落。&/p&&p&这是另一个段落。&/p&
&/td&&td&这个单元包含一个表格：
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&
&/tr&&/table&&/td&
&td&这个单元包含一个列表：
&ul&&li&苹果&/li&&li&香蕉&/li&&li&菠萝&/li&
&/ul&&/td&&td&HELLO&/td&
&/tr&&/table&
&!--从本部分可以看出，如果想在表格内部嵌套一些其他标签则直接在&td&标签内部继续添加标签即可。--&
&p&现在我们要演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用：&/p&
&h4&没有 cellpadding，即单元格与内容没有距离：&/h4&
&table border="1"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&带有 cellpadding，即单元格与内容有距离：&/h4&
&table border="1" cellpadding="10"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&!--cellpadding 属性规定单元边沿与其内容之间的空白。--&
&h4&带有 cellspacing：&/h4&
&table border="1" cellspacing="10"&&tr&
&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&!--cellspacing 属性规定的是单元之间的空间。从实用角度出发，
最好不要规定 cellpadding，而是使用 CSS 来添加内边距。--&
&/body&&/html&
第2～12行演示如何定义跨行或者跨列的表格，colspan属性规定的是可以横跨的列数，rowspan为可以横跨的行数属性，这两个属性应用在表头属性中，因为我们平时制定表格时只有表格的表头需要合并。
第13～26演示的为在表格内部如何应用其他类型的标签，这里的思想其实就是嵌套。上面的案例中我们在表格中嵌套了段落、表格、列表，这里只是一个示例，还可以嵌套其他很多标签，我们在这里不多介绍了。
第27～43行演示的为用于规定单元格边与内容的距离和单元格之间的距离的两个属性的应用，cellpadding与cellspacing的区别我们在案例中进行了解释。需要注意的是在真正开发中我们最好不要用这两个属性，使用CSS样式表会更简便。
到这里为止只有剩下为数不多的几个标签没有介绍了，其中还包括一些今后在WebGL开发中不常用的一些标签，所以在此我们不再赘述了。那么我们先来看一下图1-13所示的剩下的一些标签的案例运行效果图。
▲图1-13 Sample1_11案例效果图
看了这部分标签案例的示意图不难发现其与上一个案例的内容其实是相近的，所以学习本部分标签的同时，也是在温习表格标签的格式与样式的内容。做过Excel表格的读者都知道表格的排版其实也挺麻烦的，在我们之前与将要介绍的案例中会包含用得最多的一些格式，我们现在来看一下案例的开发过程。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_11.html。
&html&&head&&title&Sample1_11&/title&&/head&&body&
&p&接下来我们来看一下如何向表格与单元格内部添加背景颜色或者背景图片：&/p&
&h4&为表格添加背景颜色：&/h4&
&table border="1" bgcolor="red"&
&tr&&td&100&/td&&td&200&/td&&/tr&
&tr&&td&300&/td&&td&400&/td&&/tr&&/table&
&h4&为表格单元格添加背景颜色：&/h4&
&table border="1"&&tr&
&td bgcolor="red"&100&/td&&td&200&/td&&/tr&
&tr&&td bgcolor="blue"&300&/td&&td&400&/td&&/tr&&/table&
&p&现在我们来看一下用align属性在单元格中排列内容&/p&
&table width="400" border="1"&&tr&
&th align="left"&消费项目&/th&
&th align="right"&一月&/th&
&th align="right"&二月&/th&&/tr&
&tr&&td align="left"&衣服&/td&
&td align="right"&$100&/td&
&td align="right"&$200&/td&&/tr&
&tr&&td align="left"&化妆品&/td&
&td align="right"&$100&/td&
&td align="right"&$150&/td&&/tr&
&tr&&td align="left"&食物&/td&
&td align="right"&$500&/td&
&td align="right"&$600&/td&&/tr&
&tr&&th align="left"&总计&/th&
&th align="right"&$700&/th&
&th align="right"&$950&/th&&/tr&&/table&
&!--align属性规定单元格内容的水平对齐方式。其值除了left、right之外还有center（居中对齐）、
justify（对行进行伸展，这样每行都可以有相等的长度）、char（将内容对准指定字符）。--&
&p&接下来我们来演示如何使用“frame”属性控制围绕表格的边框：&/p&
&p&表格的frame属性为border：&/p&
&table frame="border"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为above：&/p&
&table frame="above"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为below:&/p&
&table frame="below"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为hsides:&/p&
&table frame="hsides"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&p&表格的frame属性为vsides：&/p&
&table frame="vsides"&&tr&
&th&月份&/th&&th&消费&/th&&/tr&
&tr&&td&一月&/td&&td&$100&/td&&/tr&&/table&
&!--frame 属性无法在 Internet Explorer 中正确地显示。除了以上示意的五个值之外，还有void
（不显示外边框）、lhs（显示左边的外侧边框）、rhs（显示右边的外侧边框）。不过
从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加边框样式。--&
&/body&&/html&
第2～10行示例如何向表格内部添加背景颜色或者背景图片，这些操作的实质是一样的，我们这里只介绍了背景颜色的添加，图片的添加过程与之前其他示例中添加图片的步骤是一致的。只需要将程序中的bgcolor改掉，再增加图片的位置即可。
第11～29行为align属性的介绍，该属性定义了单元格中的内容的排列。其值除了left、right之外，还有center、justify、char，分别表示居中、对行进行伸展、内容对准指定字符。
第30～54行展示的是frame属性的应用，这个属性控制围绕表格的边框。读者在学习这个属性时需要将每个属性值对应的效果记清楚，因为这个属性的值可选的有很多，这里只列了其中一部分，读者还可以全部试一下，我们在注释中已经列出其他值。
到此为止我们便介绍完了HTML中的标签，因为本书的主体部分并不是HTML，所以我们只是介绍了这些标签的部分属性，但是这些足以应付在今后开发WebGL时遇到的问题。我们只是介绍了其中的基础用法，所以今后的开发中还应该多学习此方面的更多知识。
1.3.7 HTML5中的全局属性
在上面介绍标签时我们就不止一遍地说过局部属性与全局属性（见表1-11），在介绍标签时我们已经介绍过一部分比较重要的局部属性了，剩下的一些不常用的局部属性我们便不再介绍。现在我们便来讲述一下HTML中的全局属性。
表1-11 HTML全局属性
contenteditable
规定元素内容是否可以编辑
规定激活元素的快捷键
规定元素中内容的文本方向
规定元素是否可拖动
规定元素不再相关
规定元素的唯一id
用于存储页面或应用程序的私有定制数据
contextmenu
规定元素的上下文菜单。上下文菜单在用户单击元素时显示
规定元素内容的语言
spellcheck
规定是否对元素进行拼写和语法检查
规定元素的行内CSS样式
规定元素的Tab键次序
规定有关元素的额外信息
规定是否应该翻译元素内容
规定元素的一个或多个类名（引用样式表中的类）
规定在拖动被拖动数据时是否进行复制、移动或链接
全局属性适用于HTML中的各种标签，因为在平时开发的时候会经常用到这些属性，所以我们在本小节中将其集中起来，然后对每个属性进行详细的介绍；其中有一两个没介绍，是因为主流浏览器并未支持该属性。现在我们先来看一下图1-14所示的部分全局属性示例图。
▲图1-14 Sample1_12案例效果图
本例中我们演示了全局属性中的一部分，因为这些属性可以在支持全局属性的标签中使用，基本为全部的标签，所以我们这里只是示例了其中几种标签的全局变量的使用。在应用时读者也可以使用别的标签进行试验。下面我们来看一下程序的开发过程。
代码位置：见书中源代码/第1章目录下的HTML5/Sample1_12.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_12&/title&
&script type="text/javascript"&
function change_header(){
document.getElementById("myHeader").innerHTML="Nice day!";}&/script&
&style type="text/css"&
h1.intro {color:}
p.important {color:}&/style&
&!--此处为样式表内容，在后面会有介绍，这里不详细介绍。--&
&style type="text/css"&
h1.intro1{color:}
.important1{background-color:}&/style&&/head&
&p&我们首先来演示accesskey，其实质就是为某元素设置快捷键，使其获得焦点。&/p&
&a href="" accesskey="b"&百度（accesskey键设为b）&/a&&br /&
&a href="" accesskey="s"&新浪（accesskey键设为s）&/a&
&!--请使用“Alt+accesskey”或者“Shift+Alt+accesskey”来访问带有指定快捷键的元素，一般
本属性是用在&a&、&area&、button&、&input&、&label&、&legend&等标签中。--&
&p&现在我们来演示class属性的应用，第一个示例为单个class值，
第二个示例为一个标签应用多个class值&/p&
&h1 class="intro"&h1标题1演示单个class属性值&/h1&
&p class="important"&请注意这个重要的段落。:)&/p&
&p&现在我们来演示一下应用多个classs值的案例：&/p&
&h1 class="intro1 important1"&h1演示多个class属性，只要在声明第一个值时加上空
格后写之后的值即可&/h1&
&!--class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过
JavaScript 来改变带有指定 class 的 HTML 元素。--&
&p&现在我们来讲述一下规定元素是否可编辑的属性的应用:&/p&
&p contenteditable="true"&这里是一段可以编辑的段落，读者可以将光标点到这里自行编辑。&/p&
&!--需要注意的是元素中如果未设置contenteditable时，本元素会继承其父类元素。--&
&p&接下来我们来看一下规定元素内容文本方向的属性的应用：&/p&
&p dir="rtl"&文本方向为从右向左!&/p&
&!--dir 属性在以下标签中无效：&base&、&br&、&frame&、&frameset&、&hr&、&iframe&、
¶m& 以及 &script&。dir有rtl与ltr两个值，分别为右到左与左到右。--&
&p&现在我们来看一下隐藏属性hidden，下面有两段话，一段有隐藏属性，一段没有隐藏属性：&/p&
&p hidden="hidden"&这是一段隐藏的段落。&/p&
&p&这是一段可见的段落。上面还有一段隐藏段落，这里我们只是在做实验。&/p&
&!--hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。
然后，JavaScript 可以删除 hidden 属性，以使此元素可见。--&
&h1 id="myHeader"&Hello World，这里我们演示的为id属性的应用，用JavaScript取得本
元素id然后改变本元素的内容。&/h1&
&button onclick="change_header()"&改变文本&/button&
&!--id 属性规定 HTML 元素的唯一 id，id 属性可用作链接锚（Link Anchor），
通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。--&
&p&这里为lang属性值的演示，lang属性值必须使用有效的ISO语言代码。&/p&
&p lang="fr"&Ceci est un paragraphe.&/p&
&p lang="en"&Hello , How are you?&/p&
&!--本属性是为让浏览器调整其表达元素内容的方式，可以使网页只显示某种特定语言。--&
&/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-15为剩下的属性的代码运行效果。看完了图后我们便发现本部分案例内容并不多，但是这部分内容中的脚本方法有点繁杂，我们开发时不进行重点讲述，因为会在下面的章节中专门介绍这些内容。读者看到这部分时先跳过这里，主要看属性的开发。
▲图1-15 Sample1_13案例效果图
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_13.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_13&/title&&/head&
&style type="text/css"&
#div1 {width:350height:70padding:10border:1px solid #}
&/style&&script type="text/javascript"&
function allowDrop(ev){
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();}&/script&
&p&现在我们演示元素是否可拖动的属性draggable，下面一段文本可以被拖动到文本域中：&/p&
&div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&&/div&&br /&
&p id="drag1" draggable="true" ondragstart="drag(event)"&
这是一段可移动的段落。请把该段落拖入上面的矩形。&/p&
&!--在head部分我们定义了div的样式，这里不进行解释，下一节中会有专门的层叠样式表的讲述。
ondrop、ondragover、ondragstart为标签中的事件属性，表示元素被拖动时运行的脚本、当元素在
有效拖放目标上正在被拖动时运行的脚本、在拖动操作开端运行的脚本。这些事件属性表示当触发
这些事件时，会调用相应的JavaScript脚本方法，这些方法在head部分中已经写好。--&
&p&现在我们来看一下style属性的应用：&/p&
&h1 style="color:text-align:center"&这里为h1标题&/h1&
&p style="color:red"&这里为一个段落&/p&
&!--style 属性规定元素的行内样式（Inline Style），style属性将覆盖任何全局的样式设定。--&
&p&tabindex 属性规定元素的 Tab 键控制次序，1是第一个：&/p&
&a href="" tabindex="2"&Baidu&/a&&br /&
&a href="" tabindex="1"&Sina&/a&&br /&
&a href=".cn/" tabindex="3"&W3school&/a&
&!--请尝试使用键盘上的 "Tab" 键在链接之间进行导航。--&
&p&下面我们将演示title属性的使用，title 属性规定关于元素的额外信息。&/p&
&abbr title="People's Republic of China"&PRC&/abbr& was founded in 1949.
&!--通常会在鼠标移到元素上时显示一段工具提示文本，title 属性常与 form
以及 &a& 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和
&acronym& 元素的必需属性。--&
&p contenteditable="true" spellcheck="true"&这里是可编辑的段落，请试着编辑文本。&/p&
&!--spellcheck 属性规定是否对元素进行拼写和语法检查。--&
&/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-16所示。因为本部分案例是在某些事件发生时才会触发的，所以效果图中不能显现出所有事件的运行效果，读者应该自己去验证这些事件。
表1-12 HTML5中的事件
onafterprint
文档打印后运行的脚本
onbeforeprint
文档打印前运行的脚本
页面加载介绍后运行的脚本
当浏览器窗口被调整大小时触发
一旦页面已下载时触发
元素失去焦点时运行的脚本
在元素值被改变时运行的脚本
当元素失去焦点时运行的脚本
当元素中文本被选中后触发
在提交表单时触发
在用户按下按键时触发
onkeypress
在用户敲击按钮时触发
在用户释放按键时触发
元素上发生鼠标单击时触发
ondblclick
元素上发生鼠标双击时触发
onmousedown
当在元素上按下鼠标按钮时触发
onmousemove
当鼠标指针移动到元素上时触发
当在元素上释放鼠标按钮时触发
onmouseout
当鼠标指针移出元素时触发
onmouseover
当鼠标指针移动到元素上时触发
▲图1-16 Sample1_14案例效果图
我们这里只示例一小部分事件，意在向读者介绍事件的基本用法，读者在日后的开发中肯定会遇到其他事件或者应用到其他事件。这里的举例仅为冰山一角，大家还需要自行查阅一些资料了解事件属性。接下来我们来看一下图1-16所示的案例开发过程。
代码位置：见随书中源代码/第1章目录下的HTML5/Sample1_14.html。
&!DOCTYPE html&
&html&&head&&title&Sample1_14&/title&
function printmsg(){
//文档打印之后执行的脚本方法
alert("此文档现在正在打印！");}
function load(){
//页面加载完成后需要执行的脚本方法
alert("页面已加载！");}
function showMsg(){
//浏览器窗口尺寸改变时执行的脚本方法
alert("您已改变浏览器窗口的尺寸！");}
function upperCase(){
//元素失去焦点时执行的脚本方法
var x=document.getElementById("fname").
document.getElementById("fname").value=x.toUpperCase();}
function checkField(val){
//在元素值改变时执行的脚本
alert("输入值已更改。新值是：" + val);}
function copyText(){
//单击鼠标时执行的脚本
document.getElementById("field2").value=document.getElementById("field1").}
function mouseDown(){
//鼠标按下时执行的脚本
document.getElementById("p1").style.color="red";}
function mouseUp(){
//鼠标抬起时执行的脚本
document.getElementById("p1").style.color="green";}
&/script&&/head&
&body onafterprint="printmsg()" onload="load()" onresize="showMsg()"&
&p&本部分案例中我们试验的事件执行脚本时只写了alert，这里只是一个示例，
在实际开发中我们应该在对应部分开发自己需要的代码。&/p&
&h1&请试着打印此文档，这时候会有提示出现。&/h1&
&p&onbeforeprint事件与onafterprint事件的用法一样，只是一个是在打印之
前执行脚本，一个是在打印之后执行脚本。&/p&
&!--Internet Explorer 和 Firefox 支持 onafterprint 属性。在 IE 中，
onafterprint 事件在打印对话框出现之前而不是之后发生。--&
&p&&body&元素中还有一个onload事件，该事件表示在页面加载完毕后执行脚本。&/p&
&p&onresize事件表示当浏览器窗口改变时执行脚本，本案例也进行了示例，
读者可以改变一下浏览器窗口大小看一下结果。&/p&
&p&请随意输入一段英文字符，然后把焦点移动到字段外（鼠标单击输入框之外）：&/p&
请随意输入一段英文字符，在本元素失去焦点时小写字母会变为大写字母：
&input type="text" name="fname" id="fname" onblur="upperCase()"&
&p&请修改输入字段中的文本，然后在字段外单击以触发 onchange。&/p&
请输入文本：&input type="text" name="txt" value="Hello"
onchange="checkField(this.value)"&
&p&当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。&/p&
Field1: &input type="text" id="field1" value="Hello World!"&&/br&
Field2: &input type="text" id="field2"&&br&&br&
&button onclick="copyText()"&复制文本&/button&
&p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"&
请单击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本
颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp()函数把文本
的颜色设置为绿色。&/p&
&/body&&/html&
第3～21行为事件触发时需要执行的JavaScript脚本。本部分的脚本方法只有alert一句话，丝毫没有技术含量，因为这里只是单纯地告诉读者事件运行时执行这段代码，读者在开发时应根据需要进行开发。
第22～32行为body元素的一部分示例。在body元素的起始标签中我们声明了onafterprint、onload、onresize三个事件，这三个事件何时触发我们在注释中已经介绍，我们在前面声明的脚本方法在相应的事件发生时执行。
第33～47行为onblur、onclick、onmousedown、onmouseup几个事件的应用示例。除失去焦点时执行的脚本事件，剩下的几个事件都与鼠标有关系，但是这只是其中一小部分，还有很多关于鼠标的事件我们未介绍，应用这些事件我们可以完成很多事情。
到此为止，我们便介绍完毕HTML事件了。因为篇幅有限，所以很多事件没有列出来，也没有进行示例用法解释，读者若是需要了解这方面的内容，可以在网上查找相关资料。学习事件部分并不困难，它的精髓在JavaScript脚本的开发过程中，我们在后面的章节会介绍。
1.4 初识CSS
CSS层叠样式表用来规定HTML文档的呈现形式外观和格式编排。本节我们会向读者简要介绍CSS，因为此部分不是我们开发的重点。我们会讲到如何创建和应用CSS样式等，为我们将来的开发打下基础。把样式添加到HTML中是为了解决内容与表现分离的问题。
HTML标签原本被设计用于定义文档内容。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于HTML标签与属性不断地被添加到HTML的规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难，所以W3C在HTML 4.0之外创造出样式。
1.4.1 CSS简介
样式表定义如何显示HTML元素，样式通常保存在外部的“.css”文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS可以称得上Web设计领域的一个突破。
我们作为开发者可以为每个元素定义好样式，并将其应用到不同的页面中。也可以进行全局的布置，只需要简单地改变样式然后在网站中的所有元素均会自动地更新。像这样的工作方式大大减少了我们的开发时间，提高了效率。
h1 {color: font-size:14}。
上述代码为CSS的基本定义，并且代码中定义了多种样式信息。可以在单个的HTML元素、HTML页的头元素、或一个外部的CSS文件中规定样式。甚至可以在同一个HTML文档内部引用多个外部样式表。
一般而言，所有的样式会根据下面的规则层}
我要回帖
更多推荐
- ·天猫收费标准的费率是多少？
- ·什么是天猫收费标准费率？
- ·有没专业服务好的跨境外贸收款平台台推荐？
- ·在鸽场做事,睡在宿舍里0点被鸽棚有老鼠怎么处理咬了,鸽场是否负责人？
- ·一个月扣完五险后开3700多应该买什么价位的买智能手表好还是机械表好？
- ·王国风云2直辖上限领无上限对电脑有效吗
- ·为什么宽带连接老掉线老掉线呢，已开始终连接
- ·跪求春风十里不如你11-15西虹市首富百度云链接资源！要有效链接，有效的话采纳直接甩！跪求！谢谢大佬们
- ·read-only file system怎么删除
- ·通风系统设备及管路附件设计选用手册选用与安装怎么样
- ·僵尸毁灭工程右键建筑菜单显示不全怎么办
- ·小爱同学软件爱这个软件可以一对一吗
- ·如何看待6s苹果tlc依旧使用tlc
- ·怎样能知道你的微信微信分身是不是容易封号被封号了
- ·用facetoneps一键美白插件后还可以恢复原图吗
- ·小米5S，4G内存32Gqq邮箱中转站容量不足和3G内存64Gqq邮箱中转站容量不足 哪个更好
- ·Kontakt 5 系统升级包包怎么用的
- ·客集齐网站要整顿多久里面有不被网站允许的字符是?
- ·Wordsap只能输入一个字字，后面就会消失一个字，该怎么办
- ·text plain/html与text plain/plain有什么区别
- ·请问PHP微信开发 分享问题怎样开发?微信开发 分享问题的问题如何开发
- ·flowportal 试用版版flow jo 怎么导入文件
- ·我们为什么要上大学我的Focusrite Scarlett 2i2可以在YY上K歌
- ·手机破解wifi密码
- ·小米手机流量打不开n3咋打不开数据流量了
- ·xmind可以画流程图吗P图吗
- ·为什么打印出来字体那么小，字体不公正
- ·加拿大28软件下载;学习，哪个教程比较好
- ·这个怎么安装啊？哪位大哥可以借给我1000块钱教一下砸。
- ·cartoon文件cartoontime是什么意思程序里的
- ·如何查询天龙八部红色仙侣侣激活码使用时间
- ·头戴式耳机下面哪款好些？下面三款有什么区别吗？
- ·为什么现在年轻人不爱党的原因都不爱运动
- ·巴西世界杯淘汰赛是上座率很高吗
- ·怎么我练三角肌的时候第二天没有酸痛感
