html使用shiro标签_您可能未使用的10个HTML标签

html使用shiro标签

As a front-end developer you no doubt use HTML constantly and probably feel it doesn’t have any more unknowns. Nevertheless, the way it has evolved (in particular with the advent of HTML5) may surprise you at times. In this article, I’ll show you 10 HTML tags you may not be using or maybe even aren’t yet aware of that help to increase the semantics and maintainability of your web pages.

作为前端开发人员，您毫无疑问会不断使用HTML，并且可能会觉得它不再有未知数。 尽管如此，它的发展方式(尤其是HTML5的出现)有时可能会让您感到惊讶。 在本文中，我将向您展示10个您可能没有使用甚至可能尚未意识到HTML标记，这些标记有助于增加网页的语义和可维护性。

1. <米> (1. <meter>)

At some point we may need to express a measure on a web page. It could be anything from the result of an exam to disk usage. HTML5 introduced a new element called <meter> that represents a scalar measurement within a known range, or a fractional value.

在某些时候，我们可能需要在网页上表达一个度量。 从检查的结果到磁盘的使用情况，它可以是任何东西。 HTML5引入了一个名为<meter>的新元素，该元素表示已知范围内的标量测量值或分数值。

Based on this element’s definition in the specification, <meter> is not good to measure something like external temperature — because it doesn’t have a fixed range (you can define, it but it’s arbitrary). This element has several attributes. The most common ones are: value, min, and max. The first is used to indicate the measure, while the other two are used to specify the range. So, if you want to indicate that a hard disk of 500Gb has 300Gb occupied, you can write:

根据规范中该元素的定义， <meter> 不适用于测量诸如外部温度之类的东西，因为它没有固定的范围(您可以定义，但可以任意定义)。 该元素具有几个属性。 最常见的是： value ， min和max 。 第一个用于指示度量，而其他两个用于指定范围。 因此，如果要指示500Gb硬盘已占用300Gb，则可以编写：

<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.

2. <进度> (2. <progress>)

From time immemorial, developers have created widgets to notify users of the progress of a download or task. Today there’s a native HTML5 tag for this called <progress>. It has two attributes: value (to specify the state of the progress) and max (to indicate the maximum value to reach). If the max value isn’t set, a range of 0-1 is assumed and value can be any float within this range. So, to show a progress bar for a task completed at 50% you can write:

从远古时代开始，开发人员就创建了小部件来通知用户下载或任务的进度。 今天，有一个本地HTML5标签称为<progress> 。 它具有两个属性： value (用于指定进度状态)和max (用于指示要达到的最大值)。 如果未设置max ，则假定范围为0-1，并且value可以是该范围内的任意浮点。 因此，要显示完成率为50％的任务的进度条，您可以编写：

<progress value="50" max="100">50%</progress>

Or equivalently:

或等效地：

<progress value="0.5">50%</progress>

The text inside the element is used as a fallback for older browsers. Generally, this element would not be used statically, but rather would be used in conjunction with JavaScript or CSS animations to indicate continuous progress.

元素内的文本用作旧版浏览器的后备。 通常，此元素不会静态使用，而是与JavaScript或CSS动画结合使用以指示持续的进度。

3.＆4. <cite>和<q> (3. & 4. <cite> and <q>)

When writing, we often find ourselves quoting a book, an article, or person. On paper we usually use double quotes (“…”) to delimit the quote portion, along with the prepositions from or by to specify who we’re citing or from what source.

在写作时，我们经常会引用一本书，一篇文章或一个人。 在本文中，我们通常用双引号(“...”)来分隔报价部分， 从 或介词一起到指定谁我们引用或什么来源。

In HTML5 we have <q> to specify the quote, and <cite> for the source. Note that until recently <cite> could be used only to indicate a work’s title (book, article, film, etc.), not a person. However, this has been updated so that we can use it for ‘citing’ people too. The <q> tag has an attribute called cite that allows us to indicate the link to the source of the quotation.

