HTML5-有解無憂

1. HTML5的新特性

HTML5的新增特性主要是針對以前的不足，添加了一些新標簽、新的表單和新的表單屬性等，

1.1 HTML5新增的語意化標簽

<header>：頭部標簽，

<nav>：導航標簽，

<article>：內容標簽，

<section>：定義檔案某個區域，

<aside>：側邊欄標簽，

<footer>：尾部標簽，

注意：

這種語意化標準主要是針對搜索引擎的，在新標簽頁面中可以使用多次，在IE9中，需要把這些元素轉換為塊級元素，

1.2 HTML5新增多媒體標簽

使用它們可以很方便的在頁面中嵌入音頻和視頻，而不在去使用flash和其他瀏覽器插件，

HTML5在不使用插件的情況下，也可以原生的支持視頻格式檔案的播放，當然，支持的格式是有限的，

1.2.1 視頻<video>

視頻<audio>元素支持三種音頻格式：

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 從 Firefox 21 版本開始 Linux 系統從 Firefox 30 開始	YES	YES
Safari	YES	NO	NO
Opera	YES 從Opera 25版本開始	YES	YES

語法：

<source src="https://www.cnblogs.com/cherry0420/p/move.ogg" type="video/ogg" >
<source src="https://www.cnblogs.com/cherry0420/p/move.mp4" type="video/mp4">
您的瀏覽器暫不支持 svidel＞標簽播放視頻
</ video >

視頻<video>——常見屬性

屬性	值	描述
autoplay	autoplay	視頻就緒自動插放（谷歐瀏覽器需要添加muted來解決自動插放問題），
controls	controls	向用戶量示播放控制元件，
width	pixels(像素）	設定播放器寬度，
height	pixels(像素）	設定插放噐高庋，
loop	loop	播放完是否繼續播放該視頻，回圈播放，
preload	auto（預先加載視頻) none(不應加載視頻）	規定是否預加載視頻(如果有了autoplay 就忽路該屬性），
src	url	視頻ur地址，
poster	Imgurl	加載等待的畫面圖片，
muted	muted	靜音播放，

1.2.2 音頻<audio>

<audio>元素支持三種音頻格式：

瀏覽器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

語法：

< audio controls="controls">

<source src="https://www.cnblogs.com/cherry0420/p/happy.ogg" type="audio/ogg">
您的瀏覽器暫不支持<audio>標簽，
< /audio>

音頻<audio>——常見屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放，
controls	controls	如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕，
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放，
src	url	要播放的音頻的 URL，

谷歌劉覽器把音頻和視頻自動播放禁止了，

1.3 HTML5 新增的 input 型別

屬性值	說明
type="email"	限制用戶輸入必須為Email型別，
type="url"	限制用戶輸入必須為URL型別，
type="date"	限制用戶輸入必須為日期型別，
type="time"	限制用戶輸入必須為時間型別，
type="month"	限制用戶輸入必須為月型別，
type="week"	限制用戶輸入必須為周型別，
type="number"	限制用戶輸入必須為數字型別，
type="tel"	手機號碼，
type="search"	搜索框，
type="color"	生成一個顏色選擇表單，

1.4 HTML5 新增的表單屬性

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能為空，必填，
placeholder	提示文本	表單的提示資訊，存在默認值將不顯示，設定方式修改placeholder里面的字體顏色： input::placeholder { color: pink; }
autofocus	autofocus	自動聚焦屬性，頁面加載亮成自動聚焦到指定表單，
autocomplete	off / on	當用戶在欄位開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在欄位中填寫的選項，默認已經打開，如autocomplete=”on “，關閉 autocomplete ='off”需要放在表單內，同時加上name 屬性，同時成功提交，
multiple	multiple	可以多選檔案提交，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/553251.html

標籤：HTML5

上一篇：HTML中meta標簽的那些屬性

下一篇：返回列表