结构元素不具有任何样式, 只是使页面元素的的语义更加明确.
header 元素
header 元素是一种具有引导和导航作用的的结构元素, 该元素可以包含所有通常放在页面头部的内容. header 元素通常用来放置整个页面或页面内的一个内容区块的标题, 也可以包含网站 Logo 图片, 搜索表单或者其他相关内容.
- `<header>
- <h1 > 网页主题 </h1>
- </header>`
一个网页中可以使用多个 header 元素, 也可以为每一个内容块添加 header 元素.
nav 元素
nav 元素用于定义导航链接, 是 html5 新增的元素. 该元素可以将具有导航性质的链接归纳在一个区域中, 使页面元素的语义更加明确.
nav 元素通常可以用于以下场合中:
传统导航条
侧边栏导航
页内导航
翻页操作
- `<nav>
- <ul>
- <li><a href="#"> 首页 </a></li>
- <li><a href="#"> 公司概况 </a></li>
- <li><a href="#"> 产品展示 </a></li>
- <li><a href="#"> 联系我们 </a></li>
- </ul>
- </nav>`
article 元素
article 元素代表文档, 页面或者应用程序中与上下文不相关的独立部分, 该元素经常被用于定义一篇日志, 一条新闻或用户评论等. article 元素通常使用多个 section 元素进行划分, 一个页面中 article 元素可以出现多次.
- `<article>
- <header>
- <h1 > 第一章 </h1>
- </header>
- <section>
- <header>
- <h2 > 第 1 节 </h2>
- </header>
- </section>
- <section>
- <header>
- <h2 > 第 2 节 </h2>
- </header>
- </section>
- </article>`
aside 元素
aside 元素用来定义当前页面或者文章的复数信息部分, 它可以包含与当前页面或主要内容相关的引用, 侧边栏, 广告, 导航条等其他类似的有别于主要内容的部分.
aside 元素主要的用法分为两种:
被包含在 article 元素内作为主要内容的附属信息.
在 article 元素之外使用, 作为页面或者站点全局的附属信息部分. 最常用的形式是侧边栏, 其中的内容可以使友情链接, 广告单元等.
- `<article>
- <header>
- <h1 > 标题 </h1>
- </header>
- <section > 文章主要内容 </section>
- <aside > 其他相关内容 </aside>
- </article>
- <aside > 右侧菜单 </aside>`
section 元素
section 元素用于对网站或应用程序中页面上的内容进行分块, 一个 section 元素通常由内容和标题组成. 在使用 section 元素时, 需要注意一下三点:
不要将 section 元素用作设置样式的页面容器, 那是 div 的特性.
如果 article 元素, aside 元素或 nav 元素更符合使用条件, 那么不要使用 section 元素.
没有标题的内容区块不要使用 section 元素定义.
- `<article>
- <header>
- <h2 > 小张的个人介绍 </h2>
- </header>
- <p > 小张是一个好学生, 是一个帅哥...</p>
- <section>
- <h2 > 评论 </h2>
- <article>
- <h3 > 评论者: A</h3>
- <p > 小张真的很帅 </p>
- </article>
- <article>
- <h3 > 评论者: B</h3>
- <p > 小张是一个好学生 </p>
- </article>
- </section>
- </article>`
在 html5 中, article 元素可以看作是一种特殊的 section 元素, 它比 section 元素更具有独立性, 即 section 元素强调分段或分块, 而 article 元素强调独立性. 如果一块内容相对来说比较独立, 完整时, 应该使用 article 元素; 但是如果想要将一块内容分成多段时, 应该使用 section 元素.
footer 元素
footer 元素用于定义一个页面或者区域的底部, 它可以包含所有通常放在页面底部的内容. 与 header 元素相同, 一个页面中可以包含多个 footer 元素. 同时, 也可以在 article 元素或者 section 元素中添加 footer 元素.
`<article>
文章内容
<footer>
文章分页列表
- </footer>
- </article>
- <footer>
页面底部
</footer>`
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/485c60a5c095