在HTML5中，我们用<q>指定引号，用<cite>表示源。 请注意，直到最近， <cite>只能用于表示作品的标题(书，文章，电影等)，而不是人物。 但是，此功能已更新，因此我们也可以将其用于“引用”人员。 <q>标记具有一个称为cite的属性，该属性使我们可以指示到报价来源的链接。

Now for an example, let’s say that we want to cite a famous quote from Ezra Pound (my favourite quote). Using HTML, we would write:

现在举个例子，假设我们要引用一个以伊兹拉·庞德(Ezra Pound)为名的名言(我最喜欢的名言)。 使用HTML，我们将编写：

We should fight for our rights because, as <cite>Ezra Pound</cite> said,
<q>If a man isn't willing to take some risk for his opinions, either his 
opinions are no good or he's no good.</q>

5. <pre> (5. <pre>)

The <pre> element allows us to show preformatted text as it appears in the source. What this means is that multiple whitespace characters won’t be collapsed into one (changing the default manner that browsers handle whitespace). This tag is ideal when you need to show a snippet of code because it helps preserve indentation. For example, in a page we may have something like this:

<pre>元素允许我们显示源中出现的预格式化文本。 这意味着多个空白字符不会折叠为一个(更改浏览器处理空白的默认方式)。 当您需要显示一段代码时，此标记非常理想，因为它有助于保留缩进。 例如，在页面中，我们可能会有类似以下内容：

<pre><code>
function sayHello(name) {
    for (var i = 0; i &lt; 3; i++) {
        console.log('Hi ' + name + '!');
    }
}

sayHello('Aurelio');
</code></pre>

6.＆7. <kbd>和<samp> (6. & 7. <kbd> and <samp>)

If you’re a tech writer, you might often discuss tools and techniques that require the use of terminal or shell commands. So, chances are that you also want to show the result of these commands. This situation is the perfect fit for <kbd> and <samp>. The former represents a user input such as but not restricted to keyboard input. The latter represents a sample of the output of a program or a computing system. These elements works well with the previously presented pre element. An example of the use of these elements, similar to an example used in the spec, is the following:

如果您是一名技术作家，则可能经常讨论需要使用终端或外壳命令的工具和技术。 因此，您可能还希望显示这些命令的结果。 这种情况非常适合<kbd>和<samp> 。 前者表示用户输入，例如但不限于键盘输入。 后者代表程序或计算系统的输出样本。 这些元素与先前介绍的pre元素很好地配合。 类似于规范中使用的示例，这些元素的使用示例如下：

<samp><span>jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
<span class="prompt">jdoe@demo:~$</span> _</samp>

8. <小> (8. <small>)

Before HTML5, the <small> element was only a presentational one, used to write words using a smaller font. In HTML5 <small> has some semantic value. Now the <small> element represents text often found in small print like disclaimers, caveats, legal restrictions, or copyrights. An example of its use is shown below:

在HTML5之前， <small>元素只是一个表示性元素，用于使用较小的字体写单词。 在HTML5中， <small>具有一些语义价值。 现在， <small>元素表示通常以小字体显示的文本，例如免责声明，警告，法律限制或版权。 其用法示例如下所示：

This article is offered to you by Aurelio De Rosa <small>Copyright © 2014</small>

9. <输出> (9. <output>)

The <output> tag represents the result of a calculation. Its main attribute is for, which contains a list of space-separated IDs of the elements that went into the calculation, or that otherwise influenced the calculation. This element is exactly what you need if you have a website that offers something like automobile pricing or life insurance quotes.

<output>标签表示计算结果。 它的主要属性是for ，它包含一个以空格分隔的ID列表，这些ID进入了计算，或者以其他方式影响了计算。 如果您拥有一个提供诸如汽车定价或人寿保险报价之类的网站，则正是您需要此元素。

To see it in action, imagine there’s a widget on your company’s website where users can specify the amount to invest in your company in exchange for a certain percentage in return every year. Based on this situation, you may have a form, using the output element as shown below:

