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

html5 note的更多相关文章

  1. gradle asciidoc 使用

    备注:    次文档参考github 例子   1.环境准备 node npm (yarn) java KindleGen 备注: 具体的安装可以参考网上相关文档,KindleGen 下载地址:htt ...

  2. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  3. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  4. HTML5 网络拓扑图性能优化

    HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...

  5. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  6. HTML5 的一些小的整理吧

    主要的就是一些HTML 5 API 的使用 也是借鉴别人的博客 ,和MDN(中文部分的还是能看的懂) 上面的一些东西 具体的代码在 有道云笔记里面也有. 先把总得列出来 1.Canvas绘图 学完这个 ...

  7. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  8. Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  9. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

随机推荐

  1. 浏览器检测JS代码(兼容目前各大主流浏览器)

    var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknow ...

  2. Linux学习之常用技巧

    ▌基础 学习 Bash .你可以man bash来看看bash的东西,并不复杂也并不长.你用别的shell也行,但是bash是很强大的并且也是系统默认的.(学习zsh或tsch只会让你在很多情况下受到 ...

  3. js返回值

    看下js变量.作用域.内存文档. 1. <script type="text/javascript"> function c(){ return 23; } var a ...

  4. hdu 2276 Kiki & Little Kiki 2 矩阵快速幂

    题目链接 n个灯围成一圈, 1左边是n. 有两种状态, 1是亮, 0是不亮. 如果一个灯, 它左边的灯是亮的, 那么下一时刻这个灯就要改变状态, 1变为0, 0变为1. 给出初始状态和时间t, 问t时 ...

  5. J2SE知识点摘记(七)

    1.        枚举的用法 enum 枚举名{枚举值表标};例子:"enum weekday{sun,mon,tue,wed,fri,sat}a,b,c;" For循环语句中使 ...

  6. QWebView 显示本地HTML 文件

    QWebView 显示本地HTML文件的时候,如果直接使用 webView->load(QUrl(QString("file:///c:\\a.html")); 可能会导致a ...

  7. MBG 相关资源链接

    MyBatis Generator(MBG)相关资源链接 http://mbg.cndocs.tk/quickstart.html http://www.mybatis.tk/ http://git. ...

  8. 读配置文件 properties

    /** * */package com.sprucetec.tms.fee.utils;import java.io.IOException;import java.util.ArrayList;im ...

  9. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  10. Fibonacci（数论 输出前四位Fibonacci）

    Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...