HTML5新增屬性
document
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
HTML5
<!DOCTYPE html>
2、字元設定
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">: HTML與XHTML中建議寫法
<meta charset="UTF-8" />： HTMl5中建議寫法
3、常用新標籤
w3c手冊中文官網： http://www.w3school.com.cn/
-
header：定義文件的頭部區域
-
nav：定義導航連結的部分
-
footer：定義section或document的頁尾
-
article：定義頁面獨立的內容區域
-
section：定義文件的節（section、區段）
-
aside：定義頁面的側邊欄內容
<header>定義網頁的頭部 頁首</header> <nav>定義導航連結部分</nav> <section>定義區域</section> <article>定義文章</article> <aside>定義側邊欄</aside> <footer>定義網頁的底部 頁尾</footer>
-
datalist：定義選項列表，與input結合使用
<!-- input使用list屬性 --> <input type="text" value="輸入明星" list="star"/> <!-- datalist使用id屬性，list屬性與id屬性的值一致，表示與input形成連結 --> <datalist id="star"> <option>張學友</option> <option>張韶涵</option> <option>張敬軒</option> <option>孫燕姿</option> <option>孫悅</option> <option>張碧晨</option> </datalist>
-
fieldset：可將表單內的相關元素分組打包，與legend搭配使用
<fieldset>
<legend>登入頁面</legend> <!-- 外邊框的標題 -->
使用者名稱：<input type="text"><br><br>
密 碼：<input type="password">
</fieldset>
-
mark：用於定義帶有記號的文字。在需要突出顯示文字時可使用 <mark> 標籤。
<p>這是一個段落，中間的<mark>文字</mark>需要標記</p>注意：IE 8及之前的版本不支援mark標籤。
-
meter：定義度量衡，僅用於已知最大和最小值的度量。比如：磁碟使用情況，查詢結果的相關性等。不能當做進度條使用。
-
min：規定範圍最小值
-
max：規定範圍最大值
-
value：規定度量的當前值，是必須的屬性。可以用數值表示
-
low：範圍界定的最低值，需大於min、小於等於(min+max)/2
-
high：範圍界定的最大值，需小於max、大於等於(min+max)/2
注意：IE瀏覽器不支援meter標籤。
-
<meter min="0" max="10" value="6"></meter> <br>
<!-- value的值超過high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>
<!-- value的值在low與high之間 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>
<!-- value的值低於low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>
-
progress：定義執行中的任務進度，通常與JavaScript結合使用來顯示當前的任務進度。不能作為度量值使用
<progress value="20" max="100"></progress>
4、新增的input type屬性值
| 型別 | 含義 | 使用示例 |
|---|---|---|
| url | 輸入url格式，如：http://www.baidu.com | <input type="url"> |
| number | 輸入數字格式，只能是數字 | <input type="number"> |
| tel | 電話號碼(不限制輸入只能位數字) | <input type="tel"> |
| search | 搜尋框 | <input type="search"> |
| range | 自由拖動滑塊 | <input type="range"> |
| time | 小時分鐘 | <input type="time"> |
| 輸入郵箱格式，如：[email protected] | <input type="email"> | |
| date | 年月日 | <input type="date"> |
| month | 年月 | <input type="month"> |
| week | 星期 年 | <input type="week"> |
| color | 顏色 | <input type="color"> |
| hidden/show | 定義表單隱藏/顯示 | <input type="hidden"> |
tel: 用於讓使用者輸入和編輯電話號碼, 在提交表格之前，輸入值不會被自動驗證為特定格式，因為世界各地的電話號碼格式差別很大。儘管 tel 型別的輸入在功能上和 text 輸入一致，但在手機上 — 可能會選擇提供為輸入電話號碼而優化的自定義鍵盤。使用電話號碼的特定輸入型別也使新增自定義驗證和處理電話號碼更方便。
<form action="">
郵箱：<input type="email"><br><br>
url： <input type="url"><br><br>
數字：<input type="number"><br><br>
電話：<input type="tel"><br><br>
搜尋：<input type="search"><br><br>
滑塊：<input type="range"><br><br>
時分：<input type="time"><br><br>
年月日：<input type="date"><br><br>
年月：<input type="month"><br><br>
星期：<input type="week"><br><br>
顏色：<input type="color"><br><br>
<input type="submit">
</form>hidden/show屬性的使用：
<script type="text/javascript">
var flag = true;
function hide() {
var input = document.getElementById("myinput");
var btn = document.getElementById("btn")
if(flag) {
input.type = "hidden";
btn.innerHTML = "顯示";
flag = false;
} else {
input.type = "show";
btn.innerHTML = "隱藏";
flag = true;
}
}
</script>
<button id="btn" onclick="hide()">隱藏</button><br>
<input id="myinput" name="myinput" type="show" value="小明">
5、input常用新屬性
| 屬性 | 用法 | 含義 |
|---|---|---|
| placeholder | <input type="text" placeholder="請輸入使用者名稱" > | 佔位符 用於提示使用者輸入，當用戶輸入資料時，提示資訊會自動消失 |
| autofocus | <input type="text" autofocus> | 規定當頁面載入時input元素應該自動獲得焦點 |
| multiple | <input type="file" multiple> | 多檔案上傳 |
| autocomplete | <input type="text" autocomplete="off"> | 規定表單是否應該啟用自動完成功能，有兩個值分別是on和off，on表示記錄已經輸入的值 。條件是：1.autocomplete首先需要提交 2.這個表單必須給name值(相應的input框必須有name屬性) |
| required | <input type="text" required> | 必填項，內容不能為空 |
| accesskey | <input type="text" accesskey="s"> | 規定啟用（使元素獲得焦點）元素的快捷鍵，採用alt+字母的形式 |
<!-- placeholder表示佔位符，用於提示使用者輸入，當用戶輸入資料時，這個提示會自動消失
autofocus表示頁面載入時，input自動獲得焦點 -->
使用者名稱：<input type="text" placeholder="請輸入使用者名稱" autofocus><br>
<!-- multiple表示可以選擇多檔案上傳 -->
上傳頭像：<input type="file" multiple><br>
<h4>自動記錄完成</h4>
<!--1.autocomplete首先需要提交按鈕
2.這個表單必須給name值 -->
<form action="">
<!-- autocomplete表示記錄之前輸入的資訊，完成自動輸入功能 -->
姓名：<input type="text" autocomplete name="username"><br>
<input type="submit">
</form><br>
<form action="">
<!-- required 表示必填項，內容不能為空
accesskey 表示使用alt+字母可以讓input表單快速獲得焦點-->
暱稱：<input type="text" required accesskey="s"><br>
<input type="submit">
</form>
6、綜合案例
<fieldset>
<legend>學生檔案</legend>
<label>姓名：<input type="text" required placeholder="請輸入學生名字"></label><br /><br />
<label>手機號：<input type="tel"></label> <br /><br />
<label>郵箱：<input type="email"></label> <br /><br />
<label>所屬專業：<input type="text" placeholder="請選擇專業" list="subject"></label>
<datalist id="subject">
<option>Java</option>
<option>HTML5</option>
<option>php</option>
<option>android</option>
</datalist><br /><br />
<label>出生年月：<input type="date"> </label><br /><br />
<label>成績：<input type="number"> </label><br /><br />
<input type="submit"> <input type="reset">
</fieldset>
7、多媒體標籤
7.1 多媒體embed(棄用)
embed可以用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3、MP4等，src為音訊或視訊檔案的路徑，可以是相對路徑或絕對路徑。
<!-- 播放音訊檔案 -->
<embed width="300px" height="50px" src="./music/loveyou.mp3"/>
<!-- 播放優酷視訊 -->
<embed src='http://vali-g1.cp31.ott.cibntv.net/youku/69755558eb34271be0fed6367/03000801006062DC4A2E325DA76967DB170C24-06D3-4178-A887-3ED248FDB682.mp4?sid=161906583800010007087_00_B685bff2637e02d0311d387bfea2f578d&sign=917f2102ab608683eda167c340607e44&ctype=50&si=183&psid=151f4ff1a12e8794367d4a3b9e5c17a443346' width='480' height='400'></embed>| 屬性 | 值 | 描述 |
|---|---|---|
| src | url | 要播放的視訊音訊地址 |
| width | px | 控制面板的寬度 |
| height | px/數值 | 控制面板的高度 |
7.2 多媒體audio
audio支援三種音訊格式：
-
MP4：帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案
-
WebM： 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案
-
Ogg：帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| IE | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | yes | yes |
| Opera | yes | yes | yes |
HTML5通過<audio>標籤來解決音訊播放的問題。<audio> 標籤在 HTML 4 中是無效的，頁面無法通過 HTML 4 驗證。必須把音訊檔案轉換為不同的格式。<audio> 元素在老式瀏覽器中不起作用。
常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| controls | controls | 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕 |
| loop | loop | 如果出現該屬性，則每當音訊結束時重新開始播放 |
| src | url | 要播放的音訊的url |
| muted | muted | 靜音播放 |
| autoplay | autoplay | 準備就緒 自動播放（各大瀏覽器已經禁用了) |
在<audio> 與 </audio> 之間你需要插入瀏覽器不支援的<audio>元素的提示文字 。
<audio> 元素允許使用多個 <source> 元素. <source> 元素可以連結不同的音訊檔案，瀏覽器將使用第一個支援的音訊檔案。
<audio controls>
<source src="./music/loveyou.mp3">
<source src="./music/loveyou.ogg">
<source src="./music/loveyou.wav">
您的瀏覽器不支援 HTML5 audio 標籤。
</audio>IE瀏覽器8及以上版本支援
7.3 多媒體video
當前video元素支援的三種格式，也可以原生的支援視訊格式的檔案的播放，當然，支援的格式是有限的
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | yes | no | no |
| Chrome | yes | yes | yes |
| Firefox | yes | yes | yes |
| Safari | yes | no | no |
| Opera | yes | yes | yes |
現在大多數視訊是通過外掛（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 video 元素來包含視訊的標準方法。
<video> 元素提供了播放、暫停和音量控制元件來控制視訊。同時 <video> 元素也提供了 width 和 height 屬性控制視訊的尺寸.如果設定的高度和寬度，所需的視訊空間會在頁面載入時保留。如果沒有設定這些屬性，瀏覽器不知道大小的視訊，瀏覽器就不能在載入時保留特定的空間，頁面就會根據原始視訊的大小而改變。
<video> 元素支援三種視訊格式：
-
MP4：帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案
-
WebM： 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案
-
Ogg：帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
<video width="420" controls>
<source src="./music/mov_bbb.mp4" type="video/mp4">
<source src="./music/mov_bbb.ogg" type="video/ogg">
<source src="./music/mov_bbb.webm" type="video/webm">
您的瀏覽器不支援 HTML5 video 標籤。
</video>
Source標籤用於給媒體（因為audio標籤同樣可以包含此標籤，所以這兒用媒體，而不是視訊）指定多個可選擇的（瀏覽器最終只能選一個）檔案地址，且只能在媒體標籤沒有使用src屬性時使用。
瀏覽器按source標籤的順序檢測標籤指定的視訊是否能夠播放（可能是視訊格式不支援，視訊不存在等等），如果不能播放，換下一個。此方法多用於相容不同的瀏覽器。Source標籤本身不代表任何含義，不能單獨出現。
此標籤包含src、type、media三個屬性。
src屬性：用於指定媒體的地址，和video標籤的一樣。
瞭解Type屬性：用於說明src屬性指定媒體的MIME型別，幫助瀏覽器在獲取媒體前判斷是否支援此類別的媒體格式。
瞭解Media屬性：用於說明媒體在何種媒介中使用，不設定時預設值為all，表示支援所有媒介。你想到<style>標籤的media屬性了麼？一樣一樣一樣的。
video常見屬性 (西瓜視訊 -- 庫 -- API)
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視訊就緒自動播放(谷歌瀏覽器需要新增muted來解決自動播放的問題) |
| controls | controls | 向用戶顯示播放控制元件 |
| width | px | 設定播放器的寬度 寫不寫px單位都沒影響 |
| height | px | 設定播放器的高度 寫不寫px單位都沒影響 |
| loop | loop | 播放完是否繼續播放該視訊，迴圈播放 |
| preload | auto(預先載入視訊) none（不應載入視訊） metadata: 提示儘管作者認為使用者不需要檢視該視訊，不過抓取元資料（比如：長度）還是很合理的。 | 規定是否預載入視訊，如果有了autoplay，就忽略該屬性 |
| src | url | 視訊url地址 |
| poster | imgurl圖片路徑 | poster屬性用於指定一張圖片，在當前視訊資料無效時顯示（預覽圖）。視訊資料無效可能是視訊正在載入，可能是視訊地址錯誤 可能是轉圈圈等待 |
| muted | muted | 載入視訊靜音播放 |
preload不設定值時，則採用預設值，預設值就是瀏覽器定義的了（即，不同瀏覽器會選擇自己的預設值），即使規範建議設定為 metadata。
Chrome：preload預設值為auto，載入部分視訊；
FireFox：preload預設值為空，不載入視訊；
IE：preload預設值為metadata，載入視訊（貌似是全部）；
Safari：preload預設值為auto，載入視訊（大小未知）；
preload設為none時，只有IE會載入視訊
解決Chrome瀏覽器無法自動播放視訊的問題
谷歌瀏覽器做了改革，不再允許自動播放音訊和視訊。Chrome只允許使用者對網頁進行主動觸發後才可自動播放音訊和視訊
<video autoplay></video> 所以好多需求會要求在網頁背後播放一段音訊檔案這種需求就頭疼了，解決方案
比較常規的做法是，為video標籤設定muted屬性，使它靜音，這樣視訊就能自動播放了，但是沒有聲音。然後待使用者在網頁上有了任意觸發後，再將muted去掉。或者讓使用者手動去開啟音訊（騰訊視訊就是這樣做的）。
MIME型別(瞭解)
什麼是MIME型別
在把輸出結果傳送到瀏覽器上的時候，瀏覽器必須啟動應用程式來處理這個輸出文件。這可以通過多種型別MIME（多功能網際郵件擴充協議）來完成。在HTTP中，MIME型別被定義在Content-Type header中。
例如，假設你要傳送一個Microsoft Excel檔案到客戶端。那麼這時的MIME型別就是“application/vnd.ms-excel”。在大多數實際情況中，這個檔案然後將傳送給Execl來處理（假設我們設定Execl為處理特殊MIME型別的應用程式）。在ASP中，設定MIME型別的方法是通過Response物件的ContentType屬性。
多媒體檔案格式MIME
最早的HTTP協議中，並沒有附加的資料型別資訊，所有傳送的資料都被客戶程式解釋為超文字標記語言HTML 文件，而為了支援多媒體資料型別，HTTP協議中就使用了附加在文件之前的MIME資料型別資訊來標識資料型別。
MIME意為多目Internet郵件擴充套件，它設計的最初目的是為了在傳送電子郵件時附加多媒體資料，讓郵件客戶程式能根據其型別進行處理。然而當它被HTTP協議支援之後，它的意義就更為顯著了。它使得HTTP傳輸的不僅是普通的文字，而變得豐富多彩。
每個MIME型別由兩部分組成，前面是資料的大類別，例如聲音audio、圖象image等，後面定義具體的種類。
常見的MIME型別
超文字標記語言文字 .html,.html text/html
普通文字 .txt text/plain
RTF文字 .rtf application/rtf
GIF圖形 .gif image/gif
JPEG圖形 .ipeg,.jpg image/jpeg
au聲音檔案 .au audio/basic
MIDI音樂檔案 mid,.midi audio/midi,audio/x-midi
RealAudio音樂檔案 .ra, .ram audio/x-pn-realaudio
MPEG檔案 .mpg,.mpeg video/mpeg
AVI檔案 .avi video/x-msvideo
GZIP檔案 .gz application/x-gzip