HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對(duì)本地離線存儲(chǔ)的更好的支持
新的特殊內(nèi)容元素诸狭，比如 article顿肺、footer、header钉稍、nav、section
新的表單控件棺耍，比如 calendar贡未、date、time、email俊卤、url嫩挤、search
1. 結(jié)構(gòu)標(biāo)記
①header元素：
作用：header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題消恍，但也可以包含其內(nèi)容岂昭，如搜索表單或相關(guān)的Logo圖片。
一個(gè)網(wǎng)頁內(nèi)并未限制header元素的個(gè)數(shù)狠怨，可為每個(gè)內(nèi)容區(qū)塊增加一個(gè)header元素约啊。
語法：<header></header>
<header>
<h1>頁面標(biāo)題</h1>
</header>
<article>
<header>
<h1>文章標(biāo)題</h1>
</header>
文章內(nèi)容
</article>
②footer元素：
作用：footer元素可以作為其父級(jí)元素區(qū)塊或是一個(gè)根區(qū)塊的腳注，通常包含其相關(guān)區(qū)塊的腳注信息佣赖，如作者恰矩、相關(guān)閱讀鏈接及版權(quán)信息等。
一個(gè)網(wǎng)頁內(nèi)并未限制footer元素的個(gè)數(shù)憎蛤，可為每個(gè)內(nèi)容區(qū)塊增加一個(gè)footer元素外傅。
語法：<footer></footer>
<article>
文章內(nèi)容
<footer>
文章腳注
</footer>
</article>
<footer>
網(wǎng)頁腳注
</footer>
③article元素：
作用：article元素用來表示文檔、頁面中獨(dú)立的蹂午、完整的栏豺、可以獨(dú)自被外部引用的內(nèi)容，可以是一片博客或報(bào)刊中的文章豆胸、一篇論壇帖子奥洼、一段用戶評(píng)論或獨(dú)立的插件等。
一個(gè)article元素晚胡，除了內(nèi)容部分外灵奖，通常有一個(gè)放在header元素中的標(biāo)題，有時(shí)也有腳注估盘。
語法：<article></article>
例：創(chuàng)建圖片所示HTML文檔
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<article>
<header>
<h1>Web簡介</h1>
<p>發(fā)表日期:2017-11-3</p>
</header>
<p><b>web</b>是一種基于超文本和HTTP的瓷患、全球性的、動(dòng)態(tài)交互的遣妥、跨平臺(tái)的分布式圖形信息系統(tǒng)擅编。</p>
<footer>
<p>著作版權(quán)©百度百科所有</p>
</footer>
</article>
<article>
<header>
<h1>HTML5簡介</h1>
<p>發(fā)表日期:2017-11-5</p>
</header>
<p><b>HTML5</b>是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，目標(biāo)在于取代現(xiàn)有的 HTML 4.01, XHTML 1.0 以及 DOM Level 2 HTML 標(biāo)準(zhǔn)箫踩。</p>
<footer>
<p>著作版權(quán)©百度百科所有</p>
</footer>
</article>
</body>
</html>
④section元素：
作用：section元素用來對(duì)頁面上的內(nèi)容進(jìn)行分塊爱态。
一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。
語法：<section></section>
例如：創(chuàng)建圖片所示HTML文檔
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<article>
<h1>葡萄</h1>
<p><b>葡萄</b>境钟，植物類水果</p>
<section>
<h2>巨峰</h2>
<p>歐美雜交锦担，為四倍體葡萄品種...</p>
</section>
<section>
<h2>赤霞珠</h2>
<p>本身帶有黑加侖、黑莓子等香味...</p>
</section>
</article>
</body>
</html>
⑤nav元素：
作用：nav元素用來構(gòu)建導(dǎo)航慨削，導(dǎo)航元素連接到其他頁面或當(dāng)前頁面的其他部分洞渔，不是所有的鏈接組都要被放進(jìn)nav元素套媚，只需要將主要的、基本的鏈接組放進(jìn)nav元素即可
一個(gè)section元素通常由內(nèi)容和標(biāo)題組成磁椒。
語法：<nav></nav>
⑥aside元素：
作用：aside元素用來表示當(dāng)前頁面或文章的附屬信息部分堤瘤，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄衷快、廣告宙橱、導(dǎo)航條以及其他類似的有別于主要內(nèi)容的部分。
語法：<aside></aside>
2. 新增的表單元素及屬性
（1）新增的常用屬性
- placeholder屬性：輸入型控件可通過該屬性向用戶顯示描述性說明或者提示信息蘸拔。
- autofocus屬性：設(shè)置屬性的表單控件师郑，當(dāng)頁面打開時(shí)，該控件自動(dòng)獲得光標(biāo)焦點(diǎn)调窍，一個(gè)頁面上只能有一個(gè)控件具有該屬性宝冕。
注意：只有當(dāng)一個(gè)頁面是以使用某個(gè)控件為主要目的時(shí)，才對(duì)該控件使用autofocus屬性邓萨，如搜索頁面中的搜索文本框地梨。 - list屬性：為單行文本框增加的一個(gè)屬性，該屬性的值為datalist元素的id缔恳。
- required屬性：設(shè)置該屬性的輸入型控件對(duì)應(yīng)項(xiàng)必填宝剖，否則無法提交表單。
（2）input新類型：type屬性
email：
url：
number：
range：
Date Pickers：
search：
color：
作用：顏色拾取控件
語法：<input type=“color” />
例：創(chuàng)建如圖HTML文檔
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" style="">
<h3>form新增的Input類型演示</h3>
<p>請(qǐng)輸入email：<input type="email" name="email"></p>
<p>請(qǐng)輸入電話：<input type="tel" name="telephone"></p>
<p>請(qǐng)輸入search ：<input type="search" name="search"></p>
<p>請(qǐng)輸入網(wǎng)址：<input type="url" name="homepage"></p>
<p>請(qǐng)輸入range：
<input type="range" name="age" min="10" max="50" value=13 onchange="ageDisplay.value=value">
<output id="ageDisplay">13</output>
</p>
<p>請(qǐng)輸入number：<input type="number" name="quantity" min="1" max="50" value="20"></p>
<p>請(qǐng)輸入日期: <input type="date" name="user_date" /></p>
<p>請(qǐng)輸入顏色：<input type="color" name="my_color"></p>
<input type="submit">
</form>
</body>
</html>
（3）HTML5新的表單元素
datalist：
提示：option元素永遠(yuǎn)都要設(shè)置value屬性歉甚。
datalist與select比較：
select下拉菜單中的選項(xiàng)万细，用戶只能選擇但不能自己添加。
datalist不僅可以供用戶選擇纸泄，用戶還可以自己輸入赖钞，而且datalist還可以達(dá)到模糊匹配的效果，使用很方便聘裁。
datalist與select比較效果圖：
datalist與select比較代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>select與datalist的比較</title>
</head>
<body>
<span>datalist：</span>
<input type="text" list="addr" />
<datalist id="addr">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="杭州">杭州</option>
</datalist>
<br />
<span>select：</span>
<select>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="杭州">杭州</option>
</select>
</body>
</html>
keygen：
output：
3. HTML5多媒體元素
- audio元素專門用來播放網(wǎng)絡(luò)上的音頻數(shù)據(jù)雪营。
- viedo元素專門用來播放網(wǎng)絡(luò)上的視頻或電影。
使用這兩個(gè)元素衡便，不需要使用其他任何插件献起。
video和audio元素具有的屬性
| 屬性 | 屬性描述 |
|---|---|
| src | 音頻或視頻文件的路徑 |
| width | Video獨(dú)有，定義video元素的寬度 |
| height | Video獨(dú)有镣陕，定義video元素的高度 |
| autoplay | 文件是否自動(dòng)播放征唬，取值為autoplay或false |
| controls | 文件是否顯示控制面板，如要顯示茁彭，取值為controls |
| loop | 控制文件循環(huán)播放的次數(shù)，取值true扶歪、false理肺、具體整數(shù) |
| poster | Video獨(dú)有摄闸，當(dāng)視頻不可用時(shí)，可以使用該元素向用戶展示一副替代的圖片 |
| preload | preload屬性妹萨，該屬性用于指定視頻或音頻數(shù)據(jù)是否加載年枕，如果使用預(yù)加載，則瀏覽器會(huì)預(yù)先將視頻或音頻數(shù)據(jù)進(jìn)行緩沖乎完，加快播放速度熏兄，有3個(gè)屬性值：none、 metadata树姨、 auto; |
目前瀏覽器對(duì)video元素與audio元素的支持情況
| 瀏覽器 | 支持情況 |
|---|---|
| Chrome | 3.0及以上版本支持 |
| Fixfox | 3.5及以上版本支持 |
| IE | 9.0及以上版本支持 |
| Opera | 10.5及以上版本支持 |
| Safari | 3.2及以上版本支持 |
例：audio元素實(shí)例演示摩桶。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background: cadetblue">
<h2>請(qǐng)欣賞一首勵(lì)志歌曲</h2>
<audio src=" audio/黃家駒 - 海闊天空.mp3" controls="controlss" autoplay="autoplay" loop="true">
<!--多源音頻文件引入格式 -->
<source src=“video/我相信.ogg ">
<source src=“video/我相信.wav">
</audio>
</div>
</body>
</html>
例：video元素用法舉例，源程序代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="400px" height="300px" controls=”controls” src="video/我相信.mp4">
<!--多源視頻文件引入格式 -->
<source src="video/我相信.mp4" type="video/mp4"></source>
<source src="video/我相信.mp4.ogv" type="video/ogg"></source>
<source src="video/我相信.mp4.webm" type="video/webm"></source>
<!--回退策略-->
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
當(dāng)前瀏覽器不支持 video直接播放帽揪，點(diǎn)擊這里下載視頻：<a href="myvideo.webm">下載視頻</a>
</video>
</body>
</html>
