タグはHTML言語の単語です。 彼らの助けを借りて、単純なテキストのストリームを明確な構造を持つ美しくデザインされたドキュメントに変えることができます。 HTMLタグの完全なリストには約100の項目が含まれますが、実際には、常に使用されるものははるかに少なくなります。ページのビジュアルフレームの構築やテキストのフォーマットから、サードパーティのファイルの接続、インターネットの公式ルールへの準拠まで、さまざまな機能を実行します。
ドキュメント構造
Webページがブラウザによって適切に表示され、ロボットによって適切に認識されるためには、特定の構造が必要です。
最初のドキュメントタグは <！DOCTYPE>、それがどのタイプかを宣言します。 ブラウザがレイアウトをレンダリングするのはdoctypeに従います。最も一般的なタイプはHTML5標準で、次のように宣言されています。
<！DOCTYPE html>ページには、すべてのコンテンツをラップするルート要素が必要です。この機能はタグによって実行されます html.
すべてのサービス情報はセクション内に配置されています 頭、およびユーザーに表示される実際のコンテンツはタグで囲むことができます 体.
<！DOCTYPE html> <html> <ヘッド> <！-サービス情報-> </ head> <ボディ> <！-ページコンテンツ-> </ body> </ html>タグの使用 体 ただし、必ずしも良い習慣とは見なされていません。これにより、Webページの構造を明確に定義し、コンテンツ部分の開始と終了を示すことができます。
各タグはコンテンツを備えた本格的なセクションであるため、開始部分と終了部分があります。
サービス情報
タグの内側 頭 ユーザーには見えないデータが書き込まれますが、Webドキュメントにとって重要です。
ブラウザのタブに表示されるページのタイトルはタグで指定されます 題名.
<ヘッド> <title> FB.ru </ title> </ head>
さまざまな有用なサービス情報を、終了部分のないメタタグの形式で提示できます。メタ情報はタグ属性によって記述されます メタ：
名前-記述されたプロパティの名前。コンテンツ- その意味;http-equiv-このメタタグをHTTPヘッダーに変換する必要があることを示します。文字コード-ドキュメントが保存されたエンコード。
以下は、重要なデータの伝達に役立つ属性を持つhtmlタグのリストです。
<メタ文字セット= "utf-8"> | Webページのエンコード |
|
| ドキュメントの内容とseoロボットのキーワードの説明 |
|
| ページ作成者と著作権 |
|
| 著者のメールまたはサイト |
<meta name = "Revisit-After" content = "5 days"> | 5日後にページが変更され、再度インデックスを作成する必要があるという検索ロボットへのメッセージ |
<meta http-equiv = "expires" content = "2018年2月25日日曜日23:59:59 GMT + 03:00"> | Webドキュメントをキャッシュに保持する期間をブラウザに指示します |
|
| seo-robotのコマンド。ページのインデックス作成とページ上のリンクの追跡を許可または拒否します。可能な値：
|
<meta http-equiv = "Refresh" content = "8、URL =" http://www.site.ru "> | 指定した秒数後に別のURLにリダイレクトします |
ファイル接続
Webページを完全に機能させるには、多くの場合、スタイルやスクリプトなどの追加のリソースが必要です。それらは、サードパーティのファイルから含めることも、ドキュメント自体で定義することもできます。
タグ内にスタイルを指定する必要があります 頭ページが正しく表示されるようにします。スタイルファイルを接続するには、属性を持つ非終了リンクタグを使用します href = "ファイルアドレス" と rel = "スタイルシート"これは、アップロードされたファイルがCSSテーブルであることをブラウザに通知します。ページ自体のスタイルルールの定義は、タグで行う必要があります スタイル.
サービスセクションにスクリプトを含めると読み込みが遅くなる可能性があるため、多くの場合、スクリプトはドキュメントの一番下、終了タグの前に宣言されます。 体..。この属性は、ファイルアドレスを示すために使用されます src..。さらに、スクリプトはタグ自体の中に書くことができますが、ブラウザがそれを表示するためのアドレスを指定する必要はありません。
ファイルの接続例：
<html> <頭> <link href = "style.css" rel = "stylesheet"> </ head> <本体> <script src = "script.js"> </ script> </ body> </ html>ページ内でスクリプトとスタイルを定義する例：
<html> <頭> <スタイル> h1 {色：緑; } h2 {色：青; } </ style> </ head> <本体> <スクリプト> var header = document.getElementById（ "header"）; header.style.border = "2px solid red"; </ script> </ body> </ html>ページレイアウト
連続ストリームを視覚的に分割するには書式なしテキストをセマンティックグループに分割し、列と個別のセクションを作成し、構造的なHTMLタグを使用します。これらは、CSSを使用して任意の外観を設定できるブロックコンテナを形成します。
最も人気のあるハイパーテキストマークアップタグは間違いなく div..。意味的な意味はなく、任意のコンテンツセグメントをグループ化するために使用できます。
さらに、いくつかのセマンティックがありますHTML5標準によって導入された構造タグ。たとえば、ナビゲーションブロックやサイトのフッターとして指定することで、コンテンツに特定の意味を与えるのに役立ちます。
ページ全体のレベルで意味のある意味を持つHTMLタグのリスト：
| 鬼ごっこ | セマンティクス |
ヘッダ | サイトヘッダー。通常、タイトル、連絡先の詳細、メインメニューが含まれます |
メイン | メインコンテンツ |
フッター | フッターサイト |
ナビ | ナビゲーションユニット |
論文 | 別の記事やコメントなど、コンテンツの独立した領域を強調表示します |
セクション | ヘッダー付きのWebページの論理セクション |
さておき | 追加情報を含むサイドバー |
さらに、新しい標準では、figureタグとfigcaptionタグを使用して、キャプション付きメディアコンテンツを意味的にグループ化できます。
<図> <img src = "/ images / elefant.jpg" alt = "" /> <figcaption>アフリカの象</ figcaption> </ figure>ヘッダータグ
さまざまなレベルの見出しを強調するために、からのタグのグループ全体があります <h1> 前 <h6>..。 hは単語ヘッダーの最初の文字であり、その隣のインデックスは見出しレベルです。
<h1>第1レベルの見出し</ h1> <h2>ヘッダー第2レベル</ h2> <h3>第3レベルの見出し</ h3> <h4>レベル4の見出し</ h4> <h5>レベル5の見出し</ h5> <h6>レベル6の見出し</ h6>実際には、最初の3つのタイプが最も頻繁に使用されます。
ハイパーリンクの設計
異なるページをリンクするハイパーリンクはワールドワイドウェブの基盤であるため、HTMLでのデザインに特別な注意が払われています。リンクはテキストの残りの部分から目立つようにする必要があります。デフォルトでは、リンクは青色で下線が引かれています。このデザインはタグによって提供されます <a>.
HTMLハイパーリンクタグ属性の完全なリスト：
- クラス、ID、スタイルなどのすべての一般的な属性。
- href-移行先のページのアドレス。
- target-新しいページを開く場所を正確に示します。デフォルトでは、ターゲットは現在のタブ、値です
ブランク新しいタブを開くかどうかを決定します。 - ダウンロード-トランジションの代わりに、指定されたファイルがユーザーのコンピューターにダウンロードされます。
- rel-検索エンジン向けで、値は
nofollowロボットがリンクをたどるのを防ぎます。 - type-ターゲットファイルのMIMEタイプを示します。
メディアコンテンツ
写真、ビデオ、その他のメディアコンテンツがなければ、Webは非常に退屈なものになります。 HTML標準には、ページに挿入するためのタグがいくつかあります。
タグは画像を配置するためのものです img 次の特定の属性を持つ：
src-画像アドレス;alt-画像の読み込み中にエラーが発生した場合に表示される代替テキスト。幅,高さ-サイズ。
埋め込まれたオブジェクトはタグ内に配置できます オブジェクト または 埋め込みさらに、HTML5標準では特別なタグが導入されました ビデオ と オーディオ..。メディアコンテンツの表示と再生を制御する属性の印象的なリストがあります。
鬼ごっこ iframe 別のWebドキュメントをロードできる別のフローティングフレームを作成します。
キャンバス JavaScriptを使用して、さまざまな画像を作成し、それらを高効率で動的に操作できます。
テキストのフォーマット
テキストコンテンツをフォーマットするためのHTMLタグのリストは非常に長いです。
で,強い- 太字;そして,em,dfn-イタリック;q,ブロッククォート-引用符を強調表示します。コード,kbd-モノスペースフォント。デル,s-ストライクスルー;ins,u-下線;マーク-黄色で強調表示。サブ-添え字;sup-上スクリプト;小さい-テキストは現在のものよりも小さいです。
タグを使用して強制ハイフネーションを実行できます <br>. <wbr> 可能性のある改行をブラウザに要求します。また、タグがあります <前>コンテンツにフォーマットを適用しない場合、スペースとハイフンは保持されます。
タグは、段落の形でテキストを配置するのに役立ちます <p>、そして細い灰色の線でそれらを分離します- <hr>.
インタラクティブな要素
フォームとフォームは、インターネットサイトの運営にとって非常に重要です。さまざまなインタラクティブ要素。必要なデータの送受信、ユーザーとのやり取り、動的コンテンツの作成が可能です。
最も重要なフォーム要素の1つは、タグで表される入力フィールドです。 <入力>..。属性の値に応じて、さまざまな形式をとることができます。 タイプ.
その他のフォーム要素：
ボタン-ボタン;選択する- ドロップダウンリスト;textarea-複数行の入力フィールド。ラベル-フィールドの署名。
鬼ごっこ 形 インタラクティブな要素をグループ化し、データをサーバーに送信します。 フィールドセット -関連するフィールドをグループに統合します。
リストデザイン
HTMLには、箇条書き、番号付き、定義リストの3種類のリストがあります。
定義リストは次のもので構成されています。
- コンテナ-
<dl>; - 用語名-
<dt>; - 用語の説明-
<dd>。
<dl> <dt>用語1 </ dt> <dd>最初の用語の説明</ dd> <dt>用語2 </ dt> <dd>第2期の説明</ dd> </ dl>番号付きリストHTMLタグ- <ol> （順序付きリスト）、ラベル付き- <ul> （順不同リスト）。彼らのアイテムはタグで包まれています <li> （リストアイテム）。
<ul> <li>全員</ li> <li>ハンター</ li> <li>願い</ li> <li>知っている</ li> <li>ここで</ li> <li>座っている</ li> <li>キジ</ li> </ ul>テーブルのフォーマット
Webのもう1つの重要な要素はテーブルです。これにより、大量の情報を整理して便利に表示できます。
HTMLテーブルタグのリスト：
- テーブル-テーブルコンテナ;
- thead-ヘッダー。通常はヘッダーを含みます。
- tbody-基本データを含むテーブルの本体。
- tfootは、結果を要約するフッターです。
- trはセルの行です。
- td-通常のセル。
- th-ヘッダーセル。独自のデフォルトの外観があります。
- col-テーブルの列を選択してスタイルを適用できます。
- colgroup-列のグループ。
- キャプション-テーブルのキャプション。
説明付きのHTMLタグのこの不完全なリストハイパーテキストマークアップの可能性がWebページのデザインにどれほど広いかを示しています。レイアウト設計者は、あらゆる情報をユーザーフレンドリーな形式で提示すると同時に、検索ロボットによるページの良好な認識を確保できます。これは、その宣伝にとって非常に重要です。
