对于html5
虽然用得多,但还是有一些知识点比较混乱,记得不清,所以想专门整理一下
HTML5浏览器支持
最新版本的Safari、Chrome、Firefox、Opera支持某些HTML5特性,IE9将支持某些HTML5特性
此外,所有浏览器,包括旧的新的,对无法识别的元素会作为内联元素自动处理。
IE9以下版本浏览器兼容HTML5的方法,使用静态资源的html5shiv包
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
或者直接将脚本文件代码展示出来
<!--[if lt IE9]>
<script>
(function(){
if(!*@cc_on!@*/0) return;
var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,event,source,figure,footer,header,hgroup,mark,menu,nav,outputmprogress,section,time,video".split('.'),
i = e.length;
while(i--){
document.createElement(e[i])
}
})
</script>
<![endif]-->
也可以将这段代码单独放在html5.js中,同时需要把这一部分放在head
里面
载入后,初始化新标签的CSS
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
HTML5 新元素
<canvas>
canvas
通过脚本来绘制图形
实例
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,80,100);
</script>
新多媒体元素
<audio>
<video>
<source>
<embed>
<track>
<audio>
audio
定义音频内容
属性:autoplay
如果出现该属性,则音频在就绪后马上播放control
如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)loop
如果出现该属性,则每当音频结束时重新播放muted
如果出现该属性,则音频输出为静音preload
值有auto
,metadata
,none
,规定当网页加载时,音频是否默认被加载以及如何被加载src
规定音频文件的url
实例
<audio control>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持audio元素
</audio>
<video>
video
标签定义视频,比如电影片段或其他视频流
支持三种视频格式:MP4、WebM、Ogg
属性:
除了拥有audio
的全部属性,同时还增加了width
,height
两个属性
实例
<video control>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
<embed>
定义了一个容器,用来嵌入外部应用或者互动程序(插件)
属性:height
,src
,type
规定嵌入内容的MIME类型,width
实例
<embed src="helloworld.swf">
<track>
为诸如<video>和<audio>元素之类的媒介规定外部文本轨道
新表单元素
<datalist>
<keygen>
<output>
<datalist>
定义选项列表
IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 <datalist> 标签。
实例
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<keygen>
规定用于表单的密钥对生成器字段。
当提交表单时,私钥存储在本地,公钥发送到服务器。
IE不支持该元素
属性:autofocus
是<keygen>
字段在页面加载时获得焦点.challenge
如果使用,则将keygen
的值设置为在提交时询问disabled
禁用keygen
字段form
定义该<keygen>
字段所属的一个或多个表单keytype
值包括rsa
,dsa
,ec
,定义密钥的安全算法name
定义<keygen>
元素的唯一名称,name属性用于杂提交表单时搜集字段的值
实例
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<output>
作为计算结果输出显示(比如执行脚本的输出)
IE不支持
属性:
`for’ 描述计算中使用的元素与计算结果之间的关系form
定义输入字段所属的一个或多个表单name
定义对象的唯一名称(表单提交时使用)
实例
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
新的语义和结构元素
<article>
<aside>
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向
<command> 定义命令按钮,比如单选按钮、复选框或按钮,只有IE9支持
<details>
<dialog>
<summary>
<figure>
<figcaption>
<footer>
<header>
<mark>
<meter> 定义度量衡。仅用于已知最大和最小值的度量
<nav>
<progress>
<ruby> 定义ruby注释(中文注音或字符)
<rt> 定义字符(中文注音或字符)的解释或发音
<section>
<time>
<wbr> 规定在文本中的何处适合添加换行符
实例
<bdi>
目前只有 Firefox 和 Chrome 支持 <bdi> 标签。
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
将用户名从周围的文本方向设置中隔离出来
<summary>
为<details>元素定义一个可见的标题。当用户点击标题时会显示出详细信息。
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<progress>
定义运行中的任务进度(显示进度条)
<progress value="22" max="100"></progress>
<wbr>
如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。
<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>