html5 note

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

posted @ 2016-01-18 16:28  stephenykk  阅读(165)  评论(0)  编辑  收藏  举报