4個你可能不知道但是又很好用的 HTML5 標籤

前言

實在是不敢想像網頁如果沒有了 HTML 會發生什麼事, 數百萬的網頁開發人員至今依然借助這個好東西在開發網頁與相關應用程式。
如果你想成為網頁開發人員, 那我想 HTML 應該是第一個你應該要學的技能了。

只是, 仍然會看到一些人低估的 HTML 的威力, 因為他們不知道一些 HTML 擁有的好功能好工具。

在這篇文章, 我們會探索一些 HTML5 好用, 但是或許你還不知道的功能, 來吧!

 

 

1. datalist 

<datalist> 這個是 HTML 引入的其中一個滿讚的標籤。

這個標籤可以 render 出一個已經有 options 的列表並讓 user 可以新增;

他還有 autocomplete 的功能, 當你在上面打字的時候, 會自動列出相關的東西!

 

範例程式碼:

<body>
      <form action="" method="get">
        <label for="fruit">Choose your 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>
    </body>

 

Codepen Example

 

 

 

2. details 

這個標籤可以提供, 秀出必要的細節給 user, 所以如果你有一些開合內容的需求, 可以用這個標籤 (註: 其實很類似手風琴的功能);

開合板預設值是關起來的, 如果開起來的時候, 會把裡面的內容給秀出來;

<summary> 標籤是跟隨著 <details> 標籤的, 他是一開始最上的可視部分。

 

範例程式碼:

<body>
      <details>
        <summary>Click to get the user details</summary>
        <table>
          <tr>
            <th>Name</th>
            <th>Date of birth</th>
            <th>Job</th>
          </tr>
          <tr>
            <td>John</td>
            <td>March 19</td>
            <td>Accountant</td>
          </tr>
        </table>
      </details>
    </body>

 

Codepen Example

 

 

 

3. output

 <output> 標籤可以顯示計算的結果, 通常這個是用在跟計算有關的需求上

 

範例程式碼:

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

 

Codepen Example

 

 

 

4. Content editable

contenteditable 不是像上面所述的標籤, 他是 HTML 的屬性, 讓你的 HTML 元素可以被編輯, 當這個屬性設為 true 時, 你就可以編輯標籤的內容。

 

範例程式碼:

<div>
      <h1> Employees list </h1>
      <ul class="content-editable" contenteditable="true">
        <li> 1. Jhon </li>
        <li> 2. Mehdi </li>
        <li> 3. Brad </li>
      </ul>
 </div>

 

Codepen Example

 

 

結論

如你所看到的, 身為一個開發者, HTML 的這些功能對你來說絕對是個好工具;

不要低估 HTML 的好處, 他還有其他更多好用的功能。

感謝你的閱讀, 希望你有挖到有用的東西。

Shiplation
Hey! Translate Some Original For This World!