10分钟带你了解HTML5

你需要知道的

何为HTML5

HTML5属于上一代HTML的新迭代语言，设计HTML5主要的目的也是为了让多媒体在移动端上得到更好的支持！
如：video、audio、及canvas等

H5优缺点

H5的优点明显，就是跨平台，如开发了一款H5的游戏，我们可以很轻易的移植到其他开放平台，甚至也可以通过封装的技术打包成app，所以跨平台性很强大，这也是H5得到开发者认可的主要原因。
但是缺点也有，就是pc端浏览器支持不太友好，如果项目需要运行在ie8及以下版本或者其他低版本浏览器就要做兼容。

H5新增特性

1.加入了表单元素
2.取消了过时的显示效果标记 font、center等
3.加入了语义标签
4.增加本地存储
5.加入了一些API
6.canvas标签

下面会对这些新特性做大概的介绍↓↓↓

一、新表单元素及属性

智能表单控件

之前在写text标签的时候，如果要检验用户输入合法性，就需要写相应的正则表达式，但是在H5中为我们新增了智能表单控件，省去很多步骤，使用方式如下：

<input type="email">
 //email: 输入合法的邮箱地址
 //url：  输入合法的url
 //number： 只能输入数字
 //range： 滑块
 //color： 拾色器
 //date： 显示日期
 //month： 显示月份
 //week ： 显示第几周
 //time：  显示时间

表单属性

1. form属性：

autocomplete=on    // 显示表单元素的历史记录，默认开启on，关闭为off
novalidate=off      // 是否关闭检验，默认不关闭false，关闭为true

2. input属性：

    // autofocus :  自动获取焦点
    // form :  表单外部的标签也可以随着表单提交，只需要在标签是添加属性form="formid"
    // list :  在text标签上加入list属性并指定一个id，即可将下拉框与输入框相结合，如下：
	   <input type="text" list="abc"/>
	 	 <datalist id="abc">
	 	 	<option value="123">12312</option>
	 	 	<option value="123">12312</option>
	 	 	<option value="123">12312</option>
	 	 	<option value="123">12312</option>
	 	</datalist>
    // multiple：	 实现多选效果
    // placeholder ： 占位符  （提示信息）
    // required：    将该项作为必填项

上面写到的一些标签，在表单提交的时候，如果不符合会弹出提示信息，我们如何修改这个提示信息呢?
1. 表单验证是触发oninvalid事件
2. 通过setCustomValidity方式设置修改内容

二、新语义标签

网页布局结构标签（兼容处理）

首先我们看下H5中常用的语义标签有哪些，如下：

     <header></header>
     <footer></footer>
     <article></article>
     <aside></aside>
     <nav></nav>
     <section></section>
      // ……

那我们在使用这些语义标签的时候需要注意些什么呢？
新的语义标签和我们之前使用的普通标签，在使用上没有任何区别，

<nav></nav>  =  <div class="nav"></div>

可以看到语义标签就像是一个普通标签加上了一个class，这时这个标签就有一定的语义性，增加代码可读性，优化了网站seo。但是我们之前说过H5有一定的兼容问题，语义标签在ie8中就会出问题——不会被识别。这时浏览器会把语义标签当做是【自定义】标签，并且当做是一个行内元素。
那我们如何处理兼容问题呢？

1. 既然上面说了，浏览器把语义标签当做是自定义标签，那我们就去创建这个【自定义】标签，document.createElement(‘nav’); 之后别忘了一点，语义标签还会被当成是行内元素，那再根据需要设置下display:block;就行啦。如果标签使用多了这种方式有点麻烦，别急往下看↓↓↓。
2. 通过js插件，html5shiv.js，在页面内引入，就可以支持语义标签了。那在想下，如果是本身就可以支持的浏览器就会多请求一个脚本，造成资源浪费，所以再往下看↓↓↓↓。
3. 完美解决方案，将脚本引用放到下面的代码块中

  <!--[if lte IE 8]>
        // 这里的含义是，当当前浏览器版本小于等于8时，就会走到这个if语句中，所以在这里写脚本的请求就将问题解决了。
  <![endif]-->

点我查看权威语义标签说明文档>>>

