html5 · 程序员开发笔记

[TOC] #### 什么是HTML5 • HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 • HTML5是针对目前web发展对原有HTML的补充与升级，并不是颠覆 • 将元素语义与元素内容呈现结果的影响分开，如去除font标签添加article • 使用标签完全从标签的语义出发，而不是表现形态 #### 新特性 • HTML5 中的一些有趣的新特性： • 用于绘画的 canvas 元素 • 用于媒介回放的 video 和 audio 元素 • 对本地离线存储的更好的支持 • 新的特殊内容元素，比如 article、footer、header、nav、section • 新的表单控件，比如 calendar、date、time、email、url、search #### 浏览器支持 • 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。 Internet Explorer 9 #### HTML5 优势 1. 提高可用性和改进用户的友好体验; 2. 有几个新的标签，这将有助开发人员定义重要的内容； 3. 可以给站点带来更多的多媒体元素(视频和音频)； 4. 可以很好的替代FLASH和Silverlight； 5. 当涉及到网站的抓取和索引的时候，对于SEO很友好； 6. 将被大量应用于移动应用程序和游戏。 #### HTML5 主要包括部分 1. WebStorage：比Cookies更大、更有弹性的的储存。 2. Web SQL Database：本地端的SQL数据库。 3. Indexed DB：Key-value的本地数据库。 4. Application Cache：将部分常用的网页内容cache起来。 5. WebSocket：实时的socket联机。 6. Web Workers：以往JavaScript都是single thread，透过Worker可以有多个运算。 7. Notifications：原生的提示讯息，类似像OS X的Growl提示。 8. Dragn Drop：HTML元素的拖拉。 9. File API：读取用户本机计算机的内容。 10.Geolocation：地理定位。 11.Device orientation：手持装置的方向。 12.Speech input：语音输入。 13.New tags：新的标签，像是header、section等。 14.Application tags：也是新的标签，像是meter、progress等。 15.Microdata：加入语义的数据让搜索引擎等网站可以正确显示。 16.Form type：form可以加入的type便多了，包含email和tel等属性 17.Audio video：影片和音乐的原生播放支持。 18.Canvas的绘图功能支持。 19.CSS 3技术 #### HTML5 中废除的标签原有的html中有一些标签造成效果与表现的混淆，所以在html5中废除了，不建议使用废除标签： • big center font s u strike frame frameset noframes marquee #### Html旧标签的改变 DOCTYPE 新写法：<!DOCTYPE html> meta设置编码新写法：<meta charset=“utf-8”> link标签新写法：<link rel='stylesheet' src='hd.css'/> script标签可以不用写type：<script>…</script> #### 全局属性 contenteditable属性 • 修改页面中的标签内容示例： <p contenteditable="true" style="width:300px;height:300px;border:solid 1px #f00f00;"></p> hidden属性 • 隐藏元素示例： <p hidden style="width:300px;height:300px;border:solid 1px #f00f00;"></p>