HTML5 新特性 | zKing的学习乐园

# 如何理解 HTML

HTML是一个“文档”
使用标签来描述文档的“结构”
标签有区块和大纲，有语义

可以使用html5大纲工具来看一个网页是否满足以上的特点。

# 元素的分类

在基础知识中，按照“默认”样式的方法进行分类，而 HTML5 后可以按内容对元素分类，大体可以分为 7 个类别

元数据型(metadata)
区块型(sectioning)
标题型(heading)
语句型(phrasing)
内嵌型(embedded)
交互型(interactive)

具体点击可以这里

# 新增功能

表单增强
- 日期、事件、搜索等控件的增强
- 表单验证 required
- placeholder 自动聚焦

表单增强的部分有很多，无法一一列举，就暂时写了这几个

# 新增语义

header/footer 头尾
section/article 区域
nav 导航
aside 不重要内容
em/strong 表示强调
i icon 用来插入图标

# 新增 API

# 音频视频

以前都是通过使用 Flash 插件来播放视频和音频，但是随着 HTML5 的发展，Flash 已经逐渐被淘汰了
现在可以使用 <video> 标签来支持网页视频的播放，通过使用 <audio>标签来支持音频的播放，另外，使用 controls 属性来使用控件。
尽管如此，为了老版本的浏览器，如IE8，还是需要做一些兼容性的处理。

<!-- 
  支持播放的媒体格式：
  MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
 -->
<!--
  <object> 元素定义了在 HTML 文档中嵌入的对象。
  该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。
-->
<video width="320" height="240" controls>
    <source src="14637829-1-hd.mp4" type="video/mp4">
    <source src="14637829-1-hd.ogg" type="video/ogg">
    <source src="14637829-1-hd.webm" type="video/webm">
    您的浏览器不支持Video标签。
    <object data="14637829-1-hd.mp4" width="320" height="240">
        <embed src="14637829-1-hd.mp4" width="320" height="240">
    </object>
</video>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
    <embed height="50" width="100" src="music.mp3">
</audio>

另外可以使用 js 来对这些控件进行控制，请点击这里进行参考

# 图形

关于图形，以前都是通过美工制作图片，然后再使用 <img> 标签来嵌入到网页中，现在，比较复杂的图案还是需要让美工进行设计，而一些小图标和简单的图形，可以使用 HTML5 的新特性来解决。

<!--
 SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
 SVG 是一种使用 XML 描述 2D 图形的语言。
 Canvas 通过 JavaScript 来绘制 2D 图形。
-->
<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>

<!--
  创建一个画布（Canvas）
 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制
 注意: 默认情况下 <canvas> 元素没有边框和内容。 
-->
<!--注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.-->
<!--canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：-->
<canvas id="MyCanvas" width="500px;" height="500px;" style="border: 1px solid red;"></canvas>

/*
* getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
* createLinearGradient(x,y,x1,y1) - 创建线条渐变
* createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
* drawImage(image,x,y) 把一幅图像放置到画布上,
* */
var c=document.getElementById('MyCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle="rgba(0, 255, 40, 0.26)";
ctx.fillRect(0,0,150,100);  //意思是：在画布上绘制 150x100 的矩形，从左上角开始 (0,0)。

/*当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。*/

//创建渐变
var start=ctx.createLinearGradient(0,0,500,0);
start.addColorStop(0, 'red');
start.addColorStop(1, 'white');
ctx.fillStyle=start;
ctx.fillRect(0,250,500,100);

//创建一个径向/圆渐变,x和y确定圆心,r为半径.
var RGt=ctx.createRadialGradient(300,100,50,300,100,100); //圆渐变,x的值要和填充的矩形的值相同
RGt.addColorStop(0, 'red');
RGt.addColorStop(1, 'white');
ctx.fillStyle=RGt;
ctx.fillRect(150,0,300,200);

除了 svg 和 canvas 以外，还有 HTML5 自带的拖放功能和 MathML 标签，就不再叙述。

# 设备能力

HTML5 后可以使用地理定位（但是我没使用成功过，感觉是因为“墙”）

<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation(){
  if (navigator.geolocation){
    navigator.geolocation.watchPosition(showPosition);
  }else{
    x.innerHTML="该浏览器不支持获取地理位置。";
  }
}
function showPosition(position){
  x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;
}
</script>
</body>

# 实时通讯

# WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
但是使用 WebSocket 需要使用 pywebsocket 来做支持服务

# Web Worker

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

<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;
function startWorker() {
  if(typeof(Worker) !== "undefined") {
      if(typeof(w) == "undefined") {
          w = new Worker("demo_workers.js");
      }
      w.onmessage = function(event) {
          document.getElementById("result").innerHTML = event.data;
      };
  } else {
      document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

demo_workers.js

var i=0;

function timedCount(){
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

# Web 存储

关于这个新增的API，我单独整理了一篇文章，请点击这里