バックエンドプログラマフロントエンドの道03--HTMLの意味化(2016/3/16更新)

4226 ワード

HTMLの意味化とは?

なぜ意味化するのか

共通ラベルの意味

HTML 5新要素

一、HTMLの意味化とは何か.
簡単に言えば、ラベルごとに自分のことをして、機械に直接読まれるようにします.
二、なぜ意味化するのか.
1、検索エンジンに収録されやすい.
2、他のタイプの設備の解析を便利にする(例えば:スクリーンリーダーなど)
3、チームの開発とメンテナンスが容易である.
三、常用ラベルの意味
タブ
意味
コメント
 Webページのタイトル ユーザーと検索エンジンに、このページの主な内容を伝えるために使用されます.検索エンジンは、Webページのタイトルを通じて、Webページのテーマを迅速に判断することができます. 文章の段落 既定のスタイルでは、セグメントの前後に空白があります. <h1>~<h6> 文章のタイトル h 1が最も重要であり、通常はウェブサイトの名前に用いられる.これらのラベルはいずれもフォントを太く大きくし,単純にこの効果を達成するためにhラベルを乱用することはできない. / 文章の中のいくつかの文字を強調する この2つのラベルは強調を表すのに使われていますが、はもっと強いです.は斜体効果、は太字効果を示します. 意味がない 個別のスタイルを設定するために機能します. <q> 他人の短い内容を引用する 文章に他人の文を引用する必要がある場合は、このラベルを使用します.ブラウザのデフォルトでは、qラベルに二重引用符が自動的に追加されます.短い内容に適用されます. <blockquote> 人の大部分を引用する 他の人の内容を引用することもあり、<q>ラベルとは異なり、これは大きな内容を引用する場合に適しています. 折り返し htmlでは、折り返しや改行は無視されます. <hr/> 水平横線 異なる段落を分割するために使用します. <address> サイトの連絡先 既定のスタイルは斜体で表示されます.<code> シングルラインコード <pre> プリフォーマットされたテキスト preラベルの内容は、リターンと改行が保持されます.通常、複数行のコードを表示するために使用されます. <ul><li> リスト#リスト# 前後順のリストは含まれていません. <ol><li> 順序付きリスト 順序付きリスト <div> ようき Webページに独立した領域を分割するために使用されます.id、class属性を組み合わせてhtml構造をより明確にすることができます. <table> 表 Webページにデータを表示するために使用されます.含む要素は、tbody、tr、th、td<tbody>:表の内容が多い場合、表はダウンロードして少し表示します.tbodyを付けると、テーブルがすべてダウンロードされるまで表示されません.<tr>:表の行<th>:表のヘッダー、デフォルトは太字で、中央に表示されます.<td>:表のセル <caption> 表の要約情報 サマリー情報はブラウザに表示されません.その役割は、検索エンジンがテーブルの内容をよりよく読み取るように、テーブルの可読性を高めることです. <a> ハイパーリンク <img> 画像 いくつかの主要な属性:src、alt、title src:画像の位置を識別alt:画像のダウンロードに失敗した場合、代替の文字title:マウスが画像をスライドしたときに表示される文字 四、HTML 5の新しい要素 タブ 意味 コメント <article> 独立した文章の内容 ブログ記事、フォーラム投稿、コメントなどです.article要素はネストでき、ネストされた後内層のarticleは外層のarticleに隷属関係がある.例えば、ある文章にコメントをネストします. <section> ドキュメントの領域. 章、ヘッダー、フッター、ドキュメントの他の領域などです.h 1/h 2などのラベルを組み合わせて使用できます <aside> article以外のコンテンツの定義 asideコンテンツは独立したコンテンツですが、articelコンテンツに関連するはずです.一般的にサイドバーなどに作用します. <hgroup> Webページの<hx>要素の組合せに使用 例えば、1つのセグメント内に連続したhシリーズのラベル要素があれば、hgroupで包むことができる <header> セクションまたはdocumentのヘッダーの定義 1つのドキュメントで複数のヘッダーを定義できますが、互いにネストすることはできません.通常は、いくつかのブート情報、ナビゲーションなどです. <footer> sectionまたはdocumentのフッターの定義 典型的には、要素には、作成者の名前、ドキュメントの作成日、および/または連絡先情報が含まれます. <nav> ナビゲーションリンクの定義 すべてのハイパーリンクがnavに配置される必要はありません.navには、現在のページの主要なハイパーリンクを入れる必要があります. <time> 時間または日付の定義 この要素は、日付および時間を機械的に読み取り可能に符号化することができる.例:<code><time datetime="2008-02-14">情人节</time></code>で約束があります. ユーザーにハイライト表示されたテキスト 一般的な適用:検索結果に検索キーワードがハイライト表示されます. <figure> 独立したストリームコンテンツ(画像、コード等)を規定する figureのコンテンツはプライマリコンテンツに関連するべきであり、figureの位置はプライマリコンテンツに対して独立している.この要素を削除すると、ドキュメントフローに影響を与えません. <figcaption> figure要素のタイトルの定義 figcapitonはfigure要素の最初のサブ要素または最後のサブ要素の位置にある必要があります.

html学習リファレンス

スコアシーケンスの合計