技術標籤：webhtml

HTML5新增元素

結構元素

1. header元素
2. nav元素
3. article元素
4. footer元素

<article>
    <header>
        <h1>..</h1>
        <p>...</p>
    </header>
    <footer>
        <nav>...</nav>
    </footer>
</article>

5. aside元素
6. section元素

w3c標準，section元素應帶有一個標題。

表單元素

• 新增了input元素型別

  • type屬性增加：

  屬性	說明
  email	郵件
  tel	電話號碼
  url	連結
  range	取數字（滑塊）可指定最值(min\max\step) 如：<input type=“range” min=“12” max=“34” step=“2”>
  number	取數字（微調方式）可指定最值(min\max\step)
  color	取顏色
  date	取日期
  time	取時間
  month	取月份
  week	取週數

  驗證一般要使用同一個form元素裡的submit按鈕，會有錯誤提示。
  但是除了email其它的型別 提示都完備的，需要結合pattern屬性。

• 其它表單

  • output元素

    output元素用來定義表單元素的輸出結果
    output一般放在form標籤內。

    <form method="post">
      <input type="range" min="12" max="34" step="2" value="20"/>
      <output></output>
    </form>
    <script>
      let input = document.getElementsByTagName(
     
    "input")[0];
      let output = document.getElementsByTagName("output")[0];
      // 獲取 range初始值
      output.value = input.value;
      // 拖動滑動條改變值時 傳給output
      input.onchange = function (){
          output.value = input.value;
      }
    </script>
    

  • datalist元素

    為文字框提供一個可選的列表
    datalist元素 的 ID值要與 文字框的list值相同

    <form method="post">
        輸入：<input type="text" list="urilist">
        <datalist id="urilist">
        <option label="綠葉學習網" value="http://www.lvyestudy.com"></option>
        <option label="人民郵電出版社" value="http://www.ptpress.com.cn"></option>
        <option label="非同步社群" value="http://www.epubit.com"></option>
        </datalist>
    </form>
    

    

  • keygen元素

  生成金鑰
  生成一對金鑰
  相容性較差，不建議使用

其它新增元素

• address

  語義化，地址資訊

• time

  語義化，時間資訊

• progress

  語義化，顯示任務完成度。一般用於動態資料

  <progress max="100" value="70"></progress>
  

  
• meter

  以進度條形式顯示資料佔比。一般用於靜態資料

• figure 、 figcaption

  圖片+圖注

  <figure>
  <img src="http://qnqn0qylz.hn-bkt.clouddn.com/shanghai.jpg" alt="test" height="100" width="100">
  <figcaption>圖注</figcaption>
  </figure>
  

• fieldset 、 legend

  用fieldset對錶單元素進行分組，legend做每個分組的標題。

改良後的元素

• a

  h5增加了a標籤 3個屬性

  屬性	作用
  download	可被下載
  media	定義被連結文件為何媒介/裝置優化的
  type	定義被連結文件的MIME型別

  download指定後，會開始下載檔案（相對路徑才能下載？）
  download 可以指定下載後的 檔名稱

  <a href="../img/in.jpg" download="a.png">下載圖片</a>
  

• ol

  ol 使用中指定 reversed 可以讓元素降序排列。

• small

  一般用來表示“印刷體”文字，更具語義化。

• script

  新增兩個屬性：defer and async；
  defer和async用於非同步載入外部JavaScript檔案。
  非同步載入外部js檔案完成後，async會先載入js檔案，即使HTML文件還沒載入完。
  非同步載入外部js檔案完成後，defer會等待HTML載入完成之後才會執行js程式碼。