HTML5 セマンティック要素
セマンティック = 意味。
セマンティック要素 = 要素の意味。
セマンティック要素とは何ですか?
セマンティック要素は、ブラウザーや開発者に対してその意味を明確に説明できます。
セマンティクスなし 要素の例: <div> および <span> - コンテンツを考慮する必要はありません。
セマンティクス要素の例: <form>、<img> を明確に定義します。 it Content.ブラウザのサポート
HTML5 の新しいセマンティック要素 多くの既存の Web サイトには次の HTML が含まれています。コード: <div id="nav">、<div class="header">、または <div id="footer"> は、
HTML5 が提供するナビゲーション リンク、ヘッダー、トレーラーを示します。 Web ページのさまざまな部分を明確にするための新しいセマンティック要素:
<header> <nav> <section> <article> <aside> <figcaption> <図> <フッター> ; |
|
HTML5の<header>要素は、ドキュメントのヘッダー領(lǐng)域を記述します<header>導(dǎo)入部分を定義するコンテンツの表示領(lǐng)域。
ページ內(nèi)で複數(shù)の <header> 要素を使用できます。次の例は、記事のヘッダーを定義します。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2016-10-15"></time></p> </header> <p> Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p> </article> </body> </html>
pubdate は、<header> 內(nèi)の日付/時(shí)刻を示します。 time> 要素はドキュメント (または最新の Senior<article> 要素) のリリース日です
プログラムを?qū)g行して試してください
HTML5の<nav>要素
<nav>は、ナビゲーションリンクの部分を定義します。 <nav> 要素は、ページのナビゲーション リンク領(lǐng)域を定義するために使用されます。ただし、すべてのリンクを <nav> 要素に含める必要はありません。 プログラムを?qū)g行してみます。HTML5 要素
<section> タグを見てみましょう。ドキュメント內(nèi)のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。
W3C HTML5 ドキュメントによると、セクションには一連のコンテンツとそのタイトルが含まれます。
インスタンス
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <nav> <a href="">HTML</a> | <a href="">CSS</a> | <a href="">JavaScript</a> | <a href="">jQuery</a> </nav> </body> </html>
プログラムを?qū)g行して試してください
HTML5 の <article> 要素
<article> は、獨(dú)立したコンテンツを定義します。 .
<article> 要素の使用例:
フォーラム投稿 (フォーラム投稿)
ブログ投稿 (ブログ)
コメント (コメント)
- 例
プログラムを?qū)g行して試してみましょう
HTML5 <aside> 要素
<aside>メインエリア ページコンテンツ その他サイドバーより）。 Asideタグの內(nèi)容は、メイン領(lǐng)域のコンテンツに関連している必要があります<footer>
<footer> 要素には、ドキュメントの作成者、著作権情報(bào)、リンクされた利用規(guī)約、連絡(luò)先が含まれます。 ドキュメント要素內(nèi)で複數(shù)の < を使用できます。獨(dú)立したストリーム コンテンツ (畫像、図、寫真、コードなど) を指定します。
<figure> 要素のコンテンツはメインコンテンツに関連している必要がありますが、削除してもドキュメント フローに影響はありません。
<figcaption> タグは、<figure> 要素の最初または最後の子要素として配置する必要があります。
例<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<section>
<h1>WWF</h1>
<p>世界自然基金會(huì)(WWF)是一個(gè)國(guó)際組織致力于保護(hù)問題,研究和恢復(fù)環(huán)境,前身世界野生動(dòng)物基金。世界自然基金會(huì)成立于1961年。</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>熊貓已經(jīng)成為世界自然基金會(huì)的象征。著名的熊貓世界自然基金會(huì)的標(biāo)志來自一個(gè)名為癡癡的熊貓,從北京動(dòng)物園的倫敦動(dòng)物園同年世界自然基金會(huì)的建立。</p>
</section>
</body>
</html>
プログラムを?qū)g行して試してみてください
これらのセマンティック要素の使用を開始できますか?上記の要素はすべてブロック要素です(<figcaption>を除く)。
これらのブロックと要素をすべてのバージョンのブラウザで有効にするには、スタイル シート ファイルにいくつかの屬性を設(shè)定する必要があります (次のスタイル コードを使用すると、古いバージョンのブラウザでこの章で紹介するブロック レベルの要素をサポートできます)。
<head> ;</head>真ん中に移動(dòng)
<style>
{Internet Explorer 8 以前の IE バージョンの問題display: block; }
</style>
IE8 以前のバージョンでは、これらの要素で CSS 効果をレンダリングできないため、<header>、< を使用できません。 Section>、<footer>、<aside>、<nav>、<article>、<figure>、またはその他の HTML5 要素。
解決策: HTML5 Shiv Javascript スクリプトを使用して、IE の互換性の問題を解決できます。 HTML5 Shiv ダウンロード アドレス: http://code.google.com/p/html5shiv/
ダウンロード後、次のコードを Web ページに追加します:
<!--[if lt IE 9]> <script src="html5shiv.js"></script>
<![endif]-->
上記のコードは、ブラウザーが IE9 より小さい場(chǎng)合に html5shiv.js ファイルを読み込みます。 IE ブラウザは head が読み込まれた後に HTML5 のこれらの新しい要素をレンダリングする必要があるため、<head> 要素に配置する必要があります
