1.语义化标签：

header\section\aside\footer

2.音视频播放：

video\audio

其中video支持ogg\mpeg4\webm格式的视频；

3.canvas

一.画矩形：

 function draw(){

   var canvas = document.getElementById('mycanvas');

   if (canvas.getContext){

     var ctx = canvas.getContext('2d');

     ctx.fillRect(25,25,100,100);

     ctx.clearRect(45,45,60,60);

     ctx.strokeRect(50,50,50,50);

   }

 }

二.画线条：

function drawShape(){

    var canvas = document.getElementById('mycanvas');

    if (canvas.getContext){

        var ctx = canvas.getContext('2d');

        ctx.beginPath();

        ctx.moveTo(25,25);

        ctx.lineTo(105,25);

        ctx.lineTo(25,105);

        ctx.fill();

        ctx.beginPath();

        ctx.moveTo(125,125);

        ctx.lineTo(125,45);

        ctx.lineTo(45,125);

        ctx.closePath();

        ctx.stroke();

  }

}

三.画曲线：

 function drawShape(){

     var canvas = document.getElementById('mycanvas');

   if (canvas.getContext){

     // use getContext to use the canvas for drawing

     var ctx = canvas.getContext('2d');

     // Draw shapes

     ctx.beginPath();

     ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle

     ctx.moveTo(110,75);

     ctx.arc(75,75,35,0,Math.PI,false);   // Mouth

     ctx.moveTo(65,65);

     ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye

     ctx.moveTo(95,65);

     ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye

     ctx.stroke();

   }

 }

其中arc(x, y, radius, startAngle, endAngle, anticlockwise)

x,y：圆心坐标

radius  ： 半径

startAngle和 endAngle分别是起末弧度（以 x 轴为基准）

anticlockwise为 true表示逆时针，反之顺时针

4.一些新的input元素

html5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

html5新的Input类型有：email  ,   url   ,   number  ,   range  ,  Date pickers(date,month,week,time,datetime,datetime-local)  ,  search  ,  color

input新增的一些属性：

autoconmplete

autoconmplete可以赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候，浏览器能把用户写过的值自动填写在相应的input框里。

autofocus

autofocus 可以赋值为 autofocus，也就是在页面加载完成的时候自动聚焦到这个input标签，自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果，至今为止的实现方法是用js。在页面加载完时执行聚焦操作，现在也被一个属性搞定了。

可以想象，一个页面至多只有一个input标签会设置 autofocus，否则必然不会达到预期效果。因为不可能同时聚焦在两个input上。

required

input的有一个强力新增属性，免去验证的麻烦。可以赋值为 required。

比如用户注册页面的用户名和密码都是必填的，只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。

注意：这里required属性是需要用户来填写的，所以TYPE是button、submit、reset等等不需要用户填写选择的类型是不可以使用这个属性的。

placeholder

这个新增属性也是非常使用，用在type= text email等等类型的时候，提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。

list属性

这个属性显示类似于百度搜索框那种联想框效果，也是非常实用的一个属性。

注意从这个属性使用的特点：需要有对应的datalist标签；datalist子标签option支持 value和lable两个属性；list的属性值要和datalist的id一致。

min\max属性

可以来限制数值范围，minheight、maxheight属性来限制字符串长度。这次maxlength终于有好朋友minlength了。

5.web storage

存储相关的主要是localStorage和sessionStorage.比较下web storage和cookie:

cookie的存储限制在了4k之内，相比来说，session storage有了更大的存储空间，但至于具体多大，这要参照具体浏览器。

cookie有一个机制，就是在每次客户端请求服务器的时候都会将cookie发送给服务器，这无疑会做很多不必要的操作，因为并不是每次请求服务器都需要cookie的所有信息，而session storage很好的解决了这个问题，它不是采取自动发送的方式，这样就减少了不必要的工作。

通过sessionStorage所存储数据的生命周期，和Session类似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。

session storage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的。

setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数)，而是’16’(字符串)。

再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。

当存储中的数据发生改变时，会触发相应的事件（window.onstorage），但目前各浏览器对此事件的支持并不完善，暂时可以忽略。