三、H5中的API

H5中为了方便开发，新增了很多api，包括获取元素属性、文件读取、网络状态、地理位置、本地存储等。

1. 获取元素、类名、自定义属性

• 获取元素
  传统的方式我们习惯引入jq，然后去写$(’’)获取一个元素，但是H5提供了比jq还方便的获取方式。如下：

 document.querySelector("选择器");
 // 选择器： 可以是css中的任意一种选择器，通过该选择器只能选中第一个元素。
 document.querySelectorAll("选择器");
 // 与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素。

• 获取类样式
  方式，如下：

  Dom.classList.add("类名"): // 给当前dom元素添加类样式

  Dom.classList.remove("类名"); // 给当前dom元素移除类样式

  Dom.classList.contains("类名"); // 检测是否包含类样式

  Dom.classList.toggle("active"); // 切换类样式（有就删除，没有就添加）

• 自定义属性
  自定义属性其实是对原有自定义属性的升级，我们原来写自定义属性的方式是这样的：

 <input type="text" _name="123" id="text1">
var a = $('#text1').attr('_name');

H5中的自定义属性是这样的：

<input type="text" data-name="123" id="text1">
var a = document.querySelector('#text1').dataset.name;
var b = document.querySelector('#text1').dataset['name'];

是不是方便很多，直观很多。但是要注意的是：
如果数姓名为data-test-name，那么在获取的时候就要使用驼峰命名法获取

document.querySelector('#text1').dataset.testName;
document.querySelector('#text1').dataset['testName'];

当然自定义属性也可以进行添加和赋值
Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值；

2. 文件读取

直接上栗子：

<input type="file" id="file">
var input = document.querySelector("#file");
input.onchange = function(){
	//获取文件
	var file=this.files[0];
	//开始读取 创建读取器
	var reader=new FileReader();
	//开始读取
	reader.readAsText(file);
	//获取读取结果
        reader.onload = function(){
		//文件读取完成后才可以获取文件内容
		console.log(reader.result);
    }
}

上面的代码很好理解，唯一需要注意的一点就是，获取文件内容一定要等文件读取结束后，就是触发onload事件的时候。

• FileReader对象属性，接口有3个用来读取文件方法返回结果在result中：
  readAsBinaryString —将文件读取为二进制编码
  readAsText —将文件读取为文本
  readAsDataURL —将文件读取为DataURL
• FileReader对象提供的事件：
  onabort 中断时触发
  onerror 出错时触发
  onload 文件读取成功完成时触发
  onloadend 读取完成触发，无论成功或失败
  onloadstart 读取开始时触发
  onprogress 读取中

3. 获取网络状态

• 获取当前网络状态
  window.navigator.onLine 返回一个布尔值，true为联网，false为断网
• 网络状态事件
  1. window.ononline
  2. window.onoffline

4.获取地理位置

• 获取一次当前位置
  window.navigator.geolocation.getCurrentPosition(success,error);
  1.coords.latitude 维度
  2.coords.longitude 经度
  注：这个方法时不靠谱的，一些浏览器是获取不到的。

• 实时获取当前位置

window.navigator.geolocation.watchPosition(success,error);
function success(msg,position) {

}

5. 本地存储

前端技术飞速发展，业务也越来越复杂，经常会在本地存储大量的数据，传统方式的cookie，因为大小只有4k，并且解析复杂，已经不能满足开发需求。HTML5规范提出的新的解决方案，使用sessionStorage和localStorage存储数据。

• localStorage：
  1.永久生效，可以手动清除
  2.多窗口共享
  3.容量为20M
  api使用方式如下：

  window.localStorage.setItem(key,value); // 设置存储内容
  window.localStorage.getItem(key);  		 // 获取内容
  window.localStorage.removeItem(key);	 // 删除内容
  window.localStorage.clear();			// 清空内容

• sessionStorage：
  1.生命周期为关闭当前浏览器
  2.只能在当前窗口下访问
  3.数据大小为5M
  api使用方式如下：

  window.sessionStorage.setItem(key,value); // 用法和localStorage一致
  window.sessionStorage.getItem(key);
  window.sessionStorage.removeItem(key);
  window.sessionStorage.clear();

