在线咨询:点击这里在线咨询(在线支持1)4EB Studio(在线支持2)

10个你应该了解的极少用的HTML标签

1. <cite>

我们大多数人都知道 <blockquote>标签,但是你是否知道它的兄弟 <cite>呢?<cite>允许你定义元素内的引用。典型的情况就是浏览器会将<cite>标签的内容选染成斜体,但是如果你设置了CSS样式的话,那么还是会以CSS样式为准的。

<cite>对于书目和其他网站索引是非常有用的。请看下面这个例子:

David Allen’s breakthrough organization book Getting Things Done has taken the web by storm.

2. <optgroup>

<optgroup>对于在选择菜单下的选择组中添加小定义是非常有用的。比如你想按照时间分类定义一组电影列表,那么你可以这样做:

<label for="showtimes">Showtimes</label>
<select id="showtimes" name="showtimes"> <optgroup label="1PM"></optgroup> <option value="titanic">Twister</option> <option value="nd">Napoleon Dynamite</option> <option value="wab">What About Bob?</option> <optgroup label="2PM"></optgroup> <option value="bkrw">Be Kind Rewind</option> <option value="stf">Stranger Than Fiction</option> </select>

效果预览:

这样做允许选择列表使用视觉效果将电影清单分开。

3. <acronym>

<acronym>标签可以用来定义或者进一步解释一组文字。当你将鼠标悬浮在使用了<acronym>标签的文字上的时候,将会在其下方出现一个带有文字的方框。看看下面的例子:

The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.

效果预览:

SEO is full of trickery and magic.

4. <address>

<address>是一个非常不起眼的小标签,但是它并非没有可用之地。顾名思义,<address>允许你对HTML中的地址添加语义代码。这个代码可以将标记内的文字斜体化。当然,你也可以通过CSS改变样式。

<address>Glen Stansberry </address>
1234 Web Dev Lane
Anywhere, USA

5. <ins>和<del>

如果你想使用标记来显示编辑修订效果,<ins>和<del>正式你所要的。正如名字所暗示的,<ins>使用下划线突出显示添加的,<del>使用删除线显示被去除的。

John <del>likes</del> <ins>LOVES</ins> his new iPod.

效果预览:

John likes LOVES his new iPod.

6. <label>

当写代码的时候表单元素很容易被忽略。而其中一个最容易被忽略的就是<label>标签。<label>标签不仅可以快速注解你的标签文字,而且可以使用”for”语句定义哪个元素被赋予到了该标签。这些<label>标签不仅可以用来定义样式,而且可以让你为关联元素设置标题点击。

<label for="username">Username</label>
<input id="username" type="text" />

7. <fieldset>

<fieldset>是一个很少用的属性,他可以添加到你的表单上为表单元素创建一个逻辑组。一旦应用了<fieldset>标签,所有表单元素将会被一个方框缩包围。你可以在<fieldset>标签内使用<label>来定义该组的标题。

<form><fieldset></fieldset></form>
Are You Smarter Than a 5th Grader?
Yes
<input name="yes" type="radio" value="yes" />
No
<input name="no" type="radio" value="no" />

效果预览:

Are You Smarter Than a 5th Grader?

Yes

No

8. <abbr>

<abbr>和<acronym>是同类标签,不过<abbr>仅仅用来定义缩写单词。和<acronym>一样,当你在缩写字符元素上使用鼠标悬浮的时候,该缩写的完整定义将会出现在下方。<abbr>极少被使用,但是对于多数屏幕阅读者,语法检查者和搜索引擎来说非常有用处。

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

效果预览:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel可能是一款超级有用的属性,任何HTML元素都可以应用它。它对于读取那些没有被特别定义的额外的变量非常有帮助。当你在HTML中使用Javascript的时候非常有用。如果你有一个链接,并想进行行内编辑,你可以这样做:

<a rel="clickable" href="page.html">This link is editable</a>

Javascript可以寻找带有”clickable”属性的链接,然后应用Ajax技术使该链接可以被进行行内编辑。而这仅仅是rel属性众多技术中的一个。

10. <wbr>

<wbr>是一个非常偏僻的标签。说实话,我怀疑你们是否有人接触过它。从本质上讲,这个标签允许你在指定的地方进行切断换行。不过这个标签非常独特,它需要依赖浏览器的分辨能力。这个标签对于想要避免出现垂直滚动条的情况非常有用。

如果你想使用这个效果,你可以试试看这个标签。不过需要注意的是,它并不被所有浏览器支持,具体的技术指标情参看这篇文章

<span>How do you say Supercalifragilisticexpialidocious?</span>

[原文链接]


发表评论