H5 語義化元素

Cupied發表於2018-04-03
H5

新增元素

wbr

描述

Word Break Opportunity (<wbr>)，用於告訴瀏覽器在頁面縮放時在什麼地方新增換行符。

相容性

除 IE 外，其他瀏覽器都相容。

其他

template

描述

顧名思義，宣告的是模板元素，使用者儲存可能需要插入到頁面中的內容片段。

頁面載入時，解析器會處理 template 元素中的內容，但不會渲染元素的內容。

根據 Template 介面可知，它有一個只讀的 content 屬性，通過這個屬性可以讀取模板內容，也可以通過這個屬性判斷l瀏覽器是否支援 <template> 元素。

interface HTMLTemplateElement : HTMLElement {
    readonly attribute DocumentFragment content;
};
複製程式碼

擴充套件

除了 template 元素外，還有一種常用的方式實現標籤內容隱藏。 兩者相對比，template 元素可以直接克隆節點插入到頁面中，而 script 方式只是以字串的方式處理內部的 HTML 標籤。

<div id="container"></div>

<script id="script-template" type="text/template">
    <img src="http://blog-1255677601.cossh.myqcloud.com/blog/2018-03-13-u-1459597530-2091940659%26fm-27%26gp-0.jpg" alt="">
</script>

const imgTemplate = document.getElementById('script-template'),
      container = document.getElementById('container');


container.innerHTML = imgTemplate.innerHTML;
複製程式碼

相容性

除 IE 外，其他瀏覽器都相容；另外 Edge 不支援 對 template 元素進行克隆操作以及模板相互巢狀。

其他

section

描述

section 表示文件的一個區域或章節，按主題將內容分組，通常會包含一個標題（<h1> - <h6>）。 一般來說，希望元素內容明確地出現在提綱中時，用 section 就合適。

<section>
    <h3>曙光女神</h3>
    <p>無論颳風還是下雨 太陽照常升起</p>
</section>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

nav

nav 表示包含多個超連結的區域。

<nav>
    <ul>
        <li>
            <a href="/home">首頁</a>
        </li>
        <li>
            <a href="/about">關於我</a>
        </li>
        <li>
            <a href="/contact">聯絡我</a>
        </li>
    </ul>
</nav>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

article

article 代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外界引用的內容。

擴充套件

與 section 元素的區別：

  • section：主要作用是對網站或應用程式中頁面上的內容進行分塊，通過它的巢狀來表示的章節等目錄結構和它們的從屬關係
  • article：主要作用是表示完整、獨立性、可重用，即標籤內容脫離當前頁面也有存在價值和意義，它可以有自己 header 和 footer

兩種標籤可以相互巢狀使用，但如果只是作為樣式鉤子，建議使用 <div>

<article>
    <header>
        <h1>蘋果</h1>
    </header>
    
    <p>蘋果是一種很好的水果。</p>
    
    <section>
        <h2>評論</h2>
        
        <article>
            <header>
                <h3>發表者：張三</h3>
            </header>
            <p>蘋果好吃</p>
        </article>
        
        <article>
            <header>
                <h3>發表者：李四</h3>
            </header>
            <p>蘋果對身體好</p>
        </article>
        
    </section>
</article>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

aside

描述

aside 標籤用於表示與頁面內容關係不太密切的內容 (eg. 廣告) ，可以獨立出來且不影響整體，通常表現為側邊欄或者嵌入內容（更側重於工具性的東西）。

相容性

除 IE9 以下外，其他瀏覽器都支援

header

描述

header 標籤用於表示一組介紹性描述或導航資訊 (目錄、搜尋框、logo 等)，通常包含 <h1> – <h6> 或 <hgroup>，元素內容不影響文件提綱的生成。

相容性

除 IE9 以下外，其他瀏覽器都支援

footer

描述

footer 標籤用於表示最近的父級區塊內容的頁尾，通常包含作者資訊、相關文件、版權資訊，元素內容不影響文件提綱的生成。

相容性

除 IE9 以下外，其他瀏覽器都支援

adress

描述

adress 標籤用於表示與最近父級 article 或整個文件關聯的聯絡人資訊，不能包含除了聯絡資訊之外的任何資訊。

