3.2、HTML5 新的表單屬性
3.2.1、*form / input autocomplete 屬性
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。
提示: autocomplete 屬性有可能在 form元素中是開啟的，而在input元素中是關閉的。
注意: autocomplete 適用于 <form> 標簽，以及以下類型的 <input> 標簽：text, search, url, tel, email, password, datepickers, range 以及 color。
HTML form 中開啟 autocomplete (一個 input 字段關閉 autocomplete )：
<!--
在整個表單中，我們在輸入框中提交的歷史數據，都會自動提示
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
關于自動補全，一定是分場景的：
如果是注冊，我們肯定不需要自動補全功能
如果是登錄，用戶名可以開啟自動補全
如果autocomplete="off"添加給form表單，那么表單里面的所有元素都關閉自動補全
--> <!-- <form action="" autocomplete="off"> --> <form action="">
用戶名: <input type="text" name="username" autocomplete="off"> <br>
密 碼: <input type="password" name="password"><br>
姓 名: <input type="text" name="name"><br> <button type="submit">提交</button> </form>1234567891011121314151617
3.2.2、*form novalidate 屬性
novalidate 屬性是一個 boolean(布爾) 屬性.
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
無需驗證提交的表單數據：
<!-- novalidate提交信息時不會再進行校驗 --> <form action="#" method="get" novalidate autocomplete="off">
郵箱：<input type="email" name="email"><br>
URL：<input type="url" name="url"><br> <button type="submit">提交</button> </form>123456
3.2.3、*input placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
簡短的提示在用戶輸入值前會顯示在輸入域上。
注意: placeholder 屬性適用于以下類型的 <input>標簽：text, search, url, tel, email 以及 password。
3.2.4、*input required 屬性
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
注意:required 屬性適用于以下類型的 <input>標簽：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。
3.2.5、input step 屬性
step 屬性為輸入域規定合法的數字間隔。
如果 step=“3”，則合法的數是 -3,0,3,6 等
提示：step 屬性可以與 max 和 min 屬性創建一個區域值.
**注意：**step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
3.2.6、input autofocus 屬性
autofocus 屬性是一個 boolean 屬性.
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
<!--
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
如果我們使用正則校驗，required其實可以不使用。
這個屬性也是重要的，原因是很多框架中還在用這個屬性
step 屬性為輸入域規定合法的數字間隔。
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
--> <form action="">
用戶名: <input type="text" name="username" autocomplete="off" placeholder="請輸入用戶名"> <br>
密 碼: <input type="password" name="password" placeholder="請輸入密碼" autofocus required><br>
姓 名: <input type="text" name="name" placeholder="請輸入姓名"><br> <button type="submit">提交</button> </form>123456789101112131415
)]
3.2.7、input form 屬性
form 屬性規定輸入域所屬的一個或多個表單。
**提示:**如需引用一個以上的表單，請使用空格分隔的列表。
位于form表單外的 input 字段引用了 HTML form (該 input 表單仍然屬于form表單的一部分):
<form action="#" id="form1">
First name: <input type="text" name="fname"><br> <input type="submit" value="提交"></form>Last name: <input type="text" name="lname" form="form1">123456
3.2.8、input formaction 屬性
formaction 屬性用于描述表單提交的URL地址.
formaction 屬性會覆蓋<form>元素中的action屬性.
注意: formaction 屬性用于 type=“submit” 和 type=“image”.
以下HTMLform表單包含了兩個不同地址的提交按鈕：
<!-- input formaction 屬性
formaction 屬性用于描述表單提交的URL地址.
點擊新提交頁面會轉跳到百度頁面提交內容
--> <form action="#">
用戶名：<input type="text" name="id"><br>
密碼：<input type="password" name="pwd"><br> <input type="submit"> <input type="submit" value="新提交" formaction="https://www.baidu.com/"> </form>12345678910
3.2.9、input formenctype 屬性
formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method=“post” 表單)
formenctype 屬性覆蓋 form 元素的 enctype 屬性。
注意: 該屬性與 type=“submit” 和 type=“image” 配合使用。
第一個提交按鈕已默認編碼發送表單數據，第二個提交按鈕以 “multipart/form-data” 編碼格式發送表單數據:
<!-- input formenctype 屬性
formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)
提交圖片時一般用formenctype="multipart/form-data"
--> <form action="#" method="post">
用戶名：<input type="text" name="id"><br>
密碼：<input type="password" name="pwd"><br> <input type="submit"> <input type="submit" value="新提交" formenctype="multipart/form-data"> </form>12345678910
3.2.10、input formmethod 屬性
formmethod 屬性定義了表單提交的方式。
formmethod 屬性覆蓋了 <form>元素的 method 屬性。
注意: 該屬性可以與 type=“submit” 和 type=“image” 配合使用。
重新定義表單提交方式實例:
<!-- input formmethod 屬性
formmethod 屬性定義了表單提交的方式。
點擊新提交，頁面會以post的提交方式提交
--> <form action="#">
用戶名：<input type="text" name="id"><br>
密碼：<input type="password" name="pwd"><br> <input type="submit"> <input type="submit" value="新提交" formmethod="post"> </form>12345678910
3.2.11、input formnovalidate 屬性
novalidate 屬性是一個 boolean 屬性.
novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。
formnovalidate 屬性會覆蓋 <form> 元素的novalidate屬性.
注意: formnovalidate 屬性與 type=“submit” 一起使用
兩個提交按鈕的表單(使用與不適用驗證 ):
<!-- input formnovalidate 屬性
novalidate屬性描述了 `<input>` 元素在表單提交時無需被驗證。
注意: formnovalidate 屬性與 type="submit" 一起使用
點擊新提交 type="email"不會進行校驗
--> <form action="#">
郵箱：<input type="email" name="e-mail"><br> <input type="submit"> <input type="submit" value="新提交" formnovalidate> </form>12345678910
3.2.12、input height 和 width 屬性
height 和 width 屬性規定用于 image 類型的 <input>標簽的圖像高度和寬度。
注意: height 和 width 屬性只適用于 image 類型的<input>標簽。
提示:圖像通常會同時指定高度和寬度屬性。如果圖像設置高度和寬度，圖像所需的空間 在加載頁時會被保留。如果沒有這些屬性， 瀏覽器不知道圖像的大小，并不能預留 適當的空間。圖片在加載過程中會使頁面布局效果改變 （盡管圖片已加載）。
定義了一個圖像提交按鈕, 使用了 height 和 width 屬性:
<!-- input height 和 width 屬性
注意: height 和 width 屬性只適用于 image 類型的<input>標簽。 --> <form action="#"> <input type="image" src="../images/login.png" width="100" height="50"> </form>12345
3.2.13、*input list 屬性
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
<!--
datalist：規定輸入域的選項列表。必須和input輸入框結合使用
input標簽的list屬性值 和 datalist的id屬性值保持一致
列表項是由option來定義的
當我們在input輸入框輸入內容的時候，它會匹配數據列表中的列表項。由option的value來進行匹配。
--> <input type=“text” name=”data” list=”dlist”> <datalist id=”dlist”> <option value="CAD">CAD制圖是一款制圖軟件，設計人員利用計算機及其圖形設備進行設計工作</option> <option value="HTML5">HTML5是構建Web內容的一種語言描述方式。</option> <option value="JAVAscript">Javascript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。</option> <option value=".NET">.NET是一種用于構建多種應用的免費開源開發平臺，</option> <option value="JAVA">Java 是一個通用術語，用于表示 Java 軟件及其組件</option> </datalist>1234567891011121314151617
3.2.14、input multiple 屬性
multiple 屬性是一個 boolean 屬性.
multiple 屬性規定<input>元素中可選擇多個值。
注意: multiple 屬性適用于以下類型的 <input>標簽： file
<form action="#"> <input type="file" name="file" multiple><br> <input type="submit"> </form>1234
3.2.15、*input pattern 屬性
pattern 屬性描述了一個正則表達式用于驗證 <input>元素的值。
注意:pattern 屬性適用于以下類型的 <input>標簽: text, search, url, tel, email, 和 password.
提示： 是用來全局 title 屬性描述了模式.
提示： 在我們的 Javascript 教程中學習到有關正則表達式的內容
<!-- input pattern 屬性
pattern 屬性描述了一個正則表達式用于驗證 <input>元素的值。 --> <form action="#"> <input type="tel" name="phone" pattern="^(1[3456789])\d{9}$" title="請輸入正確的手機號"><br> <input type="submit"> </form>123456
3.2.16、*input min 和 max 屬性
min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束）。
注意: min、max 和 step 屬性適用于以下類型的 <input> 標簽：date pickers、number 以及 range。
<input> 元素最小值與最大值設置:
<!-- input min 和 max 屬性
min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（約束）。 --> <form action="#"> <input type="date" min="1940-10-01"> <input type="submit"> </form>123456
四、HTML5多媒體標簽
4.1、HTML5 Video(視頻)
很多站點都會使用到視頻，HTML5 提供了展示視頻的標準。
直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
4.1.1、瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video>元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video>元素。
4.1.2、HTML5 (視頻)- 如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
<!-- autoplay如果出現該屬性，則視頻在就緒后馬上播放。 --> <!-- controls屬性：添加播放控制及音量控制功能欄。 --> <!-- loop屬性·：當媒介文件完成播放后再次開始播放。(循環播放) --> <!-- muted屬性：視頻的音頻輸出為靜音。 --> <!-- poster屬性：規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。(視頻封面) --> <!-- width 和 height可以設置視頻的大小 --><video src="/video/華麗耀眼的白孔雀.mp4" width="200" height="400" controls loop muted poster="../images/music.jpg"></video>123456789
<video>元素提供了 播放、暫停和音量控件來控制視頻。
同時 <video>元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video>與</video>標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
<video>元素支持多個 <source>元素. <source>元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
<video width="320" height="240" controls>
<!-- type="video/mp4" 是mimetype類型 --> <!-- 如果瀏覽器不支持mp4格式，則會顯示ogg格式 --> <source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> </video>123456
4.1.3、視頻格式與瀏覽器的支持
當前， <video>元素支持三種視頻格式： MP4, WebM, 和 Ogg:
| 瀏覽器 | MP4 | WebM | Ogg |
|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (從 Opera 25 起) | YES | YES |
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
視頻格式
| 格式 | MIME-type |
|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
什么是 MIME TYPE？
首先，我們要了解瀏覽器是如何處理內容的。在瀏覽器中顯示的內容有 HTML、有 XML、有 GIF、還有 Flash ……那么，瀏覽器是如何區分它們，決定什么內容用什么形式來顯示呢？答案是 MIME Type，也就是該資源的媒體類型。
媒體類型通常是通過 HTTP 協議，由 Web 服務器告知瀏覽器的，更準確地說，是通過 Content-Type 來表示的，例如:Content-Type: text/HTML
表示內容是 text/HTML 類型，也就是超文本文件。為什么是“text/HTML”而不是“HTML/text”或者別的什么？MIME Type 不是個人指定的，是經過 ietf 組織協商，以 RFC 的形式作為建議的標準發布在網上的，大多數的 Web 服務器和用戶代理都會支持這個規范 (順便說一句，Email 附件的類型也是通過 MIME Type 指定的)。
通常只有一些在互聯網上獲得廣泛應用的格式才會獲得一個 MIME Type，如果是某個客戶端自己定義的格式，一般只能以 application/x- 開頭。
XHTML 正是一個獲得廣泛應用的格式，因此，在 RFC 3236 中，說明了 XHTML 格式文件的 MIME Type 應該是 application/xHTML+XML。
當然，處理本地的文件，在沒有人告訴瀏覽器某個文件的 MIME Type 的情況下，瀏覽器也會做一些默認的處理，這可能和你在操作系統中給文件配置的 MIME Type 有關。比如在 Windows 下，打開注冊表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主鍵，你可以看到所有 MIME Type 的配置信息。
more:https://www.cnblogs.com/jsean/articles/1610265.html
4.1.4、video標簽相關屬性
| 屬性 | 值 | 描述 |
|---|
| muted | muted | 如果出現該屬性，視頻的音頻輸出為靜音。 |
| autoplay | autoplay | 如果出現該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 添加播放控制及音量控制功能欄。 |
| height | Pixels | 指定播放器的高度，以pixel為單位。 |
| loop | loop | 如果指定，視頻將重復播放。 |
| poster | url | 指定視頻的預覽圖。 |
| preload | auto
metadata
none | 如果指定，視頻會在加頁面加載過程中被加載。當autoplay被指定時，會被忽略。
auto - 當頁面加載后載入整個音頻
meta - 當頁面加載后只載入元數據
none - 當頁面加載后不載入音頻 |
| src | url | 目標視頻的URL。 |
| width | pixels | 指定播放器的寬度，以pixel為單位。 |
4.2、HTML5 Audio(音頻)
用法大致都和video相同
HTML5 提供了播放音頻文件的標準。
直到現在，仍然不存在一項旨在網頁上播放音頻的標準。
今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio>元素。
4.2.1、瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio>元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio>元素.
4.2.2、HTML5 Audio - 如何工作
如需在 HTML5 中播放音頻，你需要使用以下代碼：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>12345
control 屬性供添加播放、暫停和音量控件。
在<audio>與 </audio>之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio>元素允許使用多個 <source>元素. <source>元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件
4.2.3、音頻格式及瀏覽器支持
目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:
| 瀏覽器 | MP3 | Wav | Ogg |
|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
音頻格式的MIME類型
| Format | MIME-type |
|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
4.2.4、Audio標簽屬性
| 屬性 | 屬性值 | 描述 |
|---|
| autoplay | autoplay | 如果指定, 音頻會在準備好后立即播放. |
| controls | controls | 顯示播放控制工具欄… |
| loop | loop | 如果指定，則循環播放. |
| muted | muted | 如果出現該屬性，則音頻輸出為靜音。 |
| preload | auto
metadata
none | 如果指定，視頻會在加頁面加載過程中被加載。當autoplay被指定時，會被忽略。
auto - 當頁面加載后載入整個音頻
meta - 當頁面加載后只載入元數據
none - 當頁面加載后不載入音頻 |
| src | url | 目標音頻的URL. |
4.3、source標簽
video和audio元素的子元素，可指定多個文件來源，用來解決瀏覽器的兼容問題
如果使用了source元素，則不可以在video和audio中設置src屬性
<source>標簽為媒介元素（比如 <video>和 <audio>）定義媒介資源。
<source>標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
五、其他常用HTML5新標簽
5.1、HTML5文本格式化標簽
<time>標簽定義日期或時間，或者兩者;
<mark>標簽定義帶有記號的文本。請在需要突出顯示文本時使用 < mark > 標簽。
<ruby>在文字上方注音，不常用，主流瀏覽器基本都支持,需要使用rt標簽定義注音，例如:
<ruby>饕餮<rt>tao tie</rt></ruby>1
5.2、HTML5度量條
定義已知范圍或分數值內的標量測量,計數儀表,也被稱為 gauge（尺度）。例子：磁盤用量、查詢結果的相關性，等等。
注釋：<meter>標簽不應用于指示進度（在進度條中）。如果標記進度條，請使用 <progress>標簽。
| 屬性名 | 屬性作用 |
|---|
| value | 規定計量條當前默認顯示值 |
| max | 規定范圍的最大值,默認值為1 |
| min | 規定范圍的最小值,默認值為0 |
| low | 規定被視作低的標準 |
| high | 規定被視作高標準 |
| form | 規定所屬的一個或多個表單 |
| optimum | 定義度量條的最佳標準值，最佳必須在低和高之間 |
<h3>HTML5度量條</h3> <!-- meter 定義度量條 -->
默認：<meter max="100" min="1" value="30"></meter> <br>
低：<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
高：<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
最佳：<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br>123456
5.3、HTML5進度條
<progress>標簽定義運行中的任務進度（進程）。
請將 <progress>標簽與 Javascript 一起使用來顯示任務的進度。
progress元素的屬性
max屬性:規定當前進度的最大值
value屬性:規定進度條當前默認顯示值
form屬性:規定進度條所屬的一個或多個表單
注：max和value屬性的值必須是一個類型數值,可以是小數或整數
<h3>HTML5進度條</h3> <!-- progress 標簽定義運行中的任務進度 --> <progress></progress><br> <progress value="30" max="100"></progress><br> <progress value="0.6" max="1"></progress><br>12345
5.4、HTML5詳情標簽
“details" 元素用于描述有關文檔或文檔片段的詳細信息。
“summary” 元素應該是 “details” 元素的第一個子元素。可以為details定義標題.標題是可見的,用戶點擊標題時,會顯示details中的內容。
details元素的屬性:
open屬性:規定在html頁面中details是可見的
注:目前還不是所有瀏覽器都支持，但是之后肯定會都支持的
<h3>詳情標簽</h3> <!--
details：用于描述有關文檔或文檔片段的詳細信息。
open屬性:規定在html頁面中details是可見的
想要折疊起來的，都包裹在details里面
summary：用來給details添加標題
--> <details> <summary>工作進度報表</summary>
默認：<meter max="100" min="1" value="30"></meter> <br>
低：<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
高：<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
最佳：<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br> </details> <details> <summary>下載進度表</summary> <progress></progress><br> <progress value="30" max="100"></progress><br> <progress value="0.6" max="1"></progress><br> </details>1234567891011121314151617181920
400 186 1886
