您的位置：首页 > Web前端 > HTML5

html5 note

2016-01-18 16:28 696 查看

HTML5的特点

绘图支持 canvas

多媒体支持 video audio

离线应用和离线存储

新的语义化元素 article footer header nav section

表单增强 calendar date time email url search

浏览器对HTML5的支持

对于无法识别的标签新旧浏览器都作为内联标签处理

HTML5定义了8个新的语义元素：

header

nav

footer

aside

section

article

main

figure

, 并且这些元素都是display：block的块元素

现代浏览器可以直接添加新元素到html中如(

<div><hello>nice to see you again</hello></div>

)，然后为它定义样式

hello{display:block; color:green; font-size:20px;}

IE需要用js创建新元素

hello = document.createElement('hello');

html5shiv.js让IE6/7/8支持html5元素

<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5的新元素

绘图

canvas

<canvas id="mycanvas" width="300" height="200">你的浏览器不支持canvas</canvas>

var canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFEEAA';
ctx.fillRect(0, 0, 80, 100);

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形

<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。

新多媒体

audio

video

source

embed

track

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航