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>
我使用的是谷歌浏览器,可能有的浏览器不支持一些样式。