说明
顾名思义,语义化标签是带有自身意义的标签,在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
语义化结构标签
section | 表示页面中的一个区块 |
article | 表示一块与上下文无关的独立的内容 |
aside | 在article之外的,与article内容相关的辅助信息 |
header | 表示页面中一个内容区块或整个页面的标题 |
footer | 表示页面中一个内容区块或整个页面的脚注 |
nav | 表示页面中导航链接部分 |
figure | 表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置) |
main | 表示页面中的主要的内容(ie不兼容) |
hgroup | 标题的一个分组 |
mark | 定义高亮显示的文本(span) |
time | 时间 |
dialog | 标记定义一个对话框(会话框)类似微信 |
embed | 标记定义外部的可交互的内容或插件 比如flash |
下面我们使用一部分标签写一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:1000px;
height:600px;
margin:0 auto;
border:5px solid gray;
}
header{
height:80px;
background:orange;
color:#fff;
font-size: 52px;
text-align: center;
}
section{
height:480px;
background:#ccc;
}
nav{
width:200px;
height:480px;
background:gray;
float:left;
}
nav h2{
height: 50px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 50px;
}
nav li{
width: 215px;
height: 43px;
border-bottom: solid #fff 3px;
font-size: 14px;
line-height: 43px;
color: orangered;
padding-left:10px;
list-style:none;
}
main{
width:600px;
height:480px;
background:pink;
float:left;
}
main header{
font-size: 14px;
line-height: 40px;
font-weight: bold;
}
main p{
font-size: 12px;
line-height: 16px;
padding:0 20px;
}
main span{
font-size: 12px;
line-height: 16px;
padding:10px 20px;
}
main footer{
font-size: 12px;
line-height: 40px;
font-weight: bold;
}
aside{
width:200px;
height:480px;
background:gray;
float:left;
}
article{
padding:20px;
background:#ccc;
margin:10px;
}
article header{
height:40px;
}
aside h3{
font-size: 14px;
line-height: 55px;
height: 55px;
text-align: center;
color: #fff;
}
aside p{
font-size: 12px;
line-height: 16px;
color: #fff;
padding:0 20px;
}
footer{
height:40px;
line-height: 40px;
background:orange;
text-align: center;
font-size:20px;
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<header>Header</header>
<section>
<nav>
<h2>nav</h2>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</nav>
<main>
<article>
<header>Article Header</header>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
<footer>Article Footer</footer>
</article>
<article>
<header>Article Header</header>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
<span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</span>
<footer>Article Footer</footer>
</article>
</main>
<aside>
<h3>Aside</h3>
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</aside>
</section>
<footer>Footer</footer>
</div>
</body>
</html>
看一下效果: