HTML5语义化标签
2020-04-21 本文已影响0人
八月飞花
什么是H5
html5是指，html语言的第五次重大更新的版本
html5兼容性
所有主流浏览器都支持html5（chrome，firefox，safari），IE9以上都支持h5，但是ie8及其一下都不支持H5
html更新内容
添加了交互的方式，多媒体，video，audio，canvas
增加了
标签的语义性
标签存储
网页多媒体：音视频
二维三维变换
特效（transition，和adminition）
相对于html4的进步
抛弃了一些不合理的不常用的标记和属性
新增了一些标记，和表单属性
网页结构代码更加简洁
html5的结构
<!doctype !html
<html lang="ch">
<head>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
html5语义特性
html5抛弃标签
html5新增标签
<nav> 表示导航 </nav>
<header>页眉，头部</header>:可以描述任何模块的头部
<footer>页脚，底部</footer>
<main>主体/主要内容</main>
<article>文章</article>
<aside>除了文章之外的内容</aside>
<session></session>
语义化示例
语义化标签布局.png
<body>
<header>头部</header>
<main>
<header>头部</header>
<article>主体内容</article>
<aside>内容以外的内容</aside>
<footer>底部</footer>
</main>
<footer>底部</footer>
</body>
header {
width: auto;
height: 30px;
background-color: aquamarine;
}
main {
width: auto;
background-color: burlywood;
}
main header {
height: 40px;
width: auto;
background-color: rgb(95, 95, 95);
}
main article {
height: 180px;
width: 70%;
float: left;
background-color: red;
}
main aside {
color: aliceblue;
height: 180px;
width: 30%;
float: left;
background-color: black;
}
main footer {
background-color: aliceblue;
}
footer {
clear: both;
width: auto;
height: 30px;
background-color: blueviolet;
}
