您好,登錄后才能下訂單哦!
今天小編給大家分享一下實用的HTML5功能有哪些的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
<output>
標簽表示的運算的結(jié)果。通常,此元素定義一個區(qū)域,該區(qū)域?qū)⒂糜陲@示某些計算得出的文本。
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)"> <input type="number" id="a" value="0"> * <input type="number" id="b" value="0"> = <output name="x" for="a b"></output> </form>
如果您要在客戶端JavaScript中執(zhí)行任何計算,并且希望結(jié)果反映在頁面上,請使用<output>
標記。您不必走動使用即可獲取元素的額外步驟getElementById()。
該<details>
標簽提供隨需應變的細節(jié)給用戶。如果需要按需向用戶顯示內(nèi)容,請使用此標記。默認情況下,小部件是關閉的。打開后,它將展開并顯示其中的內(nèi)容。
該<summary>
標簽使用<details>
來為它指定一個可見的標題。
<details> <summary>Click Here to get the user details</summary> <table> <tr> <th>#</th> <th>Name</th> <th>Location</th> <th>Job</th> </tr> <tr> <td>1</td> <td>Adam</td> <td>Huston</td> <td>UI/UX</td> </tr> </table> </details>
contenteditable
屬性是可以在元素上設置以使內(nèi)容可編輯的屬性。它可與DIV
,P
,UL
等元素一起使用。使用方法如下:
<element contenteditable="true|false"/>
注意,如果
contenteditable
未在元素上設置,則會從其父級繼承該屬性。
<h3> Shoppping List(Content Editable) </h3> <ul class="content-editable" contenteditable="true"> <li> 1. Milk </li> <li> 2. Bread </li> <li> 3. Honey </li> </ul>
可以使span
或div
元素可編輯,并且可以使用css
樣式向其添加任何豐富的內(nèi)容。這將比使用輸入字段處理它更好。試試看!
該<map>
標簽可以幫助定義圖像映射。圖像映射是其中具有一個或多個可單擊區(qū)域的任何圖像。map
標簽與<area>
標簽一起確定可點擊區(qū)域。可點擊區(qū)域可以是矩形,圓形或多邊形區(qū)域中的任意一種。如果未指定任何形狀,它將考慮整個圖像。
<div> <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap"> <map name="circusmap"> <area shape="rect" coords="67,114,207,254" href="elephant.htm"> <area shape="rect" coords="222,141,318, 256" href="lion.htm"> <area shape="rect" coords="343,111,455, 267" href="horse.htm"> <area shape="rect" coords="35,328,143,500" href="clown.htm"> <area shape="circle" coords="426,409,100" href="clown.htm"> </map> </div>
圖像貼圖有其自身的缺點,但是您可以將其用于視覺演示。如何用全家福照片嘗試一下并深入研究個人照片(可能是我們一直以來都懷有的舊照片?。?/p>
使用<mark>
標記突出顯示任何文本內(nèi)容。
<p> 我為何這么帥? <mark>"這該死的魅力"</mark> 是嗎? </p>
您還可以使用CSS
更改突出顯示顏色,標記功能確實能夠做出很多有意思的東西!
mark { background-color: green; color: #FFFFFF; }
這些data-*
屬性用于存儲頁面或應用程序?qū)S玫淖远x數(shù)據(jù)。可以在JavaScript
代碼中使用存儲的數(shù)據(jù)來創(chuàng)建更多的用戶體驗。
data- *屬性由兩部分組成:
屬性名稱不得包含任何大寫字母,并且前綴“ data-”后必須至少長一個字符
屬性值可以是任何字符串
<h3> 你準備好了嗎 </h3> <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> 我有個秘密! </div> <button onclick="reveal()">點擊看我的咪咪</button> function reveal() { let dataDiv = document.getElementById('data-attr'); let value = dataDiv.dataset['customAttr']; document.getElementById('msg').innerHTML = `<mark>${value}</mark>`; }
要在JavaScript中讀取這些屬性的值,可以使用getAttribute()它們的完整HTML名稱(即data-custom-attr),但是該標準定義了一種更簡單的方法:使用dataset屬性。
<datalist>
標簽指定的預先定義的選項列表,并允許用戶添加更多了。它提供了一項autocomplete功能,使您可以提前輸入所需的選項
<form action="" method="get"> <label for="fruit">從列表中選擇你的水果:</label> <input list="fruits" name="fruit" id="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Orange"> <option value="Banana"> <option value="Mango"> <option value="Avacado"> </datalist> <input type="submit"> </form>
與傳統(tǒng)<select>-<option>
標簽有何不同?選擇標記用于從選項中選擇一個或多個項目,您需要瀏覽列表以進行選擇。Datalist是具有自動完成功能的高級功能。
range是給定的一個樣滑塊范圍選擇的輸入類型。
<form method="post"> <input type="range" name="range" min="0" max="100" step="1" value="" onchange="changeValue(event)"/> </form> <div class="range"> <output id="output" name="result"> </output> </div>
sliderHTML5中沒有任何毛病
使用<meter>
標簽測量給定范圍內(nèi)的數(shù)據(jù)。
<label for="home">/home/atapas</label> <meter id="home" value="4" min="0" max="10">2 out of 10</meter><br> <label for="root">/root</label> <meter id="root" value="0.6">60%</meter><br>
不要將<meter>
標簽用于進度指示器,以實現(xiàn)用戶體驗。我們有<Progress>
HTML5 的標記。
<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress>
我們最了解這部分的用法,例如文本,密碼等輸入類型。輸入類型的特殊用法很少,
將輸入字段標記為必填
<input type="text" id="username1" name="username" required>
通過將光標放在輸入元素上來自動將焦點放在輸入元素上。
<input type="text" id="username2" name="username" required autofocus>
您可以使用正則表達式指定模式以驗證輸入。
<input type="password" name="password" id="password" placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
<input type="color" onchange="showColor(event)"> <p id="colorMe">Color Me!</p>
以上就是“實用的HTML5功能有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。