html5中的结构性标签怎么使用

Question

如题所述

Answer 1

结构性标签其实就是语义化的html网页框架，一般网页分为：

头部：header->nav

侧栏：aside

内容：article、section、div

脚部：footer

这些仅仅是html5的一部分，常出现在整个网页的“大框架”结构上，具体位置如下：

html5 虽然增加了很多新的标签，但是并不代表完全抛弃了原有的标签，例如dl-dt-dd组合标签和ul-li组合标签等。article、section的出现并不代表着div作用减少，而是说更合理更清晰的用html标签表达出网页的结构。

Answer 2

方法/步骤
1
首先，header,nav,article,section,aside,footer这些html5的标签本质上和div没有任何区别，他们的实质性作用就是让你的html代码有语义。也就是说，仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来，我将以下图为例，写一个样例

2
先写出它的大概框架。注意了，因为article section之类的仅仅是语义上的区别，其实怎么写都行。

3
然后添加一些内容，让页面显得饱满些，随便加一些就行，内容不重要。

4
直接在页面打开，它看上去是这样的。

5
接下来就是用css来让它看上去健康些，先定义header 和 nav以及body。效果如图
body
{
margin: 0 auto;
width: 900px;
background: #fff;
font: 100%/1.4 helvetica, arial, sans-serif;
}
header
{
background: #ccc;
padding: 20px;
}
header h1 { margin: 0; }
nav
{
float: left;
width: 900px;
background: #333;
}
nav ul
{
margin: 0;
padding: 0;
}
nav ul li
{
list-style-type: none;
display: inline;
}
nav li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}

6
下面是对article 和 footer的定义，完成这些之后就能看到一个还不错的页面了
article
{
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
article h2 { margin: 0; }
aside
{
float: right;
width: 240px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
aside h3 { margin: 0; }
footer
{
clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}本回答被网友采纳