html总结

作者：菜鸟追梦旅行 | 2024-02-16 11:33:45

踩

html总结

html简介

HTML 编辑
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

由来
万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

定义
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
超文本标记语言
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。涉及到，不同浏览器之间的兼容问题。

语言特点编辑
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。
设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（实体定义!ENTITY % i18n）、指定字典中的元信息、等等。

以下表格列出了 HTML head 元素：
<head>  定义了文档的信息
<title>  定义了文档的标题
<base>  定义了页面链接标签的默认链接地址
<link>  定义了一个文档和外部资源之间的关系
<meta>  定义了HTML文档中的元数据
<script>  定义了客户端的脚本文件
<style>  定义了HTML文档的样式文件

主体内容
<body></body>；
网页中显示的实际内容均包含在这2个正文标记符之间。
正文标记符又称为实体标记。

HTML 标签
HTML 标记标签通常被称为 HTML 标签。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

html元素介绍

一、HTML 头部元素
1.<head> 元素是所有头部元素的容器。
<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
1.1HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
1.2HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="https://www.baidu.com/" />
<base target="_blank" />
</head>
<body>
  <a href=" ">百度</a><!—默认跳转到百度页面-->
</body>
1.3HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
1.4HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
1.5HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Web tutorials on HTML, CSS, XML" />（[dɪˈskrɪpʃən]）
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />（keywords ['ki:ˌwɜ:ds] 关键词）
name 和 content 属性的作用是描述页面的内容。
<meta charset="utf-8"> charset 属性规定 HTML 文档的字符编码
提示：charset 属性可以通过任意元素上的 lang 属性来重写。
charset 属性是 HTML5 中的新属性，且替换了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
仍然允许使用 http-equiv 属性来规定字符集，但是使用新方法可以减少代码量。
1.6HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
我们会在以后讲解 script 元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

html元素介绍2

一、HTML 的<body>
1.body元素定义文档的主体元素。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
1.1可选的属性
属性描述
alink不赞成使用。请使用样式取代它。规定文档中活动链接（active link）的的颜色。
background不赞成使用。请使用样式取代它。规定文档的背景图像。
bgcolor不赞成使用。请使用样式取代它。规定文档的背景颜色。
link不赞成使用。请使用样式取代它。规定文档中未访问链接的默认颜色。
text不赞成使用。请使用样式取代它。规定文档中所有文本的颜色。
vlink不赞成使用。请使用样式取代它。规定文档中已被访问链接的颜色。
1.2body中的内容主要通过其他各种标签来实现的，比如：div、p、span、a……
2.div标签
2.1定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
div 是 division [dɪˈvɪʒən]的简写。division 意为分割、区域、分组。
2.2用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式（css）。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
2.3举例
<h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>
  ...

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>
3.a标签
3.1定义和用法
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
3.2a标签的属性
属性-值-描述
charsetchar_encodingHTML5 中不支持。规定被链接文档的字符集。浏览器都不支持！
coordscoordinatesHTML5 中不支持。规定链接的坐标。只有 Firefox 和 Opera 支持 coords 属性。
downloadfilename规定被下载的超链接目标。仅火狐和谷歌浏览器支持<a href="/images/myw3schoolimage.jpg" download="w3logo">
hrefURL规定链接指向的页面的 URL。
hreflang-language_code规定被链接文档的语言。主流浏览器都不支持！
media(h5新属性)media_query规定被链接文档是为何种媒介/设备优化的。
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">打开用于打印的 media 属性页面</a>
name-section_nameHTML5 中不支持（H5使用id就能实现）。规定锚的名称。
rel-text规定当前文档与被链接文档之间的关系。比如：友好连接，下一个页面。
rev-textHTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape-defaultHTML5 中不支持。规定链接的形状。
rect只有 Firefox 和 Opera 支持
circle
poly
target_blank规定在何处打开链接文档。_blank：在新窗口中打开
_parent在父框架集中打开被链接文档
_self默认。在相同的框架中打开被链接文档
_top在整个窗口中打开被链接文档
framename在指定的框架中打开被链接文档
typeMIME type规定被链接文档的的 MIME 类型。用法type="text/html"

3.3可以使用图像来作链接：
<a href="http://www.sohu.com/">
<img src="../react/4e1.jpg" /><!--相对路径-->
</a>
HTML5中锚点使用：
<a href="#text">锚点</a><!--相当于标题，点击它，能在当前页面跳转到我们想对应的id属性的内容区域-->
<a  id="text">主体内容</a>

4.P标签
4.1定义和用法
定义和用法
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。
4.2对于排版，不支持
<h1>春晓</h1>
<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
5.Pre标签
定义和用法
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
例如：
<pre>
var result=0;
for (var i = 0; i < 5; i++) {
  result += 5 ;
}
</pre>
总结：
一、块级标签
1.独占一行，不和其他元素待在同一行
2.能设置宽高
常见的块级标签：div,p,h1-h6,ul,li,dl,dt,dd
代码：<p>我们是p标签</p>
<p>我们是p标签</p>
<p>我们是p标签</p>

二、行级标签
1.能和其他元素待在同一行
2.不能设置宽高
常见的行级标签：a，span,strong,u,em-->
代码：<a href="">hello</a>

三、行内块标签
1.能和其他元素待在一行
2能设置宽高
常见的行内块标签：img,input,textarea
代码：<img src="meinv.jpg"/>
<img src="liang.jpg" />
通过在浏览器浏览，可以比较出他们的异同。

附：标签的全局属性（标签共有的属性）
属性描述
accesskey规定激活元素的快捷键。
class规定元素的一个或多个类名（引用样式表中的类）。
Contenteditable(h5新属性)规定元素内容是否可编辑。
contextmenu(h5新属性)规定元素的上下文菜单。上下文菜单在用户点击元素时显示。（仅火狐浏览器支持）
data-*(h5新属性)用于存储页面或应用程序的私有定制数据。
dir规定元素中内容的文本方向。
draggable(h5新属性)规定元素是否可拖动。
dropzone(h5新属性)规定在拖动被拖动数据时是否进行复制、移动或链接。浏览器都不支持！
hidden(h5新属性)规定元素未相关或不再相关，即隐藏。
id规定元素的唯一 id。
lang规定元素内容的语言。
spellcheck(h5新属性)规定是否对元素进行拼写和语法检查。
style规定元素的行内 CSS 样式。
tabindex规定元素的 tab 键次序。Safari（ios浏览器）不支持
title规定有关元素的额外信息（鼠标悬浮出现的提示）。
translate(h5新属性)规定是否应该翻译元素内容。浏览器都不支持！

1)
accesskey快捷键事例：
<a href="http://www.baidu.com /" accesskey="h">HTML 教程</a><br />
<p><b>注释：</b>请使用Alt + <i>accessKey</i> (或者 Shift + Alt + <i>accessKey</i>) 来访问带有指定快捷键的元素。</p>
2)Contenteditable元素内容是否可编辑事例：
<p contenteditable="true">这是一个可编辑的段落。</p>
3)使用 data-* 属性来嵌入自定义数据：
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>
4)Dir属性，一段方向从右向左的段落：
<p dir="rtl">Write this text right-to-left!</p>

tr默认。从左向右的文本方向。
rtl从右向左的文本方向。

dir 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。
5)hidden事例：
<p hidden>这个段落应该被隐藏。</p>
6)spellcheck进行拼写检查的可编辑段落：
<p contenteditable="true" spellcheck="true">这是一个段落。</p>
7)tabindex带有指定 tab 键顺序的链接：
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
8)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

html元素介绍3

一、HTML 的标签
1.h1---h6。
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
2.ul标签（无序标签）
定义和用法
<ul> 标签定义无序列表。
2.1事例：不同类型的无序列表
<h4>Disc [dɪsk]项目符号列表：</h4>
<ul type="disc">
 <li>柠檬</li>
 <li>桔子</li>
</ul>
<h4>Circle [ˈsɜ:rkl] 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
</ul>
<h4>Square [skwer] （方格）项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
</ul>
2.2嵌套
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
Li标签：
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
3.Ol有序列表
属性值描述
compactcompactHTML5 中不支持。HTML 4.01 中不赞成使用。
规定列表呈现的效果比正常情况更小巧。
reversedreversed规定列表顺序为降序。(9,8,7...)
startnumber规定有序列表的起始值。
type1规定在列表中使用的标记类型。
A
a
I
i
3.1不同的有序列表
<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>
4.<table> 标签
4.1定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
4.2可选属性
属性值描述
align-left-不赞成使用。请使用样式代替。
center规定表格相对周围元素的对齐方式。
right
bgcolorrgb(x,x,x)不赞成使用。请使用样式代替。
#xxxxxx规定表格的背景颜色。
colorname
borderpixels规定表格边框的宽度。单位：px
cellpaddingpixels规定单元边沿与其内容之间的空白。
%
cellspacingpixels规定单元格之间的空白。
%
frameVoid（无效）规定外侧边框的哪个部分是可见的。
above[əˈbʌv] 在上面
below[bɪˈloʊ] 在下面
hsides
lhs左侧
rhs右侧
vsides侧翼
box
border
rulesnone规定内侧边框的哪个部分是可见的。
groups
rows[roʊz]行
cols
all
summarytext规定表格的摘要。
width%规定表格的宽度。
pixels

4.3表头样式
<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>
4.4带有标题的表格
<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>
4.5合并单元格
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
4.6单元格填充(Cell padding)
<h4>带有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
4.7单元格间距(Cell spacing)
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
4.8背景图像
<h4>背景图像：</h4>
<table border="1"
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
4.9表格单元背景
<h4>单元背景：</h4>
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>
<tr>
  <td
  background="/i/eg_bg_07.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>
4.10排列内容
<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">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>
4.11框架(frame)属性
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
4.12表格内的标签
<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>
4.13空单元格
<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>
正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。
我们的技巧是在单元中插入一个 no-breaking 空格。
no-breaking 空格是一个字符实体。
5.tr标签
可选的属性
属性值描述
align-right定义表格行的内容对齐方式。
left
center
justify
char
bgcolor-rgb(x,x,x)不赞成使用。请使用样式取而代之。
#xxxxxx规定表格行的背景颜色。
colorname
charcharacter规定根据哪个字符来进行文本对齐。
charoffnumber规定第一个对齐字符的偏移量。
valigntop规定表格行中内容的垂直对齐方式。
middle
bottom
baseline
6.Sup（上标） 和 sub（下标） 元素
<p>
2 <sup>2</sup>
</p>
<p>
This text contains <sub>subscript</sub>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409

html元素介绍4

一、HTML 的标签
1.img（图片）
<img> 是一种单标签，没有结束标签。
1.1属性
属性值描述
alttext规定图像的替代文本。
srcURL规定显示图像的 URL。
aligntop不推荐使用。规定如何根据周围的文本来排列图像
bottom
middle
left
right
borderpixels不推荐使用。定义图像周围的边框。
heightpixels定义图像的高度。
%
hspacepixels不推荐使用。定义图像左侧和右侧的空白。
ismapURL将图像定义为服务器端图像映射。
longdescURL指向包含长的图像描述文档的 URL。
usemapURL将图像定义为客户器端图像映射。
vspacepixels不推荐使用。定义图像顶部和底部的空白。
widthpixels设置图像的宽度。
%

1.2图片超链接
用图片做链接：
<a href=” ”>   <img src=” “>  </a>
图片与文字对齐方式：align: top/bottom/middle
1.3图像地图
图像地图 效果的实质是把一幅图片划分为不同的作用区域，再让不同的区域链接不同的地址
<map name=”ditu”>
     <area     shape=“”     coords=“”     alt=“”      href=“”>
