8个你没用过的HTML标签
在现今的网页中,使用语义化标签能够带来很多好处,但是,语义化到底是什么呢?为什么越来越受到重视呢?
语义化是指使用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。语义化不关注页面的外观,而是关注页面的内容和结构,良好的语义化能够帮助人和机器更好的理解内容和它的上下文。
语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值。同时,使用语义化可以减少很多不必要的代码。
既然语义化有这么多的好处,那么如何使HTML语义化呢?一个最好的方法就是,把通用的HTML标签替换为富有表现力的HTML元素,下面介绍八个你可能没有用过的HTML标签。
<q>标签
和<blockquote>一样,<q>用于引用文本,浏览器通常在引用的内容外面添加引号。那么,为什么不直接使用引号呢?因为引号并不总是表示引用,有时候引号也用作强调或特定的名称等。
<i>和<b>
以前,<i>和<b>是被用作识别斜体和粗体文本。当内容和表现分离的思想广为传播后,<i>和<b>就让我们觉得有点难受了,因为它们代表的是文本如何显示,而不是文本的表现含义,取而代之的是<em>和<strong>标签,它们代表强调文本和强烈强调文本。
但是,在HTML5中,<i>和<b>被赋予了新的语义含义。<i>用于表达特定的语气或某种类型,而不只是在布局中呈现样式。而在HTML5中,<b>包含的内容会被视为重要部分,并呈现为粗体。
<abbr>标签
<abbr>用于缩写。在文本需要缩写的时候使用会非常方便,<abbr>有一个可选的title属性,它的值为未缩写的文本。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
XHTML
1 2 3 4 5 6 |
<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr>
|
<time>标签
让我们先看一个典型的本地化问题:日期。在美国,2014年4月8日用04/08/14表示。在英国,用08/04/14表示。在荷兰,用08-04-14表示。在俄罗斯,用08.04.14表示。这样就导致机器很难阅读。<time>标签语序你使用机器可读的格式表示日期和时间,比如:<timedatetime=”2014-04-08″>04/08/14</time>,这样,无论它被如何格式化,HTML解析器都可以使用这个来确定确切的时间,还可以这样用<time datetime=”2014-04-0822:00″>04/08/14 at 10 PM</time>。
<mark>标签
曾经你是否写过这样的HTML代码:
XHTML
1 2 3 4 5 |
<p> Three hundred pages of boring, useless text. <span>The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff… </p>
|
好了,现在你不需要再这样写了,HTML5引入了<mark>标签,它表示突出显示的文本,比如:
XHTML
1 2 3 4 5 6 7 8 |
<!DOCTYPE HTML> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
|
<input>标签
也许你已经用过<inputtype=”text” />,<inputtype=”submit” />或者<inputtype=”hidden” />。但是,你用过其他的类型吗?在HTML5中,<input />可以用于更多的类型:
tel
number
range
date
time
search
color
这些类型的不错,但是使用前一定要看看浏览器是否支持,某些类型还没有得到所有主流浏览器的支持。
<menu>标签
曾经你是否这样定义过一个菜单:
XHTML
1 2 3 4 5 6 7 8 |
<ul> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </ul>
|
现在,你也不需要再这样写了,<menu>就是专门为定义菜单导航而设计的,<menu>中的内容会表现为一个无序列表它的type属性可以设置为popup或者toolbar,如:
XHTML
1 2 3 4 5 6 7 8 |
<menu type="toolbar"> <li>New</li> <li>Open</li> <li>Save</li> <li>Quit</li> </menu>
|
推荐文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
稳定
产品高可用性高并发贴心
项目群及时沟通专业
产品经理1v1支持快速
MVP模式小步快跑承诺
我们选择声誉坚持
10年专注高端品质开发