HTML5新增特性

HTML用的已经手到擒来，我觉得是前端最简单的一个学习部分了，但是其中让我有些混乱的是HTML5，虽然平时也在用HTML5的方法，但是没有系统的整理过，分不清哪些是新增的特性，所以打算自己总结一篇关于HTML5用法的文章巩固一下，从而更加清晰的理解与运用。内容较多的知识点会另起文章。

一.浏览器支持

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

一般的浏览器都支持html5，ie8以下需要引html.js文件来支持。ie9以下会解析它。

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

二.Canvas图形绘制

最基础的框为，但是什么都不会显示，可以给其添加边框或背景颜色：

<canvas id="myCanvas" width="200" height="100"></canvas>

1.使用js来绘制图像，浏览器显示为一个150宽，75高，起点0，0的红色矩形

var c=document.getElementById("myCanvas");  //找到id
var ctx=c.getContext("2d");  //创建对象
ctx.fillStyle="#FF0000";  //设置颜色，默认为黑色
ctx.fillRect(0,0,150,75);  //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式

2.绘制从0，0起点到200，100终点坐标的直线

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);  //开始坐标
ctx.lineTo(200,100);  //结束坐标
ctx.stroke();  //绘制线条

3.绘制边线圆形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();  //新建路径
ctx.arc(95,50,40,0,2*Math.PI);  //arc(x,y,半径,start,stop)，Math.PI表示180°
ctx.stroke();  

4.实心文本和空心文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";  
ctx.fillText("Hello World",10,50);  //fillText为填充实心方法
/*---------------------------------------*/
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);  //strokeText为线的方法

5.线性和径向渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);  //createLinearGradient(x,y,x1,y1) - 创建线条渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
/*---------------------------------------*/
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);  //createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

6.图片填充

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");  //图片img标签的id
ctx.drawImage(img,10,10);

7.绘制三角形边框

var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()，填充为ctx.fill(); 填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

8.绘制圆弧

var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();  //开始绘制
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);  //true表示逆时针，false表示顺时针
ctx.stroke();  //线

9.虚线方块

    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;  //设置起始偏移量.
    ctx.strokeRect(50, 50, 210, 210);

10.变形矩阵

    var canvas = document.getElementById('tutorial1');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.transform(1, 1, 0, 1, 0, 0);
    ctx.fillRect(0, 0, 100, 100);

11.裁剪路径

    var canvas = document.getElementById('tutorial1');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.beginPath();  //开始绘制路径
    ctx.arc(20,20, 100, 0, Math.PI * 2);  //四分之一圆
    ctx.clip();  //把已经创建的路径转换成裁剪路径。

    ctx.fillStyle = "pink";  //粉色填充
    ctx.fillRect(20, 20, 100,100);

*如果浏览器不支持Canvas可以用文字或者图片内容替代

<canvas>
    你的浏览器不支持canvas,请升级你的浏览器
</canvas>
/*---------------------------------------*/
<canvas>
    <img src="./美女.jpg" alt=""> 
</canvas>

*检测支持与否

var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");

参考网站：https://blog.csdn.net/u012468376/article/details/73350998
这些是Canvas最基础的运用，我会另起一篇根据实例更深入的总结。

二.Svg绘制矢量图

svg和canvas都是绘制图形工具，但是各有各的好处，svg适合绘制矢量图，即放大不会模糊，并且易操作DOM节点，交互效果比较好，自动重绘，canvas适合做动画。svg比较简单，不在这里总结，直接上api地址：http://www.runoob.com/svg/svg-tutorial.html

三.拖放（Drag 和 Drop）

1.实例一，从外面拖到框内

html代码

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  

js代码

function allowDrop(ev){
    ev.preventDefault();  //默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
}
 
function drag(ev){  //开始拖放操作(拖动什么)
    ev.dataTransfer.setData("Text",ev.target.id);  //方法设置被拖数据的数据类型和值
}
 
function drop(ev){  //（放到何处）
    ev.preventDefault();  //避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    var data=ev.dataTransfer.getData("Text");  //获得被拖数据
    ev.target.appendChild(document.getElementById(data));  //把被拖元素追加到放置元素
}

2.实例二，从框内拖到框内，可来回拖

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

*可参考：https://blog.csdn.net/z983002710/article/details/76335122

四.Video(视频)

1.需要控件

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

2.不要自带控件，自己写控件

html代码

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

var myVideo=document.getElementById("video1"); 

function playPause(){   //是否暂停
    if (myVideo.paused) 
      myVideo.play(); 
    else 
      myVideo.pause(); 
} 

    function makeBig(){   //放大
    myVideo.width=560; 
} 

    function makeSmall(){   //缩小
    myVideo.width=320; 
} 

    function makeNormal(){   //正常
    myVideo.width=420; 
} 

五.Audio(音频)

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

六.新的表单属性（只列出浏览器兼容不错的）

1.autofocus在页面加载时，自动获得焦点：

<input type="text" name="fname" autofocus>

2.formaction 属性会覆盖<form> 元素中的action属性

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

3.formenctype 属性覆盖 form 元素的 enctype 属性

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

4.formmethod 属性覆盖了 <form> 元素的 method 属性

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

5.formtarget 属性覆盖 <form>元素的target属性.

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank"
  value="提交到一个新的页面上">
</form>

6.<input> height 和 width 属性

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

7.placeholder 输入框提示

<input type="text" name="fname" placeholder="First name">

七.语义元素

<header> 页头
<nav> 导航
<section> 声明一个块，里面可以嵌套别的语义元素
<article> 独立的自包含内容
<aside> 侧边栏
<figcaption> 定义 <figure> 元素的标题
<figure> 独立的流内容（图像、图表、照片、代码等等）
<footer> 页脚

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性

header, section, footer, aside, nav, article, figure
{ 
    display: block; 
}

Internet Explorer 8 及更早IE版本中的问题

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->