html5の主な構造要素は何ですか-フロントエンドQ&A-php.cn

html5の主な構造要素は何ですか

青灯夜游

リリース： 2022-02-25 17:15:04

オリジナル

5883 人が閲覧しました

html5 主な構造要素は次のとおりです: 1.article 要素、独立したコンテンツを定義します; 2.section 要素、ドキュメント内のセクションを定義します; 3. nav 要素、ナビゲーションリンクの一部を定義します; 4.side 要素、定義ドキュメントのサイドバー部分; 5. time 要素は日付または時刻を定義します。

html5の主な構造要素は何ですか

このチュートリアルの動作環境: 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=&#39;utf-8&#39;>
<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 サイトの他の関連記事を参照してください。