</map>
事例：
<img src="./image/planets.gif"  width="146" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="./image/sun.gif" target="_blank"></area>
  <area shape="circle" coords="90,58,3" alt="Mercury" href="./image/mercury.gif" target="_top"></area>
  <area shape="circle" coords="124,58,8" alt="Venus" href="./image/venus.gif" target="_blank"></area>
</map>
1.4常用的图片格式
jpeg/jpg    有损压缩，适合大图，压缩比率好
   一种图像压缩格式，用于摄影或者连续色调图像的高级格式。可包含数百万种颜色。
png     无损压缩，支持透明压缩（最大限度还原图片清晰度）,适合小图
   一种非破坏性的网页图像文件格式，提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。
gif     有损压缩，支持透明压缩     压缩比率不是很好。  支持动态效果
   图像交换格式，最多可使用256颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
2.map标签
map标签：带有可点击区域的图像映射。
所有主流浏览器都支持 <map> 标签。
属性值描述
id:unique_name为 map 标签定义唯一的名称。
name:mapname为 image-map 规定的名称。
提示和注释：
注释：area [ˈeriə] 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
3.自定义列表
自定义列表不是一个项目的序列，它是一系列条目和它们的解释。
自定义列表以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始。
dl标签   定义和用法
<dl> 标签定义了自定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
事例：
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
效果：

4.其他较常用的标签
<br/> 换行
<hr /> 水平线（
<hr align=”center”>水平线对齐方式
<hr size=”9”>水平线（设定大小）
<hr width=”80%”>水平线（设定宽度）
<hr color=”pink”>水平线（设定颜色）
）
<u></u> 下划线
<b></b> 黑体字
<i></i> 斜体字
<tt></tt> 打字机风格的字体
<cite></cite> 引用,通常是斜体
<em></em> 强调文本(通常是斜体加黑体)
<strong></strong> 加重文本(通常是斜体加黑体)
<font size="" color=""></font> 设置字体大小从1到7，颜色使用名字或RGB的十六进制值
<BASEFONT></BASEFONT> 基准字体标记
<big></big> 字体加大
<small></ small > 字体缩小
<strike></strike> 加删除线
<del></del>删除线(表示删除)
<code></code> 程式码
<kbd></kbd> 键盘字
5.统一资源定位符（URL）
URL (Uniform Resource  Locator）的中文全称是“统一资源定位符”。URL是文档在web或者internet上的地址，一般用在超链接当中。尽管URL看起来很长很复杂，但它总是由4个部分构成，即协议名、主机名、文件夹名（路径）和文件名。
例如：
http：//www.baidu.com/publish/th/index.html
http是协议名，www.baidu.com是主机名，publish/th是文件夹名（th文件夹在publish文件夹下），index.html是文件名
6.绝对路径与相对路径
URL大致可以分为两类：绝对URL和相对URL
绝对路径：包含了URL的全部信息，包括协议名、主机名、文件夹名和文件名
相对路径：通常只包含文件夹名和文件名，如果是在当前文件夹下，那么连文件夹名都不需要。
  相对路径：
1.同级寻找，直接写地址就可以；
2.同级往下找； 如：文件夹/地址;
3.跳出文件目录寻找上一级:  ../
7.内部链接与外部链接
内部链接
内部链接是指链接的对象是在同一个网站中的资源。
与自身网站页面有关的链接被称为内部链接。
外部链接
外部链接是指跳转到当前网站之外的资源中。
http://www.baidu.com
8.HTML转义字符
在html中有一些特殊符号属于HTML语法的关键字符，比如’<‘或’>’等，为了在页面中显示这样的特殊字符，所以要使用实体来表示。
语法定义：– &+实体名称 +;
&quot; “       &amp; &      &lt; <         &gt; >
&nbsp; 空格   &copy; ©     &sect; §      &curren; ¤
9.常用颜色名
aqua（青蓝色）、black（黑色）、blue（蓝色）、
pink（粉色）、gray（灰色）、green（绿色）、
lime、maroon（酒红色）、navy、olive（橄榄色）
purple（紫色）、red（红色）、silver、teal、white（白色）
yellow（黄色）、orange（桔色）、gold（金色）
十六进制：#000000（黑色） ——#ff ff ff（白色）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

html5简介

一、html是什么？
1.HTML5 是 HTML 标准的最新演进版本。是对现有的HTML4.01和XHTML1.0标准的修订。
这个术语代表了两个不同的概念：
它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。
HTML5是最新的第五代HTML标准。它不仅提供丰富的媒体支持，而且还增强了对创建一个能够与用户进行交互的Web应用的支持，使他/她的本地数据和服务器交互比以前更有效，更容易。
2.HTML5主要内容
语义：能够让我们更恰当地描述页面的内容是什么。
连通性：能够让页面和服务器之间通过新技术方法进行通信。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
性能 & 集成：非常显著的性能优化和更有效的计算机硬件使用。
设备访问 Device Access：能够处理各种输入和输出设备。
样式设计: 让作者们来创作更加复杂的主题。
3.HTML5未来趋势
移动优先
从如今层出不穷的移动应用就知道，在这个智能手机和平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。
   游戏开发者领衔“主演”
许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的。
4.能做些什么？




二、如何使用html5
1.用HTML5的doctype声明文件包含HTML5标记
HTML5的doctype非常简单。表明你的HTML内容使用HTML5，只需要简单的使用：
<!DOCTYPE html>
这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。
这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。
2.用<meta charset>声明字符集
在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的<meta>元素，现在它变得非常简单：
<meta charset="utf-8">
把这个放到你的<head>，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用utf-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。
值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII['æskɪ]。这样做是为了加强安全，防止某些类型的攻击。（ASCII-American Standard Code for Information Interchange 美国信息交换标准代码）
3.使用新的HTML5解析器
html5的解析器分析主要是从标签的语义进行，并且语义化标签在html5中得到更加严格的定义。在H5之前，只有明确定义的标签被才能使用，意味着一旦只要有一个小错误在标签上（大部分网站只要有一个），表现出来的形式就是未定义的标签。从本质上讲，这导致所有的浏览器使用相同的标签时，产生的作用和表现的形式都不一样。如今面对标签问题，所有的浏览器商必须定义一个相同标准。
这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准，同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签，html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题。
当然，我们不需要改变我们网站上的任何东西,Web浏览器的开发商已经在为用户做这些了。
4.html5的新内容
HTML5 是 W3C 与 WHATWG 合作的结果。（WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。）
他们为 HTML5 建立的一些规则：
1)新特性应该基于HTML、CSS、DOM 以及 JavaScript。
2)减少对外部插件的需求（比如 Flash）
3)更优秀的错误处理
4)更多取代脚本的标记
5)HTML5 应该独立于设备
6)开发进程应对公众透明
Html5有一些新特性：
1)用于绘画的 canvas 元素
2)用于媒介回放的 video 和 audio 元素
3)对本地离线存储的更好的支持
4)新的特殊内容元素，比如 article、footer、header、nav、section
5)新的表单控件，比如 calendar、date、time、email、url、search
5.浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
三、HTML5的文档节段和纲要（知识拓展）
1.HTML4的文档结构
文档结构，即，<body>标记之间内容标签的语义结构。
HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素和标题元素形成了文档的结构和纲要。
但是用来做布局的HTML div元素，没有结构和章节意义，它定义出来的区域不能明确的具有层次。
HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：
1)定义分区的<div> 元素,如果没有为class属性赋以特殊的值（css也只是在显示上分级，浏览器解析是分不出层级机构的），无法区分大纲层级。一个div元素<div> 是不是大纲的一部分, 定义的是章节还是子章节?或者 "该div元素 <div>是仅仅为了样式化?"。
换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术。 HTML5 在自动生成大纲算法的过程中去掉了div元素（<div>），并新增了一个元素，section元素（<section>）。
HTML Section 元素 (<section>) 表示文档中的一个区域（或节）。
2) 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素(<article>, <section>, <nav> 和 <aside>) 总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系。
<article> [ˈɑ:rtɪkl]  元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。
3) HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 <aside>使得这样的节点不会插入到主纲要中。
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
4) 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素<nav> , 例如目录, 包含网站相关信息的footer元素<footer> 和header元素 <header> 。

HTML5解决了以上问题，使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。
2.HTML5的大纲算法
2.1定义节段节
 <body> 元素中的所有内容都是节段中的一部分。节段在HTML5中是可以嵌套的。<body> 元素定义了主节段，基于主节段，可以显式或隐式定义各个子节段的划分。显式定义的节段是通过<body>,  <section>,  <article>,  <aside>和 <nav> 这些标记中的内容。
H5标签布局事例：



3.隐式分节
因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。
HTML标题元素 (<h1> 到 <h6>) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。
如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：
<body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  <p>In this section, we discuss the swimming whales.
    ...this section continues...
  <section>
    <h3>Forest elephants</h3>
    <p>In this section, we discuss the lesser known forest elephants.
      ...this section continues...
    <h3>Mongolian gerbils</h3>
      <p>Hordes of gerbils have spread their range far beyond Mongolia.
         ...this subsection continues...
    <h2>Reptiles</h2>
      <p>Reptiles are animals with cold blood.
          ...this subsection continues...
  </section>
</body>
形成如下的大纲：
1. Mammals
   1.1 Whales (虚拟定义的h2元素)
   1.2 Forest elephants (explicitly defined by the section element)
   1.3 Mongolian gerbils (由h3元素隐式定义，该元素同时关闭前面的部分)
2. Reptiles (由h2元素隐式定义，该元素同时关闭前面的部分)
4.大纲之外的节段
HTML5引入了2个新的元素，用来定义那些不属于web文档主要大纲中的节段。
HTML 侧边分节元素 (<aside> [əˈsaɪd]) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲，但并不计入文档大纲中
HTML 导航分节元素 (<nav>) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素，比如文档内部的链接，就像目录，和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ，并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。
5.页眉和页脚
HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。
HTML 头部分节元素 (<header>) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单（如果有的话）。或是一个节段的头部，可能包含了节段的标题和作者名字等。<article>, <section>, <aside>, and <nav>可以拥有它们自己的<header>。虽然名字是header，但是不一定是在页面的开始。
HTML 页脚元素 (<footer>) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚，可能包含了节段的发布数据、许可声明等。<article>, <section>, <aside>, and <nav> 可以拥有它们自己的 <footer>。同样，其不一定是在页面的底部出现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

html5canvas

一、<canvas> 基础和绘制形状
1.<canvas> 元素
<canvas> 标签定义图形，比如图表和其他图像，我们必须使用脚本来绘制图形。
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— width和height。
这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。
替换内容
<canvas>元素不同于在其中的<img>标签，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"。
我们在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
举个例子，我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：
<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
 </canvas> 标签不可省
与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。<canvas id="foo" ...></canvas> 在所有支持canvas的浏览器中都是完全兼容的。
2.渲染上下文（The rendering context）
<canvas> 元素创造了一个固定大小的画布，其可以用来绘制和处理要展示的内容。
canvas起初是空白的。
为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，使用 CanvasRenderingContext2D。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。
检查支持性
替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。如下：
var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}
一个模板骨架
一个最简单的模板。
注意: 为了简洁, 在HTML中内嵌了script元素, 但不推荐这种做法。
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>
上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 window.setTimeout()， window.setInterval()，或者其他任何事件处理程序来调用。
模板是这样：

一个简单例子
绘制了两个长方形，其中的一个有着alpha透明度。
<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";// fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
ctx.fillRect (10, 10, 55, 50);// fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。  提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>
效果：

3.绘制矩形
不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。
首先， canvas提供了三种方法绘制矩形：
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
下面的draw() 函数是前一页中取得的，现在就来使用上面的三个函数。
矩形（Rectangular）例子
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeRect(50,50,50,50);
 }
}
该例子的输出如下图所示。

fillRect()函数绘制了一个边长为100px的黑色正方形。
clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形。
strokeRect()在清除区域内生成一个50*50的正方形边框。
以上的三个函数绘制之后会马上显现在canvas上，即时生效。
4.绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
1)首先，需要创建路径起始点。
2)然后使用画图命令去画出路径。
3)之后把路径封闭。
4)一旦路径生成，就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()  新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()  闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()     通过线条来绘制图形轮廓。
fill()       通过填充路径的内容区域生成实心的图形。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
第二步就是调用函数指定绘制路径。
第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制一个三角形
例如，绘制三角形的代码如下：
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
 }  }
5.移动笔触
一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑脸例子。我将用到moveTo()方法（红线处）的地方标记了。
你可以尝试一下，使用下边的代码片。只需要将其复制到之前的draw()函数即可。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();
 }    }
效果

想看到连续的线，可以移除调用的moveTo()。
6.线
绘制直线，需要用到的方法lineTo()。
lineTo(x, y)   绘制一条从当前位置到指定x以及y位置的直线。
该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。
下面的例子绘制两个三角形，一个是填充的，另一个是描边的。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 // 填充三角形
 ctx.beginPath();
 ctx.moveTo(25,25);
 ctx.lineTo(105,25);
 ctx.lineTo(25,105);
 ctx.fill();

 // 描边三角形
 ctx.beginPath();
 ctx.moveTo(125,125);
 ctx.lineTo(125,45);
 ctx.lineTo(45,125);
 ctx.closePath();
 ctx.stroke();
 }
}
这里从调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面，两条线段绘制后构成三角形的两条边。

填充与描边三角形步骤有所不同。因为路径使用填充（filled）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。
7.圆弧
绘制圆弧或者圆，使用arc()方法。也可使用arcTo()，不过这个的实现并不可靠，所以我不作介绍。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
下面的例子比上面的要复杂一下，下面绘制了12个不同的角度以及填充的圆弧。
下面两个for循环，生成圆弧的行列（x,y）坐标。每一段圆弧的开始都调用beginPath()。代码中，每个圆弧的参数都是可变的，实际生活中，我们并不需要这样做。
x,y坐标是可变的。半径（radius）和开始角度（startAngle）都是固定的。结束角度（endAngle）在第一列开始时是180度（半圆）然后每列增加90度。最后一列形成一个完整的圆。
clockwise语句作用于第一、三行是顺时针的圆弧，anticlockwise作用于二、四行为逆时针圆弧。if语句让一、二行描边圆弧，下面两行填充路径。
注意: 这个示例所需的画布大小略大于本页面的其他例子: 150 x 200 像素。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 for(var i=0;i<4;i++){
 for(var j=0;j<3;j++){
 ctx.beginPath();
 var x = 25+j*50; // x 坐标值
 var y = 25+i*50; // y 坐标值
 var radius = 20; // 圆弧半径
 var startAngle = 0; // 开始点
 var endAngle = Math.PI+(Math.PI*j)/2; // 结束点
 var anticlockwise = i%2==0 ? false : true; // 顺时针或逆时针
 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
 if (i>1){
 ctx.fill();
 } else {
 ctx.stroke();
 } } } }  }


8.二次贝塞尔曲线及三次贝塞尔曲线
下一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

上图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。
参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点。
使用二次以及三次贝塞尔曲线是有一定的难度的，因为不同于像Adobe Illustrators这样的矢量软件，我们所绘制的曲线没有直接的视觉反馈给我们。这让绘制复杂的图形十分的困难。在下面的例子中，我们会绘制一些简单有规律的图形，有时间，以及更多的耐心很多复杂的图形也可以绘制出来。
下面的这两个例子中我们会连续绘制贝塞尔曲线，最后会形成复杂的图形。
二次贝塞尔曲线
这个例子使用多个贝塞尔曲线来渲染对话气泡。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // 二次贝塞尔曲线
 ctx.beginPath();
 ctx.moveTo(75,25);
 ctx.quadraticCurveTo(25,25,25,62.5);
 ctx.quadraticCurveTo(25,100,50,100);
 ctx.quadraticCurveTo(50,120,30,125);
 ctx.quadraticCurveTo(60,120,65,100);
 ctx.quadraticCurveTo(125,100,125,62.5);
 ctx.quadraticCurveTo(125,25,75,25);
 ctx.stroke();
  } }

三次贝塞尔曲线
这个例子使用贝塞尔曲线绘制心形。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 //三次贝塞尔曲线
 ctx.beginPath();
 ctx.moveTo(75,40);
 ctx.bezierCurveTo(75,37,70,25,50,25);
 ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
 ctx.bezierCurveTo(20,80,40,102,75,120);
 ctx.bezierCurveTo(110,102,130,80,130,62.5);
 ctx.bezierCurveTo(130,62.5,130,25,100,25);
 ctx.bezierCurveTo(85,25,75,37,75,40);
 ctx.fill();
  }  }

矩形:
直接在画布上绘制矩形的三个额外方法，正如我们开始所见的Drawing rectangles，同样，也有rect()方法，将一个矩形路径增加到当前路径上。
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。
组合使用：吃豆人:
目前为止，每一个例子中的每个图形都只用到一种类型的路径。然而，绘制一个图形并没有限制使用数量以及类型。所以在最后的一个例子里，让我们组合使用所有的路径函数来重现一组著名的游戏人物。
function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 roundedRect(ctx,12,12,150,150,15);
 roundedRect(ctx,19,19,150,150,9);
 roundedRect(ctx,53,53,49,33,10);
 roundedRect(ctx,53,119,49,16,6);
 roundedRect(ctx,135,53,49,33,10);
 roundedRect(ctx,135,119,25,49,10);

 ctx.beginPath();
 ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
 ctx.lineTo(31,37);
 ctx.fill();

 for(var i=0;i<8;i++){
 ctx.fillRect(51+i*16,35,4,4);
 }

 for(i=0;i<6;i++){
 ctx.fillRect(115,51+i*16,4,4);
 }

 for(i=0;i<8;i++){
 ctx.fillRect(51+i*16,99,4,4);
 }

 ctx.beginPath();
 ctx.moveTo(83,116);
 ctx.lineTo(83,102);
 ctx.bezierCurveTo(83,94,89,88,97,88);
 ctx.bezierCurveTo(105,88,111,94,111,102);
 ctx.lineTo(111,116);
 ctx.lineTo(106.333,111.333);
 ctx.lineTo(101.666,116);
 ctx.lineTo(97,111.333);
 ctx.lineTo(92.333,116);
 ctx.lineTo(87.666,111.333);
 ctx.lineTo(83,116);
 ctx.fill();

 ctx.fillStyle = "white";
 ctx.beginPath();
 ctx.moveTo(91,96);
 ctx.bezierCurveTo(88,96,87,99,87,101);
 ctx.bezierCurveTo(87,103,88,106,91,106);
 ctx.bezierCurveTo(94,106,95,103,95,101);
 ctx.bezierCurveTo(95,99,94,96,91,96);
 ctx.moveTo(103,96);
 ctx.bezierCurveTo(100,96,99,99,99,101);
 ctx.bezierCurveTo(99,103,100,106,103,106);
 ctx.bezierCurveTo(106,106,107,103,107,101);
 ctx.bezierCurveTo(107,99,106,96,103,96);
 ctx.fill();

 ctx.fillStyle = "black";
 ctx.beginPath();
 ctx.arc(101,102,2,0,Math.PI*2,true);
 ctx.fill();

 ctx.beginPath();
 ctx.arc(89,102,2,0,Math.PI*2,true);
 ctx.fill();
 }
}

// 封装的一个用于绘制圆角矩形的函数.

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}
结果画面如下：

Path2D 对象
正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。
怎样产生一个Path2D对象呢？
Path2D()
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象
所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。
Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。比如：
Path2D.addPath(path [, transform])
添加了一条路径到当前路径（可能添加了一个变换矩阵）。
Path2D 示例
在这个例子中，我们创造了一个矩形和一个圆。它们都被存为Path2D对象，后面再派上用场。随着新的Path2D API产生，几种方法也相应地被更新来使用Path2D对象而不是当前路径。在这里，带路径参数的stroke和fill可以把对象画在画布上。
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402

html5canvas2

一、色彩 Colors和样式
1.色彩 Colors
到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
设置图形的填充颜色。
strokeStyle = color
设置图形轮廓的颜色。
color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。
注意: 一旦  设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。
  输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

fillStyle 示例
在本示例里，用两层 for 循环来绘制方格阵列，每个方格不同的颜色。结果如图，但实现所用的代码却没那么绚丽。我用了两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

strokeStyle 示例
这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，画的不是方格，而是用 arc方法来画圆。
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                         Math.floor(255-42.5*j) + ')';
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }

2.透明度 Transparency
除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。
globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。
因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。
// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。
globalAlpha 示例
在这个例子里，将用四色格作为背景，设置 globalAlpha 为 0.2 后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  // 画背景
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  // 设置透明度值
  ctx.globalAlpha = 0.2;

  // 画半透明圆
  for (var i=0;i<7;i++){
      ctx.beginPath();
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
      ctx.fill();
  }
}

rgba() 示例
第二个例子和上面那个类似，不过不是画圆，而是画矩形。这里还可以看出，rgba() 可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 画背景
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,0,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,37.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,75,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,112.5,150,37.5);

  // 画半透明矩形
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
    }
  }
}

3.线型 Line styles
可以通过一系列属性来设置线的样式。
lineWidth = value
设置线条宽度。
lineCap = type
设置线条末端样式。
lineJoin = type
设定线条与线条间接合处的样式。
miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。
通过以下的样例可能会更加容易理解。
lineWidth 属性的例子
这个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。
线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。
在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。并且，最左边的以及所有宽度为奇数的线并不能精确呈现，这就是因为路径的定位问题。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}

想要获得精确的线条，必须对线条是如何描绘出来的有所理解。见下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在第一个图中，填充了 (2,1) 至 (5,5) 的矩形，整个区域的边界刚好落在像素边缘上，这样就可以得到的矩形有着清晰的边缘。

如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分）。这就是上例中为何宽度为 1.0 的线并不准确的原因。
要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
注意：在这个竖线的例子中，其Y坐标刚好落在网格线上，否则端点上同样会出现半渲染的像素点（但还要注意，这种行为的表现取决于当前的lineCap风格，它默认为butt；  可能希望通过将lineCap样式设置为square正方形，来得到与奇数宽度线的半像素坐标相一致的笔画，这样，端点轮廓的外边框将被自动扩展以完全覆盖整个像素格）。
还请注意，只有路径的起点和终点受此影响：如果一个路径是通过closePath()来封闭的，它是没有起点和终点的；相反的情况下，路径上的所有端点都与上一个点相连，下一段路径使用当前的lineJoin设置（默认为miter），如果相连路径是水平和/或垂直的话，会导致相连路径的外轮廓根据相交点自动延伸，因此渲染出的路径轮廓会覆盖整个像素格。接下来的两个小节将展示这些额外的行样式。
对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。同样，注意到那个例子的垂直线条，其 Y 坐标刚好落在网格线上，如果不是的话，端点上同样会出现半渲染的像素点。
虽然开始处理可缩放的 2D 图形时会有点小痛苦，但是及早注意到像素网格与路径位置之间的关系，可以确保图形在经过缩放或者其它任何变形后都可以保持看上去蛮好：线宽为 1.0 的垂线在放大 2 倍后，会变成清晰的线宽为 2.0，并且出现在它应该出现的位置上。
lineCap 属性的例子

属性 lineCap 的值决定了线段端点显示的样子。它可以为下面的三种的其中之一：butt，round 和 square。默认是 butt。
在这个例子里面，我绘制了三条直线，分别赋予不同的 lineCap值。还有两条辅助线，为了可以看得更清楚它们之间的区别，三条线的起点终点都落在辅助线上。
最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  // 创建路径
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  // 画线条
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}
lineJoin 属性的例子

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。
这里我同样用三条折线来做例子，分别设置不同的 lineJoin 值。最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到下面将要介绍的 miterLimit 属性的制约。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}
miterLimit 属性的演示例子
就如上一个例子所见的应用 miter 的效果，线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。
miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。
下面是一个演示页面，你可以动手改变 miterLimit 的值，观察其影响效果。蓝色辅助线显示锯齿折线段的起点与终点所在的位置。
  
使用虚线
用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量.
在这个例子中，我们要创建一个行军蚁的效果。它往往是在计算机图形程序选区工具动效。它可以帮助用户通过动画的边界来区分图像背景选区边框。在本教程的后面部分，你可以学习如何做到这一点和其他基本的动画。
var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

4.渐变 Gradients
就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
创建出 canvasGradient 对象后，我们就可以用 addColorStop 方法给它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。
你可以根据需要添加任意多个色标（color stops）。下面是最简单的线性黑白渐变的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
createLinearGradient 的例子

本例中，我弄了两种不同的渐变。第一种是背景色渐变，你会发现，我给同一位置设置了两种颜色，你也可以用这来实现突变的效果，就像这里从白色到绿色的突变。一般情况下，色标的定义是无所谓顺序的，但是色标位置重复时，顺序就变得非常重要了。所以，保持色标定义顺序和它理想的顺序一致，结果应该没什么大问题。
第二种渐变，我并不是从 0.0 位置开始定义色标，因为那并不是那么严格的。在 0.5 处设一黑色色标，渐变会默认认为从起点到色标之间都是黑色。
你会发现，strokeStyle 和 fillStyle 属性都可以接受 canvasGradient 对象。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // Create gradients
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;

  // draw shapes
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

createRadialGradient 的例子
这个例子，我定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点，所以我们可以实现一些比（如在 Photoshop 中所见的）经典的径向渐变更为复杂的效果。（经典的径向渐变是只有一个中心点，简单地由中心点向外围的圆形扩张）
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建渐变
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, '#A7D30C');
  radgrad.addColorStop(0.9, '#019F62');
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');

  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, '#FF5F98');
  radgrad2.addColorStop(0.75, '#FF0188');
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(0.8, '#00B5E2');
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, '#F4F201');
  radgrad4.addColorStop(0.8, '#E4C700');
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

  // 画图形
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}
这里，我让起点稍微偏离终点，这样可以达到一种球状 3D 效果。但最好不要让里圆与外圆部分交叠，那样会产生什么效果就真是不得而知了。
4 个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些，只要两个颜色值一致就可以了。代码里面看不出来，是因为我用了两种不同的颜色表示方法，但其实是相同的，#019F62 = rgba(1,159,98,1)。

图案样式 Patterns
上一节的一个例子里面，我用了循环来实现图案的效果。其实，有一个更加简单的方法：createPattern。
createPattern(image, type)
该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
注意: 用 canvas 对象作为 Image 参数在 Firefox 1.5 (Gecko 1.8) 中是无效的。
图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。
var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');
注意：与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。
createPattern 的例子
在最后的例子中，我创建一个图案然后赋给了 fillStyle 属性。唯一要注意的是，使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建新 image 对象，用作图案
  var img = new Image();
  img.src = 'images/wallpaper.png';
  img.onload = function(){

    // 创建图案
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);

  }
}


5.阴影 Shadows
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
文字阴影的例子
这个例子绘制了带阴影效果的文字。
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

我们可以通过下一章来了解文字属性和fillText方法相关的内容。
Canvas 填充规则
当我们用到 fill（或者 clip和isPointinPath ）你可以选择一个填充规则，该填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。
两个可能的值：
 "nonzero": non-zero winding rule, 默认值.
 "evenodd":  even-odd winding rule.
这个例子，我们用填充规则 evenodd
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
  ctx.fill("evenodd");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372

html5canvas3

绘制文本和变形

一、绘制文本
canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
一个填充文本的示例
文本用当前的填充方式被填充：
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

一个文本边框的示例
文本用当前的边框样式被绘制：
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

有样式的文本
在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式：
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
如果你之前使用过CSS，那么这些选项你会很熟悉。
下面的图片（from the WHATWG）展示了textBaseline属性支持的不同的基线情况：

textBaseline例子
编辑下面的代码，看看它们在canvas中的变化：
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);

预测量文本宽度
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
下面的代码段将展示如何测量文本来获得它的宽度：
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

二、变形
1.状态的保存和恢复 Saving and restoring state
在了解变形之前，我先介绍两个在你开始绘制复杂图形时必不可少的方法。
save()restore()
save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：
当前应用的变形（即移动，旋转和缩放，见下）
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
当前的裁切路径（clipping path），会在后面介绍
你可以调用任意多次 save 方法。
每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

save 和 restore 的应用例子
我们尝试用这个连续矩形的例子来描述 canvas 的状态栈是如何工作的。
第一步是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。
到目前为止所做的动作和前面章节的都很类似。不过一旦我们调用 restore，状态栈中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。
当第二次调用 restore 时，已经恢复到最初的状态，因此最后是再一次绘制出一个黑色的四方形。

在 CodePen 中打开在 JSFiddle 中打开
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形
  ctx.save();                  // 保存默认状态

  ctx.fillStyle = '#09F'       // 在原有配置基础上对颜色做改变
  ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形

  ctx.save();                  // 保存当前状态
  ctx.fillStyle = '#FFF'       // 再次改变颜色配置
  ctx.globalAlpha = 0.5;
  ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形

  ctx.restore();               // 重新加载之前的颜色状态
  ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形

  ctx.restore();               // 加载默认颜色配置
  ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形
}
2.移动 Translating

我们先介绍 translate 方法，它用来移动 canvas 和它的原点到一个不同的位置。
translate(x, y)
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。
在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。
translate 的例子

这个例子显示了一些移动 canvas 原点的好处。我创建了一个 drawSpirograph 方法用来绘制螺旋（spirograph）图案，那是围绕原点绘制出来的。如果不使用 translate 方法，那么只能看见其中的四分之一。translate 同时让我可以任意放置这些图案，而不需要在 spirograph 方法中手工调整坐标值，既好理解也方便使用。
我在 draw 方法中调用 drawSpirograph 方法 9 次，用了 2 层循环。每一次循环，先移动 canvas ，画螺旋图案，然后恢复早原始状态。

在 CodePen 中打开在 JSFiddle 中打开
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillRect(0,0,300,300);
  for (var i=0;i<3;i++) {
    for (var j=0;j<3;j++) {
      ctx.save();
      ctx.strokeStyle = "#9CFF00";
      ctx.translate(50+j*100,50+i*100);
      drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
      ctx.restore();
    }
  }
}
function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}
3.旋转 Rotating

第二个介绍 rotate 方法，它用于以原点为中心旋转 canvas。
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。
rotate 的例子

在这个例子里，见图，我用 rotate 方法来画圆并构成圆形图案。当然你也可以分别计算出 x 和 y 坐标（x = r*Math.cos(a); y = r*Math.sin(a)）。这里无论用什么方法都无所谓的，因为我们画的是圆。计算坐标的结果只是旋转圆心位置，而不是圆本身。即使用 rotate 旋转两者，那些圆看上去还是一样的，不管它们绕中心旋转有多远。
这里我们又用到了两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，我都保存一下 canvas 的状态，这样恢复起来方便。每次画圆点，我都以一定夹角来旋转 canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有 6 个圆点，这样，每次旋转的夹角就是 360/6 = 60 度。往外每一环的圆点数目是里面一环的 2 倍，那么每次旋转的夹角随之减半。

在 CodePen 中打开在 JSFiddle 中打开
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.translate(75,75);

  for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (var j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}
4.缩放 Scaling
接着是缩放。我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
scale 的例子

这最后的例子里，我再次启用前面曾经用过的 spirograph 方法，来画 9 个图形，分别赋予不同的缩放因子。左上角的图形是未经缩放的。黄色图案从左到右应用了统一的缩放因子（x 和 y 参数值是一致的）。看下面的代码，你可以发现，我在画第二第三个图案时 scale 了两次，中间没有 restore canvas 的状态，因此第三个图案的缩放因子其实是 0.75 × 0.75 = 0.5625。
第二行蓝色图案堆垂直方向应用了不统一的缩放因子，每个图形 x 方向上的缩放因子都是 1.0，意味着不缩放，而 y 方向缩放因子是 0.75，得出来的结果是，图案被依次压扁了。原来的圆形图案变成了椭圆，如果细心观察，还可以发现在垂直方向上的线宽也减少了。
第三行的绿色图案与第二行类似，只不过我们在横轴方向上施加了缩放。

在 CodePen 中打开在 JSFiddle 中打开
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.strokeStyle = "#fc0";
  ctx.lineWidth = 1.5;
  ctx.fillRect(0,0,300,300);

  // Uniform scaling
  ctx.save()
  ctx.translate(50,50);
  drawSpirograph(ctx,22,6,5);  // no scaling

  ctx.translate(100,0);
  ctx.scale(0.75,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(133.333,0);
  ctx.scale(0.75,0.75);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();

  // Non-uniform scaling (y direction)
  ctx.strokeStyle = "#0cf";
  ctx.save()
  ctx.translate(50,150);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(100,0);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(100,0);
  ctx.scale(1,0.75);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();

  // Non-uniform scaling (x direction)
  ctx.strokeStyle = "#cf0";
  ctx.save()
  ctx.translate(50,250);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(133.333,0);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);

  ctx.translate(177.777,0);
  ctx.scale(0.75,1);
  drawSpirograph(ctx,22,6,5);
  ctx.restore();

}
5.变形 Transforms
最后一个方法允许对变形矩阵直接修改。
transform(m11, m12, m21, m22, dx, dy)
这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵，在这里我们用下面的矩阵：
m11 m21 dx
m12 m22 dy
0 0 1
如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常。
这个函数的参数各自代表如下：
m11：水平方向的缩放
m12：水平方向的倾斜偏移
m21：竖直方向的倾斜偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动
setTransform(m11, m12, m21, m22, dx, dy)
这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。
resetTransform()
重置当前变形为单位矩阵，它和调用以下语句是一样的：
ctx.setTransform(1, 0, 0, 1, 0, 0);
transform / setTransform 的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(100, 100);
  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    ctx.fillRect(0, 0, 100, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }

  ctx.setTransform(-1, 0, 0, 1, 100, 100);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271

html5canvas4

动画
由于我们是用 JavaScript 去操控 <canvas> 对象，这样要实现一些交互动画也是相当容易的。

