您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

10个你可能未使用过的HTML标签

作者:UncleToo  来源:原创  日期:2014-01-18 8:48:23
收藏  评论:( 0 )  阅读:422

10个你可能未使用过的HTML标签

       作为前端开发人员,毫无疑问HTML是使用做多的,可能你已经觉得它没什么是未知的了。随着互联网的发展(特别是HTML5的出现),HTML的改变可能会让你大吃一惊。本文列举了10个你可能没有使用过的HTML标签,希望能帮助大家更好的了解HTML。


1. <meter>

有时候,可能我们需要再页面上展示磁盘的使用情况,在以往的开发中这是很复杂的。在HTML5中为我们提供了meter(度量衡)标签,代表一个已知范围内的标量测量,或分数值。


基于该元素定义的规范, <meter>是不好度量外部温度之类的,因为它没有一个固定的范围(您可以定义,但它是任意的)。这个元素有几个属性,最常见的是: value, min, max。value是用来定义度量的值,而其他两个用于指定范围。因此,如果你想表明一个被使用了300G的500G硬盘,你可以写:

<meter value="300" min="0" max="500">300Gb of 500Gb</meter>已使用300G/共500G.


2. <progress>

在很久以前,开发人员已经开发出用来通知用户下载进度的小部件。现在HTML5为我们提供<progress>标签来实现这一功能。他主要有两个属性: value (指定的进展状况)和max (表示最高值达到)。 如果max的值没有被设置,默认为0-1,value可以是在该范围内任何浮点数。 所以,你可以写一个完成50%任务的进度条:

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

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

标签中的文本是用来在不支持HTML5的浏览器中显示的。一般情况,这个标签不静态使用,而是配合JavaScript或CSS一起使用,以打开动画的效果。


3. & 4. <cite> & <q>

这两个标签一般都是一起出现。在写文章时,我们通常会用双引号(“”)引用别人说的话。在HTML5中为我们提供了<cite> 和 <q>来实现。例如,现在我们要引用高尔基的一句名言:

前苏联著名作家<cite>高尔基</cite>曾说过:
<q>如果不想在世界上虚度一生,那就要学习一辈子。</q>


5. <pre>

<pre>是一个格式标签,可以将标签里的文本按原格式输出。通常用于显示源代码,如:

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


6. & 7. <kbd> & <samp>

如果你是一个技术控,经常使用shell命令,那么当你想展示这些命令或结果时,使用<kbd> & <samp>是非常合适的。<kbd>表示拥护输入(例如但不限于键盘),<samp>表示计算机的输出,例如下面的例子:

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


8. <small>

在HTML5之前,<small>是表现元素之一,用来显示一个较小的字体。在HTML5中,它却有了语法意义,主要用来打印输出一些经常被关注的地方,如免责声明、警告、法律限制或版权等。例如下面的代码:

本文由UncleToo翻译整理,版权归属UncleToo <small>Copyright ? 2014</small>


9. <output>

<output>表示一个计算结果,主要属性是 for。如果你的网站提供了例如汽车定价或人寿保险报价等服务,那么<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"></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>

<dfn>是一个注释标签,我们首先看下面的例子:

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

这个例子是解释了什么是HTML,但是这样还不够直观,我们可以进一步完善上面的解释:

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

这样,当鼠标放在“HTML”文本上时,就会有“HyperText Markup Language”提示,这样就让名词的解释说明变得更直观了。




HTM5
 
标签
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/795.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论