【48】HTML5 （2）——新增①标签语义化
★文章内容学习来源：拉勾教育大前端就业集训营
本篇目录：
- 标签语义化含义
- HTML5新增语义化标签
- 注意事项
一、标签语义化含义
- 以前制作网页布局，我们基本用div 来做;
- div就是一个普通的块级标签， 对于搜索引擎来说，是没有语义的；
- div本身没有语义，设置了类名对于搜索引擎来说也没有什么用处；
- 而标签的语义化对于
seo(Search Engine Optimization)搜索引擎优化有用处。
二、 HTML5一些新增的语义化标签
| 标签 | 含义 |
|---|---|
<header> | 用于网页的头部 |
<nav> | 导航 |
<main> | 用于网页主体部分的划分 |
<article> | 用于网页独立的内容 |
<section> | 用于网页某个区段，类似div |
<aside> | 侧边栏标签，可在左边/右边 |
<footer> | 尾部标签（版权/公司等信息） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语义化标签</title>
<style> * {
margin: 0; padding: 0; } header,nav,article,aside,main,footer {
display: block; } header {
width: 1000px; height: 100px; margin: 0 auto; background-color:hotpink; } nav {
width: 1000px; height: 50px; margin: 10px auto 0; background-color: yellowgreen; } main {
width: 1000px; height: 400px; margin: 10px auto 0; background-color: rgb(134, 230, 217); text-align: left; } main aside {
float: left; width: 150px; height: 390px; margin: 5px; background-color: pink; } main article {
float: left; width: 840px; margin: 5px 0; height: 180px; background-color:lavender; } main section{
float: left; width: 840px; height: 180px; background-color: yellow; } footer {
width: 1000px; height: 80px; margin: 10px auto 0; background-color: tomato; } </style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
主体区域
<aside>侧边栏</aside>
<article>独立的内容</article>
<section>区段</section>
</main>
<footer>底部</footer>
</body>
</html>
三、注意事项
- 这种语义化标准主要针对搜索引擎的（如果不做搜索引擎，可以一样用
div）； - 这些新标签页面中可以使用多次；
- 在IE9中，需要把这些元素转换为块级元素；（因为有兼容问题：IE8以下都没有这些标签）；
- 移动端更喜欢使用这些标签；
- HTML5 还增加了很多其他标签，后面可以慢慢学。具体可参见此链接：（HTML学习）。
下篇继续：
【49】HTML5 （3）——HTML5 新增多媒体标签