一、动画的基本步骤
可以通过以下的步骤来画出一帧:
1.清空 canvas
除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。
2.保存 canvas 状态
如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
3.绘制动画图形（animated shapes）
这一步才是重绘动画帧。
4.恢复 canvas 状态
如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。
二、动画时钟示例：
function clock(){
  var now = new Date();
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0,0,150,150);
  ctx.translate(75,75);
  ctx.scale(0.4,0.4);
  ctx.rotate(-Math.PI/2);
  ctx.strokeStyle = "black";
  ctx.fillStyle = "white";
  ctx.lineWidth = 8;
  ctx.lineCap = "round";
  // Hour marks
  ctx.save();
  for (var i=0;i<12;i++){
    ctx.beginPath();
    ctx.rotate(Math.PI/6);
    ctx.moveTo(100,0);
    ctx.lineTo(120,0);
    ctx.stroke();
  }
  ctx.restore();
  // Minute marks
  ctx.save();
  ctx.lineWidth = 5;
  for (i=0;i<60;i++){
    if (i%5!=0) {
      ctx.beginPath();
      ctx.moveTo(117,0);
      ctx.lineTo(120,0);
      ctx.stroke();
    }
    ctx.rotate(Math.PI/30);
  }
  ctx.restore();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr>=12 ? hr-12 : hr;
  ctx.fillStyle = "black";
  // write Hours
  ctx.save();
  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
  ctx.lineWidth = 14;
  ctx.beginPath();
  ctx.moveTo(-20,0);
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();
  // write Minutes
  ctx.save();
  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(-28,0);
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();
  // Write seconds
  ctx.save();
  ctx.rotate(sec * Math.PI/30);
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(-30,0);
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0,0,10,0,Math.PI*2,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(95,0,10,0,Math.PI*2,true);
  ctx.stroke();
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.arc(0,0,3,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore();
  ctx.beginPath();
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#325FA2';
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();
  ctx.restore();
  window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);
三、操控动画 Controlling an animation
在 canvas 上绘制内容是用 canvas 提供的或者自定义的方法，而通常，我们仅仅在脚本执行结束后才能看见结果，比如说，在 for 循环里面做完成动画是不太可能的。
因此， 为了实现动画，我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过 setInterval 和 setTimeout 方法来控制在设定的时间点上执行重绘。
有安排的更新画布 Scheduled updates
首先，可以用window.setInterval(), window.setTimeout(),和window.requestAnimationFrame()来设定定期执行一个指定函数。
setInterval(function, delay)
当设定好间隔时间后，function会定期执行。
setTimeout(function, delay)
在设定好的时间之后执行函数
requestAnimationFrame(callback)
告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。
如果你并不需要与用户互动，你可以使用setInterval()方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上setTimeout()方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。
四、高级动画学习
以上内容是基本动画以及让物件移动的方法。接下来，我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。
1.绘制小球
首先，我们将会画一个小球用于动画学习。
跟平常一样，我们需要先画一个 context（画布场景）。为了画出这个球，我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象，来完成绘制。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
  x: 100,
  y: 100,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};
ball.draw();
2.添加速率
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};
function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function(e){
  raf = window.requestAnimationFrame(draw);
});
canvas.addEventListener('mouseout', function(e){
  window.cancelAnimationFrame(raf);
});
ball.draw();
3.边界
若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做，我们把下面的检查代码添加进 draw 函数：
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
  ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
  ball.vx = -ball.vx;
}
4.加速度
为了让动作更真实，你可以像这样处理速度，例如：
ball.vy *= .99;
ball.vy += .25;
这会逐帧减少垂直方向的速度，所以小球最终将只会在地板上弹跳。
最终draw 函数变成这样：
function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= .99;
  ball.vy += .25;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }
  raf = window.requestAnimationFrame(draw);
}
5.长尾效果
现在，我们使用的是 clearRect 函数帮我们清除前一帧动画。若用一个半透明的 fillRect 函数取代之，就可轻松制作长尾效果。
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
（用以上代码替换
ctx.clearRect(0,0, canvas.width, canvas.height);）
最终draw 函数变成这样：
function draw() {
  ctx.fillStyle = 'rgba(255,255,255,0.3)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= .99;
  ball.vy += .25;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }
  raf = window.requestAnimationFrame(draw);
}
五、
附件：太阳系的动画
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
  window.requestAnimationFrame(draw);
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,300,300); // clear canvas

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(150,150);

  // Earth
  var time = new Date();
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth,-12,-12);

  // Moon
  ctx.save();
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(0,28.5);
  ctx.drawImage(moon,-3.5,-3.5);
  ctx.restore();

  ctx.restore();

  ctx.beginPath();
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
  ctx.stroke();

  ctx.drawImage(sun,0,0,300,300);

  window.requestAnimationFrame(draw);
}

init();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269

html5 input类型

一、html5的表单元素
1.<input> 元素
文本输入域 <input> 是最基本的表单小部件。 这是一种非常方便的方式，可以让用户输入任何类型的数据。但是，一些文本字段可以专门用于满足特定的需求。
注意：  <input>元素是如此重要，因为它几乎可以是任何东西。通过简单设置 type 属性，它可以彻底改变，它用于创建大多数类型的表单小部件，包括单行文本字段、没有文本输入的控件、时间和日期控件和按钮。 然而，也有一些例外，比如用来多行输入的 <textarea>。
比如：
1)单行文本域
使用<input>元素创建一个单行文本域，该元素的type属性值被设置为text （同样的，如果你不提供type属性，text 是默认值）。
如果你指定的type属性的值在浏览器中是不支持的（比如你指定 type="date"，但是浏览器不支持原生日期选择器），属性值text就成为了默认值。
单行文本域示例：
<input type="text" name=" username " >
注意：
单行文本域只有一个真正的约束：不支持换行符（如果您输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符）。
HTML5通过为type属性增加特殊值增强了基本单行文本域。这些值仍然将<input>元素转换为单行文本域，但它们为域（字段）添加了一些额外的约束和特性。
2)密码域
通过type 属性的password值设置该类型域：
<input type="password" id="pwd" name="pwd">
它不会为输入的文本添加任何特殊的约束，但是它会模糊输入到字段中的值(例如，用点或小行星)，这样它就不能被其他人读取。
注意，这只是一个用户界面特性;除非你安全地提交你的表单，否则它会以明文发送，这不利于安全——恶意的一方可能会截获你的数据，窃取你的密码、信用卡信息，或者你提交的其他任何东西。保护用户不受此影响的最佳方式是在安全连接上托管任何涉及表单的页面(例如:https://……地址)，使得数据在发送之前就已加密。
现代浏览器认识到在不安全的连接上发送表单数据所带来的安全影响，并且已经实现了警告，以阻止用户使用不安全的表单。
2.<input> 新元素
1)date（Firefox & IE不支持）
生日: <input type="date" name="bday">
生日：<input type="date" name="birthday" max="2019-01-07"></input>最晚日期不得晚于2019年1月7日。
2)time（Firefox & IE不支持）
定义用于输入时间的控件（不带时区）：
选择时间: <input type="time" name="usr_time" max="21:00" min="06:00">
datetime定义 date 和 time 控件（带有时区）只有Safari和Opera支持。
3)datetime-local（Firefox & IE不支持）
定义 date 和 time 控件（不带时区）：
生日 (日期和时间):
<input type="datetime-local" name="bdaytime">
示例：
<input style="width: 270px;" type="datetime-local" name="birthday" max="2018-01-01T00:01"></input>最晚时间不得晚于2018年1月1日0点01分。
4)email（Safari不支持）
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证，换行符会被自动去除）：
E-mail: <input type="email" name="usremail">
当使用 type时， 用户需要在域中输入有效的电子邮件地址；任何其他内容都会导致浏览器在提交表单时显示错误。注意，这是客户端错误验证，由浏览器执行。
5)number（Firefox不支持）
定义用于输入数字的字段（您可以设置可接受数字的限制）：
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
step - 规定合法数字间隔（如果有min最小值，它已此值开始计算间隔，如果没有则正常计算）。
value - 规定默认值。
min-和max - 设置属性来约束该值的范围。
6)search（Firefox & IE& Opera不支持）
定义搜索字段（比如站内搜索或谷歌搜索等）：
Search Google:
<input type="search" name="googlesearch">
这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。
文本域和搜索域之间的主要区别是浏览器的样式。通常，搜索字段以圆角和/或给定一个“x”来清除输入的值。然而，还有另外一个值得注意的特性:它们的值可以自动保存到同一站点上的多个页面上自动完成。
7)Input 类型 – range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
并且还能够设定对所接受的数字的限定：
<input type="range" name="points" min="1" max="10" />
用下面的属性来规定对数字类型的限定：
属性 值          描述
max   number 规定允许的最大值
min   number 规定允许的最小值
step   number 规定合法的数字间隔（如果有min最小值，它已此值开始计算间隔，如果没有则正常计算）。
value number 规定默认值
从视觉上讲，滑块比文本字段更不准确，因此它们被用来选择一个确切值并不重要的数字。
正确配置滑块是很重要的；为了达到这个目的，我们强烈建议您设置min、max和step属性。
滑块的另一个问题是，它不提供任何形式的视觉反馈，以了解当前的值是什么。所以需要使用JavaScript来添加这一点。示例：
<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<span class="beancount"></span>
<script type="text/javascript">
var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');
count.textContent = beans.value;
beans.oninput = function() {
  count.textContent = beans.value;
}
</script>
这里我们将对范围输入的引用和两个变量的span存储在这里，然后我们立即将span的textContent设置为输入的当前value。最后，我们设置了一个oninput事件处理程序，以便每次移动范围滑块时，都会将span textContent更新为新的输入值。
8)tel电话号码域
通过 type属性的 tel 值设置该类型域：
<input type="tel" id="tel" name="tel">
由于世界范围内各种各样的电话号码格式，这种类型的字段不会对用户输入的值执行任何限制(包括字母，等等)。一些设备上(特别是在移动设备上)，可能会出现一个不同的虚拟键盘，更适合输入电话号码。
9)URL 域
通过type属性的url 值设置该类型域：
<input type="url" id="url" name="url">
它为字段添加了特殊的验证约束，如果输入无效的url，浏览器就会报告错误。
注意：URL格式正确，并不一定意味它是一个真是存在的路径。
10)拾色器
颜色总是不太容易处理。有很多方式来表达它们:RGB值(十进制或十六进制)、关键字等等。颜色小部件允许用户在文本和可视的方式中选择颜色。
一个颜色小部件是使用<input>元素创建的，它的type属性设置为值color。
<input type="color" name="color" id="color">
警告——颜色小部件支持它目前不是很好。IE中没有支持，Safari目前也不支持它。其他主要的浏览器都支持它。
知识拓展：
其他小部件
隐藏内容
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
有时候，由于技术原因，有些数据是用表单发送的，但不显示给用户，这有时是很方便的。要做到这一点，您可以在表单中添加一个不可见的元素。需要使用<input>和它的type属性设置为hidden值。
进度条
一个进度条表示一个值，它会随着时间的变化而变化到最大的值，这个值由max属性指定。这样的一个bar是使用<progress>元素创建的。
<progress max="100" value="75">75/100</progress>
这是为了实现任何需要进度报告的内容，例如下载的总文件的百分比，或者问卷中填写的问题的数量。
仪表
一个仪表表示一个固定值，这个值由一个min和一个max值所定。这个值是作为一个条形显示的。
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
low 和 high 值范围划分为三个部分：
该范围的较低部分是在min和low值(包括那些值)之间。
该范围的中间部分是在low和high值之间(不包括那些值)。
该范围的较高部分是在high和max值(包括那些值)之间。
optimum值定义了<meter>元素的最优值。在与htmlattrxref(“low”、“meter”)和high值的联合中，它定义了该范围的哪个部分是优先的：
如果optimum值在较低的范围内，则较低的范围被认为是首选项，中等范围被认为是平均值，而较高的范围被认为是最坏的部分。
如果optimum值在该范围的中等部分，则较低的范围被认为是一个平均值，中等范围被认为是优先的部分，而较高的范围也被认为是平均值。
如果optimum值在较高的范围内，则较低的范围被认为是最坏的部分，中等范围被认为是一般的部分，较高的范围被认为是优先的部分。
所有实现<meter>元素的浏览器都使用这些值来改变米尺的颜色。
如果当前值位于该范围的优先部分，则该条是绿色的。
如果当前值位于该范围的平均部分，则该条是黄色的。
如果当前值处于最糟糕的范围，则该条是红色的。
这样的一个工具栏是使用<meter>元素创建的。这是用于实现任何类型的仪表，例如一个显示磁盘上使用的总空间的条，当它开始满时，它会变成红色。
浏览器对进度条和仪表的支持是相当不错的，在Internet Explorer中没有支持，但是其他浏览器支持它。
常见的安全问题：
每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击媒介(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。
1)永远不要相信用户的输入
最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。
所有到达服务器的数据都必须经过检查和消毒，如下：
有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。
限制输入的数据量，只允许有必要的数据。
沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。
遵循这三条规则，应该避免很多问题，但是如果想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为自己已经看到了所有可能的问题。
2)XSS 和 CSRF
跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给用户或另一个用户时。
3)SQL注入
SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常，当应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。
4)HTTP数据头注入和电子邮件注入
当应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时，就会出现这种类型的攻击。这些不会直接损害您的服务器或影响您的用户，但是它们是一个更深入的问题，例如会话劫持或网络钓鱼攻击。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

