帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> HTML5教程 >> 阅读文章

html5常用标签使用实例

来源:远方教程 作者:远方教程 发布时间:2015-08-05 查看次数:4346 访问[新版]

  很多人可能由于习惯,有时虽然知道html5的新标签语义明晰,但有时依然绕不过弯,想都不想直接用div了。这里了简单介绍一下几个html5中的标签,并做一个简单的样例。

  首先,header,nav,article,section,aside,footer这些html5的标签本质上和div没有任何区别,他们的实质性作用就是让你的html代码有语义。也就是说,仅仅在html使用它们并不会显示出他们语义中包含的意思。还需要针对每一个标签编写相应的css。接下来,我将以下图为例,写一个样例

html5常用标签使用实例-远方教程

  先写出它的大概框架。注意了,因为article section之类的仅仅是语义上的区别,其实怎么写都行。

html5常用标签使用实例-远方教程

  然后添加一些内容,让页面显得饱满些,随便加一些就行,内容不重要。

html5常用标签使用实例-远方教程

  直接在页面打开,它看上去是这样的。

html5常用标签使用实例-远方教程

  接下来就是用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;

}

html5常用标签使用实例-远方教程

下面是对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常用标签使用实例-远方教程

 

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部