文档和网站架构

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

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

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

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

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

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

 

posted @   胸怀丶若谷  阅读(226)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示