标题:通常在顶部有一个大标题和图标。这是一个网站的主要常见信息,通常存在与每一个网页。
导航:提供跳转到网站不同内容的链接;通常由菜单按钮、链接或选项卡表示。
主要内容:中心的一个大区域,包含给定网页的大部分独特内容。
侧栏:一些次要信息、链接、引言、广告等。
页脚:横跨页面底部的条纹,通常包含精美的打印、版权通知或联系信息。
为了实现这样的语义标记,HTML提供了可以用来表示这些部分的专用标签,如下所示:
- 标题:<header>
- 导航栏:<nav>
- 主要内容:<main>具有代表性的内容段落主题可以使用<article>,<section>,<div>元素。
- 侧栏:<aside>经常嵌在<main>中
- 页脚:<footer>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实验楼</title> </head> <body> <header> <h1>This is headr!</h1> </header> <nav> <ul> <li><a href="#"></a>Home</li> <li><a href="#"></a>Team</li> <li><a href="#"></a>Contact</li> </ul> </nav> <main> <article> <h1>Article heading</h1> <p>好好学习天天向上</p> <h2>subsection</h2> <p>今天适合学习</p> <h3>Anthor subsection</h3> <p>学习使我块乐</p> </article> <aside> <h2>Related</h2> <ul> <li><a href="#">春天万物复苏</a></li> <li><a href="#">夏天夏日绵绵</a></li> <li><a href="#">秋天秋高气爽</a></li> <li><a href="#">冬天白雪皑皑</a></li> </ul> </aside> </main> <footer> <p>@copyright 2018 by CHD.</p> </footer> </body> </html>