HTML5新特性

先罗列出H5的一些新特性，不要回答那么具体

（一）语义化标签：

例如：header、nav、article、aside、footer等

（二）音频视频API

 视频API

1.视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

2.实际应用

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

controls 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

3.方法、属性和事件

音频API
1.音频格式

Ogg Vorbis
MP3
Wav

2.实际应用

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

controls 属性供添加播放、暂停和音量控件。
audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

（三）Canvas画布API

1.作用：HTML5中canvas元素用于在网页上绘制图形。（通过脚本，通常是 JavaScript）。不过，元素本身并没有绘制能力（它仅仅是图形的容器）必须使用脚本来完成实际的绘图任务。
2.特点：

Canvas画布是一个矩形区域，可以控制其每一个像素
Canvas使用JavaScript来控制画图
Canvas具有直线、矩形、圆以及添加图像的方法

3.画图步骤
（1）创建一个画布：其中标签里面的文字是给不支持canvas的浏览器看的，支持的永远看不到。Canvas自身的宽高就是画布本身的属性，而css给他的宽高则可以看作是缩放，如果你缩放的太随意，那么画布上的图形可能变得你自己都认不出来。所以有个建议：除非特殊情况，一定不要用css来定义Canvas的宽高。

       <canvas id="c1" width="800" height="600">你的浏览器不支持canvas</canvas>

（2）绘画环境：相当于把拿出画布和画笔


     window.onload = function(){
        //拿出画布，和获取元素的方法相同
        var oC = document.getElementById('c1');
        //其中getContext方法就是用来拿笔的，但这里还有个参数:2d，这是什么意思呢?
        //这个可以看作是画笔的种类。 既然有2D，那么就会有3d了？以后估计会有，但现在没
        //这里写图片描述有。所以我们先用这只2d的笔吧。
        var oGC = oC.getContext('2d'); 
      };

3.用方法绘制图形

①矩形方法：

  A.rect() 方法创建矩形。

      方法：oGC.rect(x,y,width,height);

      x 矩形左上角的 x 座标
      y 矩形左上角的 y 座标
      width 矩形的宽度，以像素计
      height    矩形的高度，以像素计

  B fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

      方法：oGC.fillRect(x,y,width,height);参数与上文相同

  C.strokeRect() 方法绘制矩形（不填色,带边框）。笔触的默认颜色是黑色。

      方法：oGC.strokeRect(x,y,width,height);

  D。clearRect() 方法清空给定矩形内的指定像素。

      方法：oGC.clearRect(x,y,width,height);

②颜色，样式，阴影

context.createLinearGradient(x0,y0,x1,y1);

参数值参数描述 x0 渐变开始点的 x 座标 y0 渐变开始点的 y 座标 x1 渐变结束点的 x 座标 y1 渐变结束点的 y 座标
context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”); 参数值参数描述 image 规定要使用的图片、画布或视频元素。 repeat 默认。该模式在水平和垂直方向重复。 repeat-x 该模式只在水平方向重复。 repeat-y 该模式只在垂直方向重复。 no-repeat 该模式只显示一次（不重复）。
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数值参数描述 x0 渐变的开始圆的 x 座标 y0 渐变的开始圆的 y 座标 r0 开始圆的半径 x1 渐变的结束圆的 x 座标 y1 渐变的结束圆的 y 座标 r1 结束圆的半径
gradient.addColorStop(stop,color);

参数值参数描述 stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color 在结束位置显示的 CSS 颜色值

③边界绘制：

lineJoin：边界连接点样式
miter（默认）、round（圆角）、bevel（斜角）
lineCap：端点样式
butt（默认）、round（圆角）、square（高度多出为宽的一半）

④绘制路径：

beginPath：开始绘制路径（防止后面设置影响上面绘图）
closePath：结束绘制路径（闭合绘图）
save：保存路径（与restore一起组成一个设置区）
restore：恢复路径
moveTo：移动到绘制的新目标点（起点）
lineTo：新的目标点（终点）
clearRect：删除一个画布的矩形区域

