1
首先，header,nav,article,section,aside,footer这些html5的标签本质上和div没有任何区别，他们的实质性作用就是让你的html代码有语义。也就是说，仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来，我将以下图为例，写一个样例
2
先写出它的大概框架。注意了，因为article section之类的仅仅是语义上的区别，其实怎么写都行。
3
然后添加一些内容，让页面显得饱满些，随便加一些就行，内容不重要。
4
直接在页面打开，它看上去是这样的。
5
接下来就是用css来让它看上去健康些，先定义header 和 nav以及body。效果如图
body
{
margin: 0 auto
width: 900px
background: #fff
font: 100%/1.4 helvetica, arial, sans-serif
}
header
{
background: #ccc
padding: 20px
}
header h1 { margin: 0}
nav
{
float: left
width: 900px
background: #333
}
nav ul
{
margin: 0
padding: 0
}
nav ul li
{
list-style-type: none
display: inline
}
nav li a
{
display: block
float: left
padding: 5px 10px
color: #fff
text-decoration: none
border-right: 1px solid #fff
}
6
下面是对article 和 footer的定义，完成这些之后就能看到一个还不错的页面了
article
{
clear: left
float: left
width: 560px
padding: 20px 0
margin: 0 0 0 30px
display: inline
}
article h2 { margin: 0}
aside
{
float: right
width: 240px
padding: 20px 0
margin: 0 20px 0 0
display: inline
}
aside h3 { margin: 0}
footer
{
clear: both
background: #ccc
text-align: right
padding: 20px
height: 1%
}
html5新增标签如下：
1、结构性标记结构性标记主要用来对页面结构进行划分，就像在设计网页时将页面分为导航、内容部分、页脚等，确保HTML文档的完整性。
2、多媒体标记多媒体标记主要解决了以往通过Flash等进行视频的一些展示，新增的标记使HTML功能变得更加强大了。
3、表单标记表单标记主要用于功能性的内容表达，会有一定的内容和数据的关联。
html5的意义及应用。
在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“<>” 标签符中表示某个功能的编码命令，称为HTML标签。
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）