四、多媒体标签

这里只做简单的介绍，因为详细的说内容很多，后续会更新专门介绍多媒体标签的文章。
视频
属性：controls 显示控制栏 属性：autoplay 自动播放 属性：loop 设置循环播放
音频
属性：同video标签

video，支持3种格式，ogg mp4 WebM，将三种格式文件放入source中，浏览器从上至下读取，支持哪个就播放哪个。

    <video>
		<source src="test/多媒体/111.mp4">
		<source src="111.ogg">
		<source src="111.WebM">
	</video>

点我查看权威video标签说明文档>>>

五、canvas标签

在这里只写一些基础的api使用，后续会专门更新canvas详细使用的文章

1. 开始绘图

canvas其实就是H5提供的一个标签，使用方式也很简单。
首先设置画布

<canvas width="600" height="500"></canvas>

这里需要注意的一点就是，设置画布大小一定要通过设置标签属性的方式，不能通过css方式改变，因为属性改变的才是画布实际大小，而css改变的只是标签大小，实际画布大小不会改变。

var canvas = document.querySelector("canvas");//获取canvas对象
var ctx = canvas.getContext("2d");//获取绘图上下文

2. 绘图方法

设置好了画布就开始绘图了，绘图分为3个步骤，落笔、连线、描边

• 落笔（找到起始点坐标）

ctx.moveTo(x,y);

• 连线

ctx.lineTo(x,y);

• 描边

ctx.stroke();//只有描边后才能看到图形

当画完一个图形后，需要开启新的图层，不然每次调用ctx.stroke()的时候都会将之前所有的图形再画一次，就会造成图形重叠、颜色变深。开启新图层方式如下：

ctx.benginPath();

• 其他属性设置
  颜色： ctx.strokeStyle=“red”
  线宽： ctx.linewidth=“30” 备注：不需要带单位
  线连接方式： ctx.lineJoin: round | bevel | miter (默认)
  线帽（线两端的结束方式）： ctx.lineCap: butt(默认值) | round | square
  在画一个闭合图形是，最后一条线可以通过闭合路径的方式画出

ctx.closePath(); // 自动画出图形最后闭合的线

3. 渐变方案

• 线性渐变

 var grd=ctx.createLinearGradient(x0,y0,x1,y1);
  	 // x0-->渐变开始的x坐标
         // y0-->渐变开始的y坐标
         // x1-->渐变结束的x坐标
         // y1-->渐变结束的y坐标
          
      grd.addColorStop(0,"black");      // 设置渐变的开始颜色
      grd.addColorStop(0.5,"yellow");   // 设置渐变的中间颜色
      grd.addColorStop(1,"red");        /// 设置渐变的结束颜色

      ctx.strokeStyle=  grd; // 将渐变方案赋值给颜色属性
      ctx.stroke();

中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数。

• 径向渐变

ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
            // (x0,y0)：渐变的开始圆的 x,y 坐标
            // r0：开始圆的半径
            // (x1,y1)：渐变的结束圆的 x,y 坐标
            // r1：结束圆的半径

4. 填充效果

  ctx.fill();	      // 设置填充效果
  ctx.fillstyle="值"; // 设置填充颜色

5. 非零环绕原则

当我们绘制一个“回”形图案时，进行颜色填充，就用到非零环绕原则。

• 非零环绕原则前提：
  1.绘制的图形是闭合图形
  2.绘制的时候，绘制不同图形的顺序有顺时针和逆时针
• 非零环绕原则：
  1.任意找一点，越简单越好
  2.以这个点位圆心，绘制一条射线（相交点越少越好）
  3.以点为轴将射线顺时针旋转，相交的边绘制的方向如果和旋转方向相同则+1，相反则-1，最后将一个区域内各边的值相加，等于0则不填充。非0则填充。
  #####6. 绘制虚线
  原理： 设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系

     var arr = [10,10];
     ctx.moveTo(100, 100);
     ctx.lineTo(300, 100);
     ctx.setLineDash(arr);
     ctx.stroke();

