App下載

這10個有用的HTML5功能,你肯定沒用過!

猿友 2020-09-18 14:06:11 瀏覽數(shù) (3082)
反饋

文章來源于公眾號:前端人

HTML5 不是新事物。自從最初發(fā)布(2008年1月)以來,我們一直在使用它的一些功能。今天給大家分享的是一些讓你意想不到的效果,和特性!到目前為止,我還沒有真正使用過它!

在本文中,我列出了十個 HTML5 我過去沒用過但現(xiàn)在發(fā)現(xiàn)有用的功能。

1.輸出標簽

<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()。

2.詳細信息標簽

<details>標簽提供隨需應(yīng)變的細節(jié)給用戶。如果需要按需向用戶顯示內(nèi)容,請使用此標記。默認情況下,小部件是關(guān)閉的。打開后,它將展開并顯示其中的內(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>

效果如下:

詳細信息標簽

3.內(nèi)容可編輯

contenteditable屬性是可以在元素上設(shè)置以使內(nèi)容可編輯的屬性。它可與DIV,PUL等元素一起使用。使用方法如下:

<element contenteditable="true|false"/>

注意,如果contenteditable未在元素上設(shè)置,則會從其父級繼承該屬性。

代碼如下:

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>

效果如下:

內(nèi)容可編輯

小小提示

可以使spandiv元素可編輯,并且可以使用css樣式向其添加任何豐富的內(nèi)容。這將比使用輸入字段處理它更好。試試看!

4.地圖

<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>

效果如下:

地圖

小小提示

圖像貼圖有其自身的缺點,但是您可以將其用于視覺演示。如何用全家福照片嘗試一下并深入研究個人照片(可能是我們一直以來都懷有的舊照片?。?。

5.標記內(nèi)容

使用<mark>標記突出顯示任何文本內(nèi)容。

代碼如下:

 <p> 我為何這么帥? <mark>"這該死的魅力"</mark> 是嗎? </p>

效果如下:

標記內(nèi)容

小小提示

您還可以使用CSS更改突出顯示顏色,標記功能確實能夠做出很多有意思的東西!

mark {
  background-color: green;
  color: #FFFFFF;
}

6.data- *屬性

這些data-*屬性用于存儲頁面或應(yīng)用程序?qū)S玫淖远x數(shù)據(jù)??梢栽?code>JavaScript代碼中使用存儲的數(shù)據(jù)來創(chuàng)建更多的用戶體驗。

data- *屬性由兩部分組成:

  • 屬性名稱不得包含任何大寫字母,并且前綴“ data-”后必須至少長一個字符
  • 屬性值可以是任何字符串

代碼如下:

<h2> 你準備好了嗎 </h2>
 <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>`;
}

效果如下:

data- *屬性

小小提示

要在JavaScript中讀取這些屬性的值,可以使用getAttribute()它們的完整HTML名稱(即data-custom-attr),但是該標準定義了一種更簡單的方法:使用dataset屬性。

7.數(shù)據(jù)清單

<datalist>標簽指定的預(yù)先定義的選項列表,并允許用戶添加更多了。它提供了一項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>  

效果如下:

數(shù)據(jù)清單

小小提示

與傳統(tǒng)<select>-<option>標簽有何不同?選擇標記用于從選項中選擇一個或多個項目,您需要瀏覽列表以進行選擇。Datalist是具有自動完成功能的高級功能。

8.范圍(滑塊)

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中沒有任何毛病

9.測量標簽

使用<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>

測量標簽

10.輸入(這個沒什么新鮮的,湊數(shù)吧!)

我們最了解這部分的用法,例如文本,密碼等輸入類型。輸入類型的特殊用法很少,

必填

將輸入字段標記為必填

<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>

輸入

以上就是W3Cschool編程獅關(guān)于這10個有用的HTML5功能,你肯定沒用過!的相關(guān)介紹了,希望對大家有所幫助。

0 人點贊