H5 语义化元素-CSDN博客

新增元素

wbr

描述

Word Break Opportunity (<wbr>)，用于告诉浏览器在页面缩放时在什么地方添加换行符。

兼容性

除 IE 外，其他浏览器都兼容。

其他

Demo

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 元素进行克隆操作以及模板相互嵌套。

其他

Demo

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

修改显示颜色

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;
    }
  }
}
复制代码

兼容性

主流浏览器都支持，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>
复制代码