• 数组表示：
  [10,5] 实线部分10px 空白部分5px
  [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px…

注意：如果要将虚线改为实线，只要将数组改为空数组即可。

7. 绘制动画效果

• 原理：
  1.绘制一个描边矩形： ctx.strokeRect(x,y,width,height)
  2.绘制一个填充矩形： ctx.fillRect(x,y,width,height)
  3.清除： ctx.clearRect(x,y,width,height)

• 实现动画效果步骤：
  1.先清屏
  2.绘制图形
  3.处理变量

8. 绘制文本

• 绘制填充文本

content.fillText(文本的内容,x,y);

• 绘制镂空文本

content.strokeText(文本的内容,x,y);

• 设置文字大小

 content.font="20px 微软雅黑";

注： 该属性设置文字大小，必须按照cssfont属性的方式设置

• 文字水平对齐方式

content.textalign="left | right | center"

• 文字垂直对齐方式

content.textBaseline="top | middle | bottom | alphabetic(默认)"

• 文字阴影效果

ctx.shadowColor="red";  // 设置文字阴影的颜色
ctx.ShadowOffsetX=值;   // 设置文字阴影的水平偏移量
ctx.shadowOffsetY=值;   // 设置文字阴影的垂直偏移量
ctx.shadowBlur=值;      // 设置文字阴影的模糊度，值越大越模糊

9. 绘制图片

• 第一种

var img = document.createElement("img");
img.src="1.png";//或者获取页面内的img标签
// 注：画的方法一定要放到img.onload方法内
//将图片绘制到画布的指定位置
content.drawImage(图片对象,x,y);

• 第二种

//将图片绘制到指定区域大小的位置  x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
content.drawImage(img,x,y,width,height);

• 第三种

//将图片的指定区域绘制到指定矩形区域内
content.drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
// sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是指截取图片区域的大小
// dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小

• 解决图片绘制到某一个区域的按原比例缩放绘制:
  绘制宽：绘制高 = 原始宽：原始高

10. 绘制圆弧

content.arc(x,y,radius,startradian,endradian[,direct]);

• 参数含义：
  x,y 圆心的坐标
  radius 半径
  startradian 开始弧度，弧度制，一般从0开始
  endradian 结束弧度，一般到2*Math.PI
  direct 方向（默认顺时针 false） true 代表逆时针

• 0度角在哪？
  1.以圆心为中心向右为0角 顺时针为正，逆时针为负。
  2.0度在3点钟放向。

• 备注：
  180角度 = Math.PI
  角度 和 弧度的关系： 角度:弧度= 180:pi

• 特殊值
  0度 = 0弧度
  30度 = π/6 (180度的六分之一)
  45度 = π/4
  60度 = π/3
  90度 = π/2
  180度 = π
  360度 = 2π

• 绘制圆上任意点公式：
  x=ox+rcos( 弧度 );
  y=oy+rsin( 弧度 );
  // ox: 圆心的横坐标
  // oy: 圆心的纵坐标
  // r： 圆的半径
  栗子：

var x = 300 + 100 * Math.cos(Math.PI/3);
var y = 200 + 100 * Math.sin(Math.PI/3);
//获取到圆上一点x,y
ctx.arc(x,y,10,0,Math.PI*2);

11. 平移（坐标系原点平移）

这里的平移指的是将坐标系原点平移。

ctx.translate(x,y);

• 特点：
  通过该方法可以将原点的位置进行重新设置。
• 注意：
  1.translate(x,y) 中不能设置一个值
  2.与moveTo(x,y) 的区别：
  2-1.moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变
  2-2.translate(x,y) 是将坐标系中的原点位置发生改变

12. 旋转（坐标系原点旋转）

ctx.rotate(弧度);
// 弧度计算方式见圆弧绘制

13. 缩放

 ctx.scale(x,y);

可以设置一个值，即x轴y轴同时缩放相同比例
也可以设置两个值，即x轴y轴按照相应的比例缩放

六、完结

就写到这吧，HTML5真是好处多多，可以大大的提升开发效率、增加代码可读性，当然前提是处理好兼容问题。文章只是做一个初步介绍，帮助没用过的朋友快速了解H5，后续会针对其中几个点做更详细的解释。
如文章有错误或者不严谨的地方，还请指出，共同进步。