Home  >  Article  >  Web Front-end  >  10 uncommon HTML tags you need to know

10 uncommon HTML tags you need to know

高洛峰
高洛峰Original
2017-03-12 17:36:171235browse

This article talks about 10 Html tags that you need to know but are not common

Nowadays, web development engineers usually use more than one language in their study and work. Therefore, it is difficult for us to understand all aspects of a language, and it is also quite difficult to master a language, such as the usage of some uncommon but potentially useful keywords in the language.

Although we may not have understood these very rare HTML tags before or failed to make full use of them, it is not too late to make up for it. Now we are beginning to understand it and can use it correctly in future development. It’s not too late for these previously unused tags.

Here I give 10 of the most uncommon and often misused HTML tags. Although they may not be as common as other HTML tags, they can still be quite useful in certain situations.

##1. f3a85e1241a187c5ac462d886e9a968b

I believe everyone is familiar with b8a712a75cab9a5aded02f74998372b4, but did you know that b8a712a75cab9a5aded02f74998372b4 actually has a younger brother named f3a85e1241a187c5ac462d886e9a968b? f3a85e1241a187c5ac462d886e9a968b allows defining a piece of text as a reference within an element. Normally, browsers will set the text under the f3a85e1241a187c5ac462d886e9a968b tag to italics, but this may change based on CSS.

The f3a85e1241a187c5ac462d886e9a968b tag is very useful when citing book catalogs and other website addresses. Here is an example of how to use the f3a85e1241a187c5ac462d886e9a968b tag in a piece of text:

Zhang San’s breakthrough monograph

张三AUTOBIOGRAPHY has brought a new atmosphere to the Internet.

2. 5b7a15bed8615d1b843806256bebea72

The 3b5b1885f576f7b4a7d80372c223d3e8 tag will be very useful when you want to add some definitions to options grouped according to different types in a drop-down box. For example, if you wanted to group movies based on time, the code could be written like this:

<LABEL for=showtimes>Showtimes</LABEL>
<SELECT id=showtimes name=showtimes><OPTGROUP label=1PM></OPTGROUP> <OPTION selected 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>

Example:


3. eb37297a59d90581fe5571fb4ef859fe

The eb37297a59d90581fe5571fb4ef859fe tag is usually used to add a definition or a more detailed explanation to a sentence (phrase). When the user hovers the mouse over the text with the eb37297a59d90581fe5571fb4ef859fe tag added, the added

annotation or definition will be displayed below the text. For example:

微博网站 66d61c87439e55a185f76d46e35f4b8b Twitterb6f41a61ff4e4deff620eada73edefdb has recently caused a new trend on the Internet!


Example:

The Weibo website has recently caused a new trend on the Internet!

4. 208700f394e4cf40a7aa505373e0130b

The 208700f394e4cf40a7aa505373e0130b tag is a fairly rare tag, but this does not mean that it is useless. As the name suggests, 208700f394e4cf40a7aa505373e0130b allows you to mark addresses semantically in HTML. This useful tag also italics the data within it, however, this style is easily modified via CSS.

<address>
中国,上海市,闵行区,XX路,XX小区,XXX室
</address>

Example:

China, Shanghai, Minhang District, XX Road, XX Community, Room XXX

5. 426be984ffbbb815d7d88e3543a85d91 and 823db3943044a0a9a620ada8d4b1d965

If you want to display the document editing style through markup, 426be984ffbbb815d7d88e3543a85d91 and 823db3943044a0a9a620ada8d4b1d965 can be used. As their names suggest, 426be984ffbbb815d7d88e3543a85d91 uses an underline to highlight text that has been added to the document, while 823db3943044a0a9a620ada8d4b1d965 uses a strikethrough to highlight text that has been deleted from it.

没有了驴子,我们的日子还要怎么<DEL>过下去</DEL> <INS>活下去</INS>?

Example: Without donkeys, how can we

survive live?

6. 2e1cf0710519d5598b1f0f14c36ba674

When marking up a document, table elements can easily be forgotten. Among table elements, one of the most forgotten elements is probably the 2e1cf0710519d5598b1f0f14c36ba674 tag. But for the 2e1cf0710519d5598b1f0f14c36ba674 tag, it can not only represent a piece of text very conveniently, but at the same time, it can also specify which element the label is used for through the for

attribute. Not only are these 2e1cf0710519d5598b1f0f14c36ba674s easy to style, they also allow you to design the text of the label to be clickable by the user like a button.

<LABEL for="username">用户名</LABEL>  
<INPUT id="username" type="text">

7. 2b5469ab79cf842344327415c3b3bb95

