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. C#：占位符的例子

    在c#中有两种方式可以输出多个字符. static void Main() { string c=Console.ReadLine(); string d=Console.ReadLine(); Co ...

  2. win7 64位系统调试zkemkeeper.dll出错误解决

    最近调用中控科技dll文件总是会出现上问题,网上找了大半天都没解决? 今天终于解决,原来是旧的dll文件是有问题,在中控网站上下载了最新的sdk(64位),解压,找到sdk的全部文件夹. 全选所有的: ...

  3. cocos2dx3.3在Windows环境搭建以及新工程创建

    这个虽然比较简单,但是是学习cocos的第一步,不积跬步无以至千里,所以今天先分享Windows下环境搭建问题.关于mac搭建后续有机会在写(ps:因为我暂时没有mac),anyway,开始吧! 首先 ...

  4. Highcharts使用手册

    chart: { type: 'area', ignoreHiddenSeries: false, //如果true,一旦一个系列被隐藏,轴将会扩展剩余的可见系列 }, 这是设置的两个纵坐标轴: yA ...

  5. hdu 4635 Strongly connected 强连通

    题目链接 给一个有向图, 问你最多可以加多少条边, 使得加完边后的图不是一个强连通图. 只做过加多少条边变成强连通的, 一下子就懵逼了 我们可以反过来想. 最后的图不是强连通, 那么我们一定可以将它分 ...

  6. STL容器的内存分配

    这篇文章参考的是侯捷的<STL源码剖析>,所以主要介绍的是SGI STL实现版本,这个版本也是g++自带的版本,另外有J.Plauger实现版本对应的是cl自带的版本,他们都是基于HP实现 ...

  7. 如何使Label带有链接？？此法感觉有点取巧！！！

    关键代码 /**************************************************************第一行***************************** ...

  8. android LinearLayout android:layout_weight 作用，固定比例

    android 中的 LinearLayout  是线性布局有水平布局horizontal  垂直布局vertical .本文针对 水平布局horizontal 布局的weight属性做一个标记,以免 ...

  9. Oracle EBS-SQL (SYS-1): sysadmin_用户职责查询.sql

    select fu.user_name 用户名, fu.description 用户说明, frv.RESPONSIBILITY_NAME 职责名称, REQUEST_GROUP_NAME 报表组, ...

  10. 蓝桥杯之K好数问题

    问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数的数目.例如K = 4,L = 2的时候,所有K好数为11.13.20.22 ...