8 个有用的 HTML5 标签

作为一个 web 前端开发者，在制作页面的时候你会从一大堆不同的标签中选择合适的标签来完成相应的功能。有些 HTML5 标签广为流传，例如 <article> <header> <footer>，然而有些标签可能知道的人不多，用的也少。

1. 上下文高亮 <mark>

<mark> 标签应该用来表示 “相关的（relevance）” 或 “注意观察的 （scrutiny）”
元素和文本应该与我们做的活动相关，并且这个相关性在那个时刻对我们是有用的。

http://codepen.io/SitePoint/p...

2. <small>

你可能之前用过这个标签，和它字面意思一样，它的作用就是让字看起来小一点。

这个标签应该用来降低文本或信息的重要程度。

http://codepen.io/SitePoint/p...

3. <q> 和 <blockquote>

这两个标签都是引用，<q> 用于小段内联文本，<blockquote> 用于大段文本的引用

<div class="big-banner">
  <h2>Try our latest sandwich!</h2>
  <p>Come and try our latest, biggest and tastiest
  sandwich. John Smith told us <q>he hasn‘t eaten 
  anything as good in his whole life!</q></p>
</div>

<div class="motivational-quote">
  <blockquote 
    cite="http://bit.ly/1pbvjsL">
      Infuse your life with action.
      Don‘t wait for it to happen.
      Make it happen. Make your own
      future. Make your own hope.
      Make your own love. And
      whatever your beliefs, honor 
      your creator, not by passively 
      waiting for grace to come down 
      from upon high, but by doing 
      what you can to make grace 
      happen... yourself, right now,
      right down here on Earth.
    <cite>Bradley Whitford - Author</cite>
  </blockquote>
</div>

4. <ins>, <del> 和 <s>

<ins> 用于定义刚刚被添加到文档的内容
<del> 用于定义从文档被移除的内容
以上两个标签都支持2个可选的属性，
cite 属性用来链接到一个解释当前变更原因的链接，datetime 用来定义何时发生这个变化。
<s> 用于表示当前的文本不再相关或正确，通常情况下它会附带一个替换的文本内容。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

5. <optgroup>

<optgroup> 标签用来和 <select> 标签配合，有助于对 <options> 元素 进行分类。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

6. <datalist>

使用 <datalist> 定义 <input>标签可用的选择列表。

datalist 的表现就是输入框下面会出现一个选择框和一个下拉箭头，用来选择一些预定义好的内容。当你输入部分关键词的时候，选择列表中的内容若被匹配到，则会高亮显示。

选择列表出现的内容必须符合 input 设定的 type 类型，例如 type = email，那么选择列表中只会出现符合email规则的内容。

该特性被广泛支持，除了 safari。

http://codepen.io/SitePoint/p...