ホームページ > 記事 > ウェブフロントエンド > html5の主な構造要素は何ですか
html5の主な構造要素は何ですか
- 青灯夜游オリジナル
- 2022-02-25 17:15:045756ブラウズ
html5 主な構造要素は次のとおりです: 1.article 要素、独立したコンテンツを定義します; 2.section 要素、ドキュメント内のセクションを定義します; 3. nav 要素、ナビゲーション リンクの一部を定義します; 4.side 要素、定義 ドキュメントのサイドバー部分; 5. time 要素は日付または時刻を定義します。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
主な構造要素は、セマンティクスを構造化し、SEO を改善し、ブラウザーがデータをより適切にキャプチャするために使用されます。含まれる要素は主に、article、section、nav、side、time です。
article 要素
article タグは、意味的にはドキュメントまたはページとみなされます。使用法: 通常、記事、ページ、独立した完全なコンテンツ。独立性が重視されており、記事は相互に入れ子にすることができ、通常は特別なセクション要素と見なすことができるヘッダー タグを持ちます (後で説明します)。頻繁に使用されるコードは次のとおりです。
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1> apple教程</h1>
<p>时间：<time pubdate="pubdate">2013-2-1</time></p>
</header>
<p>轻松学习apple教程，就来</p>
<a href="http://www.apple.com">www.apple.com</a><br />
<footer>
<p><small>底部版权信息：apple.com公司所有</small></p>
</footer>
</article>
</body>
</html>section 要素
section 要素のセマンティクスはセクション、使用法: 記事の段落など、ページ内のコンテンツの特定の段落に使用されます。 、通常は title と content で構成されます。セクションはタイトルのないセクションには推奨されません。記事はより独立しているため、セクションは記事要素をネストできます。使用頻度は低く、セグメント化とチャンク化に重点が置かれています。コードは次のとおりです。
<!DOCTYPE HTML>
<html>
<body>
<section>
<h2>section元素使用方法</h2>
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
</section>
</body>
</html>Note: コンテナのスタイルを設定したり、インステップを定義したりする必要がある場合は、p を使用することをお勧めします。セクションは使用しないでください。
nav 要素
nav 要素のセマンティクスはナビゲーションです 使用法: 一般にページのナビゲーション部分として使用され、頻繁に使用されます。コードは次のとおりです:
<html>
<body>
<nav>
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</nav>
</body>
</html>aside element
aside 要素のセマンティクスは beside とside 使用法:article タグ内で使用される場合、メインコンテンツの補助情報部分として使用されます。関連参考資料、用語集など。記事タグの外側で使用すると、サイドバー、ブログのフレンドリーリンク部分、広告エリアなど、ページまたはサイトのグローバルな補助情報部分として機能します。使用頻度は低いです。コードは次のとおりです。
<!DOCTYPE HTML>
<html>
<body>
<!-- 在article标签内使用时 -->
<article>
<h1>马云是谁</h1>
<p>马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........</p>
<aside>
<h1>参考资料</h1>
<p>百度网、维基百科...</p>
</aside>
</article>
<!-- 在article标签外使用时 侧导航栏-->
<aside>
<nav>
<ul>
<li><a href="">老赵的博客</a></li>
<li><a href="">鬼哥的博客</a></li>
<li><a href="">彪叔的博客</a></li>
</ul>
</nav>
</aside>
</body>
</html>time 要素
time 要素は時間タグです。用途: 24 時間内の特定の瞬間または日付を表します。瞬間を表す際に時差を許可します。多くの形式の日付と時刻を定義できます。使用頻度は低いです。コードは次のとおりです。
<!DOCTYPE HTML>
<html>
<meta charset='utf-8'>
<body>
<aside>
<time datetime="2013-3-6">2014年3月6日</time>
<br/>
<!-- datetime属性中日期与时间之间要用“T” 文字分隔，“T”表示时间 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<br/>
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>
</aside>
</body>
</html>[推奨コース: HTML5 ビデオ チュートリアル 、Web フロントエンド入門チュートリアル ]
以上がhtml5の主な構造要素は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。