HTML5新增内容-结构标签

2023-12-28 20:50:09 浏览数 (1)

结构相关标签

用来进行页面结构布局,本身无任何特殊样式 ,需要使用CSS进行样式设置

  • article 定义一个独立的内容,完整的文章
  • section 定义文档的章节,段落
  • header 一般用于这三个地方:页面头部。文章的头部,页眉,标题。区块头部
  • footer 文章的底部,页脚,标注
  • aside 定义侧边栏
  • figure 图片区域
  • figcaption 为图片区域定义标题
  • nav 定义导航菜单

结构标签只是表明各部分的角色,并无实际外面样式,与普通的div相同

article元素

一般用于地方:

  • 文章内容部分

article可以看成一个独立的部分,也可以看成别名的div,它内部可以包含标题及其他部分。

注意:在严格意义上,每一个article元素内部都应该有一个header元素

实例

代码语言:html复制
<article>
	<header>
    <h1>全球气温为什么不断上升?</h1>
    </header>
    <div>文章内容.....</div>
    <footer>
    <nav>下一篇</nav>
    </footer>
</article>

section元素

section元素一般用于某一个需要标题内容的区块。

说明:如果页面某个区块不需要标题,直接使用div元素。如果需要标题,则建议使用section元素。

代码语言:html5复制
<section>
	<header>理科</header>
	<ul>
        <li>数学</li>
        <li>语文</li>
    </ul>
</section>

header元素

一般用于地方:

  • 页面头部

header元素一般用于包括网站名称、页面LOGO,顶部导航,介绍信息等

  • 文章头部

header元素一般用于包含“文章标题”和“meta信息”两部分

  • 区块头部(即section元素头部)

header元素一般只包含区块的标题内容

footer元素

一般用于地方:

  • 页面底部
  • 文章底部

aside元素

aside元素一般用于表示跟周围区块相关的内容

一般用于地方:

  • 如果aside元素放在article元素或section元素之中,则aside内容必须与article内容或section内容紧密相关
  • 如果aside元素放在article元素或section元素之外,则aside内容应该是与整个页面相关的,比如文章内容,文章点赞等

nav元素

一般用于地方:

  • 顶部导航

nav元素可以放到header元素内部,也可以放到header元素外部。放在哪里取决于开发需求

  • 侧栏导航
  • 分页导航

0 人点赞