html5 表单元素

一、Html5的表单元素
1.HTML5新的表单元素:
<datalist>
<keygen>
<output>
注意：如果浏览器不支持表单属性，仍然可以显示为常规的表单元素。
1)HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定。
示例：
<form action="#" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>
2)HTML5 <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出：
<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>
</form>
注意: Internet Explorer 不支持 output 标签。
3)HTML5 <keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
示例：
<form action="#" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>
注意: Internet Explorer 不支持 keygen 标签。
二、样式化 HTML 表单
1.使用CSS美化表单组件困难
在1995年左右的Web早期，表单组件(或控件)在 HTML 2规范中被添加到HTML。由于表单组件的复杂性，实现者选择依靠底层操作系统来管理和渲染它们。
若干年后，CSS被创建出来了，那么技术上的必要性，就是使用原生组件来实现表单控制，这是因为风格的要求。在CSS的早期，表单样式控制不是优先事项。
由于用户习惯于各自平台的视觉外观，浏览器厂商不愿意对表单控件样式进行调整;到目前为止，要重建所有控件以使它们可美化仍然是非常困难的。
即使在今天，仍然没有一个浏览器完全实现了CSS 2.1。然而，随着时间的推移，浏览器厂商已经改进了对表单元素的CSS支持，尽管可用性的效果不好，但现在已经可以使用CSS来设计HTML表单。
目前，在使用表单时使用CSS仍然有一些困难。这些问题可以分为三类：
1)有些元素在跨平台上时很少出现问题。包括以下结构元素：
<form>
<fieldset>
<label>
<output>
这还包括所有文本字段小部件（单行和多行）和按钮。
2)些元素难以被美化，并且可能需要一些复杂的技巧，偶尔需要高级的CSS3知识。
这些包括<legend>元素，不能在所有平台上正确定位。 Checkbox和radio按钮也不能直接应用样式，但是，感谢CSS3，可以帮助解决这个问题。
placeholder 的内容不能以任何标准方式应用样式，但是支持它的所有浏览器也都实现了私有的CSS伪元素或伪类，让我们可以对其定义样式。
3)有些元素根本不能用应用CSS样式。
这些包括：
所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括<select>, <option>, <optgroup>和<datalist> 元素。 文件选择器小部件也被称为不可美化。 新的<progress>和<meter> 元素也属于这个类别。
所有这些小部件的主要问题来自于它们具有非常复杂的结构，而CSS目前还不足以表达这些小部件的所有细微部分。 如果想定制这些小部件，必须依靠JavaScript来构建一个能够应用样式的DOM树。
2.基本样式美化
为了使用CSS美化容易被美化的元素，并不会碰到任何困难，因为它们的大部分行为同其他HTML元素差不多。但是，每个浏览器的用户代理样式表可能会有点不一致，所以有一些技巧可以帮助我们更轻松地设计它们。
1)字体和文本
CSS font和text功能能被很容易的应用到任何组件上（当然你可以在form组件上使用@font-face ）。然而，浏览器的行为经常不一致。默认情况下，一些组件不不会从它们的父元素继承 font-family和 font-size 。相反，许多浏览器使用系统默认的字体和文本。为了让form表单的外观和其他内容保持一致，你可以在你的样式表中增加以下内容:
button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}
下面的截图显示了不同之处; 左边是Mac OS X上Firefox中元素的默认渲染，其中使用了平台的默认字体样式。 在右边是相同的元素，应用了我们的字体统一样式规则。

关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。 作为网站或Web应用程序的设计者，可以自己做出决定。
2)盒子模型
有文本字段都完全支持与CSS盒模型相关的每个属性(width, height, padding, margin, 和 border)。 但是，像以前一样，浏览器在显示这些小部件时依赖于系统默认的样式。 您需要定义如何将其融入到您的内容中。 如果你既想保持小部件的原生外观和感觉，又想给他们一个一致的尺寸，那么你会遇到一些困难(如果你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难)。
这是因为每个小部件都有自己的边框，填充和边距的规则。 所以如果你想给几个不同的小部件相同的大小，你必须使用box-sizing 属性：
input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}

在上面的屏幕截图中，左侧的列没有box-sizing，而右侧的列使用了这个属性和border-box。 请注意我们是怎样确保所有元素都占用相同的空间量，尽管平台对每种窗口小部件都有默认规则。
3)定位（Positioning）
HTML表单部件的定位通常不是问题; 但是，应该特别注意两点：
legend（legend [ˈlɛdʒənd] 元素为 fieldset 元素定义标题（caption））
<legend>元素易于应用CSS，除了定位。在所有浏览器中， <legend> 元素定位是其 <fieldset> 父元素的上边框的最顶端。在HTML流中无法改变它的绝对位置，无法让其远离顶部边框。然而，你可以使用 position 属性将其位置设置为绝对或相对。除此之外，它近几年是fieldset边框的一部分。
由于<legend>元素对可访问性非常重要，因为它能被无障碍技术作为每个fieldset中的表单元素的标签读出来，它通常与标题配对，并且在无障碍中被隐藏 。例如:
HTML
<fieldset>
  <legend>Hi!</legend>
  <h1>Hello</h1>
</fieldset>

CSS
legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}
4)textarea
默认情况下，所有浏览器都认为<textarea> 元素是inline block，与文本底线对齐。 这很少是我们真正想看到的。 要将内联(inline-block)块更改为块(block)，使用display属性非常简单。 但是如果你想以inline方式使用它，通常改变垂直对齐方式：
textarea {
  vertical-align: top;
}
3.示例：HTML 表单的实际的案例

HTML：
<form>
  <h1>to: Mozilla</h1>
  <div id="from">
    <label for="name">from:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div id="reply">
    <label for="mail">reply:</label>
    <input type="email" id="mail" name="user_email">
  </div>
  <div id="message">
    <label for="msg">Your message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>
组织你的静态文件，css样式:
body {
  font  : 21px sans-serif;
  padding : 2em;
  margin  : 0;
  background : #222;
}
form {
  position: relative;
  width  : 740px;
  height : 498px;
  margin : 0 auto;
  background: #FFF url(image/background.jpg);
}
定位我们的元素，包括标题和其他表单元素：
h1 {
  position : absolute;
  left : 415px;
  top  : 185px;
  font : 1em "typewriter", sans-serif;
}
#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}
#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}
#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}
现在开始处理表单元素本身。首先，设置<label>字体：
label {
  font : .8em "typewriter", sans-serif;
}
文本域需要一些通用的规则，我们只需简单的移除 borders 和 backgrounds, 并重新定义其padding 和 margin：
input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;
  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;
  background: none;
}
当其中的一个域获得焦点后，我们用浅灰色、半透明的背景高亮它们，注意添加outline 属性非常重要，这样可以移除由某些浏览器添加的默认高亮效果：
input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}
现在我们的文本域已经完成了，我们需要调整单行和多行文本域的显示，使其能够匹配。
单行文本需要一些调整才能在 Internet Explorer 中渲染良好。Internet Explorer 没有定义基于字体的自然高度定义文本域的高度。(而这是所有其他浏览器都有的行为)。为了修正这个问题，我们需要给域添加一个确定的高度，像下面这样：
input {
    height: 2.5em; /* for IE */
    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
}
<textarea> 元素默认地被渲染成一个块级元素。这里有重要地两点是 resize 和 overflow 属性。因为我们的设计是一个固定大小的设计，所以我们会使用 resize 属性来防止用户调整我们的多行文本域的大小。overflow 属性是用来让域在不同的浏览器上渲染得更一致。一些浏览器默认值为 auto，而一些将默认值设为 scroll。在我们得例子中，最好确定每个浏览器都使用 auto：
textarea {
  display : block;
  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 360px;
  resize  : none;
  overflow: auto;
}
<button> 元素上使用 CSS 非常方便；你可以做你任何想做得事情，甚至包括使用 伪元素：
button {
  position     : absolute;
  left         : 440px;
  top          : 360px;

  padding      : 5px;

  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;
  cursor       : pointer;
-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}
button:after {
  content: " >>>";
}
button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}
完工！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

html5 表单属性

1.HTML5表单属性:
它们是包括<form> 和 <input> 元素的新属性。
2.新的 form 属性
1)autocomplete
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
autocomplete="off"是关闭
autocomplete="on"是开启
此功能一般是默认开启的，但是在某些浏览器中则相反，我们需要启用自动完成功能，才能令该属性生效。
2)novalidate  （validate [ˈvælɪˌdet]）
novalidate 属性规定当提交表单时不对其进行验证。
注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
使用方法：novalidate="novalidate"
3.新的input属性
1)autocomplete 属性
注意：在<form>和<input> 标签同时设置此属性时，input设置的属性生效。
2)autofocus
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。
autofocus 属性如果若干个的时候（这种情况不是一个正确的情况），那么它会将焦点放到第一个设置此属性的表单元素上。
3)form
form 属性规定输入域所属的一个或多个表单。
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
<form action="/example/html5/demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
Last name: <input type="text" name="lname" form="user_form" />
4)表单重写属性
表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。
表单重写属性有：
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
注释：表单重写属性适用于以下类型的 <input> 标签：submit 和 image。
formnovalidate用法：
formnovalidate="true"
5)height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 <input> 标签。
<input type="image" src="image/152.jpg" width="50" height="20" />
6)list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
7)min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔。
8)multiple 属性[ˈmʌltəpəl]
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
示例：
<form action="/example/html5/demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
9)novalidate
参见form标签的novalidate属性介绍。
10)pattern 属性[ˈpætərn]
pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
<form action="/example/html5/demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="请输入三个字母的国家代码" />
<input type="submit" />
</form>
身份证正则表达式（不完善）：
^[1-9]\d{5}(18|19|([2]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$
11)placeholder 属性
placeholder 属性提供一种提示（hint [hɪnt]），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。
12)required 属性
required 属性规定必须在提交之前填写输入域（不能为空），也就是指定为必填项。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

html5应用程序缓存

HTML5的应用程序缓存（Application Cache）:
HTML5 引入了应用程序缓存（Application Cache [ˌæplɪˈkeʃən] [kæʃ]），这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
A.离线浏览 - 用户可在应用离线时使用它们
B.速度 - 已缓存资源加载得更快
C.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存。
HTML5，通过创建 cache manifest [ˈmænəˌfɛst] 文件，可以轻松地创建 web 应用的离线版本。
1.Cache Manifest 基础
如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
2.Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
A.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
B.NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
C.FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
1)CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
2)NETWORK
下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：
NETWORK:
login.php
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
3)FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html/ /offline.html
注意: 第一个 URI 是资源，第二个是替补。
3.更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
4.关于应用程序缓存的说明
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注意: 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

