写在前面 — 需要提前了解的
这是写给自己的归纳
HTML5 介绍
-
新的特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对 本地离线存储 的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
HTML5 浏览器兼容性兼容性
-
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
// 国外 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> // 国内 <!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
-
你可以让一 些较早的浏览器 (不支持 HTML5) 支持 HTML5(你可以 “ 教会 ” 浏览器处理 “ 未知 ” 的 HTML 元素)。
// 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block header, section, footer, aside, nav, main, article, figure {display: block;}
HTML5 新元素
-
<canvas> 新元素
-
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
- 浏览器支持 IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。
-
-
新多媒体元素
-
HTML DOM Audio 对象
做了一个简单的音乐播放器 -
<audio> 播放声音文件或者音频流。
浏览器支持 IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。</audio>
-
<video> 定义视频,比如电影片段或其他视频流。
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。<video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。</video>
-
<source> 标签为媒体元素(比如 <video> 和 <audio>)定义媒体资源。
- IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <source> 标签
- 标签允许您规定两个视频 / 音频文件 共浏览器根据它对媒体类型或者编解码器的支持 进行选择。
-
<embed> 标签定义了一个容器,用来嵌入外部应用或者互动程序(插件)。
所有主流浏览器都支持 <embed> 标签。<embed src="helloworld.swf">
-
<track> 标签为媒体元素(比如 <audio> and <video>)规定外部文本轨道。
IE 10、Opera 和 Chrome 浏览器支持 <track> 标签。带有两个字幕轨道的视频:<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
-
HTML DOM Audio 对象
-
新表单元素
- <keygen>、<output>但是由于不支持 IE, 兼容性不好,就不说了。
- <datalist> 标签规定了 <input> 元素可能的选项列表(搜索自动匹配)。
<datalist> 标签被用来在为 <input> 元素提供 "自动完成" 的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
-
HTML5 新的语义和结构元素
- <article> 定义页面独立的内容区域。
- <aside> 定义页面的侧边栏内容。
- <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
- <command> 定义命令按钮,比如单选按钮、复选框或按钮
- <details> 用于描述文档或文档某个部分的细节
- <dialog> 定义对话框,比如提示框
- <summary> 标签包含 details 元素的标题
- <figure> 规定独立的流内容(图像、图表、照片、代码等等)。
- <figcaption> 定义 <figure> 元素的标题
- <footer> 定义 section 或 document 的页脚。
- <header> 定义了文档的头部区域
- <mark> 定义带有记号的文本。
- <meter> 定义度量衡。仅用于已知最大和最小值的度量。
- <nav> 定义导航链接的部分。
- <progress> 定义任何类型的任务的进度。
- <ruby> 定义 ruby 注释(中文注音或字符)。
- <rt> 定义字符(中文注音或字符)的解释或发音。
- <rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
- <section> 定义文档中的节(section、区段)。
- <time> 定义日期或时间。
- <wbr> 规定在文本中的何处适合添加换行符。【所有主流浏览器都支持 <wbr> 标签,除了 Internet Explorer。】
HTML5 Canvas
- w3school Canvas 教程
HTML5 SVG
- Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
- w3school SVG 教程
HTML5 Web Worker
w3school Web Worker 教程
HTML 5 Web 存储
简介 :之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递, 这使得 cookie 速度很慢而且效率也不高。
-
localStorage – 没有时间限制的数据存储. 第二天、第二周或下一年之后,数据依然可用。
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
-
sessionStorage – 针对一个 session 的数据存储. 当用户关闭浏览器窗口后,数据会被删除。
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
HTML 5 应用程序缓存 Application Cache
- Application Cache
HTML5 引入了应用程序缓存技术 ,意味着 web 应用可进行缓存,并 在没有网络的情况下使用 ,通过创建 cache manifest 文件,可以 轻松的创建离线应用。
Application Cache 带来的三个优势是:
- 离线浏览
- 提升页面载入速度
- 降低服务器压力
而且主要浏览器 (除了 Internet Explorer) 皆以支持 Application Cache,就算不支持也不会对程序造成什么影响。
HTML 5 服务器发送事件
- 服务器发送事件