<address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    1981 Landings Drive<br>
    Building K<br>
    Mountain View, CA 94043-0801<br>
    USA
</address>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

main

描述

main 標籤用於呈現頁面或應用的主體部分。根據規範，允許頁面中同時存在多個 main 元素，但只能允許一個顯示。

相容性

除 IE9 以下外，其他瀏覽器都支援

figure

figure 標籤代表的是一段獨立的引用內容，如插圖、程式碼等，通常會搭配一個標題（figcaption）。

<figure>
    <figcaption>曙光女神</figcaption>
    <img src="http://blog-1255677601.cossh.myqcloud.com/blog/2018-03-13-u-1459597530-2091940659%26fm-27%26gp-0.jpg" alt="">
</figure>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

figcaption

figcaption 標籤通常配合 figure 一起使用，作為引用內容標題。

相容性

除 IE9 以下外，其他瀏覽器都支援

data

data 標籤在呈現頁面內容的同時，通過 value 屬性指定相應的機器可讀內容。 其中，value 屬性最好不要省略，且內容不能為 date 或 time。

interface HTMLDataElement : HTMLElement {
    [CEReactions] attribute DOMString value;
};
複製程式碼
<h3>英雄列表</h3>
<ul>
    <li>
        <data value="Leona">曙光女神</data>
    </li>
    <li>
        <data value="Nami">喚潮鮫姬</data>
    </li>
    <li>
        <data value="Soraka">眾星之子</data>
    </li>
</ul>
複製程式碼

相容性

目前僅有 Chrome62+、Firefox、Edge 支援。

time

time 標籤用於表示日期或時間，並通過 datetime 屬性指定相應的機器可讀日期。 datetime 屬性必須為一個有效的日期型別，如：yyyy-MM、yyyy-MM-dd 等

interface HTMLTimeElement : HTMLElement {
    [CEReactions] attribute DOMString dateTime;
};
複製程式碼
<time datatime="2018-03-15 14:39:16">03-15</time>
複製程式碼

相容性

目前僅有 Chrome62+、Firefox、Edge 支援。

mark

mark 標籤用於需要標註或高亮的文字，突出顯示的文字通常可能和使用者當前活動具有某種關聯性，比如搜尋的結果。 不要混淆 <mark> 元素和 <strong> 元素，前者側重於表示上下文的關聯性，而後者強調的是文字在上下文的重要型。

<p>流光容易把人拋，紅了<mark>櫻桃</mark>，綠了芭蕉</p>
複製程式碼

相容性

除 IE9 以下外，其他瀏覽器都支援

ruby

ruby 標籤用於展示d東亞文字注音或字元註釋。 rt 標籤用於對 <ruby> 內容做註解，如拼音。 rp 標籤用於對不支援 <ruby> 的瀏覽器提供圓括號，位於 <rt> 的前面和後面。

<ruby>
    <span>青青子衿，悠悠我心</span>
    <rp>(</rp>
        <rt>qīng qīng zǐ jīn yōu yōu wǒ xīn</rt>
    <rp>)</rp>
</ruby>
複製程式碼

相容性

該標籤支援情況比較好，IE 系列均支援。

datalist

datalist 標籤定義選項列表，包含一組 option 元素，定義其它控制元件的可選值。通常與 input 元素配合使用，用來定義input 可能的值。

input 的 list 屬性與相應的 datalist 的 id 需保持一致

option 標籤新增 disabled 屬性後，在 datalist 和 select 中表現不一樣；在 datalist 中表現為不顯示，而在 select 中則是無法選中

option 標籤支援 label 屬性，但在不同瀏覽器中表現各異。Chrome 中 label 值在右側顯示，其他瀏覽器（Firefox、IE9、IE10）則不顯示 value 值，只顯示 label 值

如果 label 屬性值與 value 屬性值相同，則不顯示 label 屬性值

支援 datalist 標籤的瀏覽器會忽略其下除option 之外的標籤 使用 datalist 時，有些瀏覽器在 input 右側會出現下拉箭頭，可以通過 CSS 隱藏

