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