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. HttpServletRequest 各种方法总结（转自百度经验）

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. req ...

  2. Eclipse 打包过滤 Log.e

    我们在开发时,经常会输出各种日志来debug代码.但是等到应用发布的apk运行时不希望它输出日志. 关闭输出日志Log.v(),Log.i(),Log.w(),Log.v(),Log.e()等 原理: ...

  3. Vnstat: 简单实用的网络流量统计工具

    官方主页: http://humdi.net/vnstat # Ubuntu 安装: (其本上其它发行版的包管理程序中也都包含了这款软件,请自行安装) sudo apt-get install vns ...

  4. Linux----函数中变量的作用域、local关键字。

    问题引出: 问题说明: shell的函数中如果变量的前面没有加local关键字.在全局作用域内存在这个变量名的情况下.函数中会直接使用这个变量 而不是自己创建一个.要想做到在函数创建一个变量也是可以的 ...

  5. CC++初学者编程教程(1) Visual Stduio2010开发环境搭建

    Visual Studio是微软公司推出的开发环境.是目前最流行的Windows平台应用程序开发环境. Visual Studio 2010版本于2010年4月12日上市,其集成开发环境(IDE)的界 ...

  6. spring NotWritablePropertyException异常

    Caused by: org.springframework.beans.NotWritablePropertyException: Invalid property 'userDao' of bea ...

  7. 不要再坑人啦！NSOperation才是苹果推荐使用的多线程技术！

    首先声明一下.小汤我在实际开发中呢,实际上也是喜欢用GCD多一点,由于用起来感觉更方便. 可是,事实是什么呢? 苹果推荐使用的实际上是NSOperation.所以希望对此没有研究的各位不要再在博客中误 ...

  8. 如何在MFC对话框之间自定义消息传递

    在MFC项目开发中,涉及到不同模块间数据信息的传递,如用户在登录界面成功登录后向系统管理模块发送用户名和密码等信息. 首先,需明确以下两点: 谁要发送这个消息--消息发送方 谁要接受这个消息--消息接 ...

  9. Python下载Bing主页图片

    直接上代码: # -*- coding: cp936 -*- import urllib import os print 'Download data......' url = 'http://cn. ...

  10. JavaScript之面向对象学习八(继承)

    简介:继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 但是JS的函数并没有签名,所以在ECMASc ...