兼容性：HTML5在老版本的浏览器上也可以正常运行
实用性：HTML5内部并没有特别复杂的功能，它只封装了那些常用的简单功能。
非革命性的发展：HTML5并不是革命性的发展，它只是"妥协式"的规范。
W3C（万维网联盟）为HTML和XHTML制订了严格的语义约束，W3C组织使用DTD（文本类型定义）来定义HTML和XHTML的语义约束，包括HTML文档中可以出现哪些元素，各元素支持哪些属性等。
HTML5的基本机构：
对于一份基础的HTML5文档而言，它总有如下结构：
<!DOCTYPE html>
<html>
<head>
<title> 页面标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">#utf-8
</head>
<body>
页面内容
</body>
</html>
这里我们主要说一下meta:
meta是用来在HTML文档中模拟HTTP协议的响应头报文。（标签）
meta的格式：告诉浏浏览器我的页面要怎么解码
1、<meta http-equiv="Content-Type" content="text/html; charset=gb2312">#utf-8：
http-equiv（属性）：类似于HTTP的头部协议，回应给浏览器一些有用的信息，以帮助正确的显示网页内容。它的作用和name属性差不多，就是用来指定meta标签的作用，但是不同的是它会关联到HTTP头部的一些作用，也影响就是浏览器发送http请求和浏览器引擎的行为。
content（属性）：声明网页模式，将网页代码作为HTML来执行，也可以定义网页长和宽
charset（属性）：这个属性是HTML5新增的属性，主要的作用是用来定义文档的字符编码，就是告诉浏览器在从服务器获取这个html文档后采用什么样的解码格式去正确的解码该文档。一般值都是UTF-8，同样的没有特殊要求的话也推荐使用UTF-8。
2、<meta name = "viewport" content=" width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
name:参数解释
content:
width:viewport宽度（数值/device-width）
initial-scale:viewport高度（数值/device-height）
maximum-scale:最大缩放比例
minimum-scale:最小缩放比例
user-scalable:是否允许用户缩放（yes/no）
minimal-ui:IOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写。
name属性的值有：
application-name:用于定义应用的名称，名字定义在content属性的值中，通过搜索引擎能搜到该应用的名字，但是只有当页面为一个webapp时才能使用。
author:作者名称，给搜索引擎提供作者的信息
description:网页描述，具体内容定义在content属性的值中
generator:这个具体不太清楚是啥用，一般用于显示网页的制作工具，比如以前的dreamwave等
keywords:这个比较重要，搜索引擎根据关键词来归类网页，好的关键词描述能够使网页更加容易的被用户搜索到
referrer:这个属性值比较复杂主要是用来控制页面与服务器交互时发送的请求，作为页面信息安全的保障措施。
style:用于引用样式定义，用法参考CSS3（元素）
h1~h6:定义标题一到标题六（元素）
p：定义段落，指定id，class，style等核心属性，还可以指定onclick等各种事件属性（元素）
br：插入一个换行，该标签可以指定id，class，style等核心属性。（元素）
hr：定义水平线，该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。（元素）
span：与div基本相似，区别是该定义的节默认不会换行，可以指定和div相同的标签（元素）
文本格式化元素：
b:定义粗体文本。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
i:定义斜体文本。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
em:定义强调文本，实际效果与斜体文本差不多。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
strong:定义粗体文本。与b标签的作用和用法基本相同。
small：定义小号字体文本。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
sup：定义上标文本。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
sub：定义下标文本。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。
bdo：定义文本显示方向。该标签可以指定id，class，style等核心属性，还可以指定onclick等各种事件属性。除此之外，该标签也可以指定dir属性，该属性值只能是ltr或者rtl。
语义相关元素
abbr：用于表示一个缩写。使用该元素时可指定如下属性。
title，该属性用于指定该缩写所代表的全称。
address：用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。
blockquote：用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定如下属性。
cite：该属性指定该引用文本所引用的地址URL。
q：用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
cite：用于表示作品（一本书、一部电影、一首歌曲）的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。
code：用于表示一段计算代码。
dfn：用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。
del：定义文档中被删除的文本。浏览器通常会以中画线形式显示del包含文本。
ins：定义文档中插入文本。浏览器通常会以下划线形式显示ins包含的文本。
cite：该属性值为一个URL，该URL对应的文本解释了文本被删除或插入的原因。
datetime：定义文本被删除或插入的日期、时间。
pre：用于表示该元素所包含的文本已经进行了"预格式化"。也就是说，
samp：用于定义示范文本内容
kbd：用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中经常使用该元素。
var：用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。
超链接和锚点：
href：指定超链接所关联的另一个资源。
target：指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self,_blank,_top,_parent是个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media：指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
a...：元素主要可以包含文本、图像、各种文本格式化和表单元素等内容。
<a href="http://www.crazy.org"><b>Test</b></a><br />
粗体字超链接
<a href="http://www.crazy.org" target="_blank"><em>Test</em></a><br />
斜体字超链接
<a href="http://www.crazy.org"><img src="images/logo.ipg" alt="Test"/></a><br />
图像超链接
<a href="text.html">Test</a><br />
普通超链接
关于这个URL地址的解释如下：
scheme:指定因特网服务的类型。最流行的类型是HTTP
domain:指定因特网域名。
host:指定此域中的主机。如果被省略，HTTP的，默认主机是WWW。
port:指定主机的端口号。端口号通常可以被省略，HTTP服务的默认端口是80.
path:指定远程服务器上的路径，该路径也可被省略，省略该路径则默认被定位到网站的根目录
filename:指定远程文档的名称。如果省略该文件名，通常会定位到index.html、index.htm等文件，或定位到web服务器设置的其他文件。
URL最流行的scheme以及对应资源：
file 访问本地磁盘上的文件
ftp 访问远程FTP服务器上的文件
http 访问WWW服务器上的文件
news 访问新闻组上的文件
telnet 访问Telnet链接
gopher 访问远程Gopher服务器上的文件
列表相关元素：
ul：定义无序列表。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。
ol：定义有序列表。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。除此之外，在HTML5规范中，该元素还可以指定如下三个属性。
start：指定列表项的起始数字。默认是第一个，如1，A等。
type：指定使用哪种类型的编号，不推荐使用建议使用CSS来定义。
reversed：该属性指定是否将排序反转。很遗憾，目前没有任何浏览器支持该属性。
li：定义列表项目。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。
dl：也用于定义列表，该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。
dt：定义标题列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
dd：定义普通列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。
图像相关元素：
src:该属性指定图片文件所在的位置，该属性值既可以是相对路径，也可以是绝对路径。
alt:该属性指定一段文本，该文本将作为图片的提示信息。
除此之外，该元素还可以指定如下两个可选属性。
height:指定该图片的高度，该属性值可以是百分比，也可以是像素值。
width:指定该图片的高度，该属性值可以是百分比，也可以是像素值。
除此之外，与图片
map:用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素，每个<area.../>子元素定义一个区域，不同
area:用于定义图片映射的内部区域。该元素只能是一个空元素，该元素除了可以指定id、style、class等核心属性外，也可以指定如下几个属性。
shape:指定该内部区域是哪种区域，该属性的默认值是"rect",即矩形区域；除此之外，还可以是circle和ploy，分别代表圆形区域和多边形区域。
coords:指定多个坐标值，用于确定区域位置。
href:用于确定该区域所链接的资源。
alt：该属性指定一段文本，该文本将作为该图片的提示信息。
target:指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media:指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。
表格相关元素：
table:用于定义表格，<table.../>元素只能包含0个或1个<caption.../>子元素（定义表格标题），0个或1个<thead.../>子元素（定义表格头），0个或1个<tfoot.../>子元素（定义表格脚），多个<tr.../>子元素（定义表格行），多个<tbody.../>子元素（定义表格体）。该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性。除此之外，该元素还可以指定如下几个属性。
cellpadding:指定单元格内容和单元格边框之间的间距。该属性值即可是像素值，也可是百分比。
cellspacing:指定单元格之间的间距。该属性值即可是像素值，也可是百分比。
width:指定表格的宽度，该属性值即可是像素值，也可是百分比。
caption:用于定义表格标题，该元素只能包含文本、图片、超链接、文本格式化元素和表单
tr:定义表格行，该元素只能包含<td.../>或者<th.../>两种元素，该元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。
td:定义单元格，该元素和<div.../>元素一样，可以包含各种类型的子元素，包括在<td.../>元素里包含<table.../>子元素再次插入一个表格。该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性，除此之外，该元素还可以指定如下几个属性。
colspan:指定该单元格跨多少列，该属性值就是一个简单数字。
rowspan:指定此单元格可横跨的行数。
height:指定该单元格的高度，该属性值即可是像数值，也可是百分比。
width:指定该单元格的宽度，该属性值即可是像素值，也可是百分比。
th:定义表格页眉的单元格，和<td>标签的用法几乎完全一样，只是浏览器呈现<th.../>元素时有一定差别。
tbody:定义表格的主体，该元素只能包含<tr.../>子元素，该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性。
thead:定义表格头，用法与<tbody.../>基本相似，指定功能稍有差别。
tfoot:定义表格脚，用法与<tbody.../>基本相似，指定功能稍有差别
col:该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素内。该元素可指定id、style、class等核心属性，还可指定onclick等事件属性。除此之外，该元素还可指定如下属性：
span:指定该列可横跨多少列。
colgroup:该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<tables.../>元素或<colgroup.../>元素内。该元素可指定id、style、class等核心属性，还可指定onclick等事件属性。
框架相关元素：
src:该属性指定一个URL，指定该iframe将装载哪个页面。
HTML5新增通用属性
ContentEditable属性：具有"可继承"的特点，如果一个HTML元素的父元素是"可编辑"的，那么它默认也是可编辑的，除非显式指定contentEditable="false"。
designMode属性：相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为no时，该页面上所有可支持contentEditable属性的元素都变成可编辑状态；designMode属性默认为off。
hidden属性：hidden属性支持true、false两个属性值，一旦把某个HTML元素的hidden设为true，就意味着通知浏览器不显示该组件，浏览器也不会保留该组件所占用的空间。
spellcheck属性：该属性可支持true、false两个属性值，如果设置spellcheck="true"，浏览器将会负责对用户输入的文本内容执行输入检查，如果检查不通过，浏览器会对拼错的单词进行提示。
HTML5新增的常用元素
文档结构元素：
article：该元素用于代表页面上独立、完整的一篇"文章"，该元素表示的内容可以是一个帖子、一篇Blog文章、一篇短文、一条完整的回复等。总之，只要是一篇独立的文档内容，就应该使用<article.../>元素来表示。关于<article.../>的简单规则如下：
article元素内部可使用<header.../>定义文章"标题"部分。
article元素内部可使用<footer.../>定义文章"脚注"部分。
article元素内部可使用多个<section.../>把文章内容分成几个"段落"。
article：元素内部可嵌套多个<article.../>作为它的附属"文章"，比如一篇Blog文章后面可以有多篇回复文章。
section：该元素用于对页面的内容进行分块。<section.../>元素通过也可由标题和内容组成。关于<section.../>元素的简单规则如下：
通常建议<section.../>元素包含一个标题(也就是<h1.../>~<h6.../>元素定义的标题)。
<section.../>元素可以包含多个<article.../>元素，表示该"分块"内部包含多篇文章。
<section.../>元素可以嵌套<section.../>元素，用于表示该"分块"包含多个"子分块"。
nav：该元素专门用于定义页面上的"主导航条"、侧边的"边栏导航"、页面内部的"页面导航"、页面下方的"底部导航"等，HTML5推荐将这些导航链接分别放在相应的<nav.../>元素中进行管理
aside：该元素专门用于定义当前页面或当前文章的附属信息，通常来说，推荐<aside.../>元素使用CSS渲染成侧边栏。
header：该元素主要用于为<article.../>元素定义文章"头部"信息。该元素内部即可包含多个<h1.../>~<h6.../>这样的标题元素，也可包含<hgroup.../>元素，还可包含普通的<p.../>、<span.../>等元素。
hgroup：该元素主要用于组织多个<h1.../>~<h6.../>这样的标题元素。当<header.../>需要包含多个标题元素时，可以考虑使用<hgroup.../>把它们组成一组。
footer：该元素主要用于为<article.../>元素定义"脚注"部分，包括该文章的版权信息、作者授权信息等
figure：该元素用于表示一块独立的"图片区域"，该元素内部可包含一个或多个<img.../>元素所代表的图片。除此之外，该元素内部还可包含一个<figcaption.../>元素，用于定义该"图片区域"的标题
figcaption：该元素通常放在<figure.../>内部，用于定义"图片区域"的标题。
将<aside.../>元素放在<body.../>内部，表明为整个页面添加"边栏"。
将<aside.../>元素放在其他父元素内部，表明为父元素添加"边栏"。
语义相关元素：
mark：用于显示HTML页面中需要重点"关注"的内容，就像我们看书时喜欢用荧光笔把某些重点内容标注出来一样。该元素可以指定id、style、class和hidden等通用属性。浏览器通常会用黄色显示<mark.../>标注的内容。
time：用来显示标注内容是日期、时间或者日期时间。使用该元素时除了可以指定id、style、class和hidden等通用属性之外，还可以指定如下属性。
datetime：该属性主要用于向机器提供时间（向浏览者呈现的时间放在<time>和</time>之间），datetime属性的属性值应该是符合yyyy-MM-ddTHH:mm格式的日期时间。当然，也可以指定日期，或只指定时间。
两个特殊功能的元素
meter：用于表示一个已知最大值和最小值的计算仪表。比如电池的剩余电量、速度表等。使用该元素时除了可指定id、style、class、hidden等通用属性之外，还可指定如下属性。
value：指定计数仪表的当前值。默认为0，可以为该属性指定一个浮点小数值。
min：指定计数仪表的最小值。默认为0，可以为该属性指定一个浮点小数值。
max：指定计数仪表的最大值。默认为1，可以为该属性指定一个浮点小数值。
low：指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值
high：指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。
optimum：指定计数仪表有效范围的最佳值。如果该值大于high属性指定的值，则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。
progress：用于表示一个进度条。使用该元素时除了可指定id、style、class、hidden等通用属性之外，这可指定如下属性。
max：指定进度条完成时的值。
value：指定进度条当前完成的进度值。
HTML5头部和元信息：
script：该元素用于包含JavaScript脚本。关于JavaScript的介绍，请参考本身中关于JavaScript的相关章节。
style：该元素用于定义内部CSS样式。关于内部CSS样式的介绍，请参考本书中介绍CSS的相关章节。
link：该元素用于链接外部CSS样式等资源。关于外部CSS样式的介绍，请参考本书中介绍CSS的相关章节。
title：该元素用于定义文档标题。该元素较为常用的属性时id,作为其唯一标识。该元素只能包含文本内容，该文本内容就是该文本的标题。
base：该元素用于指定该页面中所有链接的基准链接。
meta：该元素用于定义HTML页面的元数据。
href：指定所有链接的基准链接。
target：指定超链接默认在哪个窗口打开链接。该属性值只能是_blank、_parent、_self和_top其中之一。
http-equiv：指定元信息的名称，该属性指定的名称具有特殊意义，它可以向浏览器传回一些有用的信息，帮助浏览器正确地处理网页内容。
name：指定元信息的名称，该名称值可以随意指定。
content：指定元信息的值。
Expires：指定网页的过期时间。一旦网页过期，必须重新从服务器上下载。
Pragma：指定禁止浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面。
Refresh：指定浏览器多长时间后自动刷新指定页面。
Set-Cookie：设置Cookie。如果网页过期，那么客户端上的Cookie也将被删除。
content-Type：设置该页面的内容类型和所有的字符集。
HTML5新增的拖放API
启动拖动：
对于普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素draggable属性设置为true即可。但仅仅设置该元素的draggable属性还不够，因为仅仅设置了draggable="true"只表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动效果。为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器，在该监听器中让拖动操作可以携带数据。
接受"放"：
不管是拖动图片还是拖动div元素，拖动时都显示一个"禁止"标志，这表明拖动图片、拖动div时被拖动到"目的地"并不接受被拖动的元素,这是因为当被拖动元素被"拖过"document对象时，document对象默认阻止了拖动事件，而其他HTML组件也是位于document对象内的，因为他们不接受"放"。为了让document可以接受"放"，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。
拖动操作相关事件：
事件 事件源 描述
ondragstart 被拖动的HTML元素 开始拖动操作时触发该事件
ondrag 被拖动的HTML元素 拖动过程中会不断地触发该事件
ondragend 被拖动的HTML元素 拖动结束时触发该事件
ondragenter 拖动时鼠标经过的元素 被拖动的元素进入本元素的范围内时触发该事件
ondragover 拖动时鼠标经过的元素 被拖动的元素进入本元素的范围内拖动时会不断地触发该事件
ondragleave 拖动时鼠标经过的元素 被拖动的元素离开本元素时触发该事件
ondrop 拖动时鼠标经过的元素 其他元素被放到了本元素中时触发该事件
DataTransfer对象
dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为"none"、"copy"、"link"和"move"四个值之一。
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设置"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"和"uninitialized"。
dataTransfer.items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
dataTransfer.setDraglmage(element, x , y):设置拖放操作的自定义图标。其中element设置自定义图表，x设置图表与鼠标在水平方向的距离；y设置图表与鼠标在垂直方向的距离。
dataTransfer.addElement(element):添加自定义图标。
dataTransfer.types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
dataTransfer.getData(format):获取DataTransfer对象中format格式的数据。
dataTransfer.setData(format,data):向DataTransfer对象中format格式的数据。format代表数据格式，data代表数据。
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据。如果省略format格式，则意味着清除DataTransfer对象中的全部数据。
"拖"开始时（通过ondragstert事件监听器来实现），程序把需要携带的数据放入DataTransfer对象中。
"放"下元素时（通过ondrop事件监听器来实现），程序从DataTransfer对象中取出数据，并利用该数据进行相应的处理。
拖放行为：
通过设置DataTransfer对象effectAllowed、dropEffect两个属性可以控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer用于控制被拖动元素的拖动行为，因此通常建议在ondragstart事件监听器中设置DataTransfer对象的effectAllowed属性；而dropEffect则控制被"放"入的目标组件的行为，因此通常建议在ondragover事件监听器中设置DataTransfer对象的dropEffect属性。
如果dropEffect设置的拖放行为不在effectAllowed属性设置的多个拖放行为之内，拖放操作将会失败。
如果effectAllowed设为none，则不允许拖放该元素
如果dropEffect设置为none，则被拖动的元素不能"放"到本元素中。
如果effectAllowed设置为all或不设置，则dropEffect可设置为任何属性值（因为都在all范围之内），而且将会遵守dropEffect指定的拖放行为
如果effectAllowed指定了特定的拖放行为，例如：move、copy等，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性值的子集。
改变拖放图标：
通过调用DataTransfer对象的setDragImage还可以改变拖放图标。
