文档和网站架构
标题:通常在顶部有一个大标题和图标。这是一个网站的主要常见信息,通常存在与每一个网页。
导航:提供跳转到网站不同内容的链接;通常由菜单按钮、链接或选项卡表示。
主要内容:中心的一个大区域,包含给定网页的大部分独特内容。
侧栏:一些次要信息、链接、引言、广告等。
页脚:横跨页面底部的条纹,通常包含精美的打印、版权通知或联系信息。
为了实现这样的语义标记,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>
学以致用,知行合一
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期