ie8支持html5标签吗_您知道这八个HTML5标签吗？

清疚 2022-12-03 10:00 128阅读 0赞

ie8支持html5标签吗

As a web developer, you will probably take advantage of a whole range of different tags when putting together your next site build. Chances are high that you are already well versed in some of the commonly known tags introduced in HTML5 such as `<article>`, `<header>` and `<footer>`, however you might not be aware of some of the lesser known / edge case tags you could be taking advantage of.

作为Web开发人员，在组合下一个网站时，您可能会利用各种不同的标签。 您很有可能已经精通HTML5中引入的一些常见标记，例如`<article>` ， `<header>`和`<footer>` ，但是您可能不知道一些鲜为人知的/区分大小写的标记可能会利用。

Some of these tags are either brand new in HTML5 or have been repurposed from the HTML4 specification. Tags repurposed from HTML4 may look familiar, however they have been given new meanings and have had changes in how they should be used.

这些标签中的某些不是HTML5中的全新标签，就是从HTML4规范重新使用的标签。 从HTML4重新定位的标签可能看起来很熟悉，但是它们被赋予了新的含义并且已经改变了应如何使用它们。

For each tag, we will go through what the W3C specification says and apply a practical example to showcase how you might use it. Let’s roll!

对于每个标签，我们将仔细研究W3C规范中的内容，并应用一个实际示例来展示您可能如何使用它。 来吧！

### 口译速记 **(**A Quick Word on Interpretation**)** ###

While the W3C specifications are great for conceptual overviews, sometimes they lack practical examples, which makes it challenging when searching for the best way to use some of these tags.

尽管W3C规范非常适合概念概述，但有时它们缺少实际示例，这在寻找使用某些此类标签的最佳方法时具有挑战性。

You might have used some of these tags before — perhaps just not in the same way. There often are no hard and fast rules about what is considered good practice. The following are some examples of how I recommend treating and using these lesser known elements.

您可能以前曾经使用过其中一些标签-也许只是用不同的方式。 关于什么是良好实践，通常没有一成不变的规则。 下面是一些示例，这些示例说明了我建议如何处理和使用这些鲜为人知的元素。

## 1 –使用`<mark>`上下文突出显示 **(**1 – Contextual Highlighting With `<mark>`**)** ##

The [specification for the `<mark>` tag][specification for the _mark_ tag] says that this tag should be used to denote *“relevance” or “scrutiny”*.

[`<mark>`标签][specification for the _mark_ tag]的[规范][specification for the _mark_ tag]指出，此标签应用于表示*“相关性”或“仔细检查”* 。

“Relevance’ is hard to describe. Elements and text are relevant when we are performing an activity and they are useful to us at that moment (or could be useful in the future).

“相关性”很难描述。 元素和文本在我们执行一项活动时是相关的，并且在那时对我们有用(或者将来可能有用)。

For example, if you searched a site with the keyword “jQuery” and several articles showed up, you could wrap the resulting matches inside the `<mark>` tag. The purpose of the mark tag is to say to the browser *“hey, this thing right here is relevant to what you are doing”*.

例如，如果您使用关键字“ jQuery”搜索一个站点，然后显示了几篇文章，则可以将结果匹配项包装在`<mark>`标记内。 mark标签的目的是对浏览器说： *“嘿，这里的事情与您正在做的事情有关”* 。

### 实际例子 **(**Practical Examples**)** ###

We can use the mark tag for highlighting content that is relevant. To illustrate, consider the following scenario:

我们可以使用mark标签来突出显示相关内容。 为了说明，请考虑以下情形：

We are on a page called “Cheapest Holiday Packages” and it shows us a grid of holiday packages sorted by price range. It starts off from the cheapest at the top to the most expensive at the bottom.

我们在一个名为“最便宜的假期套餐”的页面上，它向我们显示了按照价格范围排序的假期套餐网格。 它从顶部的最便宜到底部的最贵开始。

For the top level holidays, the price itself could be highlighted with the `<mark>` tag because we have come to this page for cheap holiday deals and these are the cheapest the page has to offer — they are the most relevant.

对于最高级的假期，价格本身可以用`<mark>`标签突出显示，因为我们来到此页面是为了进行廉价的假期交易，而这些是该页面所提供的最便宜的-它们是最相关的。

