ホームページ  >  記事  >  ウェブフロントエンド  >  知っておくべき 10 の珍しい HTML タグ

知っておくべき 10 の珍しい HTML タグ

高洛峰
高洛峰オリジナル
2017-03-12 17:36:171334ブラウズ

この記事では、知っておく必要があるが一般的ではない 10 の Html タグについて説明します

現在、Web 開発エンジニアは通常、学習や仕事で複数の言語を使用しています。したがって、言語のすべての側面を理解することは困難であり、言語内で珍しいが潜在的に役立つキーワードの使用など、言語を習得することも非常に困難です。

私たちはこれらの非常にまれな HTML タグを以前は理解していないか、十分に活用できていないかもしれませんが、それを補うのに遅すぎるということはありません。今では、これらの以前は役に立たなかったタグを理解し、正しく使用できるようになり始めています。将来の開発でラベルを渡すのに遅すぎることはありません。

ここでは、最も一般的ではなく、誤用されることが多い HTML タグを 10 個挙げました。他の HTML タグほど一般的ではないかもしれませんが、特定の状況では依然として非常に役立ちます。

1. f3a85e1241a187c5ac462d886e9a968b

b8a712a75cab9a5aded02f74998372b4 にはよく知られていると思いますが、b8a712a75cab9a5aded02f74998372b4 には f3a85e1241a187c5ac462d886e9a968b という名前の弟がいることをご存知ですか? f3a85e1241a187c5ac462d886e9a968b を使用すると、要素内の参照としてテキストを定義できます。通常、ブラウザは f3a85e1241a187c5ac462d886e9a968b タグの下のテキストを斜体に設定しますが、これは CSS に基づいて変更される場合があります。

f3a85e1241a187c5ac462d886e9a968b タグは、書籍カタログや他の Web サイトのアドレスを引用する場合に非常に便利です。以下は、テキスト内で f3a85e1241a187c5ac462d886e9a968b タグを使用する方法の例です:

Zhang San の画期的な著書 Zhang San's Autobiography は、インターネットに新しい雰囲気をもたらしました

2。 3b5b1885f576f7b4a7d80372c223d3e8 タグは、ドロップダウン ボックス内のさまざまなタイプに応じてグループ化されたオプションに定義を追加する場合に便利です。たとえば、時間に従って映画をグループ化したい場合、コードは次のように記述できます:

<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>

例:


3. 定義または詳細な説明。ユーザーが eb37297a59d90581fe5571fb4ef859fe タグが追加されたテキストの上にマウスを置くと、追加された

注釈

または定義がテキストの下に表示されます。例:

Weibo ウェブサイト d237800cfdb2de14591033a334e1e680 Twitterb6f41a61ff4e4deff620eada73edefdb は最近、インターネット上で新しいトレンドを引き起こしました。

例:


最近、Weibo ウェブサイトはインターネット上で新しいトレンドを引き起こしました!

4. 208700f394e4cf40a7aa505373e0130b

208700f394e4cf40a7aa505373e0130b タグはかなり珍しいタグですが、これが役に立たないというわけではありません。名前が示すように、208700f394e4cf40a7aa505373e0130b を使用すると、HTML でアドレスを意味的にマークできます。この便利なタグでは、その中のデータも斜体で表示されますが、このスタイルは CSS を介して簡単に変更できます。

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

例:

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

5. 426be984ffbbb815d7d88e3543a85d91823db3943044a0a9a620ada8d4b1d965

マークアップを通じてドキュメントの編集スタイルを表示したい場合、426be984ffbbb815d7d88e3543a85d91、823db3943044a0a9a620ada8d4b1d965 を使用できます。名前が示すように、426be984ffbbb815d7d88e3543a85d91 は下線を使用してドキュメントに追加されたテキストを強調表示し、823db3943044a0a9a620ada8d4b1d965 は取り消し線を使用してドキュメントから削除されたテキストを強調表示します。

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

例: ロバがいないのに、どうやって

live

live

をすることができますか?6. 2e1cf0710519d5598b1f0f14c36ba674 ドキュメントにラベルを付けるとき、テーブル要素は忘れられがちです。テーブル要素の中で最も忘れられている要素の 1 つは、おそらく 2e1cf0710519d5598b1f0f14c36ba674 タグです。しかし、2e1cf0710519d5598b1f0f14c36ba674 タグの場合、テキストの一部を非常に便利に表すだけでなく、for

属性

を通じてラベルがどの要素に使用されるかを指定することもできます。これらの 2e1cf0710519d5598b1f0f14c36ba674 はスタイルが簡単なだけでなく、

ボタン

のようにユーザーがクリックできるようにラベルのテキストをデザインすることもできます。

<LABEL for="username">用户名</LABEL>  
<INPUT id="username" type="text">
7. 2b5469ab79cf842344327415c3b3bb95 2b5469ab79cf842344327415c3b3bb95 は、フォーム内で関連する要素を論理的にグループ化できる、非常に使いやすいタグです。 2b5469ab79cf842344327415c3b3bb95 タグを使用してこれらの要素をグループ化すると、2e1cf0710519d5598b1f0f14c36ba674 タグをフィールドセットにバインドすることで、グループ化のタイトルを定義できます。

そうです

例:

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.屏幕阅读器,单词拼写检查程序,搜索引擎等)来说,这种标签它们更容易懂。所以我认为,如果你的网页中真有这些标签可以应用的场合,最好还是使用这些标签来实现相应的功能。

 

以上が知っておくべき 10 の珍しい HTML タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。