html5標籤

FreeeLinux發表於2017-11-16
HTML

新增的標籤

結構標籤

  1. <article> 標記定義一篇文章
  2. <header> 標記定義一個頁面或者一個區域的頭部
  3. <nav> 標記定義導航連結
  4. <section> 標記定義一個區域
  5. <aside> 標記定義頁面內容部分的側邊欄
  6. <hgroup> 標記定義檔案中的一個區塊的相關資訊（已廢棄）
  7. <figure> 標記定義一組媒體內容以及他們的標題
  8. <figcaption> 標記定義figure元素的標題
  9. <footer> 標記定義一個頁面或者一個區域的底部
  10. <dialog> 標記定義一個對話方塊（會話框）類似微信
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>結構標籤</title>
    <style type="text/css">
        footer {
            height: 50px;
            background: #abcdef;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #00B7FF;
        }
    </style>
</head>
<body>

<header>
    <div>Logo</div>
    <nav>
        <a href="index.html">首頁</a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </nav>
</header>
<section>
    <hgroup>
        <h1>樹下的貓</h1>
        <h3>文/艾米</h3>
    </hgroup>
    <aside>
        <a href="#se1">Session one</a>
        <a href="#se2">Session two</a>
        <a href="#se3">Section three</a>
    </aside>
    <article>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </article>
</section>
<section>
    <figure>
        <figcaption>樹下的貓咪怎麼生活</figcaption>
        <div class="video">...</div>
    </figure>
</section>
<section>
    <dialog>
        <dt>張三：嗯，內容還不錯</dt>
        <dd>李四：還好吧，就是主題不突出</dd>
    </dialog>
</section>
<footer>
    @CopyRight All Reserved.
</footer>

</body>
</html>

級別：header/section/footer > aside/article/figure/nav > div/ifgcaption

多媒體標籤

  1. <video> 標記定義一個視訊
  2. <audio> 標記定義音訊內容
  3. <source> 標記定義媒體資源
  4. <canvas> 標記定義圖片
  5. <embed> 標記定義外部的可互動的內容或者外掛，比如flash

audio標籤：

<!--方法一-->
<!--<audio src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" autoplay="autoplay" loop="1" controls="controls">您的瀏覽器該退休了，換Chrome吧！</audio>-->

<!--方法二-->
<audio autoplay="autoplay">
    <source src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" type="audio/mpeg"></source>
</audio>

video標籤：

<!--<video src="./1-1.mp4" autoplay="autoplay" controls="controls"></video>-->

<video src="./1-1.mp4" controls="controls">
    <source src="1-1.mp4" type="video/mp4">
</video>

web應用標籤

狀態標籤

  1. <meter> 狀態標籤（實時狀態顯示：氣壓，氣溫）
  2. <progress> 狀態標籤（任務過程：安裝、載入）
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75"></meter>

optimum正常值為220，低於200會出現黃色警告。

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

列表標籤

由於<select>下拉框的介面太醜了，所以我們要用新的:)，而且還支援模糊匹配。

現在我們用：
1. <datalist> 為input標籤定義一個下拉選單，配合option
2. <details> 標記定義一個元素的詳細內容，配合summary

<input type="text" placeholder="請選擇您喜歡的手機品牌" list="phoneList">
<datalist id="phoneList">
    <option value="iPhone"></option>
    <option value="Samsung"></option>
    <option value="Huawei"></option>
    <option value="htc"></option>
    <option value="meizu"></option>
</datalist>

詳細資訊支援展開:

<details>
    <p>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </p>
</details>

通過open=”open”屬性設定預設是否開啟詳情。

其他標籤

  1. <ruby> 標記定義註釋或者音標
  2. <rt> 標記定義對ruby的註釋內容文字
<p>我們來<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一個話題。</p>
  1. <mark> 標記定義有標記的文字（黃色選中狀態）
  2. <output> 標記定義一些輸出型別，計算表單結果配合oninput事件
<p>媽媽叫我回家買<mark>牛奶</mark></p>

直接實時計算兩個input標籤的結果，並顯示：

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
    <input type="text" id="price" value="5000">*
    <input type="number" id="number" value="1">=
    <output name="totalPrice" for="price number"></output>
</form>
  1. <keygen> 標記定義表單裡一個生成的鍵值（加密資訊傳送）
  2. <time> 標記定義一個日期/時間，目前所有主流瀏覽器都不支援。

刪除的標籤

純表現的標籤

Basefont、big、center、font、s、strike、tt、u
因為結構與表現分離，表現我們要用css完成。

對可用性產生負面影響的元素

frame、frameset、noframes

產生混淆的元素

acronym、applet、isindex、dir

新增的屬性

input

date:<input type="date" name="date">
month:<input type="month" name="month">

還有color屬性等一大堆東西。

form

autocomplete

<form action="index.html" autocomplete="on">
    <input type="text" name="text">
    <input type="text" name="email" autocomplete="off">
    <input type="submit" name="submit">
</form>

autofocus

   <input type="text" name="text" autofocus="autofocus">

輸入框預設獲得焦點。

multiple

規定輸入域中可選擇多個值
html
<input type="file" name="file" multiple="multiple">

placeholder

提供一種提示，描述輸入域所期待的值
適用於input的type屬性為：
text、search、url、telephone、email、password

required

表單校驗

   <input type="email" required="required">

適用於：
text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file.

link

ol

<ol start="5">
    <li></li>
    <li></li>
    <li></li>
</ol>

其他屬性

定義頁面離線應用檔案：

<html manifest="cache.manifest">

相關文章