这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有什么问题的情况下,我们需要考虑的就是如何能够实现的更好,能够让我们做的页面代码精简度、性能让能够更符合我们的开发规范。所以今天我们着重的给大家来讲解一下如何选择标签,以最精简的代码实现我们的页面制作。
通过这么长时间的页面制作,我们知道在每次制作的时候都需要引入一个叫做reset.css的CSS文件,当这个文件引入正确的时候,我们书写出来的每一个标签都是一模一样的。回顾我们前两周的文章,在那里我们看到了标签最原始的状态,都有着自己独特的展示状态。网页的结构是由许许多多的标签组成,标签可以分为块、行、第三类,我们在使用他们进行页面的搭建的时候,也是需要考虑它们在浏览器中的默认样式的。
标签默认展示状态如下:
标签原始的默认样式会对我们的布局产生很大的影响,所以大家在进行页面布局的时候都需要引入reset.css文件来清除掉标签的默认样式,这样才会利于我们的布局。但是作为开发者的我们是明白这点,但是浏览器在解析的时候却无法这样进行区分,它只会知道你这个标签仍然有默认样式,只不过是被我们使用样式进行了覆盖。所以这时候我们为了让浏览器能够更好地解析页面,我们就需要了解一下标签的语义性,说白了就是标签自身的含义是什么。
接下来大家在一起看看吧~!
如上,我们看到了所有标签的含义是什么,也可以通过它们自身的语义性来做相应的选择,做好页面优化工作。所以在自己会选择标签了之后,小编再为大家整理了一个前端开发中需要遵守的标签嵌套规则。
具体如下:
当我们明白了标签的默认样式、语义性、嵌套规则等之后,再来开始选择标签来进行页面布局就会轻松很多,因为这时候我们会发现很多东西前面准备好了,现在只需要直接参照着规则来进行使用即可。
那现在我们主要就从代码的精简度层面出发,给大家总结了一些在代码书写的时候需要注意的点。
除这些标签的选用规则以外,在页面制作中,对于图片的选用也是至关重要的。因为背景图、数据图总是让人难以区分,所以接下来小编就给大家好好划分一下:
如下给出的两个案例是我们最常用的页面导航的制作,两种方式对应着两种标签的选择方法,各有各的特点。
制作导航栏,直接使用div~a的形式,减少层级的嵌套。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
.nav {
width: 980px;
height: 34px;
margin: 20px auto 0;
padding: 4px 0 0 88px;
background: url("images/nav_bac.jpg") 0 0 repeat-x;
}
.nav a {
float: left;
height: 34px;
padding: 0 15px;
line-height: 34px;
color: #fff;
}
.nav .active-nav, .nav a:hover {
padding: 0 14px;
border-left: 1px solid #ac1736;
border-right: 1px solid #ac1736;
background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
}
</style>
</head>
<body>
<div class="nav">
<a class="active-nav" href="" title="">首页</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
<a href="" title="">HTML5学堂</a>
</div>
</body>
</html>
制作导航栏,使用ul~li~a来实现,多嵌套一个层架,但是结构稳定。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>H5course</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
.nav {
width: 980px;
height: 34px;
margin: 20px auto 0;
padding: 4px 0 0 88px;
background: url("images/nav_bac.jpg") 0 0 repeat-x;
}
.nav li a {
float: left;
height: 34px;
padding: 0 15px;
line-height: 34px;
color: #fff;
}
.nav .active-nav, .nav li a:hover {
padding: 0 14px;
border-left: 1px solid #ac1736;
border-right: 1px solid #ac1736;
background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a class="active-nav" href="" title="">首页</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
<li>
<a href="" title="">HTML5学堂</a>
</li>
</ul>
</body>
</html>
两组代码展示的效果是一致的,如下:
拿出上次我们写的页面,查看自己对于标签的选用是否合理,如不合理需要怎么修改。