1.html5的声明
HTML5的声明是<!doctype html>这个时候走的是怪异模式，HTML4的声明是很长的。在HTML5中是不用担心的。大小写是不区分的，只存在一致性检查
2.新增标签
2.1.结构标签：用于布局的标签
<article><header><nav><section><aside><hgroup><figure><figcaption><footer><dialog>
2.2新增多媒体标签
<video><audio><source><canvas><embed>现在我们不需要自己安装插件
2.3新增的应用标签标签
3.删除的标签
3.1纯表现的的元素
Basefont,big，center,fint,s,strike,tt,u
3.2对可用性产生负面影响的元素，不利于爬虫爬去，不过可以做后台的时候使用。
Frame，Frameset，noframes
4.对于上面的标签做一个练习。一个页面，包括头，底，中间（分为左边和右边）
步骤：
（1）首先知道自己的布局分布，需要使用的标签有header、aside、section、footer，nav，我们先将自己的布局所需要的部分罗列出来。并将数据写入到HTML中。
<body> ???<header> ???????<nav> ???????????<ul>首页</ul> ???????????<ul>播客</ul> ???????????<ul>论坛</ul> ???????</nav> ???</header> ???<div> ?????<section>这是一个布局标签练习</section> ?????<aside>这是一个布局标签练习</aside> ???</div> ???<footer>这是一个布局标签练习</footer></body>
结构当然是没有出来了，因为我们并未添加样式，下来我们开始为每一部分，添加样式。
（2）给头设置样式设置颜色，并设置其宽度和高度。
选择器的方法有三种，这里使用的是标签选择器 ?header{ ?????height:199px; ?????background:#339 ?}（3）我们在给中部的设置样式，中部分为两块，左边和右边。
左边：
section{ ?????height:600px; ?????background:#900; ?????width:70%; ?????float:left
} ???右边
?????aside{ ?????????width:28%; ?????????height:600px; ?????????background:#936; ?????????float:right ???}（4）最后我们在给底部设置样式
footer{ ???????????height:100px; ???????????margin-top:50px; ???????????background:#FCC; ???????????clear:both; ???????????margin:10px ???????????}这样页面就算设置完成了，就可以看到页面的基本框架了，然后对其进行美化，顶部和中部，有一定距离，中部和底部有一点距离，左边和右边有一点距离。基本设置如下
div{ ?????margin:10px; ?????height:600px; ?????}现在所有的设置就已经完成了，我们下来对每一个部分，添加内容。
我们还是从头部开始，头部一般就是导航栏。
（1）导航栏的代码如下
<nav> ???<ul>首页</ul> ???<ul>播客</ul> ???
???<ul>论坛</ul> ?</nav>
我们设置一下导航栏的位置，和颜色样式
?nav{ ?????height:30px; ?????background:#F66; ?????margin-top:151px ?????}此时这几项是竖排放着的，我们使用css样式，将它们变为横排，并设置其颜色和高度。
nav ul li{ ?????????width:100px; ?????????height:30px; ?????????float:left;
}（2）顶部的菜单也就算是完成了，下来紧接着的是中部，还是按照从左到右的顺序。
我们首先添加一个文章
<article> ???????????<h2>春晓</h2> ???????????<p> ??????????????春眠不觉晓<br/> ???????????</p> </article>
样式
?article{ ?????????background:#F00; ?????????margin:0 auto; ?????????width: 300px; ?????????text-align:center;}在网站中右边一般 就是一下推荐，或者新闻，使用<hgroup>标签列举一系列的标题
<hgroup> ???????<h3>xxx</h3> ???????<h3>xxx</h3> ???????<h3>xxx</h3> ???????<h3>xxx</h3> ???????<h3>xxx</h3></hgroup>
（3）现在来处理底部
<footer> ?????<p>这是底部</p> ?????<hr/> ??????<small>xxx</small> ??????<small>xxx</small> ??????<small>xxx</small> ??????<small>xxx</small> ??????<meter min="0" max="10" value="6" low="3" high="7"></meter> ??????<hr/> ??????<progress max="100" value="80" id="pro"></progress> ???</footer>
使用样式
???footer{ ???????????height:100px; ???????????background:#FCC; ???????????clear:both; ???????????margin:10px ???????????}现在就所有的都完成了。
5,对话框的使用dialog，最后的几个就是，出现疑问一答的形式
<dialog> ??<dt>xxx：xxxx</dt> ??<dd>xxxx:xxxx</dd> ??<dt>ttt:eee</dt> ??<dd>ttt:xxxx</dd></dialog>
6.度的使用meter
<meter min="0" max="10" value="6" low="3" high="7"></meter>
可以设置最小值，最大值，还有低值和高值，如果value的值超过低值或者高值，条条的颜色就会变深。
7.进度条的使用
<progress max="100" value="80" id="pro"></progress>
我使用的是谷歌浏览器，可能有的浏览器不支持一些样式。
HTML5的新特性
原文地址：https://www.cnblogs.com/kw28188151/p/8232773.html