10 ungewöhnliche HTML-Tags, die Sie kennen müssen

高洛峰
Freigeben: 2017-03-12 17:36:17
Original
1328 Leute haben es durchsucht

In diesem Artikel geht es um 10 ungewöhnliche Html-Tags, die Sie kennen müssen

Heutzutage verwenden Webentwicklungsingenieure in ihrem Studium und ihrer Arbeit normalerweise mehr als eine Sprache. Daher ist es für uns schwierig, alle Aspekte einer Sprache zu verstehen. Es ist auch ziemlich schwierig, eine Sprache zu beherrschen, beispielsweise die Verwendung einiger ungewöhnlicher, aber möglicherweise nützlicher Schlüsselwörter in der Sprache.

Obwohl wir diese sehr seltenen HTML-Tags vielleicht vorher nicht verstanden oder nicht in vollem Umfang genutzt haben, ist es noch nicht zu spät, das nachzuholen. Jetzt beginnen wir, sie zu verstehen und können sie richtig verwenden In der zukünftigen Entwicklung ist es noch nicht zu spät, diese bisher ungenutzten Tags zu verwenden.

Hier stelle ich 10 der ungewöhnlichsten und am häufigsten missbrauchten HTML-Tags vor. Obwohl sie möglicherweise nicht so häufig vorkommen wie andere HTML-Tags, können sie in bestimmten Situationen dennoch sehr nützlich sein.

1.

Ich glaube, jeder kennt

, aber wussten Sie, dass
tatsächlich einen jüngeren Bruder hat? ermöglicht die Definition eines Textes als Referenz innerhalb eines Elements. Normalerweise setzen Browser den Text unter dem -Tag auf Kursivschrift, dies kann sich jedoch je nach CSS ändern.

Das -Tag ist sehr nützlich, wenn Sie Buchkataloge und andere Website-Adressen zitieren. Hier ist ein Beispiel für die Verwendung des -Tags in einem Text:

Zhang Sans bahnbrechende Monographie Zhang Sans Autobiographie brachte eine neue Atmosphäre ins Internet.

2.

Wenn Sie einige Definitionen zu Optionen hinzufügen möchten, die nach verschiedenen Typen in einem Dropdown-Feld gruppiert sind, ist das Tag Wenn Sie beispielsweise Filme nach Zeit gruppieren möchten, könnte der Code wie folgt geschrieben werden:

<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>
Nach dem Login kopieren

Beispiel:


3 ;acronym>

Das -Tag wird normalerweise verwendet, um einem Satz (Phrase) eine Definition oder eine detailliertere Erklärung hinzuzufügen. Wenn der Benutzer mit der Maus über den Text mit dem hinzugefügten -Tag fährt, wird die hinzugefügte Anmerkung oder Definition unter dem Text angezeigt. Zum Beispiel:

Weibo-Website Twitter

Beispiel:

Die Weibo-Website hat kürzlich für einen neuen Trend im Internet gesorgt!

4.

Das

-Tag ist ein ziemlich seltenes Tag, aber das bedeutet nicht, dass es nutzlos ist. Wie der Name schon sagt, können Sie mit
Adressen in HTML semantisch markieren. Dieses nützliche Tag stellt auch die darin enthaltenen Daten kursiv dar, dieser Stil lässt sich jedoch leicht über CSS ändern.

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

Beispiel:

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

5. und

Wenn Sie den Dokumentbearbeitungsstil durch Markup anzeigen möchten, können verwendet werden. Wie der Name schon sagt, verwendet eine Unterstreichung, um Text hervorzuheben, der dem Dokument hinzugefügt wurde, während einen Durchgestrichenen verwendet, um Text hervorzuheben, der daraus gelöscht wurde.

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

Beispiel: Wie können wir lebenleben?

6.

Attribut

verwendet wird. Diese

7.
<LABEL for="username">用户名</LABEL>  
<INPUT id="username" type="text">
Nach dem Login kopieren

Sobald diese Elemente mithilfe des
-Tags gruppiert sind, kann ein Titel für die Gruppierung definiert werden, indem das

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

8.

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

他<ABBR title="妈">文明用语</ABBR>的
Nach dem Login kopieren

例子:他文明用语的!

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>
Nach dem Login kopieren

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

10.

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

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

 译者注:

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

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

附注:

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

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

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

 

Das obige ist der detaillierte Inhalt von10 ungewöhnliche HTML-Tags, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage