<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
width: 800px;
height: 50px;
margin: 0 auto;
background-color: palegreen;
text-align: center;
line-height: 50px;
color: white;
font-size: 30px;
}
nav{
width: 800px;
height: 30px;
background-color: pink;
margin: 0 auto;
}
main{
width: 800px;
height: 300px;
background-color: aqua;
margin: 0 auto;
}
aside{
width: 200px;
height: 300px;
background-color: peru;;;
}
section{
width: 800px;
height: 200px;
background-color: paleturquoise;
margin: 0 auto;
}
footer{
width: 800px;
height: 100px;
background-color: peachpuff;
margin: 0 auto;
}
</style>
</head>
<body>
<header>头部</header>
<nav>导航栏</nav>
<main>
<aside>侧边栏</aside>
</main>
<section>
<time>
2022.8.12
</time>
</section>
<footer>底部</footer>
</body>
</html>
新标签
1.新增语义化标签
header:头部 nav:导航条 main:内容 section:内容 footer:底部 aside:侧边栏 time:时间标签 mark:标记标签
2.新增表单标签
Input-type:
color颜色版 date日期 range范围 number数字 time时间 emile邮箱
3.新增多媒体标签
video视频 audio音频 soure指定视频音频兼容格式
多媒体标签属性:
(1)src:多媒体文件路径
(2)controls:控制器
(3)loop:循环
(4)poster:指定播放显示封面
(5)prelosd:预加载
(6)muted:静音
4.什么是新标签语义化?有什么好处?
语义化:标签名字有意义。
好处:(1)在没有css样式的情况下对代码结构一目了然
(2)有利于SE(网络搜索引擎)