为了看到它的实际效果，想象一下您公司的网站上有一个小部件，用户可以在其中指定每年向公司投资的金额，以换取一定比例的回报。 在这种情况下，您可能会有一个使用output元素的表单，如下所示：

<form id="form-calculation">
   
  <label for="amount">Amount:</label> <input id="amount" type="number"/>
  <label for="percentage">Percentage:</label>
  <input id="percentage" type="number">

  <label for="years">Years:</label>
  <input id="years" type="number">

  <input type="submit" value="Submit">

  <label for="total">Total:</label>
  <output id="total" for="amount percentage years"></output>
</form>
<script>
function calculateTotal(amount, percentage, years) {
   for(var i = 0; i < years; i++) {
      amount += amount * percentage / 100;
   }

   return amount;
}
document.getElementById('form-calculation').addEventListener('submit', function(event) {
      event.preventDefault();

      document.getElementById('total').textContent = calculateTotal(
         Number(document.getElementById('amount').value),
         Number(document.getElementById('percentage').value),
         Number(document.getElementById('years').value)
      );
   },
   false
);
</script>

10. <dfn>(锦上添花) (10. <dfn> (The icing on the cake))

Before talking about this element, I want to confess something. When I decided to write this article, I started thinking about what tags to include. When I arrived at the 9th tag in my list, I thought it would have been nice to add something special as a conclusion. So, I decided to scan the list of HTML5 tags and here is my reaction.

在谈论这个元素之前，我想先坦白一下。 当我决定写这篇文章时，我开始考虑要包括哪些标签。 当我到达列表中的第9个标记时，我认为添加一些特殊的结论会很好。 因此，我决定扫描HTML5标签列表， 这是我的React 。

Now that you know how I stumbled upon <dfn>, we can move on and describe this tag. The dfn element allows us to define a term. In its simplest form, it contains the term you want to define, and then wrap it with a paragraph, a description list group, or a section containing the definition. To understand the concept, let’s say that we’re writing a page where we’re describing HTML, and we want to define it. To do that using the <dfn> tag, we can write:

既然您知道我是如何偶然发现<dfn> ，那么我们可以继续描述该标签。 dfn元素允许我们定义一个术语。 它以最简单的形式包含您要定义的术语，然后用一个段落，一个描述列表组或一个包含定义的部分来包装它。 为了理解这个概念，假设我们正在写一个页面来描述HTML，并且想要对其进行定义。 为此，可以使用<dfn>标记编写：

<dfn>HTML</dfn> is the primary language for marking up web content.

In this case, we’ve defined the term HTML, which is an abbreviation. So, we could enhance our markup further by writing:

在这种情况下，我们定义了术语HTML ，它是缩写。 因此，我们可以通过编写以下代码来进一步增强标记：

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the primary language for marking up web content.

To choose what is the term defined, the standard specifies a priority list made of 3 points. The priority goes to anything specified in the title attribute of the <dfn>tag. Then, we have whatever is defined in an abbr element child of dfn (as shown in the second example). The last priority goes to the text of the dfn element (as shown in the first example).

为了选择定义的术语，标准指定了一个由3点组成的优先级列表。 优先级置于<dfn>标记的title属性中指定的任何内容。 然后，我们拥有dfn的abbr元素子代中定义的任何内容(如第二个示例所示)。 最后的优先级进入dfn元素的文本(如第一个示例所示)。

结论 (In Conclusion)

In this article we’ve discussed a number of HTML tags that are less used, and often forgotten. I suggest you read the complete list of HTML tags available from time to time. In this way you’ll refresh your knowledge of semantic elements, and maybe you’ll find a surprise along the way (as I did with the <dfn> tag).

在本文中，我们讨论了一些使用较少且经常被遗忘HTML标记。 我建议您不时阅读可用HTML标签的完整列表 。 这样，您将刷新对语义元素的了解，也许您会在此过程中发现一个惊喜(就像我对<dfn>标记所做的那样)。

翻译自: https://www.sitepoint.com/10-html-tags-not-using/

html使用shiro标签