html5相关

时间 2019-11-29

标签 html5 html 相关栏目 HTML5 繁體版

原文原文链接

1.语义化标签：html

header\section\aside\footerhtml5

2.音视频播放：web

video\audiocanvas

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

3.canvas服务器

一.画矩形：cookie

1 function draw(){
2   var canvas = document.getElementById('mycanvas');
3   if (canvas.getContext){
4     var ctx = canvas.getContext('2d');
5     ctx.fillRect(25,25,100,100);
6     ctx.clearRect(45,45,60,60);
7     ctx.strokeRect(50,50,50,50);
8   }
9 }

二.画线条：session

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();

  } 
}

三.画曲线：ide

 1 function drawShape(){
 2     var canvas = document.getElementById('mycanvas');
 3 
 4   if (canvas.getContext){
 5 
 6     // use getContext to use the canvas for drawing
 7     var ctx = canvas.getContext('2d');
 8     // Draw shapes
 9     ctx.beginPath();
10     ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
11     ctx.moveTo(110,75);
12     ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
13     ctx.moveTo(65,65);
14     ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
15     ctx.moveTo(95,65);
16     ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
17     ctx.stroke();
18 
19   }
20 }

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

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