如果您想要成為網站開發人員，HTML是你需要學習的第一個步驟。而隨著行動裝置大環境的需求下，日新月異的HTML5新功能總是能驚艷我們，本文來探討更多你可能不知道的HTML5新功能。

1.<datalist> 好用的輸入框快速選項

標籤<datalist>提供了快速選項，讓輸入欄位有更快更方便的選擇，並且也有autocomplete允許您提前輸入所選的功能。

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

2.<details> 簡單好用於諮詢多的地方

標籤<details>開關詳細資訊的功能真的好強大，非常簡單又好用，幾乎可以半取代掉Bootstrap 折疊 (Collapse)的功能。

點擊此處展開更多資訊

是不是很神啊!是不是很神啊!

<body>
  <details>
    <summary>點擊此處展開更多資訊</summary>
    <p>是不是很神啊!是不是很神啊!</p>
  </details>
</body>

3.<output> 輸出標籤將快速執行區域的計算結果

<output>輸出標籤將快速執行區域的計算結果，或許也是一個簡易的方式。範例請點擊此處

4.可編輯的內容真的好強大

該 contenteditable是一個HTML屬性，可以讓你讓你的HTML元素編輯。通過將此屬性設置為，true您將能夠編輯元素的內容。

您可以嘗試下方的範例檔案，試圖編輯員工清單內容

公司員工清單：
  • 1. BEN YANG
  • 2. STANLEY CHEN
  • 3. CARLOS CHUNG
<div>
  <h5>公司員工清單：</h5>
  <ul class="content-editable" contenteditable="true">
    <li>1. BEN YANG</li>
    <li>2. STANLEY CHEN</li>
    <li>3. CARLOS CHUNG</li>
  </ul>
</div>