初学HTML5系列一：简单介绍

最近很闲，就想着学点东西，然后就瞄中了html5，以前只看过很简单的一些，这次是系统的学下，顺便也记录下。废话不多说，开始正题。

　　稍微介绍下html5，html5是W3C和WHATWG 合作的结果。

　　html5的规则：

　　　　新特性应该基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如 Flash）；更优秀的错误处理；更多取代脚本的标记；HTML5 应该独立于设备；开发进程应对公众透明

　  html5的新特性：　

　　　　用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、date、time、email、url、search

    浏览器支持：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

　　html5和html4.01存在一些区别，增加了video视频标签，canvas定义图形标签，command标签定义命令按钮等等；html5将不支持html4.01中的某些标签，和某些标签中的一些属性，就不一一列举了，在后续的博客中会提到，自己稍加注意就好。

　　html5同样也有着优缺点，html5本身是由W3C推荐出来的，它的开发是通过谷歌，苹果，中国移动等几百家公司一起酝酿的技术，这个技术最大的好处就是它是一个公开的技术，另外，W3C通过的标准也就意味着每一个浏览器或每一个平台都会去实现。

html同样支持多设备和多平台，这点造就了它的移植性，同时这点也吸引了大多数人对html5的兴趣。

　　　　html5的优点大概总结出6点：

　　　　　　　　　　　　　　　　1、提高可用性和改进用户的友好体验；

　　　　　　　　　　　　　　　　2、有几个新的标签，这将有助于开发人员定义重要的内容；

　　　　　　　　　　　　　　　　3、可以给站点带来更多的多媒体元素(视频和音频)；

　　　　　　　　　　　　　　　　4、可以很好的替代FLASH和Silverlight；

　　　　　　　　　　　　　　　　5、当涉及到网站的抓取和索引的时候，对于SEO很友好；

　　　　　　　　　　　　　　　　6、将被大量应用于移动应用程序和游戏。

　　　　任何技术都有双面性，那么问题来了，它的缺点：

　　　　　　　　　　1、浏览器的编程模型还是90年代流行的单进程单线程（single process single thread），但原生实现（比如用Object C）的APP可以用多线程。移动端编写APP，可以使用多个线程，第一个线程，被称作主线程（main thread），编程的第一原则是don’t do heavy work on main thread。通常只让它处理UI事件等，其他重度的工作让其他背景线程来做。但浏览器只有一个线程，所有的事情都是它干。在台式机上，浏览器编程还没有太多问题，因为够快；但在移动端，这个弊端很明显。

　　　　　　　　　　2、它新但并不代表它安全，html5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。2013年3月，HTML5编程语言的一个漏洞被发现：它允许网站利用数GB垃圾数据对用户展开轰炸，甚至会在短时间内将硬盘塞满。多款主流浏览器均会受此影响。

　　以上大概是html5的一些基本介绍，可能写的不全，了解的博友可以补充哈。

　　另外在补充一点东西：

　　html5中新增了几个全局属性：

　　　　　1、contenteditable：规定是否可编辑元素的内容，可设置的值有true(规定可以编辑元素内容)，false(规定无法编辑元素内容)，classname(继承父元素的 contenteditable 属性)。

　　　　　2、contextmenu：为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现。该属性的值是需要打开的 <menu> 元素的 id。但是需要注意现在还没有任何一款浏览器支持该属性。

　　　　　3、draggable：规定元素是否可拖动。可设置true(可拖动)，false(不可拖动)，auto(使用浏览器的默认属性)，注：链接和图像默认是可拖动的。目前只有 Firefox、Chrome 以及 Safari 支持 draggable 属性。

　　　　　4、dropzone：规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接。可设置copy(拖动数据会导致被拖数据产生副本)，move(拖动数据会导致被拖数据移动到新位置)，link(拖动数据会生成指向原始数据的链接)。

　　　　　5、hidden：规定对元素进行隐藏。语法是hidden="hidden"，可以用js来操作该属性，设置元素的可见与不可见。

　　　　　6、spellcheck：规定是否对元素内容进行拼写检查。可以对文本类型的标签进行拼写检查(类型为 text 的 input 元素中的值（非密码）、textarea 元素中的值、可编辑元素中的值)，可设置 true(应当检查)，false(不应当检查)。

　　　　　7、translate：是否应该翻译元素内容。可设置yes(应该翻译)，no(不应该翻译)。所有主流浏览器都无法正确地支持 translate 属性。　　

　　　　　8、data-*：用于存储页面或应用程序的私有自定义数据。data-* 属性包括两部分：属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符；属性值可以是任意字符串。