HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/The_Oringinal_Leon/article/details/53076409

新技术框架，主体还是HTML5，虽然之前看过一些html4，但现在还是没有一个比较清晰的概念，这部分，我的深看！

HTML5简介

HTML5的设计目的是为了在移动设备上支持多媒体
html5新特性
- 用于绘画的canvas（画布）元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好支持
- 新的特殊内容元素 article、footer、header、nav、section
- 新的表单控件 calendar、date、time、email、url、search
- 完全支持css3
- 2D、3D制图
- 本地sql数据
- web应用

文档类型声明，说明这是html5

<!DOCTYPE html>

HTML5浏览器支持

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

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

html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5新元素

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。
canvas可以进行一些2d3d绘图一个入口，javascript的绘图API。

音频控件

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

controls是显示音频播放控件

视频控件

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

source 数据源标签

嵌入标签

<embed src="helloworld.swf" tppabs="http://w3schools.com/tags/helloworld.swf">

字幕标签

<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">

video、audio标签内部使用

新表单元素
datalist提供input下拉输入提示，可见input用list属性，输入datalist ID

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

kegen标签
用于对所输入项进行加密

<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

output标签
oninput监听事件，html5中input标签根据type属性的不同，使界面表现更丰富。output的for属性表示参与运算的元素有谁，用空格隔开。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

页面结构相关新元素
article标签
感觉就是div，字体整体要小一些，里面还是h1、p。

在h5中，设计相关话题，选用相关新标签。

aside标签
没看出有什么用

bdi标签
在文本内部设置自己在左边还是在右边，配合dir看属性使用。好像span的升级版

发现一个事，就目前菜鸟教程而言，一些标签还不适用于所有浏览器。

command标签
倒像是一个js入口，在menu标签里使用。

details标签
下拉抽屉备注效果，初始只显示summary标签内容。open属性初始显示详情内容。

<details open>
<summary>Copyright 1999-2011.</summary>
<p>文本</p>
<p>文本</p>
</details>

Tip：b标签，加粗。

dialog标签
没看出有什么用处，示例中在表格th中使用

figure标签
规定独立的流内容，照片、图片什么的
像是h5为各种内容定义了专门的外套，还不知道这么做的好处。 figcaption定义底部标题。

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

footer页脚标签
一般写文档的作者姓名，版权信息，等等。

header页眉标签
定义了文档的头部区域
<header> 元素应该作为介绍内容或者导航链接栏的容器。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

**插播：**ReactJS，ReactNative，什么关系？这么说吧，ReactJS是一套Web前端框架，就像AngularJS，而ReactNative我认为是移动端App-UI框架，基于ReactJS，将WebDom组件变成原生组件，如iOS的UIView。就好比AngularJS之于Ionic。

mark标签
标记文本，like span，示例中mark内的文本被黄色标记。

meter度量衡标签
仅用于已知最大和最小值的度量

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

不太清楚，示例显示了进度条，但却说不能当进度条用。

progress进度条标签
定义任何类型的任务的进度。

<progress value="80" max="100">
</progress>

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。

nav导航标签
定义导航链接。并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

ruby标签
定义 ruby 注释（中文注音或字符）。
在东亚使用，显示的是东亚字符的发音。
将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用：
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

rp标签用于当浏览器不支持ruby标签时现实的内容
rt标签的作用，就是让后面的内容放到前面头上，拼音标注方法。

rt标签
定义字符（中文注音或字符）的解释或发音。

rp标签
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

section标签
定义文档中的节（section、区段）。
定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is ...</p>
</section>

html5的套套

time标签
定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

可以写外面，也可以写里面datetime属性，方便程序识别时间字段。