interface HTMLDataListElement : HTMLElement {
    [SameObject] readonly attribute HTMLCollection options;
};
複製程式碼
<input type="text" list="heros">
<datalist id="heros">
    <select name="hero" id="">
        <option value="曙光女神" label="Leona">曙光女神</option>
        <option value="喚潮鮫姬" label="Nami">喚潮鮫姬</option>
        <option value="眾星之子" label="Soraka">眾星之子</option>
    </select>
</datalist>
複製程式碼
// 隱藏下拉箭頭
input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
複製程式碼

相容性

除 Safari 不相容外，相容 IE10+，但不同瀏覽器在一些細節之處的實現有些出入。

output

output 標籤用於顯示計算或使用者操作結果。

for 屬性表示影響輸出的元素 ID ，允許多個。

type 屬性預設為 'output'

interface HTMLOutputElement : HTMLElement {
    [SameObject, PutForwards = value] readonly attribute DOMTokenList htmlFor;
    readonly attribute HTMLFormElement ? form;
    [CEReactions] attribute DOMString name;
  
    readonly attribute DOMString type;
    [CEReactions] attribute DOMString defaultValue;
    [CEReactions] attribute DOMString value;
};
複製程式碼

相容性

除 IE 外，其它瀏覽器都相容。

progress

progress 標籤以進度條形式顯示任務完成進度。

可以通過 position 屬性獲取當前進度資訊

progress 標籤只要設定了 border 或background-color 屬性，進度條會變成扁平化風格

Chrome 和 Safari 中 progress 由 progress-value 和 progress-bar 構成，progress-value 表示已完成的進度，progress-bar 表示全部進度；在 Firefox 中 progress-bar 表示已完成進度, background-color 表示全部進度；在 IE 中通過 color 表示已完成進度，全部進度還是通過 background-color 表示

Demo

interface HTMLProgressElement : HTMLElement {
    [CEReactions] attribute double value;
    [CEReactions] attribute double max;
    readonly attribute double position;
};
複製程式碼
<progress value="10" max="100"></progress>

document.querySelectorAll('progress')[0].position; // 0.1
複製程式碼
progress {
    width: 160px;
    color: #0064B4;
    border-radius: 5px;
    /* IE10 */
    border: 1px solid currentColor;
}

/* 全部進度 */

progress,
progress::-webkit-progress-bar {
    background-color: #e6e6e6;
}

/* 已完成進度 */

progress::-moz-progress-bar {
    background: currentColor;
}

progress::-webkit-progress-value {
    background: currentColor;
}

/* 圓角化 */
progress::-webkit-progress-inner-element {
    border-radius: 5px;
}

progress::-webkit-progress-value {
    border-radius: 5px;
    box-shadow: 0 0 0 1px currentColor;
}

progress::-webkit-progress-bar {
    border-radius: 5px;
}
複製程式碼

相容性

相容 IE10+ 瀏覽器

meter

meter 標籤用於表示某種計量，一般用於溫度、 重量、金額等量化的場景

Demo

interface HTMLMeterElement : HTMLElement {
    [CEReactions] attribute double value;
    [CEReactions] attribute double min;
    [CEReactions] attribute double max;
    [CEReactions] attribute double low;
    [CEReactions] attribute double high;
    [CEReactions] attribute double optimum;
    readonly attribute NodeList labels;
};
複製程式碼

  • value：當前數值，介於最小值和最大值之間，預設值為 0

    如果未指定或格式錯誤，則值設為 0

    如果指定的值不在最小值和最大值之間，則值設為最接近的一端的值

  • min：最小值，如果未指定，則預設為 0

  • max：最大值，如果未指定，則預設為 1

  • low：低值區間的上限值，預設與 min 值一致

    min ≤ low ≤ high ≤ max

    如果指定的值不在最小值和最大值之間，則值設為最接近的一端的值

  • high：高值區間的下限值，預設與 max 值一致

    min ≤ low ≤ high ≤ max

    如果 high ＜ low，則設為與 low 值一致

    如果 high ＞ max，則設為與 max 值一致

  • optimum：最優/佳值，預設為 (max - min) / 2

    minimum ≤ optimum ≤ maximum

    如果指定的值不在最小值和最大值之間，則值設為最接近的一端的值

