参考文档：http://www.runoob.com/html/html5-intro.html
新元素：
<!--HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:--> <!DOCTYPE html> <html> <meta name="whats" charset="utf-8"> <head> <title>create an html element</title> <script>document.write("myHero")</script> <style> myHero{ display:block; background-color:#ddd; padding:50px; font-size:30px; } </style> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落</p> <myHero>我的第一个新元素</myHero> </body> </html>
<!--针对IE浏览器html5shiv 是比较好的解决方案。 html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。 html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件--> <!DOCTYPE html> <html> <head> <title>styling html5</title> <!--[if It IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/htmlshiv.min.js"></script> <![endif]--> </head> <body> <h1>my first article</h1> <article> london is the capital city of england.--whats </article> </body> </html>
canvas：
<!--HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 默认情况下 <canvas> 元素没有边框和内容。--> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持HTML5 canvas 标签 </canvas> <script> var c=document.getElementById("myCanvas"); <!--找到 <canvas> 元素--> var ctx=c.getContext("2d"); <!--创建 context 对象--> ctx.fillStyle="#FF0000"; <!--getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。--> ctx.fillRect(0,0,150,75); <!--设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。方法定义了矩形当前的填充方式。fillRect(x,y,width,height)--> </script> <!--在画布上绘制 150x75 的矩形，从左上角开始 (0,0)--> <script> var d=document.getElementById("myCanvas"); var dtx=d.getContext("2d"); dtx.moveTo(0,0); dtx.lineTo(200,100); dtx.stroke(); </script> <script> var e=document.getElementById("myCanvas"); var etx=e.getContext("2d"); etx.beginPath(); etx.arc(95,50,40,0,2*Math.PI); etx.stroke(); </script> <script> var f=document.getElementById("myCanvas"); var ftx=f.getContext("2d"); ftx.font="30px Arial" ftx.fillText("hello world",10,50); ftx.strokeText("MM",10,60) </script> </body> </html>
渐变
<!--线性渐变--> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持HTML5 canvas 标签 </canvas> <script> var c=document.getElementById("myCanvas"); <!--找到 <canvas> 元素--> 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); </script> </body> </html> <!--径向/圆渐变 --> <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 你的浏览器不支持HTML5 canvas 标签 </canvas> <script> var c=document.getElementById("myCanvas"); <!--找到 <canvas> 元素--> var ctx=c.getContext("2d"); 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); </script> </body> </html>
图像：
<!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="scream" src="F:\htmldemo\picture\smiley.gif" alt="The Scream" width="220" height="277"><p>Canvas:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); </script> </body> </html>
svg:
<!--SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准--> <!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>
拖放：
<!--拖放是一种常见的特性，即抓取对象以后拖到另一个位置。--> <!DOCTYPE html> <html> <head> <style type="text/css"> #div1,#div2 {float:left;width:35px;height:35px;margin:10px;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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="F:\htmldemo\picture\smiley.gif" draggable="true" ondragstart="drag(event)" width="32" height="32"> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
video：
<!DOCTYPE html> <html> <meta name="whats" charset="UTF-8"> <body> <div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br><br> <video id="video1" width="320" controls> <source src="F:\htmldemo\video\movie.mp4" type="video/mp4"> <source src="F:\htmldemo\video\movie.ogg" type="video/ogg"> 你的浏览器不支持video标签。 </video> </div> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause() } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width="220"; } function makeNormal() { myVideo.width="320"; } </script> </body> </html>
audio：
<!DOCTYPE html> <html> <meta name="whats" charset="UTF-8"> <body> <div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <br><br> <audio id="audio1" controls> <source src="F:\htmldemo\audio\一次就好.mp3" type="audio/mpeg"> <source src="F:\htmldemo\audio\一次就好.ogg" type="audio/ogg"> 你的浏览器不支持audio标签。 </audio> </div> <script> var myAudio=document.getElementById("audio1"); function playPause() { if (myAudio.paused) myAudio.play(); else myAudio.pause() } </script> </body> </html>
input类型:
<!DOCTYPE html> <html> <meta charset="utf-8"> <body> <form > 选择你喜欢的颜色：<input type="color" name="favcolor"><br><!--color 类型用在input字段主要用于选取颜色--> <input type="submit"><br> 日期：<input type="date" name="rq"><br><!--date 类型允许你从一个日期选择器选择一个日期。--> <input type="submit"><br> 时间：<input type="datetime" name="dtime"><br><!--datetime 类型允许你选择一个日期（UTC 时间）--> <input type="submit"><br> 无时区：<input type="datetime-local" name="time"><br><!--datetime-local 类型允许你选择一个日期和时间 (无时区).--> <input type="submit"><br> e-mail:<input type="email" name="useremail"><br><!--email 类型用于应该包含 e-mail 地址的输入域。--> <input type="submit"><br> month:<input type="month" name="smonth"><br><!--month 类型允许你选择一个月份。--> <input type="submit"><br> number:<input type="number" name="snumber" min="1" max="10"><br><!--number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：--> <input type="submit"><br> range:<input type="range" name="points" min="0" max="100"><br><!--定义一个不需要非常精确的数值（类似于滑块控制--> <input type="submit"><br> search:<input type="search" name="googlesearch"><br><!--search 类型用于搜索域，比如站点搜索或 Google 搜索--> <input type="submit"><br> tel:<input type="tel" name="usertel"><br><!--定义输入电话号码字段:--> <input type="submit"><br> time:<input type ="time" name="stime"><br><!--time 类型允许你选择一个时间。--> <input type="submit"><br> url: <input type="url" name="surl"><br><!--url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值--> <input type="submit"><br> week: <input type="week" nam="sweek"><br><!--week 类型允许你选择周和年--> <input type="submit"><br> </form> </body> </html>
datalist：
<!--<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：--> <!DOCTYPE html> <html> <body> <form 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> </body> </html>
keygen:
<!--<keygen> 元素的作用是提供一种验证用户的可靠方法。 <keygen>标签规定用于表单的密钥对生成器字段。 当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。 公钥可用于之后验证用户的客户端证书（client certificate）。--> <!DOCTYPE html> <html> <body> <form> name:<input type="text" name="username"><br> password:<keygen name="security"> <input type="submit"><br> </form> </body> </html>
output:
<!--<output> 元素用于不同类型的输出--> <!DOCTYPE html> <html> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" min="0" max="100" id="a" value="50">100+ <input type="number" id="b" value="50">= <output name="x" for ="a b"></output> </form> </body> </html>
语义元素：
<!DOCTYPE html> <html> <header> <h4>run in chrome</h4> </header> <body> <section> <h1>wwf</h1> <p>the world wide fund for nature is ...</p><!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。--> </section> <article> <h2>wwe</h2> <p>the world envirment...</p> </article> <aside> <!--<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）--> <h3>summer</h3> <p>this summer...</p> </aside> <!--<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。 <figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 <figcaption> 标签定义 <figure> 元素的标题. <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。--> <p>this is a picture</p> <figure> <img src="F:\htmldemo\picture\1.jpg" alt="hs" width="580" height="435"> <figcaption>aig1.-hs ,whats.</figcaption> </figure> <footer> <!--<footer> 元素描述了文档的底部区域.--> <p>posted by: whats</p> <p><time pubdate datetime="2015-11-23"></time></p> </footer> <nav> <!--<nav> 标签定义导航链接的部分。--> <a href="http://www.runoob.com/html/">HTML<a>| <a href="http://www.runoob.com/css/">CSS</a>| <a href="http://www.runoob.com/js/">JS</a>| <a href="http://www.runoob.com/jquery/">JQuery</a> </nav> </body> </html>
web存储：
<!--localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储--> <!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s)."; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p> </body> </html> <!--sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。--> <!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter is reset.</p> </body> </html>
原文：http://www.cnblogs.com/whats/p/4968742.html
