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. 关于中文乱码的解决方法（URL方式）

    假设keyWord ='阳光'; url="play.jsp? keyWord ="+ keyWord 若按照上述的地址直接访问,则中文会变成乱码.必须使用encodeURI()进 ...

  2. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  3. 基于meanshift的手势跟踪与电脑鼠标控制（手势交互系统）

    基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...

  4. 监听enter事件

    document.onkeydown=keyDownSearch; function keyDownSearch(e) { // 兼容FF和IE和Opera var theEvent = e || w ...

  5. Asp.net MVC学习

    一.mvc项目的创建并运行 1.启动vs2010 2.新建项目 3.选择Asp.net mvc应用程序 4.不创建测试用例 5.创建之后的效果 6.运行后的mvc程序

  6. OpenNMS Log Correlator

  7. ICON图标文件解析

    icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为*.icon.*.ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的. ICON文件格式比较简单,包含文件头段. ...

  8. openstack 开发step-by-step

    Set up your Open Stack There are several ways to deploy openstack, Devstack is easily for developer ...

  9. 利用UIScrollView和UIPageControl实现多页图片欢迎页面

    在.h文件当中实现UIScrollViewDelegate协议,让控制器充当代理: #import <UIKit/UIKit.h> @interface RPRootViewControl ...

  10. 怎么限制Google自己主动调整字体大小

    Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明白指定字体大小,则在chrome浏览器里字体显示是12px. 近期在写代码玩的时候,我也碰到了 在FF和 ...