关于microdata

   对于那些喜欢语义网的人来说，HTML5 是非常吸引人的。Microdata 使得以前旧的表现元素有了新的语义意义。基于页面的内容，我们可以使用属性来定义一组内嵌的名字—— 值对来表达页面内容元素的语义，它给我们一种新的方式来添加额外的语义信息。

  Microdata 以自定义的词汇表（vocabulary）为中心，可以想象 HTML5 中所有的元素集合为一个词汇表，这个词汇表包含描述段落（section） 或文章（article）的元素，但是不包含描述事件（event） 或组织（organization）的元素。如果想在 Web 页面中表示一个事件或组织，则需要定义自己的词汇表，Microdata 允许你这么做，任何人都可以定义自己的词汇表，并且将其包含在自己的 Web 页面中。
  Microdata 由名字 / 值（name/value）对组成，每一个词汇表定义一组命名的属性。例如，对于人这个词汇表，可以定义名字、头像、地址等属性。为了在页面中包含特定的 Microdata 属性值（value），需要在特定的地方提供 Microdata 属性名（name）。根据你声明属性名的位置，Microdata 有提取属性值的规则。
  Microdata 中范围（scoping）的概念很重要，对于这个概念，可以想象 DOM 中元素的父子关系。元素 <HTML> 通常包含两个子元素，<HEAD> 和 <BODY>，元素 <BODY> 可以有很多子元素，这些子元素又可以有自己的子元素。Microdata 重用 DOM 的等级结构提供一种方式表达：这个元素（element）中所有的属性（properties）都来自这个词汇表（vocabulary）。它允许在一个页面中使用多个词汇表（vocabulary），而且词汇表之间可以内嵌，这些全部通过对 DOM 自有结构的使用完成。
  Microdata 是用来对 Web 页面上已经存在的数据提供附加的语义，它并不是被设计用来作为独立的数据格式，它是对 HTML 的一种补充。如果能正确地使用 HTML，Microdata 将很好的工作，但是 HTML 的词汇表表达能力并不是很强。
关于html5 里面的 role 属性
使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是role="button"；会让这个元素可点击.
下面列举了一个例子：
<ul role="menubar">

 <!-- Rule 2A: "File" label via aria-labelledby -->

  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>

    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->

      <li role="menuitem">New</li>

      <li role="menuitem">Open…</li>

      …

    </ul>

  </li>

  …

</ul>

具体可以参考http://www.w3.org/TR/wai-aria/roles

html5相关的更多相关文章

  1. 推荐8款HTML5相关的特殊效果

    HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaS ...

  2. html5相关知识点的总结（有一些错误或者不足的地方）

    1.页面结构上的一些宽松改变 <!DOCTYPE html>默认为标准模式 <meta charset="UTF-8"> 2.html5中新增的一些语义化标 ...

  3. 学习笔记之html5相关内容

    写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的 ...

  4. HTML5 相关扩展

    一.与类相关的扩展 class属性的应用极其广泛,与class的相关的操作也越来越简化,HTML5增加了 getElementsByClassName来查找元素,通过也增加了classList属性,方 ...

  5. android Webview Html5 相关文章

    Android WebView的使用集锦(支持Html5) http://blog.csdn.net/l_215851356/article/details/69239643 WebView详解与简单 ...

  6. HTML5相关文章和资源

    Polyfills HTML5 Cross Browser Polyfills canvas HTML5 JS实现毛玻璃效果(高斯模糊) 高斯模糊的算法Canvas 内部元素添加事件处理 应用场景 P ...

  7. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  8. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  9. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

随机推荐

  1. 黄聪：《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  2. C#如何使用HttpWebRequest、HttpWebResponse模拟浏览器抓取网页内容

    public string GetHtml(string url, Encoding ed) { string Html = string.Empty;//初始化新的webRequst HttpWeb ...

  3. POJ 1611 The Suspects（并查集，简单）

    为什么ACM的题意都这么难懂,就不能说的直白点吗?还能不能好好的一起刷题了? 题意:你需要建一个n的并查集,有m个集合,最后要输出包含0的那个集合的元素的个数. 这是简单并查集应用,所以直接看代码吧! ...

  4. ZOJ 4257 MostPowerful（状压DP，简单）

    题目大意:不超过10种气体,两两之间相互碰撞可以产生一定的能量,如a碰b,那么b气体就消失,自身不能碰自身,问最后所能得到的最大能量. 原代码链接:http://blog.csdn.net/accry ...

  5. CF 486D vailid set 树形DP

    As you know, an undirected connected graph with n nodes and n - 1 edges is called a tree. You are gi ...

  6. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  7. 优化studio的速度

    随着Android Studio开发工具的逐渐成熟,越来越多的程序员选择这种IDE工具来进行开发,但是android studio在使用过程中有时候会出现卡顿问题.在赶项目的时候,遇到这类问题最是苦恼 ...

  8. SharedPreferences实现自动登录记住用户名密码

    最近Android项目需要一个自动登录功能,完成之后,特总结一下,此功能依靠SharedPreferences进行实现.   SharedPreferences简介 SharedPreferences ...

  9. memcpy

    函数原型 void *memcpy(void*dest, const void *src, size_t n); 功能 由src指向地址为起始地址的连续n个字节的数据复制到以destin指向地址为起始 ...

  10. laravel下使用阿里云oss上传图片

    对小公司而言,使用阿里云oss比直接买硬盘要划算的多,不管从存储性价比上还是从网速负载上.最近因为公司的项目有比较大的图片存储访问需求,所以决定使用阿里云的oss. 在研究了一下以后,摆着不自己造轮子 ...