2b5469ab79cf842344327415c3b3bb95 is a very useful tag that can logically group related elements within the form. Once these elements are grouped together using the 2b5469ab79cf842344327415c3b3bb95 tag, a title can be defined for the grouping by binding the 2e1cf0710519d5598b1f0f14c36ba674 tag to the fieldset.

<FORM><FIELDSET>  
<LEGEND>你觉得自己牛X么?</LEGEND>  
Yes<INPUT value=yes type=radio name=yes>  
No <INPUT value=no type=radio name=no>  
</FIELDSET>  
</FORM>

Example:

8. 8a7974376be5f6c00c121222b727adb9

     8a7974376be5f6c00c121222b727adb9和eb37297a59d90581fe5571fb4ef859fe是一类的标签,只是8a7974376be5f6c00c121222b727adb9标签只用于定义缩写的词组。就像eb37297a59d90581fe5571fb4ef859fe,相当于你给元素添加了一个标题或称号。当用户将鼠标悬停在缩写词上面,它的全称会在下方显示。8a7974376be5f6c00c121222b727adb9标签很少被用到,不过它对屏幕阅读器,拼写检查程序和搜索引擎很有用。

他<ABBR title="妈">文明用语</ABBR>的

例子:他文明用语的!

9. rel

    Rel是一个相当有用的属性,基本上任何一个HTML元素都可以应用Rel属性(注1)。它可以为那些没有别的方式提供详细信息的元素提供额外的信息。这在javascript和HTML一起工作时尤其有用。如果你有一个你可能想在内部编辑,你可以这样添加代码:

<html>
<body>
<p><a id="myAnchor" rel="index"
href="http://www.w3school.com.cn">Visit W3School.com.cn</a></p>
<script type="text/javascript">
x=document.getElementById("myAnchor");
document.write(x.rel);
</script>
</body>
</html>

     javascript会找到rel属性为clickable的link元素,然后它可以接着通过ajax内部改变元素。当然,这个只是你可以应用rel属性的无数种情况中的一种,你可以用其他方式来很好的使用rel属性。

10. 37fcc81822f151c26d66e5caf9953670

     37fcc81822f151c26d66e5caf9953670(注2)是个基本已经销声匿迹的标签。坦诚的说,我怀疑读者中的大多数都没接触过这个标签,毕竟它太少用到了(真的,在写这篇文章之前,我自己都没见过这个标签)。这个标签允许你指定一块区域来强制使用换行符,但仅仅是确实必要的时候。该元素很特殊因为它定义在浏览器中添加换行符,如果需要的话,它可以在你极力避免浏览器中出现横向的滚动条时实现符合要求的界面。

如果你想在不必使用37fcc81822f151c26d66e5caf9953670标签的情况下达到相同的效果,你也可以尝试​或­ 。但千万注意,这三个标签中没有一个可以完全支持所有浏览器的。如果你想看看哪些浏览器支持这三种标签可以看看这篇文章。

 译者注:

注1,实际上rel通常用在a和link标签中,它常和rev一起出现。

注2,wbr不是标准的html标签,它最开始是网景公司添加的,但随后被移除掉了。 

附注:

      这篇文章仅仅是一个参考,实际上,由于一些地方使用和解释得并不清楚, 它也引起了比较多的争论,建议如果确实对这些标签有兴趣研究的朋友,可以参看下原文地址并仔细的查看文章的一些回复。

      另外有朋友认为这些少见的标签兼容性会很差,所以我们应少用。然而恰恰相反,上面列举的标签,除了最后一个不符合标准不推荐使用之外,其他都符合W3C标准,它们兼容目前任何主流浏览器。当然,由于eb37297a59d90581fe5571fb4ef859fe和8a7974376be5f6c00c121222b727adb9功能基本一样,在新的html 5标准中不推荐使用eb37297a59d90581fe5571fb4ef859fe,w3c推荐用8a7974376be5f6c00c121222b727adb9代替eb37297a59d90581fe5571fb4ef859fe。

       最后有人可能认为这里的一些标签都可以用其他一些常见标签实现相同功能,因此没必要使用。不过正如回复中沉默杨仔所说:“w3c就是要语义化页面内容”,对用户说,可能你可以通过普通标签实现一样的功能,但对机器(e.g.屏幕阅读器,单词拼写检查程序,搜索引擎等)来说,这种标签它们更容易懂。所以我认为,如果你的网页中真有这些标签可以应用的场合,最好还是使用这些标签来实现相应的功能。

 

The above is the detailed content of 10 uncommon HTML tags you need to know. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn