一、结构标记概述
结构标记的作用
(1) 经常使用<div>元素设计页面的大致布局,如页头、导航栏、主要内容部分和页脚等
- 布局复杂时,会出现大量的 <div> 元素
- 元素相互形成嵌套,页面会难以处理和维护
(2) HTML5 提供了结构标记,专门用于标识常见的结构
- 如页头,页脚等
- 可以很方便的实现页面各个部分的划分
- 使得文档结构更清晰明确,代码更容易阅读
结构标记
(1) 功能说明:
(2) 代码说明:
二、结构标记元素介绍及使用
<header> 元素
(1) <header> 标签,用于定义文档的页眉
- 通常是一些介绍信息,导航信息,站点标题或者logo 图片等
- 可以在页面上出现多次,可以作为任何部分的头部定义
<nav> 元素
(1) <nav> 元素来定义页面的导航链接部分
- 用于包含表示链接的其他元素
<section> 元素
(1) <section> 标签用于定义文档中的节
(2) 表示文档中的一个具体的组成部分
- 常用于为页面上的内容分块 ,比如定义章节、页眉、页脚或文档中的其他部分
- 可以使用<header>元素为内容添加标题
<article> 元素
(1) <article> 标签常用于定义独立于文档的其他部分的内容
- 比如论坛的一个帖子、一篇报纸文章、某个博客条目或者用户评论等
<footer> 元素
(1) <footer> 元素常用于定义某区域的脚注信息
- 常用来定义文档的页脚,以包含友情链接、版权信息和作者信息等
- 一个页面中也可以包含多个 <footer> 元素
<aside> 元素
(1) <aside> 元素常用于定义页面的一些额外组成部分
- 如广告栏、侧边栏和相关引用信息等
总结:本章内容主要介绍了下 HTML结构标记使用方法。