附件：（知识拓展内容）
什么是 MIME TYPE？
一、
首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。
媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的，例如:
Content-Type: text/HTML
表示内容是 text/HTML 类型，也就是超文本文件。为什么是“text/HTML”而不是“HTML/text”或者别的什么？MIME Type 不是个人指定的，是经过 ietf 组织协商，以 RFC 的形式作为建议的标准发布在网上的，大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句，Email 附件的类型也是通过 MIME Type 指定的)。
通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。
XHTML 正是一个获得广泛应用的格式，因此，在 RFC 3236 中，说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。
当然，处理本地的文件，在没有人告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下，打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键，你可以看到所有 MIME Type 的配置信息。

二、
在把输出结果传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。这可以通过多种类型MIME（多功能网际邮件扩充协议）来完成。在HTTP中，MIME类型被定义在Content-Type header中。
例如，架设你要传送一个Microsoft Excel文件到客户端。那么这时的MIME类型就是“application/vnd.ms-excel”。在大多数实际情况中，这个文件然后将传送给Execl来处理（假设我们设定Execl为处理特殊MIME类型的应用程序）。在ASP中，设定MIME类型的方法是通过Response对象的ContentType属性。
多媒体文件格式MIME
最早的HTTP协议中，并没有附加的数据类型信息，所有传送的数据都被客户程序解释为超文本标记语言HTML 文档，而为了支持多媒体数据类型，HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识数据类型。
MIME意为多目Internet邮件扩展，它设计的最初目的是为了在发送电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后，它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本，而变得丰富多彩。
每个MIME类型由两部分组成，前面是数据的大类别，例如声音audio、图象image等，后面定义具体的种类。
常见的MIME类型
超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
JPEG图形 .ipeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
Internet中有一个专门组织IANA来确认标准的MIME类型，但Internet发展的太快，很多应用程序等不及IANA来确认他们使用的MIME类型为标准类型。因此他们使用在类别中以x-开头的方法标识这个类别还没有成为标准，例如：x-gzip，x-tar等。事实上这些类型运用的很广泛，已经成为了事实标准。只要客户机和服务器共同承认这个MIME类型，即使它是不标准的类型也没有关系，客户程序就能根据MIME类型，采用具体的处理手段来处理数据。而Web服务器和浏览器（包括操作系统）中，缺省都设置了标准的和常见的MIME类型，只有对于不常见的 MIME类型，才需要同时设置服务器和客户浏览器，以进行识别。
由于MIME类型与文档的后缀相关，因此服务器使用文档的后缀来区分不同文件的MIME类型，服务器中必须定义文档后缀和MIME类型之间的对应关系。而客户程序从服务器上接收数据的时候，它只是从服务器接受数据流，并不了解文档的名字，因此服务器必须使用附加信息来告诉客户程序数据的MIME类型。服务器在发送真正的数据之前，就要先发送标志数据的MIME类型的信息，这个信息使用Content-type关键字进行定义，例如对于HTML文档，服务器将首先发送以下两行MIME标识信息,这个标识并不是真正的数据文件的一部分。
Content-type: text/html
注意，第二行为一个空行，这是必须的，使用这个空行的目的是将MIME信息与真正的数据内容分隔开。
MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
官方的 MIME 信息是由 Internet Engineering Task Force (IETF) 在下面的文档中提供的：
RFC-822 Standard for ARPA Internet text messages
RFC-2045 MIME Part 1: Format of Internet Message Bodies
RFC-2046 MIME Part 2: Media Types
RFC-2047 MIME Part 3: Header Extensions for Non-ASCII Text
RFC-2048 MIME Part 4: Registration Procedures
RFC-2049 MIME Part 5: Conformance Criteria and Examples
不同的应用程序支持不同的 MIME 类型。


tomcat中mime type配置说明（后台的知识）：
在一些场景下 tomcat下的一些文件 在浏览器中访问的时候 浏览器会直接打开这个文件内容 而不是下载该文件  反之亦然。
这时候需要设置tomcat下的配置
打开tomcat目录下的conf文件夹下的web.xml文件(切记不是工程目录下的web.xml)。
例如：
<mime-mapping>
        <extension>ppt</extension>
        <mime-type>application/vnd.ms-powerpoint</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>rar</extension>
        <mime-type>application/x-rar-compressed</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>mmap</extension>
        <mime-type>application/MindManager</mime-type>
    </mime-mapping>
按照上面的例子就可以自己配置MIMI类型了。
比如你想直接下载一个txt  而不是在浏览器中自动打开 可以配置如下
    <mime-mapping>
        <extension>txt</extension>
        <mime-type>application/octet-stream</mime-type>
    </mime-mapping>
反之亦然  你想打开内容 而不是下载 配置如下
    <mime-mapping>
        <extension>txt</extension>
        <mime-type>text/plain</mime-type>
    </mime-mapping>
1.如果你的应用程序的后缀不在<extension></extension>中，那他会默认当做txt类型来打开，所以有时会看到一堆乱码。
2.如果存在，就会用<mime-type></mime-type>中设置的方式来打开。
3.如果有些文件，你是希望下载下来，而不是用应用程序来打开，就这样配置<mime-type>application/octet-stream</mime-type>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

web中的音频和视频

web 中的音频和视频:
1.发展
web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频（视频文件比文本和图片要大的多）。在早些时候，传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。
传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 HTML5 标准提出，其中有许多的新特性，包括 <video> [ˈvɪdioʊ]和 <audio> [ˈɔ:dioʊ]标签，以及一些 JavaScript 和 APIs 用于对其进行控制。在这里，我们不讨论有关 JavaScript 的问题，仅仅讲解有关 HTML 的基础。
2.<video> 标签
2.1<video> 允许你简单的嵌入一段视频。
一个简单的例子如下：
<video src=" audio/rabbit320.webm " controls>
  <p>您的浏览器不支持HTML5视频。这里是一个 <a href="rabbit320.webm">链接到视频的</a> 替代.</p>
</video>
其中的属性如下:
src
同 <img> 标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同。
controls
用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口，同时你也可以在 JavaScript （JavaScript API）当中使用这些控制接口。至少，这些媒体应该包括开始和停止，以及调整音量的功能。
<video> 标签内的段落
这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户可以至少访问到这个文件，而不会局限于浏览器的支持。
示例效果：

对比如下代码看不同：
<video src="Piper.2016.PROPER.BluRay.mkv" controls>
  <p>您的浏览器不支持HTML5视频。这里是一个 <a href="rabbit320.webm">链接到视频的</a> 替代.</p>
</video>
效果图：

2.2多格式支持
以上的例子中有一个问题，如果尝试使用像 Safari 或者 Internet Explorer 这些浏览器来访问上面的链接。视频并不会播放，这是因为不同的浏览器对视频格式的支持不同。
我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的。
视频和音频都有不同的格式，如下
WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。
MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。
老式的 Ogg 容器往往支持 Ogg Vorbis  音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。
音频播放器将会直接播放音频文件,例如 MP3 和 Ogg 文件，这些不需要容器。
以上的格式主要用于将音频和视频压缩成可管理的文件（原始的音频和视频文件非常大）。浏览器包含了不同的 Codecs,，如 Vorbis 和 H.264,，它们用来将已压缩的音频和视频转化成二进制数字。正如刚才所说，浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。
MP3 (音频格式) 和 MP4/H.264 (视频格式) 是被广泛支持的两种格式，并且质量良好。然而，他们却有专利的阻碍 — MP3 的专利会持续到2017年（当然，现在解除了）。而 H.264 会持续到2027年早期。也就是说浏览器若想要支持这些格式，就得支付高额的费用。此外，许多人反对软件技术垄断，支持开源的格式。这就是为什么我们需要准备不同的格式来兼容不同的浏览器。
我们该怎么做呢？请看如下：
<video controls>
  <source src="audio/rabbit320.mp4" type="video/mp4">
  <source src=" audio/rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href=" audio/rabbit320.mp4">link to the video</a> instead.</p>
</video>
现在我们将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签 <source> 当中。在这个例子当中，浏览器将会检查 <source> [sɔ:rs]标签，并且播放第一个与其自身 codec（编解码器） 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。
每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
2.3其他 <video> 特性
第三个例子：
<style type="text/css">
  video {
      background: black;
    }
</style>
<video controls width="400" height="400"
           loop muted preload="auto"
           poster="image/72b0.jpg">
      <source src="audio/rabbit320.mp4" type="video/mp4">
      <source src="audio/rabbit320.webm" type="video/webm">
      <p>Your browser doesn't support HTML5 video. Here is a <a href="audio/rabbit320.mp4">link to the video</a> instead.</p>
</video>

新的特性：
width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。
loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
muted
这个属性会导致媒体播放时，默认关闭声音。
poster
这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件，有3个值可选：
"none" ：不缓冲
"auto" ：页面加载后缓存媒体文件
"metadata" ：仅缓冲文件的元数据
注意我们并没有使用 autoplay 属性在这个版本的例子中 — 如果当页面一加载就开始播放视频的话，就不会看到 poster 属性的效果了。
3.<audio> 标签
<audio> 标签与 <video> 标签的使用方式几乎完全相同，有一些细微的差别比如下面的边框不同，一个典型的例子如下：
<audio controls>
  <source src="audio/viper.mp3" type="audio/mp3">
  <source src=" audio/viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href=" audio/viper.mp3">link to the audio</a> instead.</p>
</audio>
音频播放器所占用的空间比视频播放器要小，由于它没有视觉部件 — 你只需要显示出能控制音频播放的控件。
audio与 HTML5 <video> 的差异如下：
<audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性 — 同样，没有视觉部件。
除此之外，<audio> 标签支持所有 <video> 标签拥有的特性。
4.显示音轨文本
现在，我们将讨论一个略微先进的概念，这个概念将会十分的有用。许多人不想（或者不能）听到 Web 上的音频/视频内容，至少在某些情况下是这样的，比如：
许多人患有听觉障碍（通常来说是很难听清声音的人，或者聋人），所以他们不能听见音频中的声音。
另外的情况可能是由于人们并不能听音频，可能是因为他们在一个非常嘈杂的环境当中（比如在一个拥挤的酒吧内恰好赶上了球赛 ），也可能是由于他们并不想打扰到其他人（比如在一个十分安静的地方，例如图书馆）。
有一些人他们不说音频当中的语言，所以他们听不懂，因此他们想要一个副本或者是翻译来帮助他们理解媒体内容。
给那些听不懂音频语言的人们提供一个音频内容的副本岂不是一件很棒的事情吗？
所以，感谢 HTML5 <video> 使之成为可能，有了 WebVTT 格式，我们可以使用 <track> 标签。
4.1WebVTT格式
WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：
subtitle   [ˈsʌbˌtaɪtl:]
通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
captions
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
timed descriptions ['taɪmd] description [dɪˈskrɪpʃən]
将文字转换为音频，用于服务那些有视觉障碍的人。
WebVTT 文件如下：
WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...
让其与 HTML 媒体一起显示，你需要做如下工作：
1.以 .vtt 后缀名保存文件。
2.用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

如下:
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

html5拖放

HTML 5 拖放:
  拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持：
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.
Drag [dræɡ] 拖拽
drop [drɑ:p] 落下
1.示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖放</title>
<style type="text/css">
div{ width:150px; height:70px; padding:10px; border:1px solid #aaaaaa; float: left; margin-right: 30px;}
</style>
<script>
function allowDrop(ev){
    ev.preventDefault();
}
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" width="150" src="image/72b0.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
</body>
</html>
2.实现原理
2.1设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2.2拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
transfer  [trænsˈfɚ] 使转移
2.3放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()  //阻止默认处理方式
2.4进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev){
    ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
其他示例：
<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
  #draggable {
    width: 200px;    height: 20px;    text-align: center;    background: white;
  }
  .dropzone {    width: 200px;    height: 20px;    background: blueviolet;    margin-bottom: 10px;    padding: 10px;
  }
</style>
<script>
  var dragged;
  /* 拖动目标元素时触发drag事件 */
  document.addEventListener("drag", function( event ) {
  }, false);
  document.addEventListener("dragstart", function( event ) {
      // 保存拖动元素的引用(ref.)
      dragged = event.target;
      // 使其半透明
      event.target.style.opacity = .5;
  }, false);
  document.addEventListener("dragend", function( event ) {
      // 重置透明度
      event.target.style.opacity = "";
  }, false);
  /* 放置目标元素时触发事件 */
  document.addEventListener("dragover", function( event ) {
      // 阻止默认动作以启用drop
      event.preventDefault();
  }, false);
  document.addEventListener("dragenter", function( event ) {
      // 当可拖动的元素进入可放置的目标时高亮目标节点
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }
  }, false);
  document.addEventListener("dragleave", function( event ) {
      // 当拖动元素离开可放置目标节点，重置其背景
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }
  }, false);
  document.addEventListener("drop", function( event ) {
      // 阻止默认动作（如打开一些元素的链接）
      event.preventDefault();
      // 将拖动的元素到所选择的放置目标节点中
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
  }, false);