<section class="deal-list">
      <article>
        <h2>Vanuatu Cruise</h2>
        <p><mark>$499</mark>- 5 Nights</p>
        <p>A relaxing cruise around the southern most 
        parts of Vanuatu</p>
      </article>
      <article>
        <h2>Fiji Resort Getaway</h2>
        <p><mark>$649</mark> - 6 Nights</p>
        <p>Includes all you can eat buffet and 
        entertainment</p>
      </article>
      <article>
        <h2>Pacific Island Hiking</h2>
        <p>$1199 - 5 Nights</p>
        <p>Hike your way though several pacific islands 
        on this exercise focused holiday</p>
      </article>
    </section>

See the Pen [Mark Tag Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔[标记示例][Mark Tag Example] 。

For the first two results, the price (which is what we are focused on) is wrapped within the `<mark>` tag. However the third result — which is much more expensive — isn’t marked as it isn’t as relevant as the others.

对于前两个结果，价格(这是我们关注的价格)包装在`<mark>`标记内。 但是，第三个结果-昂贵得多-没有标记，因为它不像其他结果那样相关。

### 最佳做法和注意事项 **(**Best Practices and Considerations**)** ###

While people generally associate this tag with a quick way to style something, that isn’t correct. It should not be used just for styling purposes, you should be another element like a `<span>` for that.

人们通常将此标签与快速样式化的方式相关联，但这是不正确的。 它不应该仅用于样式目的，而应该是另一个元素，例如`<span>` 。

Do not use this tag to denote textual importance or to highlight strength — that is what the `<strong>` tag should be used for. Use `<mark>` when you want to pinpoint something of relevance to the current user.

不要使用此标记来表示文本的重要性或强调强度，这就是`<strong>`标记应使用的标记。 当您想查明与当前用户有关的内容时，请使用`<mark>` 。

As a side note for accessibility, mark highlights are shown by the browser when using Windows High Contrast mode, so it works well in that regard too.

作为辅助功能的补充说明，在使用Windows High Contrast模式时，浏览器会显示标记突出显示，因此在这方面也很有效。

## 2 –使用`<small>`重要性较低 **(**2 – Lower Importance With `<small>`**)** ##

You have probably used the `<small>` tag before. It does exactly what you think it would do, which is make your text smaller. While browsers might make your text smaller, that is actually a byproduct of using the small tag, rather than its semantic meaning.

您以前可能已经使用过`<small>`标记。 它确实按照您的想法去做，这会使您的文本变小。 尽管浏览器可能会使文本变小，但这实际上是使用小标签的副产品，而不是其语义。

[The specification for the `<small>` tag][The specification for the _small_ tag] explains that this tag should be used to lower the importance of text or information. Browsers interpret this by making the font smaller so it has less visible impact.

[`<small>`标签的规范][The specification for the _small_ tag]说明该标签应用于降低文本或信息的重要性。 浏览器通过减小字体的大小来解释它，从而减少可见的影响。

This tag should be used to denote *low importance* when it comes to content or information. Information of low importance is generally used in the footer of a website or in a sidebar (away from the main content of the page).

当涉及内容或信息时，此标签应用于表示*低重要性* 。 低重要性信息通常用于网站的页脚或侧边栏中(远离页面的主要内容)。

### 实际例子 **(**Practical Examples**)** ###

Overall your usage of the `<small>` tag should say to the browser — *“This content right here isn’t really important in the grand scheme of things”*. For example, in the footer you could use this for your legal attribution and copyright:

总体而言，您对`<small>`标记的使用应对浏览器说- *“此处的内容对于宏大的计划并不真正重要”* 。 例如，在页脚中，您可以将其用于法律归属和版权：

<footer>
      <small>
        Designed and developed by Simon Codrington.
      </small>
      <small>
        © 2016 My Company - All rights reserved
      </small>
    </footer>

You can even use the `<small>` tag inside regular content to denote that the content is not as important as the content surrounding it. For example, in a product listing you could include the legal disclaimer “Excludes tax” near the price of a product as follows:

您甚至可以在常规内容中使用`<small>`标记来表示该内容不如其周围的内容重要。 例如，在产品列表中，您可以在产品价格附近加入免责声明“免税”，如下所示：

<section>
      <article>
        <h3>Woolen Llama Print Jumper</h3>
        <em>$65.99</em><small> - Excludes tax</small>
        <p>
          A warm, woolly jumper made from 100% llamas.
          You will love the warmth.
        </p>
        <button>Add to cart</button>
      </article>
    </section>

See the Pen [Small Tag Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔[小标签示例][Small Tag Example] 。

Overall if you want to make something have a perceived lower importance use `<small>`. Don’t just use it to control the size of elements.

总的来说，如果您想使某些东西的重要性降低，请使用`<small>` 。 不要仅仅使用它来控制元素的大小。

### 最佳做法和注意事项 **(**Best Practices and Considerations**)** ###

You cannot lower the importance or emphasis of content that has been affected by the `<strong>` or `<em>` tags. Styling the `<small>` tag might affect its visual look (depending on the browser), but it will not affect its semantics.

您不能降低受`<strong>`或`<em>`标记影响的内容的重要性或重点。 设置`<small>`标记的样式可能会影响其外观(取决于浏览器)，但不会影响其语义。

## 3 –用`<q>`和`<blockquote>`引用 **(**3 – Quotations With `<q>` and `<blockquote>`**)** ##

While you might use a styled `<div>` or `<span>` to enclose your quotes, a better way is to use either the `<q>` or `<blockquote>` tags. Both of these are meant to be used for external quotations (when you are quoting something), but they differ in how you should use them.

虽然您可以使用样式化的`<div>`或`<span>`括住引号，但更好的方法是使用`<q>`或`<blockquote>`标记。 两者都打算用于外部报价(当您引用某物时)，但是它们在使用方式上有所不同。

[According the spec][], the `<q>` tag should be used to define a “short inline quotation” of text.

[根据规范][According the spec] ， `<q>`标记应用于定义文本的“短内联引号”。

[The `<blockquote>` tag][The _blockquote_ tag] on the other hand should be used for large spans of text.

另一方面[， `<blockquote>`标签][The _blockquote_ tag]应用于大范围的文本。

In practice, you should be using the `<q>` tag for smaller quotes and using `<blockquote>` for everything else. Keep in mind that these are for quotes or resources only, they should not be used just for stylistic purposes (use spans for that).

实际上，应该将`<q>`标记用于较小的引号，而将`<blockquote>`用于其他所有内容。 请记住，这些仅用于报价或资源，不应仅将其用于样式目的(为此使用跨度)。

### 实际例子 **(**Practical Examples**)** ###

Lets look at how we can use both of these tags.

让我们看看如何使用这两个标签。

If you have a small quote, use `<q>`:

如果报价很小，请使用`<q>` ：

<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>

If you have a longer quote, or something more complex you can wrap it inside `<blockquote>`

如果报价更长或更复杂，则可以将其包装在`<blockquote>`

<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>

For the above example we’ve wrapped a long quote withing the `<blockquote>` tag and supplied both the `cite` attribute (the link to the resource) and the `<cite>` tag (explaining what this resource is).

对于上面的示例，我们用`<blockquote>`标签包裹了一个长引号，并提供了`cite`属性(指向资源的链接)和`<cite>`标签(说明了此资源的含义)。

### 最佳做法和注意事项 **(**Best Practices and Considerations**)** ###

Both of these quote elements can support the [cite attribute][] and the [cite element][].

这两个quote元素都可以支持[cite属性][cite attribute]和[cite元素][cite element] 。

The cite attribute specifies the URL of the related resource itself (e.g. a link to the website where this quote came from). The cite tag should be used to specify the title of the work. There is some debate as to how the cite attribute and the `<cite>` tag should be used but overall I’ve always found using them like this works just fine.

cite属性指定相关资源本身的URL(例如，引用此报价的网站的链接)。 cite标签应用于指定作品的标题。 关于应如何使用cite属性和`<cite>`标记存在一些争论，但总的来说，我总能像这样正常使用它们。

## 4 –使用`<ins>` ， `<del>`和`<s>`插入，删除和更正 **(**4 – Insertion, Deletion and Correction With `<ins>`, `<del>` and `<s>`**)** ##

The `<ins>`, `<del>` and `<s>` tags are useful when you are using dealing with content that has been changed or whose relevance has been updated.

`<ins>` ， `<del>`和`<s>`标记在您处理已更改或相关性已更新的内容时很有用。

[The `<ins>` tag][The _ins_ tag] defines text that has been recently added to a document — it represents new content. You would use this tag to mark text that has been added or whose relevance has been updated within your content.

[`<ins>`标记][The _ins_ tag]定义了最近添加到文档中的文本-它表示新内容。 您将使用此标记来标记内容中已添加的文本或相关性已更新的文本。

[The `<del>` tag][The _del_ tag] defines text that has been removed from the document, it represents deleted content. Even though it signifies deleted content, it still physically exists in the document as a record of what has been removed.

[`<del>`标记][The _del_ tag]定义了已从文档中删除的文本，它表示已删除的内容。 即使它表示已删除的内容，它仍然作为删除的记录而实际存在于文档中。

These two tags support two optional attributes — the `cite` attribute for linking to a resource that explains this change and also the `datetime` attribute for when this occurred. The datetime must be a [valid datetime string which unfortunately isn’t very easy to understand][valid datetime string which unfortunately isn_t very easy to understand]. You can cheat and use a [timestamp generator][] if you’re in a rush.

这两个标记支持两个可选属性-用于链接到解释此更改的资源的`cite`属性，以及发生该更改的`datetime`属性。 datetime必须是[有效的datetime字符串，不幸的是，它不是很容易理解][valid datetime string which unfortunately isn_t very easy to understand] 。 如果您很忙，可以作弊并使用[时间戳生成器][timestamp generator] 。

These attributes are useful for when you want to provide context to your additions or deletions. You might see this within update logs and revision lists where an author lists all of their changes and provides details as to why these changes happened.

当您想要为添加或删除提供上下文时，这些属性很有用。 您可能会在更新日志和修订列表中看到这一点，作者在其中列出了所有更改，并提供了有关发生这些更改的原因的详细信息。

[The `<s>` tag][The _s_ tag] is similar but instead defines text that is no longer correct. This is used to signify to the browser that the wrapped text is not relevant anymore and is usually followed by its replacement text (for example, new content wrapped inside the `<ins>` tag). This tag often renders as strike-through text to show that it’s no longer relevant. You should not use this just for stylistic purposes though (you can do this easily enough with `<span>` instead).

[`<s>`标记][The _s_ tag]相似，但是定义了不再正确的文本。 这用于向浏览器表示包装的文本不再相关，并且通常在其后跟替换文本(例如，包装在`<ins>`标记内的新内容)。 此标记通常呈现为删除线文本，以表明它不再相关。 但是，您不应仅将其用于样式目的(而使用`<span>`可以轻松地做到这一点)。

### 实际例子 **(**Practical Examples**)** ###

Imagine that you have a list of changes to a plugin you are developing. On your release log page you could outline your latest updates using the `<ins>` tag and attributes.

想象一下，您有一个正在开发的插件的更改列表。 在发布日志页面上，您可以使用`<ins>`标记和属性概述最新更新。

<h2>Latest Changes</h2>
    <p>Outlined below are the latest changes</p>
    <h3>Version 1.X branch</h3>
    <ins 
      cite="http://www.johnsmithsblog/changes/1-0-1.html" 
      timestamp="2012-08-09T15:15:00+00:00">
        Version 1.0.1 - August 2012
    </ins>
    <br/>
    <ins 
      cite="http://www.johnsmithsblog/changes/1-0-2.html" 
      timestamp="2012-11-15T06:15:00+00:00">
        Version 1.0.2 - November 2012
    </ins>
    <br/>
    <h3>Version 2.X branch</h3>
    <ins 
      cite="http://www.johnsmithsblog/changes/2-0-0.html" 
      timestamp="2013-01-17T02:50:00+00:00">
        Version 2.0.0 - January 2013
    </ins>
    <br/>

Another example that showcases how you can use the `<del>` tag is inside a note taking app. This tag should be used when content no longer exists at all (and isn’t being replaced).

另一个演示如何使用`<del>`标签的示例位于笔记应用程序内部。 当内容根本不存在(并且不会被替换)时，应使用此标记。

<ul class="to-do-list">
      <li>
        <del datetime="2015-12-03T13:21:32+00:00">
          Pick up the groceries
        </del>
      </li>
      <li>
        <del datetime="2015-12-03T15:15:00+00:00">
          Collect the kids from school
        </del>
      </li>
      <li>
        Cook dinner
      </li>
      <li>
        Work on fancy side projects
      </li>
    </ul>

See the Pen [Del Tag Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [Del标签示例][Del Tag Example] 。

You can see that two of our tasks have been completed so they have been wrapped with the `<del>` tag. This shows to the user (and the browser) that the content no longer exists. We supplied both with the `datetime` attribute as it is actually a handy piece of data to keep considering we are tracking task completion.

您可以看到我们的两个任务已经完成，因此已经用`<del>`标记包裹了它们。 这向用户(和浏览器)显示该内容不再存在。 我们都提供了`datetime`属性，因为它实际上是一小段数据，可以继续考虑我们正在跟踪任务完成情况。

The `<s>` tag is best used for when content has been removed and then updated, for example when correcting documents:

`<s>`标记最适合在删除内容然后更新内容时使用，例如在更正文档时：

<article class="news-item">
      <h1>WordPress 4.4 Updates</h1>
      <section class="summary" aria-label="Summary">
        WordPress 4.4 (code-named 
          <s cite="https://codex.wordpress.org/Version_4.4">
            Bobby Brown
          </s> Clifford Brown) was released 
          to the public on the 8th of December 2015.
      </section>
      <section class="main-content" aria-label="Main Content">
        <p>There were several changes in V4.4 
        including the following</p>
        <ul>
          <li>
            New default theme - 
            <s>Twenty Fifteen</s> 
            Twenty Sixteen
          </li>
          <li>
            Responsive image support (image elements 
            in the content now support display based 
            rendering)
          </li>
          <li>
            Additional embed object support such as 
            Cloudup, Reddit Comments etc
          </li>
        </ul>
      </section>
    </article>

See the Pen [S Tag Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [S标记示例][S Tag Example] 。

In the above example, we have corrected several pieces of information, citing a reference URL inside our `<s>` tag where possible.

在上面的示例中，我们更正了几条信息，并在可能的情况下在`<s>`标记内引用了参考URL。

## 5 –使用`<optgroup>`组织选项 **(**5 – Organising Options With `<optgroup>`**)** ##

This tag is one of the oldest, but oddly enough it’s still overlooked by developers.

这个标签是最古老的标签之一，但奇怪的是它仍然被开发人员所忽略。

[The `<optgroup>` tag][The _optgroup_ tag] is used within the `<select>` form control tag to help categorize the various `<options>` elements.

[`<optgroup>`标记][The _optgroup_ tag]用于`<select>`表单控制标记中，以帮助对各种`<options>`元素进行分类。

If you have dozens (or hundreds) of options inside your select field, having the ability to categorize them into a local format is really handy.

如果您在选择字段中有数十个(或数百个)选项，那么将它们分类为本地格式的功能非常方便。

The `<optgroup>` tag must be inside the `<select>` element and contains two attributes — `label`, which acts as the visible label seen when the list is opened and `disabled` which when used ensures none of the options inside of it can be selected.

`<optgroup>`标记必须位于`<select>`元素内，并且包含两个属性`<optgroup>` ，它充当打开和`disabled`列表时看到的可见`label` ，使用该标签时，将确保不能选择其中的任何选项。

The optgroup itself can’t be selected and can’t be styled (at least not in any cross browser compatible way).

不能选择optgroup本身，也不能设置其样式(至少不能以任何跨浏览器兼容的方式)。

### 实际例子 **(**Practical Example**)** ###

The `<optgroup>` element works great in any situation when you’re using the `<select>` tag. For example consider a dropdown list of computer price ranges on an e-commerce site.

在使用`<select>`标记的任何情况下， `<optgroup>`元素都可以很好地工作。 例如，考虑电子商务网站上计算机价格范围的下拉列表。

<label for="comp-price-filter">
      Select the price range of your next computer
    </label>
    <select 
      class="price-filter" 
      name="comp-price-filter" 
      id="comp-price-filter">
      <optgroup label="Low End">
        <option value="100-300">$100 - $300</option>
        <option value="301-500">$301 - $500</option>
        <option value="501-700">$501 - $700</option>
      </optgroup>
      <optgroup label="Middle Range">
        <option value="701-1200">$701 - $1200</option>
        <option value="1201-1600">$1201 - $1600</option>
      </optgroup>
      <optgroup label="High End">
        <option value="1600-2500">$1600 - $2500</option>
        <option value="2501-3200">$2501 - $3200</option>
      </optgroup>
    </select>

See the Pen [pyzgJG][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen上][pyzgJG]的SitePoint( [@SitePoint][SitePoint] )的Pen [pyzgJG][CodePen] 。

Here’s an example where you can use the `disabled` attribute to disallow a range of options (though there’s nothing really stopping people from just removing this attribute from the `<optgroup>` so don’t rely on it for validation).

在下面的示例中，您可以使用`disabled`属性禁用一系列选项(尽管并没有真正阻止人们从`<optgroup>`删除此属性的`<optgroup>`因此请不要依赖它进行验证)。

In the below example, you shouldn’t be able to select anything within the ‘West Coast – Australia’ optgroup.

在以下示例中，您将无法选择“西海岸-澳大利亚” optgroup中的任何内容。

<label for="vacation-dest">Vacation Destinations</label>
    <select name="vaction-dest" id="vacation-dest">
      <optgroup label="East Coast - Australia">
        <option value="NSW">
          New South Wales
        </option>
        <option value="QLD">
          Queensland
        </option>
        <option value="TAS">
          Tasmania
        </option>
        <option value="ACT">
          Australian Capital Territory
        </option>
        <option value="VIC">
          Victoria
        </option>
      </optgroup>
      <optgroup disabled label="West Coast - Australia">
        <option value="WA">
          Western Australia
        </option>
        <option value="NT">
          Northern Territory
        </option>
        <option value="SA">
          South Australia
        </option>
      </optgroup>
    </select>

See the Pen [Optgroup Tag Example 2][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen Optgroup [标签示例2][Optgroup Tag Example 2] 。

## 6 –使用`<datalist>`预定义选项 **(**6 – Predefined Options With `<datalist>`**)** ##

One of the great things about the `<select>` element, along with the `radio` / `checkbox` input types is that it restricts your users to a set of predefined choices.

关于`<select>`元素以及`radio` / `checkbox`输入类型的一大优点是它将用户限制为一组预定义的选择。

You can now use the `<datalist>` element to define the list of valid choices for your various `<input>` tags. This component is slightly different on various browsers, but the common way it works is by showing a small drop-down arrow to the right of the field indicating that this field has options. When selected usually the options will fold down and show themselves. The user can start typing and the options will highlight if they partially match (for example, writing “Chr” inside a field that has “Chrome” as an option will narrow down the option list to show it).

现在，您可以使用`<datalist>`元素为各种`<input>`标记定义有效选择的列表。 该组件在各种浏览器上略有不同，但是其正常工作方式是在字段右侧显示一个小的下拉箭头，指示该字段具有选项。 通常，选择后，这些选项将向下折叠并显示出来。 用户可以开始键入，如果选项部分匹配，则选项将突出显示(例如，在以“ Chrome”作为选项的字段中写入“ Chr”将缩小选项列表以显示它)。

This element is still emerging but overall it works well.

这个元素仍在不断涌现，但总体而言运作良好。

### 实际例子 **(**Practical Examples**)** ###

If you wanted to provide a list of URL’s that the user could select from, you could create a `<datalist>` and connect it to your `<input>` as follows.

如果要提供用户可以选择的URL列表，则可以创建`<datalist>`并将其连接到`<input>` ，如下所示。

<label for="favourite-sites">
      Select your favorite website!
    </label>
    <input 
      type="url" 
      name="favourite-sites" 
      id="favourite-sites" 
      list="site-list"/>
    <datalist id="site-list">
      <option value="http://www.google.com.au">
      <option value="http://www.reddit.com">
      <option value="http://www.sitepoint.com">
    </datalist>

This will let you constrict your inputs to just a few values.

这将使您将输入限制为仅几个值。

See the Pen [Datalist Tag Example][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的笔数据列表[标记示例][Datalist Tag Example] 。

### 注意事项和注意事项 **(**Notes and Considerations**)** ###

The datalist itself will perform validation based on the `type` attribute for the `<input>` element. For example, if you have chosen to use `type="email"` and then supply a `<datalist>` element to it, the options inside this list must conform to inputs of type “email”. It has a level of smart processing that should make it easier for you to control values automatically.

数据列表本身将基于`<input>`元素的`type`属性执行验证。 例如，如果您选择使用`type="email"` ，然后为其提供`<datalist>`元素，则此列表中的选项必须符合类型为“ email”的输入。 它具有一定程度的智能处理能力，可以使您更轻松地自动控制值。

The `<datalist>` tag is [fairly well supported][], however Apple have decided not to support this element at all (on both desktop and on iOS). Microsoft supports this from IE10 onwards (with no support on mobile IE). When support isn’t available the `<input>` element should fall back to its normal input mode.

`<datalist>`标签得到了[很好的支持][fairly well supported] ，但是Apple决定根本不支持此元素(在台式机和iOS上)。 Microsoft从IE10开始支持此功能(不支持移动IE)。 如果没有支持，则`<input>`元素应退回到其正常输入模式。

One word of warning — This component can be a bit buggy. For example, if you mark the input as `required` and do not enter a value, the form will stop any processing until you select a value (just as you expect). However, if you manually type in a value (even if it isn’t correct) and press submit this won’t trigger an error — nothing will happen (it does not flag an error as you may expect it to).

一句话警告-该组件可能有点故障。 例如，如果您将输入标记为`required`并且未输入值，则表单将停止任何处理，直到您选择一个值(如您所愿)为止。 但是，如果您手动输入一个值(即使它是不正确的)，然后按提交，则不会触发错误-不会发生任何事情(它不会像您期望的那样标记错误)。

## 包装全部！ **(**Wrapping It All Up!**)** ##

Hopefully you’ve picked up a useful element or two from this article and going forward you can use them in your upcoming sites!

希望您从本文中挑选了一个或两个有用的元素，并且可以在以后的站点中使用它们！

Overall, a lot of the semantics of using these elements are very much up in the air. Some groups will insist that you need to use X element in Z ways for it to be the ‘right way’. Several of these elements are still evolving and will require you to interpret how best to use them.

总体而言，使用这些元素的许多语义都悬而未决。 一些团体会坚持要求您需要以Z方式使用X元素，才能使其成为“正确的方式”。 这些元素中的几个仍在发展中，将需要您解释如何最好地使用它们。

We’re always keen on input, so if you know of any infrequently used helpful tags we’d be keen to hear how you’ve used them.

我们一直热衷于输入，因此，如果您知道任何不常用的有用标签，我们将很乐意听听您如何使用它们。

> 翻译自: [https://www.sitepoint.com/eight-html5-tags-you-might-not-know/][https_www.sitepoint.com_eight-html5-tags-you-might-not-know]

ie8支持html5标签吗

[specification for the _mark_ tag]: https://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element
[Mark Tag Example]: http://codepen.io/SitePoint/pen/QNLyLV/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[The specification for the _small_ tag]: https://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
[Small Tag Example]: http://codepen.io/SitePoint/pen/ZWzQEN/
[According the spec]: https://www.w3.org/TR/html5/text-level-semantics.html#the-q-element
[The _blockquote_ tag]: https://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element
[cite attribute]: https://www.w3.org/TR/2012/WD-html5-20121025/the-blockquote-element.html#attr-blockquote-cite
[cite element]: http://w3c.github.io/html/semantics.html#the-cite-element
[The _ins_ tag]: https://www.w3.org/TR/html5/edits.html#the-ins-element
[The _del_ tag]: https://www.w3.org/TR/html5/edits.html#the-del-element
[valid datetime string which unfortunately isn_t very easy to understand]: https://www.w3.org/TR/html5/infrastructure.html#valid-date-string
[timestamp generator]: http://www.timestampgenerator.com/
[The _s_ tag]: https://developer.mozilla.org/en/docs/Web/HTML/Element/s
[Del Tag Example]: http://codepen.io/SitePoint/pen/BKBjyr/
[S Tag Example]: http://codepen.io/SitePoint/pen/dMbGoO/
[The _optgroup_ tag]: https://www.w3.org/TR/html5/forms.html#the-optgroup-element
[pyzgJG]: http://codepen.io/SitePoint/pen/pyzgJG/
[Optgroup Tag Example 2]: http://codepen.io/SitePoint/pen/zqOrrx/
[Datalist Tag Example]: http://codepen.io/SitePoint/pen/LNPGGR/
[fairly well supported]: http://caniuse.com/#search=datalist
[https_www.sitepoint.com_eight-html5-tags-you-might-not-know]: https://www.sitepoint.com/eight-html5-tags-you-might-not-know/