以下は、10個のHTMLタグを十分に十分に誤解または誤解しています。たぶんそれらはあまり知られていないかもしれませんが、特定の状況では非常に有用です。
Web開発者はしばしば複数の言語を理解し、習得したいと考えており、その結果、言語ですべてを学ぶことは注意が必要ですが、より特別なが便利なタグを完全に活用していないことを見つけるのは簡単です。
翻訳:tutsplus
残念ながら、あまり知られていないHTMLタグのすべての可能性についてはまだ入手していません。しかし、それが領域に遅すぎることは決してありません。これらの未開拓のタグのエネルギーを明らかにするためにコードの書き込みを開始します。
以下は、10個のHTMLタグを十分に十分に誤解または誤解しています。たぶんそれらはあまり知られていないかもしれませんが、特定の状況では非常に有用です。
1。<Cite>
誰もが<blockquote>タグに精通しているようですが、<blockquote>の弟の<cite>を知っていますか? <Cite>要素内のテキストを参照として定義できます。一般に、ブラウザはイタリック体を使用して<cite>タグにテキストを表示しますが、これは小さなCSSで変更できます。
<cite>タグは、ディレクトリや他のWebサイトへの参照に役立ちます。これは、段落で引用タグを使用する例です。
デイビッド・アレンのあなたの仕事を成し遂げる画期的な組織の本は、忘れる嵐をもたらしました。 2。<OptGroup>
<optgroup>タグは、選択タグのグループ化オプションを定義するのに最適な方法です。たとえば、映画リストを時間単位でグループ化する必要がある場合は、これを行うことができます。
12
<ラベルの= showtimes>リリース時間</label> <select id = showtimes name = showtimes> <optgroup label = 1:00 pm> </optgroup> <option value = titanic> option> <option> <option>> slumdog億万長者</option> <option> <option value = wab> optgroup> optgroup> </optgroupラベル> <値= BKRW>ライオンキング</option> <オプション値= stf> superman </option> </select>
デモ:映画リストを視覚的に区別できます。 3。<頭字語>
<頭字語>は、一連のテキストを定義または解釈する方法です。マウスを使用して<頭字語>タグを使用してテキストを配置すると、タイトルタグのコンテンツを示すボックスが以下に表示されます。例えば:
1
weibo webサイト<頭字語タイトル= 2006年に設立> Twitter </inromony>は最近頻繁にダウンタイムになりました。
例:WeiboのWebサイトTwitterは最近ダウンタイムです。 4。<アドレス>
<アドレス>タグは非常に目立たない小さなタグですが、それは役に立たないという意味ではありません。名前が示すように、<dresd>を使用すると、HTMLのタグをセマンティック化できます。この小さなラベルは、デフォルトの斜体のラベルに内容を表示します。もちろん、スタイルを使用すると、デフォルトスタイルを簡単に変更できます。
1234
<アドレス> Glen Stansberry1234 Web Dev Laneanywhere、USA </address> 5。<ins>および<del>
タグを使用して編集されたバージョンを表示する場合は、<ins>と<del>がちょうどいいです。名前が示すように、<Iss>はアンダースコアで追加されたコンテンツを強調表示しますが、<del>は削除された情報を表示するためにStrikethroughを使用します。
1
John <del>が好き</del> <ins>が彼の新しいiPodを愛しています。
例:みんなのように放棄されたzblog。 6。<ラベル>
フォーム要素は、テキストをマークするタイミングを忘れる可能性が最も高いようです。フォーム要素の場合、私が忘れる最も一般的なことは<label>タグです。テキストにタグを付けるのに便利な方法だけでなく、<label>タグは、属性を渡して、関連する要素を指定することもできます。 <label>は、スタイルで簡単に制御できるだけでなく、タイトルをクリック可能にすることもできます。
12
<label for = username> username < /label> <input id = username type = text /> 7。<FieldSet>
Fieldsetは、フォーム要素に論理グループを追加するために使用できる小さなタグです。 <fieldset>タグは、その内部の要素の周りにボックスを描きます。もう1つのポイントは、Fieldsetに<label>タグを追加してグループのタイトルを定義できることです。
1234567
<form> <fieldset> <legend> 5歳の学生より賢いですか? </legend>もちろん<入力名=はいタイプ=無線値=はい/>わからない<入力名=いいえタイプ=無線値= no/> </fieldset> </form>
例: 8。<Abbr><Abbr>タグは<頭字語>タグに非常に似ています。違いは、<Abbr>タグが略語のみを定義するためにのみ使用されることです。 <頭字語>と同様に、このタグのタイトルプロパティを定義できます。ユーザーがマウスを略語テキストの上に配置すると、コンテンツ全体が以下に表示されます。 <Abbr>タグはめったに使用されませんが、スクリーンリーダー、スペルチェッカー、検索エンジンに非常に役立ちます。
1
<abbr title = brainless> nc </abbr>は、文明化されていない用語です。
例:それはあまり文明化されていない用語です。それはあまり文明化されていない用語です。 9。rel
RELは非常に有用なプロパティであり、HTML要素はRELプロパティを適用できます。追加の指定なしで追加のパラメーターを渡すのに役立ちます。これは、HTMLでJavaScriptを使用する場合に非常に便利です。行内で編集するリンクがある場合は、次のことを追加できます。
1
<a rel = clickable href = page.html>このリンクは編集可能です。 </a>
JavaScriptは、Clickableクリック可能なREL属性を含むリンクを探し、Ajaxを適用し、ライン内で編集できるようにします。これは、REL属性の可能性が無限であるため、REL属性を使用できる多くのテクニックの1つの使用法です。興味のある友達は、W3CのRelの詳細な紹介を勉強できます。 10。<wbr>
<wbr>タグは信じられないほど不正なタグです。率直に言って、私はあなたがこのタグがほとんど使われていないので、あなたがこのタグにさらされるとは思わない。 (確かに、この投稿を書く前にこのタグを見たことはほとんどありませんでした)。実際、このタグはソフトラインブレークであり、特定のラインのラインブレークポイントを指定することができ、そのポイントでラインブレークが壊れる可能性があることを示しますが、必ずしも壊れるわけではありませんが、必要なときにのみ壊れます。水平スクロールバーを避けたい場合は、このタグを使用するのが最適です。
例:以下は、オーバーフローが定義されていない200ピクセルの幅の箱です。 nowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbr
ハバウブハバウブhavawbrhavawbrhavawbrhavawbrhavawbrhavawbrhavawbrハバウブ
<wbr>タグを使用せずに同じ効果を達成したい場合は、試してみることができます。これらの3つのタグのいずれも、すべてのブラウザーによって完全にサポートされていないと言われています。この記事を使用して、3つのタグの各ブラウザのサポートを表示できます。
PS:この記事を困難に翻訳した後、Shenfeiはセマンティクスの魅力とHTMLタグの力を深く感じました。私たちは多くのタグを実現していないと思います。その結果、誰もが一般的なタグに精通しており、誰もが珍しいタグを使用することはできません。以前に記事で説明したように、セマンティクスの大部分は、単にそれらを分割するのではなく、適切な場所で適切なラベルを使用することです。より多くのHTMLタグを学ぶことができれば、より多くのセマンティックHTMLコードを作成できます。これにより、CSSの執筆の難易度とワークロードを大幅に軽減し、ページ構造をよりリーズナブルにすることができます。