HTML5標準は、このタイプに応じて区別されている場合、ページ構造、テキストコンテンツ、フォームなどがあります。
ここでは、主にページ構造に新しい要素を紹介します。
セマンティック要素とは何ですか簡単に言えば、意味要素は要素に何らかの意味を与えます(ラベル)。
ヘッダーを表す<Weader>など、フッターを示すなど。
特性seasy簡単なメンテナンス:セマンティック要素を使用すると、ページ構造情報がより明確になります。これは、ページのフォローアップメンテナンスを簡単に維持できます。もう一度コードを表示する必要はありません:特定のクラス名を見つける前に分割を見つける。
②キャビネット - フリー:スクリーンリーダーやその他の補助ツールを読むのに役立ちます。
[最適化された検索エンジン最適化:HTML5のセマンティック要素をチェックした後、検索ロボットはインデックスページで情報を収集できます。
元のインターフェイスレイアウトページのレイアウトでは、<div>は非常に一般的な要素であり、特定のスタイルを使用できます。
メンテナンスを容易にするために、デザイナーはしばしばこれらの<div> className(スタイルカテゴリ)またはIDを特別名で提供します。
たとえば、ヘッダー、そのクラス名またはIDを表す<div>要素は、ページヘッダー、ヘッダーなどです。
例:
ページ構造セマンティック要素説明しますページ構造のセマンティック要素は、ページの全体的なレイアウトに使用されますが、ブロックレベルの要素ですが、ヘッダー、フッターなどの代わりにのみ使用されます。
また、特別なスタイルはありませんが、CSSで使用する必要があります。
詳細な紹介<header>: Webページまたは記事のヘッドエリアを定義します。ロゴ、ナビゲーション、検索バーなどを含めることができます。ブラウザの最低バージョン:IE 9、Chrome5
使用の手順:
webページのラベルに使用される場合、ロゴ、ナビゲーション、検索バーなどの情報を含めることができます。
titleタイトルが他の情報にも添付されている場合にのみ、タイトルがコンテンツをマークするために使用される場合、<h1>はタイトルにラベルを付けます。
<main>: Webページのメインコンテンツを定義します。ブラウザの最低バージョン:つまり、サポートしていません、Chrome35
<フッター>:ウェブページまたは記事のテールエリアを定義します。著作権とファイリングを含めることができます。ブラウザの最低バージョン:IE 9、Chrome5
使用の手順:
webウェブページとして、通常、ウェブサイトの著作権、法的制限、リンクが含まれます。
artion記事の脚注として、通常、著者の関連情報が含まれています。
<Nav>:ページナビゲーションリンクをマークします。複数のオーバーロック領域が含まれています。ブラウザの最低バージョン:IE 9、Chrome5
使用の手順:
byang 1ページには、ナビゲーションや関連記事の推奨など、複数の<NAV>要素を含めることができます。
<<footer>領域の連絡先情報と認証情報は、<nav>要素に含める必要はありません。
<section>:通常、Webページ上の独立した領域としてマークされています。ブラウザの最低バージョン:IE 9、Chrome5
使用の手順:
cortion記事のセクションなど、Webページ内の独立した領域として使用できます。
<ArtTicle>:完全および独立したコンテンツブロック。ニュース、ブログ記事、その他の独立したコンテンツなど(コメントや著者プロファイルを除く)。ブラウザの最低バージョン:IE 9、Chrome5
<astafer>:周囲のメインコンテンツの外側のコンテンツブロックを定義します。など:注釈。ブラウザの最低バージョン:IE 9、Chrome5
<図>:独立したコンテンツのセクションを表し、<figcaption>(表す)でよく使用されます。これは、記事で写真、イラスト、フォーム、コードセグメントなどに使用できます。ブラウザの最低バージョン:IE 9、Chrome 8 <Figcaption>: <fight>要素のタイトルを定義します。
ブラウザの最低バージョン:IE 9、Chrome 8
図の例
ブラウザサポートの古いバージョン上記のIE8ブラウザは、わからない要素の内部要素として使用されます。ページに関連するセマンティック要素はブロックレベルの要素であるため、これらの要素をサポートしないブラウザをブロックレベルの要素として表示するブラウザを設定するだけです。
次のコードをスタイルに追加します。
記事はさておき、詳細、フィギュート、フィギュア、フッター、ヘッダー、hgroup、メイン、ナビゲーション、セクション、概要{display:block;}以下のIE8とIE8
IE8およびIE8以下のブラウザは、認識できない有用な要素アプリケーションスタイルをサポートしていません。
したがって、JSを介してこれらのセマンティック要素を作成し、基本的なスタイルを追加します。
例としてヘッダーを取ります<script> document.createelement( 'header');アプリケーション外部ファイル
これらの退屈な作品はすでにLei Fengを書いており、IEの古いバージョンにロードされたばかりです。
<!