标签：
html5这个相信已经被嚼烂了！一提到ht5大家就会想到：
1.新的布局标签（nav、footer、section、artile、input的新类型等）
2.新功能标签（video、audio、canvas、svg等）
3.离线缓存，本地存储等
我了解到的做了简单分类，针对我们的ht5：
标签级：（我们主要了解部分）
一、section、nav布局标签等（优化布局处理）
二、canvas（画布绘制）
三、audio/video（音频视频播放）
四、svg（可伸缩的矢量标记绘图）
五、新表单（颜色，日历等）
六、编辑属性（标签的contenteditable属性）
存储级：
一、localStorage（类似于cookie，不过lo对象是作为window对象的属性，cookie作为document对象属性，本地存储）
二、sessionStorage （作为window属性，当前页面存储）
三、cache manifest（离线缓存，一般设置html标签的manifest属性指定manifest文件）
设备级：
一、音频处理 Web audio API（处理arraybuffer类型的音频处理，新的xhr2支持arraybuffer类型返回）
二、捕捉用户摄像头 - 媒体流 Media Capture（浏览器对象支持获取媒体方法，回调函数获取媒体流）
三、语音识别 Web Speech API
四、设备电量 Battery API
五、获取用户位置 - 地理位置 Geolocation API
六、环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
当你看到设备级别的功能时，任何人都是惊呆了的，不过几乎大部分都没有实现！我们的主要工作都是放在html5标签的项目使用处理。
一、基本知识
1.文件头部结构设置
我们的xhtml1.0的文件头结构如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
定义文档类型，模式，校验地址，编码类型等
到了html5.为我们做了非常简化的而处理，html5文件头部结构如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
我们可以说是甚是喜欢啊！虽然xhml那一段也是软件生成的，几乎没人手打，不过看起来也是很碍眼。
注意：如果我们的页面没有对文档类型的定义，浏览器就会采用怪异模式解析页面，也就是浏览器自己的解析方式，ie的话就会采用ie5.5内核处理，我们的完美布局也就因此纵横交错了。
还有就是一些人还停留在html4.1的时代，如果采用4.1的文件头会导致一些css不被支持。
编码的问题大家应该很容易注意到，我们几乎都是采用utf-8。
2.浏览器模式问题
标准模式(strict mode)和怪异模式(quirks mode)了解：
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。
3.meta标签--内核渲染处理
我们在很多页面都会看见这样的meta设置
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
指定渲染模式，这段标签意思就是：IE=edge告诉IE使用最新的引擎渲染网页（如果用户是ie9就采用ie9），chrome=1则可以激活Chrome Frame
（Google Chrome Frame是Google推出的一款免费的Internet Explorer专用插件。使用此插件，用户可以通过Internet Explorer的用户界面，以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中）。
我们也可以指定特定的ie版本渲染：
<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
5.meta标签--http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
我们上面内核渲染采用的http信息就是对用户代理ua的处理，content定义了处理。
6.meta标签--name="viewport"作用
移动端随着html5盛行，我们在头部还如做出如下定义：
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
浏览页面以viewport的方式预览，还有对宽度，缩放等的设置。
我们对照参数，看看他的功能：
1.width=device-width //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
当然属性的设置还有其他。
针对移动端这种触摸设备，viewport的设置是必不可少的，我们的页面不做这种设置，pc宽度1000px的页面在手机上，正常情况下手机宽度小于1000px，页面是要出现滚动条的，没有设置，手机就会自己对页面进行缩放处理，不出现滚动条，保证我的大页面完全放入手机设备。如果进行viewport的设置，手机会做出实际处理，超过屏幕的部分显示滚动条，viewport后我们是在拖动可视窗口去看页面，不在是拖动结构滚动条去看页面。
7.css的引用
页面内css设置
<style>
div{height:200px;}
</style>
外部css引用
<link rel="Stylesheet" type="text/css" href="1.css" />
link标签为单标签
8.js的引用
页面内js设置
<script type="text/javascript"> </script>
外部js引用
<script type="text/javascript" src="zepto.min.js"></script>
9.条件hack的使用
现在hack的使用相对较少了，我们知道在几年前hack也是使用不断，我们大部分都是使用行内hack，如：
针对ie6 处理 _的使用
div{height:200px;_height:200px;}
针对ie6 7处理 *的使用
div{height:200px;*height:200px;}
我们也可以采用条件hack的处理：
针对ie
<!--[if IE]>
<link rel="Stylesheet" type="text/css" href="1.css" />
<style>
div{height:200px;}
</style>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript"> </script>
<![endif]-->
针对ie6（可以其他）
<!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->
针对ie6以上
<!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
针对非ie8
<!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
针对非ie
<!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
条件hack内部不管是外部css，页面内css，外部js，页面内js都可很据条件进行针对处理
10.h1、h2等的作用
h标签可理解为优化标签，有利于网站的搜索，适当的h标签是不可少的。
二、浏览器和内核了解
| Trident内核 | IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0），还有很多国内浏览器如360等 |
| Gecko内核 | Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon |
| WebKit内核(Safari内核,Chrome内核原型,开源) | Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器 |
| Presto(Opera前内核) | Opera现已改用Google Chrome的Blink内核。 |
| Blink内核 | Chrome（以前采用webkit内核） Opera |
微软在新一代操作系统Windows 10上整合新一代网络浏览器，它的开发代号叫做“Project Spartan（斯巴达项目）”，叫做斯巴达浏览器。在Windows 10正式版上成为默认浏览器，取代历史悠久的Internet Explorer。
针对浏览器我们在css3的处理时很多属性要加上对应前缀处理，同样我们痛恨的ie6 7也在列表中。
针对页面，进行各个浏览器的测试使我们的基本工作，了解这些基本的浏览器是我们基础的知识。
三、html5布局标签
| <article> | 定义文章。 |
| <aside> | 定义页面内容之外的内容。 |
| <dialog> | 定义对话框或窗口。 |
| <figcaption> | 定义 figure 元素的标题。 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <header> | 定义 section 或 page 的页眉。 |
| <nav> | 定义导航链接。 |
| <section> | 定义 section。 |
| <title> | 定义文档的标题。 |
| <bdi> | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| <command> | 定义命令按钮。 |
| <details> | 定义元素的细节。 |
| <summary> | 为 <details> 元素定义可见的标题。 |
| <ruby> | 定义 ruby 注释。 |
| <rt> | 定义 ruby 注释的解释。 |
| <rp> | 定义若浏览器不支持 ruby 元素显示的内容。 |
| <mark> | 定义有记号的文本。 |
| <meter> | 定义预定义范围内的度量。 |
| <progress> | 定义任何类型的任务的进度。 |
| <wbr> | 定义视频。 |
| <video> | 定义视频。 |
| <track> | 定义用在媒体播放器中的文本轨道。 |
| <source> | 定义媒介源。 |
| <audio> | 定义声音内容。 |
| <datalist> | 定义下拉列表。 |
| <embed> | 定义外部交互内容或插件。 |
| <output> | 定义输出的一些类型。 |
| <time> | 定义日期/时间。 |
| <canvas> | 定义图形。 |
针对html5，比较重要的就是音频视频和canvas的处理；
根据dom对其提供的api接口我们可以做出各种实现。
ruby、rt和rp的组合是对我们汉字和注音的支持，我们在一些特殊处理上，这套组合是最好的选择。
我们常用的组合标签还有：
ul li的列表处理
dl dt dd的图片，说明处理
fieldset legend 区块有左侧说明的处理
四、html5新表单
新的表单标签属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required
我们可以简单看一下效果：
<input type="number" value="4" min="3"/> <input type="range" value="20" /> <input type="date" /> <input type="time"/> <input type="color"/> <input type="text" list="listdata" placeholder="search" /> <datalist id="listdata"> <option value="111"> <option value="222"> </datalist>
类型为number的做了最小值处理，只能选择到3
input通过list属性和datalist的id做绑定处理，我们以前会用到锚点a的href="#"属性和其他a的id绑定，label的for属性和其他表单id属性做绑定处理。
placeholder属性是水印效果的实现。
表单的各种实现为我们会省去很多的js处理。
我们表单如果含有上传操作：
enctype="multipart/from-data" 属性是要设置的。
五、html5其他
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
给元素设置contenteditable属性为true，可让元素处在可编辑状态。
同样的，处在可编辑状态的元素具有focus和blur事件，html5的各种处理，在DOM上都会有对应的处理接口。
标签：
原文地址：http://my.oschina.net/u/2352644/blog/499823