</script>

addEventListener() 方法用于向指定元素添加事件句柄。它接受三个参数：
参数               描述
1.event     必须。字符串，指定事件名。
注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
2.function    必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
3.useCapture     可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

html5移动wap

HTML 5 实现移动wap:
1.什么是 WAP？
无线产品提出了 WAP 的理念。此标准的要点是在无线设备上展示因特网内容。
WAP 指无线应用协议
WAP 是一种应用程序通信协议
WAP 被用来访问服务及信息
WAP 继承于因特网标准
WAP 针对诸如移动电话的手持设备
WAP 是一种为微浏览器设计的协议
WAP 使创建针对移动设备的 web 应用程序成为可能
WAP 使用标记语言 WML（不是 HTML）
WAP 作为 XML 1.0 的一种应用被定义
1)无线应用协议（Wireless Application Protocol）
WAP 是一种用于在无线终端（比如数字移动电话）进行信息服务的主要的标准。
WAP 标准基于因特网标准（HTML、XML 以及 TCP/IP）。它包括 WML 语言规范、WMLScript 规范以及无线电话应用接口规范（WTAI）。
WAP 由 WAP 论坛（WAP forum ）发布，被爱立信、摩托罗拉、诺基亚以及 Unwired Planet 创建于 1997 年。论坛的成员目前占据着超过 90% 的全球手机市场，同时又是领先的基础设施提供商、软件提供商及其他机构。我们可以在我们的 WAP 论坛页面找到有关 WAP 论坛的更多信息。
2)WAP 微浏览器
为了适合小型无线终端，WAP使用了一种微浏览器。
微浏览器是一种小型软件，可向硬件、内存和 CPU 发布基本的指令。它可以显示用一种由被称为 WML 的受限标记语言编写的信息。
微浏览器也可翻译一种被称为 WMLScript 的 JavaScript 简化版。
3)什么是 WML？
WML 指无线标记语言。它是一种从 HTML 继承而来的标记语言，但是 WML 基于 XML，因此它较 HTML 更严格。
WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。
4)什么是 WMLScript？
WML 使用 WMLScript 在客户端运行简单的代码。WMLScript 是一种轻量级的 JavaScript 语言。不过，WML 脚本并不嵌在 WML 页面中。WML页面仅仅含有对脚本 URL 的引用。WML 脚本在 WAP 浏览器运行之前，需要先在服务器上被编译为字节编码。
请访问我们的 WMLScript 教程，以学习更多有关 WML 文档中的脚本的知识。
5)WAP 应用举例
查看列车时刻表信息
票务交易
航班登记
查看交通信息
查寻股票价格
查寻电话号码
查寻地址
查寻体育竞赛结果
2.怎么用html5开发wap页面
那就是，要开发能在移动设备上浏览的网站，我们需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。
这样开发用的依然是html5技术，而不是WML语言。
2.1移动友好性
想要开发wap页面，就好保证能在各种移动端设备上完美兼容，所以要保证移动友好性。
移动友好性要达到的目的：
(1)使网站在各种屏幕尺寸上都能正常运行。
如今，用户可以使用各种外形设备访问设备上的网络，包括手机，平板电脑和电子书阅读器。
(2)为移动用户调整内容
想想用户在手机上想要在我们的网站上做些什么。
比如，旅游网站专注于让访问者预订旅行。但是，移动用户可能更感兴趣的是办理登机手续或查看他们的航班是否延误。这就需要调整网站的内容以反映这一点，并满足移动用户的需求。
(3)即使连接速度很慢，也能为用户提供流畅的体验
虽然近年来无线信号情况越来越好，但总有信号不良的时候。
其他：了解我们的客户群体，因为选择移动策略时要使用的浏览器和设备绝对至关重要。
3.移动开发方法
3.1单独的网站
用于移动和桌面的单独站点开发。
移动Web开发的“独立站点”方法涉及为移动和桌面Web用户创建不同的站点。也就是web页面和wap页面是两个不同网站路径，这种方法有优和劣的方面。
优势：
使用用户代理检测将手机上的用户打开到单独的移动网站，通常是在m.example.com。简而言之，这种技术使用服务器端逻辑同时解决移动Web开发的所有三个目标 - 如果用户的浏览器看起来像是在手机上，则为他们提供移动内容，为手机格式化并优化速度。
从概念上讲，这是添加到现有站点的最简单选项，尤其是在使用支持模板的CMS或Web应用程序时。由于只向移动用户发送特定于移动设备的内容，样式和脚本，因此此方法还可以提供此处提供的任何其他选项的最佳性能。最后，它还允许在桌面和移动设备上完全不同的用户体验 - 毕竟它们是两个不同的网站！
劣势：
这种方法并非没有缺点。对于初学者，你现在为网站上的每个页面开发和维护两个不同的页面（版本），以便向移动用户访问。
如果我们使用的是CMS，则可以以最小化此重复的方式排列我们的网站模板。但是，如果移动和桌面模板之间存在差异，则代码中可能存在复杂的设计。同样，这会增加任何新站点功能的实现时间，因为我们现在必须编写两组前端逻辑。
更重要的是，用户代理检测本质上是有缺陷的，并且除了面向未来之外的任何东西都是如此。每次出现新的浏览器时，我们都必须调整算法以适应它。误报尤其可怕 -比如我们的移动网站万一意外地为桌面用户提了供服务，那么就令人讨厌了。
举例：搜狐的手机wap页面，被电脑访问到了

什么时候使用呢？
第一，如果我们的用户中囊括了旧款或低端功能手机上的用户，则需要注意，我们可能需要采用此策略。因为无论如何，我们需要保证用户的浏览效果。此时可能用户的设备不支持我们的新标签或新功能，而是支持XHTML-MP或旧版WML等格式，此时开发两套网站效果更好。
第二，有一种情况是这种方法真的比其他方法更有效。如果我们需要在移动设备上为用户提供的功能与桌面上的功能极为不同，那么使用单独的网站可能是最实用的选择。这是因为我们可以选择向手机和PC发送完全独立的HTML，JavaScript和CSS。
第三，另外不多见的情况，是我们被迫使用此方法。比如，无论出于何种原因，无法修改现有的桌面网站，并且需要拥有100％独立的移动网站。虽然它不理想，但至少我们有这个选择去完成工作。
注意：开发的时候需要适配不同尺寸的移动设备的屏幕。
3.2响应式设计
响应式设计采用不同的屏幕尺寸来呈现在各种设备（例如移动电话或者平板电脑）下的可视情况。响应式设计视图使我们可以很容易地看到我们的网站或者网站app在不同屏幕尺寸下的外观。
响应式布局并不是自适应页面，他们有区别：
解决的问题不一样
自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。
应式的概念是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。比如曾经做过的圣杯页面。
响应式布局的一些技术点：
(1)允许网页的宽度自动调整
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，比如float。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)选择使用css的@media多媒体查询，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
(6)根据屏幕尺寸缩放调整内容布局。
(7)图片的自适应
也就是实现图片的自动缩放，比如：img { max-width: 100%;}。
但是，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。毕竟需要考虑移动端用户的流量使用问题。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
和单独开发不同网站对比，极大的减少了代码量
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
当需要为用户展现不同内容的时候，满足不了需求
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
3.3混合方法
混合方法旨在通过组合以上两种开发方式，来避免单独的站点和响应式设计方法的一些缺点。
这种混合方法的核心是将移动开发分解为三个目标，然后应用可用的最佳技术来单独处理每个目标。我们以一种可能的技术组合为例，但在不同的情况下，不同的组合是适当的。要记住的最重要的概念是服务器端和客户端技术可以组合以适应你的情况。
示例：

对于Mozilla的Web O'Enusion演示站点，使用了混合方法的基本版本，并取得了良好成果。
我们使用响应式网页设计的一些元素为网站提供移动布局，以及用户代理检测，以提供适合移动设备的视频，并在用户使用手机时重新设计加载内容。
如果移动端和web端内容非常不同，可以考虑使用混合方法。
例如，可以通过整合媒体查询和灵活的布局来提高单独网站设计的灵活性。甚至可以使我们的移动网站设计具有足够的适应性，以便舒适地扩展到平板电脑。
混合方法的缺点：
混合方法的一个缺点是它可能导致客户端和服务器端的代码路径数量增加。这使得开发比其他方法更耗时。但是，通过适当的规划，代码仍然可以以可维护的方式进行组织。
另一个缺点是，由于这种方法依赖于响应式设计，因此通常在新项目或具有现有灵活布局的项目上效果最佳，而不是作为改造。同样，因为它使用用户代理检测，所以我们必须随着时间的推移更新检测规则。

拓展：
响应式网页设计非常棒 - 现在它是最好的技术，可以在各种情况下使布局看起来尽可能好。如果我们的移动和桌面用例足够相似，那么这绝对是布局更改的首选选项。但是，使用客户端技术来改变站点内容以适应用户的上下文可能会很麻烦。

幸运的是，我们在技术上并不局限于使用客户端技术：另一种选择是使用服务器端用户代理检测向用户显示正确的内容。这样可以保持在服务器端更改内容的复杂性，但仍然允许我们的布局从响应式设计的灵活性和未来准备中受益。

使用专门针对内容而非布局的用户代理检测还允许我们为每个内容提供单个URL，以便内容可以使其布局适应用户的浏览器。这通常被认为是一件好事。我们只是将用户重定向到他们关心的内容页面，而不是维护两个完全不同的网站。由于设计是响应式的，因此我们知道每个页面在用户屏幕上看起来都尽可能好。

我们还可以通过结合服务器端技术来解决响应式设计的一些性能问题。例如，一个经常被批评的关于响应式网页设计的观点是，全分辨率图像被发送到所有设备，包括显示图像按比例缩小的手机。处理此问题的一种此类技术使用服务器端用户代理检测以及WURFL设备功能库来为用户的设备发送适当大小的图像。一个系列的产品也不断出现这种提供的服务。当然，这种技术存在与用户代理检测相关的所有缺点。但即使它不起作用，在性能方面也不比仅使用更差流体图像。

通过结合上面列出的技术，我们可以获得一种移动Web开发策略，该策略比纯粹的独立站点更灵活，并且比纯响应式设计具有更好的性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

如果你能看到这里证明你是一个很爱学习的人，如果有什么疑点或者是文章有争议的地方请随时联系我

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/92762