wbr标签
(Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用元素来添加 Word Break Opportunity（单词换行时机）。

<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

HTML5弃用的元素

    <acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <noframes>
    <strike>
    <tt>

HTML5 Canvas 画布
用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
如果浏览器不支持 HTML5 canvas 标签，显示此行。
</canvas>

<script>
var c=document.getElementById("myCanvas");
// 上下文
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
// 填充（起点坐标x，起点坐标y，宽，高）
ctx.fillRect(0,0,200,100);
</script>

Canvas路径（划线）
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");
// 获取上下文 好比抓起画笔
var ctx=c.getContext("2d");
// 移动画笔到起点
ctx.moveTo(0,0);
// 移动画笔到终点
ctx.lineTo(200,100);
// 画
ctx.stroke();

// 画圆
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95圆心坐标x,50圆心坐标y,40半径,0start？,2*Math.PI画多少);
ctx.stroke();

</script> 


// 绘制文本
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 绘制文本
ctx.font="30px Arial";
// 填充文本  内容 起始坐标xy
ctx.fillText("Hello World",10,100);
// 画空心文本
ctx.strokeText("Hello World",10,50);
</script>

Canvas渐变
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200宽？,0高？);
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");

// 创建渐变  
// createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) 
// createRadialGradient前三个参数是起始圆（cycle1）的x、y、半径，后三个是终点圆（cycle2）的x、y、半径。
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
// 当img加载完毕执行的脚本语句
img.onload = function() {
    // 画现成图像
    ctx.drawImage(img,10,10);
} 
</script>

HTML5 内联 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印-

// 外面是库，里面是具体的矢量图案
<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>

SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

这里写图片描述

SVG再单花时间看

HTML MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

// 书写a²+b²=c²
<math xmlns="http://www.w3.org/1998/Math/MathML">

   <mrow行>
      <msup次方><mi项目>a</mi><mn幂>2</mn></msup>
      <mo运算符>+</mo>

      <msup><mi>b</mi><mn>2</mn></msup>
      <mo>=</mo>

      <msup><mi>c</mi><mn>2</mn></msup>
   </mrow>

</math>

HTML5 拖放（Drag 和 Drop）
先Drag，后Drop。

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<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">

</body>

HTML5 地理定位
不知为什么，同意浏览器访问位置后，就没反应了。

function getLocation()
{
if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
    x.innerHTML="该浏览器不支持获取地理位置。";
}
}

function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + 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;
}
}

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

音频格式的MIME类型
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 新的 Input 类型

    color
    date
    datetime
    datetime-local
    email
    month
    number
    range
    search
    tel
    time
    url
    week
// 注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

1.颜色
<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
2.日期 没有报错
<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

3.日期时间，并没有看到2.3的图形选择界面，没有报错。
<form action="demo-form.php">

  生日 (日期和时间): <input type="datetime" name="bdaytime">

  <input type="submit">

</form>

4.当地的时日时间，still no effect，没有报错。
<form action="demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

5.email 效果就是，自带报错信息。
<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

6.月份， 没有报错。
<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

7.数字，有报错信息。
<form action="demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

Input 类型: range
既有样式的滚动条

<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

搜索类型输入
没看出于普通文本输入有什么关系？

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

电话输入
没看出有什么区别，没有报错信息。

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

突然想到一点：为什么有的没反应，是因为现在当前我用的火狐浏览器还不支持该控件。

time输入
没什么区别，没有报错信息。

<form action="demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

Input 类型: url

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

Input 类型: week
输出值样式： 2017-W05

<form action="demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

input有很多属性
input的种类如下：

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

HTML5新表单元素

// 使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<datalist>
// 表单字段密钥对生成器 当提交表单时，会生成两个键，一个是私钥，一个是公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
// 尚不知秘钥和前面input如何实现绑定？
<keygen>

// 输出控件
<output>

HTML5表单属性
<form> / <input> autocomplete 属性
就是输入记忆功能，对输过的字段又提示，点击自动完成。我觉得这与浏览器缓存有关。

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

<form> novalidate 属性
关闭表单校验

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input> autofocus 属性
让谁默认获得焦点

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

<input> form 属性
在form外的input，声明自己是那个表单的。

Last name: <input type="text" name="lname" form="form1">

<input> formaction 属性
定义表单提交的URL地址，提交到哪个子页面。
该属性只用于 type=”submit” 和 type=”image”时，且该属性会覆盖<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>

<input> formenctype 属性
定义表单提交到服务器的编码类型，只当form是post的时候，且仅当input类型为submit或image时才使用。

<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>

<input>formmethod属性
定义表单提交方式，当submit、image情形同上。

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">

<input> formnovalidate 属性
不验证提交，submit时使用。

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<input> formtarget 属性
规定在何处打开action的URL

_blank  在新窗口中打开。
_self   默认。在相同的框架中打开。
_parent     在父框架集中打开。
_top    在整个窗口中打开。
framename   在指定的框架中打开。

...
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<input> height 和 width 属性
只适用于image类型的input，好比图标按钮。就是说按钮还有一种input形式。

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

<input> list 属性
绑定哪个datalist id，输入备选项。

<input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

<input> multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:

 选择图片: <input type="file" name="img" multiple>

<input> pattern 属性
输入的正则校验，自定义校验规则，title属性为自定义错误信息。注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input> placeholder 属性
注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

<input> required 属性
哪个input是必填的
required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Username: <input type="text" name="usrname" required>

<input> step 属性
就是步长
step 属性与以下type类型的input一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="3">

HTML5语义元素
引入一个概念，语义元素，就是带有特殊意味的元素。
无语义元素：如div，span等，无需考虑包含内容。
语义元素：如form，table，img，清楚地定义了包含的内容。

HTML5中新的语义元素

    <header>
    <nav>
    <section>
    <article>
    <aside>
    <figcaption>
    <figure>
    <footer>

HTML5 <section> 元素
就是区段，任何内容你都可以套一个section。

HTML5 <article> 元素
定义独立的内容，使用场景：论坛帖子forum post，博客帖子，新闻故事，评论等。

HTML5 <nav> 元素
定义导航链接，但是不是所有的链接都需要包含在nav里。

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside> 元素
定义页面主区域内容之外的内容（比如侧边栏）。
aside的内容应与主区域的相关。

HTML5 <header> 元素
描述文档的头部区域

HTML5 <footer> 元素
文档的底部区域，作者、著作权什么的。

HTML5 <figure> 和 <figcaption> 元素
规定独立的流内容，图像，照片，图标之类。figcaption为流标题，放在下面就是底部标题。

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

刚说的这些都是块元素，除了figcaption，为了解决个别浏览器不认以上块元素，你可以在，像是表里写下：
means display them as block.

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

Internet Explorer 8 及更早IE版本不认怎么办？
IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

下载后，将以下代码放入的网页中：

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

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。

HTML5 Web存储
一个比cookie更好的本地存储方式
什么是HTML5 web存储？
使用HTML5可以在本地存储用户的浏览数据，早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。
数据以 键/值对存在, web网页的数据只允许该网页访问使用。

localStorage和sessionStorage
这是客户端存储数据的两个对象。
- localStorage：没有时间限制的数据存储
- sessionStorage：针对一个session的数据存储

浏览器支持校验：

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

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

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
  localStorage.sitename="菜鸟教程";
  document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key： localStorage.key(index);

键值对通常以字符串存入，涉及数字，还需先转格式在字符化。否则如下例子点击计数就会出现111111，而不是2,3,4…

localStorage.clickcount=Number(localStorage.clickcount)+1;

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

JSON.stringify
JSON obj to str:

var site = new Object;
...
var str = JSON.stringify(site); // 将对象转换为字符串

str to JSON obj:

var site = JSON.parse(str);

你需要确保 localStorage 存储的数据都为 JSON 格式，否则 JSON.parse(str) 将会报错。确保str都为JSON格式吧？

HTML5 Web SQL 数据库
Q：示例都没效果，怎么在本地使用数据库？
在Chrome里有效果，在浏览器里有个Web SQL 里面是建立的数据库mydb。就好比iOS 有sqlite 或 coredata一样。
所以叫 HTML5 Web SQL。

核心方法

openDatabase：使用现有或新建一个数据库
transaction：控制一个事务，执行提交或回滚
executeSql: 用于sql语句查询

打开数据库

var db = openDatabase('mydb数据库名','1.0版本号','Test DB描述',2*1024*1024数据库大小); 还有创建回调

查询
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

// 抓取数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
// 在数据库mydb中创建一个LOGS表，有两个字段id和log。
db.transaction(function(tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   });

插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   // 动态值插入数据
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log];
});

读取数据

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }

   }, null);
});

删除记录

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});
// 动态删除
 tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

更新记录

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
// 动态更新
db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

就是：变的再去访问服务器，不变的直接读本地缓存。

完成的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

需要在html标签中包含manifest属性

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<head>
...
</html>

manifest 文件的建议的文件扩展名是：”.appcache”。

请注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

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;
}

// demo_workers.js代码
var i=0;

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

timedCount();

Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
window 对象
document 对象
parent 对象

HTML5 服务器发送事件（Server-Sent Events）
Server-Sent 事件指的是网页自动获取来自服务器的更新。
EventSource 对象用于接收服务器发送事件通知

if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br>";
    };
}

onopen事件：当通往服务器的连接被打开
onerror事件：当发生错误

HTML5 WebSocket

function WebSocketTest()
{
   if ("WebSocket" in window)
   {
      alert("您的浏览器支持 WebSocket!");

      // 打开一个 web socket
      var ws = new WebSocket("ws://localhost:9998/echo");

      ws.onopen = function()
      {
         // Web Socket 已连接上，使用 send() 方法发送数据
         ws.send("发送数据");
         alert("数据发送中...");
      };

      ws.onmessage = function (evt) 
      { 
         var received_msg = evt.data;
         alert("数据已接收...");
      };

      ws.onclose = function()
      { 
         // 关闭 websocket
         alert("连接已关闭..."); 
      };
   }

   else
   {
      // 浏览器不支持 WebSocket
      alert("您的浏览器不支持 WebSocket!");
   }
}

安装 pywebsocket
同时需要创建一个服务

$ python setup.py build
$ sudo python setup.py install
$ sudo python standalone.py -p 9998 -w ../example/

HTML5测验

2. HTML5 的正确 doctype 是？

你的回答: <!DOCTYPE HTML5>

 回答错误!

 正确答案：<!DOCTYPE html>

3. 在 HTML5 中，哪个元素用于组合标题元素？

你的回答: <header>

 回答错误!

 正确答案：<hgroup>

4. HTML5 中不再支持下面哪个元素？

你的回答: <ins>

 回答错误!

13. 在 HTML5 中，您能够直接将 SVG 元素嵌入 HTML 页面中。

你的回答: 错误

 回答错误!

 正确答案：正确
 正确答案：<font>

19. 哪种输入类型用于定义周和年控件（无时区）？

你的回答: date

 回答错误!

 正确答案：week

20. 哪个 HTML5 元素用于显示已知范围内的标量测量？

你的回答: <measure>

 回答错误!

 正确答案：<meter>

HTML5代码规范
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

等号前后可以使用空格。但我们推荐少用空格:


<link rel="stylesheet" href="styles.css">

每行代码尽量少于 80 个字符。

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:

<head>
  <meta charset="UTF-8">
  <title>菜鸟教程</title>
</head>

CSS样式规范
将左花括号与选择器放在同一行。
左花括号与选择器间添加一个空格。
使用两个空格来缩进。
冒号与属性值之间添加一空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用分号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。

HTML5的规范和XHTML的规范大同小异，都是让代码看上去更规整。

HTML及参考手册，需要的时候再查阅，毕竟现在说的是HTML5.

至此，HTML5的学习完结。Now，我可以说我会HTML5了。