HTML5 セマンティック要素
HTML5 セマンティック要素
セマンティック = 意味。
セマンティック要素 = 要素の意味。
セマンティック要素とは何ですか?
セマンティック要素は、ブラウザーや開(kāi)発者に対してその意味を明確に説明できます。
セマンティック要素の例: <div> と <span> - コンテンツを考慮する必要はありません。
セマンティック要素の例: <form>、<img> - コンテンツを明確に定義します。
非セマンティック要素の例: <div> および <span> - コンテンツを考慮する必要はありません。 セマンティック要素の例: <form>、<img> - 明確に定義されたコンテンツ。
<title> は、ドキュメントのタイトルを定義する典型的なセマンティック タグです。
多くの既存の Web サイトには、次の HTML コードが含まれています: <div id="nav"> class="header"> または <div id="footer"> は、ナビゲーション リンク、ヘッダー、およびフッターを示します。
HTML5 では、Web ページの違いを明確にするための新しいセマンティック要素が提供されています。セクション:
< header>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <section> <h1>沁園春 雪</h1> <p>北國(guó)風(fēng)光, 千里冰封, 萬(wàn)里雪飄。 望長(zhǎng)城內(nèi)外, 惟余茫茫。 大河上下, 頓失滔滔。 山舞銀蛇, 原馳蠟象。 欲與天公誓比高。 須睛日, 看紅裝素裹, 分外妖嬈。 江山如此多嬌, 引無(wú)數(shù)英雄競(jìng)折腰。 昔秦皇漢武, 略疏文采; 唐宗宋祖, 稍遜風(fēng)騷。 一代天驕, 成吉思汗, 只識(shí)彎弓射大雕。 俱往矣, 數(shù)風(fēng)流人物, 還看今朝。</p> </section> <section> <h1>我愛(ài)這土地</h1> <p>假如我是一只鳥(niǎo), 我也應(yīng)該用嘶啞的喉嚨歌唱: 這被暴風(fēng)雨所打擊著的土地, 這永遠(yuǎn)洶涌著我們的悲憤的河流, 這無(wú)止息地吹刮著的激怒的風(fēng), 和那來(lái)自林間的無(wú)比溫柔的黎明</p> </section> </body> </html>HTML5 <article> 要素 <article> は獨(dú)立したコンテンツを定義します。 .<article> 要素の使用例: フォーラムの投稿ブログの投稿コメント
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <article> <h1>Internet Explorer 9</h1> <p> Windows Internet Explorer 9(縮寫(xiě)為 IE9 )在2011年3月14日21:00 發(fā)布。</p> </article> </body> </html>HTML5 <nav> 要素 <nav> タグはナビゲーション リンクの部分を定義します。 <nav> 要素は、ページのナビゲーション リンク セクションを定義するために使用されます。ただし、すべてのリンクを HTML5 <aside> 要素に含める必要はありません。 <aside> ; タグは、ページのメイン領(lǐng)域外のコンテンツ (サイドバーなど) を定義します。
aside タグの內(nèi)容は、
HTML5 の
HTML5 の <footer> 要素は、ページの下部領(lǐng)域を記述します。ドキュメント。
<footer> 要素を含む必要があります
フッターには通常、ドキュメントの作成者、著作権情報(bào)、リンクの使用條件、連絡(luò)先情報(bào)などが含まれます。
複數(shù)の < を使用できます。ドキュメント內(nèi)の footer> 要素
HTML5 <figcaption> 要素
<figure> タグは、獨(dú)立したフロー コンテンツ (畫(huà)像、チャート、寫(xiě)真、コードなど) を指定します。
<figure> 要素のコンテンツはメイン コンテンツに関連している必要がありますが、削除してもドキュメント フローに影響はありません。
<figcaption> タグは、<figure> 要素の最初または最後の子要素として配置する必要があります。
包括的な例を書(shū)いて、比較すれば誰(shuí)もが理解できるでしょう:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>語(yǔ)義元素</title> </head> <body> <!--結(jié)構(gòu)元素--> <header>頭部</header> <section>表示一個(gè)段落:用于區(qū)域的章節(jié)表述</section> <footer>區(qū)域的頁(yè)腳部分</footer> <nav>菜單 導(dǎo)航</nav> <article>表示文章的主體內(nèi)容</article> <!--塊級(jí)元素 用于區(qū)域的劃分--> <aside></aside> <figure> <figcaption></figcaption> </figure> <code>表示一段代碼</code> <dialog>表示對(duì)話 <dt>說(shuō)話的人</dt><dd>內(nèi)容</dd> </dialog> <!--語(yǔ)義元素--> <mtter>一定范圍的數(shù)值</mtter> <time></time> <progress>進(jìn)度條</progress> <video>視頻</video> <audio>音頻</audio> <!--交互元素--> <details>一段具體內(nèi)容 通過(guò)某個(gè)方法顯示</details> <datagrid>用來(lái)控制客戶端數(shù)據(jù)顯示</datagrid> <menu>動(dòng)態(tài)交互菜單</menu> <command>命名</command> <!--顯示文章案例--> <article> <header> <h1>HTML head 頭部分的標(biāo)簽</h1> <time>2015年12月12日</time> </header> <p>HTML head 頭部分的標(biāo)簽、元素有很多,涉及到瀏覽器對(duì)網(wǎng)頁(yè)的渲染,SEO等等,而各個(gè)瀏覽器內(nèi)核以及各個(gè)國(guó)內(nèi)瀏覽器廠商都有些自己的標(biāo)簽元素,這就造成了很多差異性。移動(dòng)互聯(lián)網(wǎng)時(shí)代,head 頭部結(jié)構(gòu),移動(dòng)端的meta 元素,顯得更為重要。了解每個(gè)標(biāo)簽的意義,寫(xiě)出滿足自己需求的head 頭標(biāo)簽,是本文的目的。本篇以一絲的文章為基礎(chǔ),進(jìn)行擴(kuò)展總結(jié)介紹常用的head中各個(gè)標(biāo)簽、元素的意義以及使用場(chǎng)景。</p> <footer> <p>http://www.baidu.com</p> </footer> </article> <!--評(píng)論--> <section> <h2>評(píng)論</h2> <article> <header> <h3>張帥</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小時(shí)前</time></p> </header> <p>評(píng)論內(nèi)容</p> </article> <article> <header> <h3>張帥</h3> <p><time pubdata datatime="2013-09-23 10:00 - 11:00">一小時(shí)前</time></p> </header> <p>評(píng)論內(nèi)容</p> </article> </section> </body> </html>