HTMLタグができる10のクールなこと
現時点ではあります 合計142のHTMLエレメント 標準化の初期段階のものと時代遅れになったものを除いて、W3Cによって標準化されています。それは言った、それは必要なときに役立つことができるそれらのいくつかを欠場するか忘れることが可能です.
これまでに、見落としがちなCSSのトリックをいくつかまとめました。この記事では、次のような機能を実装するために使用できるとは知らなかったHTMLタグについて説明します。
1.地図画像
HTML 要素を使用してイメージマップを作成できます. イメージマップ クリック可能な領域が基本的にある画像で、他のWebページまたは同じ文書の他の部分にハイパーリンクすることができます。画像のどの領域をクリック可能にするかを定義するには、それらの点の対応するX Y座標を
内部にネストした要素
.
注意: クリック可能な領域はCSSでスタイル設定することはできません。そのため、これらのマーカーをスタイル設定する場合は、簡単な画像編集ソフトウェアを使用してマーカーを描画します。.
先端: 画像内の1点の座標を知りたい場合は、画像編集ソフトウェアでその画像を開き、その点にカーソルを移動すると、ソフトウェア自体でその座標が表示されるはずです。 GIMPの場合は、下部バーの左側に表示されます。.
2.提案を入力してください
つかいます 入力値を入力している間に表示される関連する提案のリストを提供する.
3.テキストをハイライトする
ハイライト表示されたテキストは通常、明るい背景を持つ暗いテキスト色になります。あなたはマークアップだけでその強調されたテキスト効果を達成することができます。内に囲まれた任意のテキスト その効果があります.
あなたはカスタマイズすることができます ハイライトカラー とともに 背景色
のCSSプロパティ そしてその テキストの色 とともに
色
財産.
4.テンプレートを定義する
HTML5と共に新しいものが来ました 素子。の
要素は、ブラウザによってレンダリングされないマークアップをその中に保持します。それによって囲まれたマークアップは、 動的コンテンツを生成する ページ内 JavaScriptを使う.
たとえば、あなたが持っているとします。 ファインプリントとは、通常、条件、用語、制限、引用、法的権利などの情報を含む非常に小さいサイズで印刷される文書のテキストのことです。 の 注意: 別のドメインへのリンクがある場合は、ページ内のすべての相対URLが基本URLに基づいて参照されます。完全なURLを割り当てることを忘れないでください。. レスポンシブWeb開発は、増え続けるモバイルアクセスと流行しています。マークアップを使用して、画像をさまざまな画面サイズに切り替えることができます。の 注意: これは現在Chromeでのみ機能します。あなたが設定する必要があります HTML5は多くの新しい入力型要素を導入しました。カラー入力要素はその1つです。それはあなたがカラーピッカーの助けを借りてWebページ上の色を選択することができます. ドロップダウンリストにたくさんのオプションがあり、それらをグループ化して表示したい場合は、 内側のマークアップ 動的に行が追加される場合は、そのテーブルの空の行のマークアップを
tagと、必要に応じてスクリプトを含むJavaScript関数を呼び出して、テンプレートタグの内側からマークアップをコピーしてテーブルマークアップに追加します。これはIEではサポートされていません.
5.ファインプリント
HTMLのtagを使って細かい活字を表示することができます。 HTML5以降
tagは、細かいスタイルのテキストを表示するだけでなく、法的な免責事項および警告と同じ意味を意味的に定義します。.
6.ベースURLを割り当てる
HTML要素は、ドキュメント内に同じドメインURLを持つ複数のリンクがある場合に非常に便利です。これにより、ドキュメントに基本URLを追加し、必要に応じてページ内の他のリンクに相対URLのみを追加できます。.応答画像
HTML5要素を使用すると、内部の画像に異なるメディア用のさまざまな画像ソースを追加できます.
dom.image.picture.enable
に 本当の
に about:config
Firefoxで.8.カラーピッカー
9.グループオプション
要素は仕事を終わらせるでしょう。 CSSを使ってグループをスタイルすることもできます.
10.
素子
スクリプトが無効になっている場合にのみブラウザによってレンダリングされます。このタグは、スクリプトがブラウザで無効になっていることをユーザに知らせるため、およびJavaScriptなしでは動作しなくなるWebページ上のコンポーネントの代替フォールバックメカニズムを提供するために役立ちます。.
今読んでください:あなたが見逃しているかもしれない15の役に立つCSSトリック