以下是測試Html5新标簽性能的大執行個體:
首先是效果:
代碼：
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>header标簽定義文檔的頁眉（介紹資訊）</h2>
<header>
<h3>Welcome to my homepage</h3>
<p>My name is Donald Duck</p>
</header>
<h1>視訊标簽</h1>
<video src="video/why-we-coding.mp4" width="420" height="240" controls="controls">
您的浏覽器不支援 video 标簽。
</video>
<br/>
<h1>音頻标簽</h1>
<audio src="audio/Whistle.MP3" controls="controls">
您的浏覽器不支援 audio 标簽。
</audio>
<br/>
<h1>畫圖示簽</h1>
畫矩形<br/>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
//JavaScript 使用 id 來尋找 canvas 元素：
var canvas=document.getElementById('myCanvas');
//然後，建立 context 對象：
var ctx=canvas.getContext('2d');
//getContext("2d") 對象是内建的 HTML 5 對象，
//擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。
//fillStyle 方法将其染成紅色，
ctx.fillStyle='#FF0000';
//fillRect 方法規定了形狀、位置和尺寸。
ctx.fillRect(0,0,80,100);
</script><br/>
畫線條<br/>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script><br/>
畫圓形<br/>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script><br/>
漸變效果<br/>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas3");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script><br/>
把一幅圖像放置到畫布上：<br/>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas4");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/img/eg_flower.png"
cxt.drawImage(img,0,0);
</script><br/>
<h1>坐标擷取</h1>
<p>把滑鼠懸停在下面的矩形上可以看到坐标：</p>
<div id="coordiv"
style="width:199px;height:99px;border:1px solid #c3c3c3"
οnmοusemοve="cnvs_getCoordinates(event)"
οnmοuseοut="cnvs_clearCoordinates()"></div>
<br/>
<div id="xycoordinates"></div>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
<br/>
<h1>本地緩存測試</h1>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
<br/>
<p>重新整理頁面會看到計數器在增長。</p>
<p>請關閉浏覽器視窗，然後再試一次，計數器會繼續計數。</p>
<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>
<h1>session緩存</h1>
<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>
<p>重新整理頁面會看到計數器在增長。</p>
<p>請關閉浏覽器視窗，然後再試一次，計數器已經重置了。</p>
<h1>新Input類型</h1>
<script type="text/javascript">
function show(){
var range=document.getElementById("range");
var pshow=document.getElementById("pshow");
pshow.innerHTML=range.value;
}
</script>
<form action="/example/HTML 5/demo_form.asp" method="get">
email:<input type="email" name="user_email" /><br/>
url:<input type="url" name="user_url" /><br/>
number:<input type="number" name="points" min="1" max="10" /><br/>
range:<input type="range" id="range" name="points" min="1" max="10" οnmοusemοve="show()"/><div id="pshow">6</div><br/>
<b>Date pickers (date, month, week, time, datetime, datetime-local)</b><br/>
date:<input type="date" name="user_date" /><br/>
month:<input type="month" name="user_date" /><br/>
week:<input type="week" name="user_date" /><br/>
time:<input type="time" name="user_date" /><br/>
datetime:<input type="datetime" name="user_date" /><br/>
datetime-local:<input type="datetime-local" name="user_date" /><br/>
search:<input type="search" name="user_date" /><br/>
</form>
<h1>datalist元素</h1>
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<h1>keygen元素</h1>
<form action="/example/HTML 5/demo_form.asp" method="get">
Username: <input type="text" name="usr_name" /><br/>
加密方式: <keygen name="security" /><br/>
<input type="submit" /><br/>
</form>
<h1>使用 output 元素的簡易電腦：</h1>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
<form οnsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
<h1>autocomplete 屬性</h1>
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get" 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>
<p>請填寫并送出此表單，然後重載頁面，來檢視自動完成功能是如何工作的。</p>
<p>請注意，表單的自動完成功能是打開的，而 e-mail 域是關閉的。</p>
<br/>
<h1>autofocus 屬性</h1>
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>
<h1>form 屬性</h1>
form 屬性規定輸入域所屬的一個或多個表單。<br/>
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
下面的輸入域在 form 元素之外，但仍然是表單的一部分。<br/>
Last name: <input type="text" name="lname" form="user_form" />
<br/>
<h1>multiple 屬性</h1>
multiple 屬性規定輸入域中可選擇多個值<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>注:當您浏覽檔案時，請試着選擇多個檔案。</p>
<h1>pattern 屬性</h1>
pattern 屬性規定用于驗證 input 域的模式（pattern）(正規表達式)<br/>
下面的例子顯示了一個隻能包含三個字母的文本域（不含數字及特殊字元）<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
<h1>placeholder 屬性</h1>
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>
<h1>required 屬性</h1>
required 屬性規定必須在送出之前填寫輸入域（不能為空）。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
<h1>area标簽</h1>
定義和用法:area标簽定義圖像映射中的區域。<br/>
<p>請點選圖像上的星球，把它們放大。</p>
<img src="img/eg_planets.jpg" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" />
</map>
<p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據浏
覽器），是以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
<h1>bdo标簽</h1>
定義和用法:bdo标簽覆寫預設的文本方向。<br/>
<bdo dir="ltr">Here is some text</bdo><br/>
<bdo dir="rtl">Here is some text</bdo>
<h1>blockquote标簽</h1>
定義和用法:blockquote标簽定義摘自另一個源的塊引用。<br/>
毛澤東說過：
<blockquote>帝國主義都是紙老虎 ... </blockquote>
<h2>dd标簽定義一個定義清單中對項目的描述：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>
<h2>定義文檔中已删除的文本</h2>
<p>a dozen is <del>21</del> 12 pieces</p>
<h2>details标簽用于描述文檔或文檔某個部分的細節：</h2>
<details>This document was written in 2010.</details>
<h2>summary标簽包含 details 元素的标題</h2>
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<h2>embed标簽定義嵌入的内容，比如插件</h2>
<embed src="img/helloworld.swf" />
<h2>fieldset 元素可将表單内的相關元素分組</h2>
<fieldset style="width:100px">
<legend>健康資訊：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>體重：<input type="text" /></label>
</form>
</fieldset>
<p>如果表單周圍沒有邊框，說明您的浏覽器太老了。</p>
<h2>figure标簽用于對元素進行組合</h2>
<h2>figcaption标簽定義 figure 元素的标題</h2>
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949...</p>
</figure>
<h2>删除字效果和插入字效果</h2>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<h2>code标簽用于表示計算機源代碼</h2>
<code>
public static void main(String [] args){
System.out.println("HelloWorld!");
}
</code>
<h2>pre标簽來顯示非正常的格式化内容，或者某類計算機代碼。</h2>
<pre>
public static void main(String [] args){
System.out.println("HelloWorld!");
}
</pre>
<h2>mark突出部分文本</h2>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<h2>menu定義菜單清單</h2>
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>
<h2>下面代碼可以讓網頁在5秒後重新整理，并跳轉至http://www.w3school.com.cn</h2>
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">
<br/>
<h2>meter标簽定義度量衡</h2>
<p>顯示路徑成本：</p>
<meter value="3" min="0" max="10"></meter><br/><br/>
<meter value="0.6"></meter>
<p><b>注釋：</b>Internet Explorer 不支援 meter 标簽。</p>
<h2>nav标簽定義導航連結的部分</h2>
<nav>
<a href="index.asp" target="_blank" rel="external nofollow" >Home</a>
<a href="html5_meter.asp" target="_blank" rel="external nofollow" >Previous</a>
<a href="html5_noscript.asp" target="_blank" rel="external nofollow" >Next</a>
</nav>
<h2>optgroup标簽定義選項組。</h2>
此元素允許您組合選項。當您使用一個長的選項清單時，對相關的選項進行組合會使處理更加容易。<br/>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<h2>progress标簽定義運作中的進度（程序）</h2>
下載下傳進度：
<progress value="22" max="100">
</progress>
<p><b>注釋：</b>Internet Explorer 9 以及更早的版本不支援 <progress> 标簽。</p>
<h2>q标簽定義一個短的引用。</h2>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed.</p>
<p>請注意，浏覽器在引用的周圍插入了引号。</p>
<h2>sub标簽可定義下标文本。sup可定義上标文本</h2>
<p>
This text contains <sub>subscript</sub>
</p>
<p>
This text contains <sup>superscript</sup>
</p>
<h2>time标簽定義日期或時間，或者兩者</h2>
<p>我們在每天早上 <time>9:00</time> 開始營業。</p>
<p>我在 <time datetime="2010-02-14">情人節</time> 有個約會。</p>
<h2>footer标簽定義 section 或 document 的頁腳</h2>
<footer>This document was written in 2010.</footer>
</body>
</html>
上面基本測驗了Html5的大部分新屬性，大家可以在自己電腦上測試。有些屬性要考慮到浏覽器的相容性，關于相容問題大家可以去檢視W3Shool相關文檔。
轉載請注明出處：http://blog.csdn.net/acmman/article/details/50968443