⑤圆弧方法：arc(x,y,半径,起始弧度,结束弧度,旋转方向)

x,y：起始圆心座标
起始位置在3点钟位置
弧度与角度的关系：弧度=角度*Math.pi/180
旋转方向：顺时针（默认：false）、逆时针（true）

l⑥绘制圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制圆形</title>
</head>
<style>
    body{ background:black;}
    #c1{ background:white;}
    span{ color:white;}
</style>
<script>
    window.οnlοad=function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        //oGC.moveTo(200,200);移动到起点
        oGC.arc(200,200,150,0,360*Math.PI/180,true);
        oGC.closePath();
        oGC.fillStyle = 'rgba(0,255,0,0.25)';//注意顺序问题，颜色支持十六进制
        oGC.fill();//填充当前图形
        oGC.stroke();
    };
</script>
<body>
    <canvas id="c1" width="400" height="400">
        <span>不支持canvas浏览器</span>
    </canvas> <!--默认：宽300 高150-->
</body>
</html>

⑦绘制线条

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

⑧绘制三角形

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
<!--设置画布大小-->
canvas.width = 1024;
canvas.height = 768;

context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);

<!-- 填充图形-->
context.fillStyle = "rgb(2,100,30)";
context.fill();

context.lineWidth = 5;
context.strokeStyle = "#005588";
context.stroke();
}
</script>
</body>
</html>

（四）地理API

1.请使用 getCurrentPosition() 方法来获得用户的位置。
2.实际应用

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }
</script>

1.检测是否支持地理定位
2.如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
3.如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
4. showPosition() 函数获得并显示经度和纬度
5.第一个函数用于获取成功之后的操作，第二个函数用于处理错误，它规定当获取用户位置失败时运行的函数：

（五）、WEB存储

（一）localStorage 方法——-没有时间限制的数据存储

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

如何创建？

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

对用户访问页面的次数进行计数：

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

（二）sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建？

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

对用户在当前 session 中访问页面的次数进行计数：

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

（六）、表单控件

（一）HTML5 新的 Input 类型

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

1.email
email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

2.url
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

3.number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

Points: <input type="number" name="points" min="1" max="10" />

4.Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

5.search
search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

（七）、内联SVG

1.什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

2.SVG 的优势

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

3.实例：将 SVG 元素直接嵌入 HTML 页面中

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

（八）、Web Workers

1.什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

2.实例代码

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;
//在创建 web worker 之前，请检测用户的浏览器是否支持它：
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
    //检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后
    //运行 "demo_workers.js" 中的代码：
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }  
//向 web worker 添加一个 "onmessage" 事件监听器：当 web worker 传递消息时
//，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}
//如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

（九）、HTML 5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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));
}
</script>
</head>
<body>

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

</body>
</html>

具体解释参考这里

（十）、移除的标签

纯表现的元素

          <basefont> 默认字体，不设置字体，以此渲染
          <font> 字体标签
          <center> 水平居中
          <u> 下划线
          <big> 大字体
          <strike> 中横线
          <tt> 文本等宽

框架集

          <frameset>
          <noframes>
          <frame>

我的绝伦大人

发布了31 篇原创文章 · 获赞 9 · 访问量 1万+

私信关注

HTML5新特性

HTML5新特性

（一）语义化标签：

（二）音频视频API

（三）Canvas画布API

（四）地理API

（五）、WEB存储

（六）、表单控件

（七）、内联SVG

（八）、Web Workers

（九）、HTML 5 拖放

（十）、移除的标签

CORS error 但是 status code 是200 OK

压缩上传的GPU数据的方案

使用skopeo同步镜像

CSS預處理器和後處理器

css剩餘部分

跨域

BFC神奇背後的原理

CSS居中問題

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結