顏色規則

meter 控制元件一共有三種顏色（綠色，黃色，紅色），具體展示什麼顏色是由 min、low、high、max、value 和 optimum 控制。前四種屬性會將整個控制元件劃分為 3 個區間 [min, low]、[low, high]、[hight, max]。

  • 若 value 和 optimum 在同一區間，則顯示為綠色

  • 若二者不在同一區間，則以 optimum 所在區間為中心，向左右兩側延伸，延伸的區間顏色依次為黃色、紅色

Demo

H5 語義化元素

修改顯示顏色

Safrai9+ 和 Firefox 支援通過偽元素來修改 meter 控制元件顏色，Chrome65 不支援修改， 具體細節可以參考The HTML5 meter Element。

Demo

<meter max="128" value="60" title="GB">
  <!-- 相容 Chrome65 -->
  <div class="meter-gauge">
    <span style="width: 50%;">剩餘容量：60G</span>
  </div>
</meter>
複製程式碼
meter {
  position: relative;
  display: block;
  margin: 0 auto;

  width: 550px;
  height: 25px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: 1px solid #ccc;
  border-radius: 3px;

  background: none;
  background-color: whiteSmoke;

  &::-webkit-meter-bar {
    background: none;
    background-color: whiteSmoke;
  }
  
  /* Safari */
  &::-webkit-meter-optimum-value {
    background-image: linear-gradient(
      90deg,
      #8bcf69 5%,
      #e6d450 5%,
      #e6d450 15%,
      #f28f68 15%,
      #f28f68 55%,
      #cf82bf 55%,
      #cf82bf 95%,
      #719fd1 95%,
      #719fd1 100%
    );

    background-size: 100% 100%;
  }

  /* Firofox */
  &::-moz-meter-bar {
    background-image: linear-gradient(
      90deg,
      #8bcf69 5%,
      #e6d450 5%,
      #e6d450 15%,
      #f28f68 15%,
      #f28f68 55%,
      #cf82bf 55%,
      #cf82bf 95%,
      #719fd1 95%,
      #719fd1 100%
    );

    background-size: 100% 100%;
  }
}

/* Chrom65 */
.meter-gauge {
  margin-top: -1px;
  margin-left: -1px;

  border: 1px solid #ccc;
  border-radius: 5px;

  background-color: whiteSmoke;

  width: 550px;
  height: 25px;

  display: block;

  & > span {
    height: inherit;

    background-color: blue;
    background-image: linear-gradient(
      90deg,
      #8bcf69 5%,
      #e6d450 5%,
      #e6d450 15%,
      #f28f68 15%,
      #f28f68 55%,
      #cf82bf 55%,
      #cf82bf 95%,
      #719fd1 95%,
      #719fd1 100%
    );

    background-size: 100% 100%;

    display: block;
    text-indent: -9999px;

    &:first-child {
      border-radius: 3px 0 0 3px;
    }
  }
}
複製程式碼

H5 語義化元素

相容性

主流瀏覽器都支援，IE 系列相容 Edge13+。

details

details 用於描述元素內容的詳細資訊。 open 屬性表示是否展示具體細節內容，預設為 false 。

Demo

interface HTMLDetailsElement : HTMLElement {
    [CEReactions] attribute boolean open;
};
複製程式碼
<details>
  <summary>
    下載中：
    <progress min="0" max="100" value="99.9"></progress>
  </summary>
  <ul>
    <li>
      檔名：
      <span>戰狼2.mp4</span>
    </li>
    <li>
      下載速度：
      <span>2m/s</span>
    </li>
    <li>
      耗時：
      <span>10s</span>
    </li>
  </ul>
</details>
複製程式碼

相容性

除 IE 系列瀏覽器外，其他主流瀏覽器均支援。

summary

summary 標籤用作 details 元素的摘要或標題。

summary 元素需要有父節點，如果沒有父節點，則不顯示

通常情況下 summary 元素應該是 details 元素的第一個子節點

相容性

除 IE 系列瀏覽器外，其他主流瀏覽器均支援。

相關文章