h5中的结构元素header、nav、article、aside、section、footer详解

文章目录

header元素
nav元素
article元素
aside元素
section元素
footer元素

结构元素不具有任何样式，只是使页面元素的的语义更加明确

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元素。

文章内容

查看全文

http://www.taodudu.cc/news/show-511890.html

h5标准布局
在tomcat上部署项目，实现类似添加这样的功能之后，tomcat要运行很久，解决办法
如何双击运行可执行的jar包-包懂
java.lang.AbstractMethodError: javax.servlet.jsp.JspFactory.getJspApplicationContext(Ljavax/servlet/
java.lang.NoSuchMethodError: antlr.collections.AST.g（truts2与hibernate jar包(antlr-2.7.2.jar)冲突）
dos的echo on与echo off命令用法实例讲解
spring 学习—spring的相关概念(01)
spring 学习—spring 的ioc底层原理(02)
请问为什么像cellspacing=0和bgcolor=red的属性在style里面不起作用呢？
怎么样给单选按钮前面插入小图标
Data source rejected establishment of connection, message from server: Too many connections
标签的属性和样式属性有什么区别
table表格的两个实现方法(怎样消除内部边框的间距)
spring 学习—spring 的ioc底层原理(03)
怎样通过css控制table的部分td
select默认文字，不出现在下拉选项中
Java split(“\\s+“) 和 split(“+“) 有什么区别
The import java.util cannot be resolved
Uncaught ReferenceError: layer is not defined
margin 0 auto 什么意思
background-attachment: fixed的用法
javax.servlet.jsp.JspFactory.getJspApplicationContext(Ljavax/servlet/ServletContext;)Ljavax/servlet/
为什么我启动哪一个tomcat都是启动同一个tomcat(tomcat7)
什么是脱离文档流？什么是文档流？
CSS之定位布局（position，relative定位布局技巧）
CSS之使用display:inline-block布局
li变成行内块级元素之后，每一个li之间会有间隙，这是为什么?
top,right,bottom,left设置为0有什么用？
css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放
padding-bottom属性的作用