文档和网站架构

标题:通常在顶部有一个大标题和图标。这是一个网站的主要常见信息,通常存在与每一个网页。

导航:提供跳转到网站不同内容的链接;通常由菜单按钮、链接或选项卡表示。

主要内容:中心的一个大区域,包含给定网页的大部分独特内容。

侧栏:一些次要信息、链接、引言、广告等。

页脚:横跨页面底部的条纹,通常包含精美的打印、版权通知或联系信息。

为了实现这样的语义标记,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>

猜你喜欢

转载自www.cnblogs.com/leoych/p/12450111.html