1.头部
<header></header>
2.尾部
<footer></footer>
3.导航
<nav></nav>
4.媒体文件引入
<embed src=“”></embed>
5.内容块
<section></section>
6.辅助信息
<aside></aside>
7.文章
<article></article>
8.独立内容块
<figure>
<figcaption>这个是熊大小动物</figcaption>
<img src="xiongda.png" />
</figure>
9.高亮显示文字
<mark></mark>
10.标题组
<hgroup></hgroup>
11.对话框
<dialog open>这是打开的对话窗口</dialog>
12.定义图形
<canvas> </canvas>
13.定义视频
<video src="video/dongbei.mp4" controls autoplay loop="loop" preload="auto" poster="img/企业站1_03.jpg"></video>
其中 ：controls 显示控件
autoplay自动播放，但是只能兼容IE浏览器
loop循环播放
preload预备加载
poster定义第一帧的图片
另外：video允许有多个source元素，source元素可以连接不同的视频文件，浏览器选择第一个可以识别的格式进行播放
<video>
<source src="1"></source>
<source src="2"></source>
<source src="3"></source>
</video>
14.定义音频
<audio src="music/赵大格 - 我在人民广场吃炸鸡 (Live).mp3" controls loop preload="auto" autoplay></audio>
controls 显示控件
autoplay自动播放，但是只能兼容IE浏览器
loop循环播放
preload预备加载
相关代码：
<!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>
*{
padding: 0;
margin: 0;
}
nav{
width: 100%;
height: 60px;
}
ul{
width: 1200px;
height: 60px;
background-color: burlywood;
margin: 0 auto;
}
li{
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: chartreuse;
list-style: none;
float: left;
}
section{
width: 100%;
height: 400px;
background-color: rgb(218, 138, 138);
}
article{
width: 1200px;
height: 60px;
line-height: 60px;
margin: 0 auto;
background-color: cadetblue;
}
aside{
width: 200px;
height: 60px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>文本
<p>文本</p>
<p>文本</p>
<img src="img/section_two_4.jpg" alt="" width='400px'>
<nav>
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</nav>
<section>
<article>
<h3>论谁最美</h3>
我卡看机嗯咯SV叫哦我VB送我uwujnosvnowivhow我一窝窝我哥维护IQ偶爱从第河护卫队超声波v
<aside>文章来源</aside>
</article>
</section>
<hgroup><h1>标题啊</h1></hgroup>
<figure>
<figcaption>标题</figcaption>
<img src="img/section_two_4.jpg" alt="">
</figure>
<mark>高亮显示</mark>
<dialog open >显示对话框</dialog>
</body>
</html>CSS3浏览器前缀
-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀
CSS3优雅降级渐进增强
transition { /*渐进增强写法 从小到大*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s; }
transition { /*优雅降级写法 从大到小*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s; }
文字阴影 text-shadow
text shadow:10px 10px 5px red;
第一个数值：水平阴影距离，可以取负值
第二个数值：垂直阴影距离，可以取负值
第三个数值：模糊度
第四个，颜色
盒子阴影 box-shadow
box-shadow:10px 10px 5px 3px red inset;
第一个数值：水平阴影距离，可以取负值
第二个数值：垂直阴影距离，可以取负值
第三个数值：模糊度
第四个数值：延伸半径
第五个：颜色
第六个：内阴影还是外阴影，默认内阴影