返回列表2015.09.23

HTML 代码规范

严格的遵循 HTML 代码规范进行开发模板,可以实现减少大量的代码冗余,从而提高编程速度和调试速度。

1、多层元素包含关系下,遵从外层控制宽度,内层控制高度原则,并且尽量减少对元素的宽高控制。如:

<!--错误-->
<style>
.nav{ height:39px;}
.nav ul li{ height:39px;}
.nav ul li a{ height:39px;}
</style>
<div class="nav">
<ul class="cl">
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
</ul>
<from>
	<input type="text" value="">
	<input type="submit" value="提交">
</from>
</div>

<!--正确-->
<style>
.nav ul li a{ line-height:39px;}
</style>
<div class="nav">
<ul class="cl">
	<li><a href="#" class="s">首页</a></li>
	<li><a href="#" class="s">首页</a></li>
</ul>
<from>
	<input type="text" value="">
	<input type="submit" value="提交">
</from>
</div>

2、如果需要对单行文本的容器设置高度,则使用 line-height 替代 height,并且赋予 .s 类

3、子元素有设置浮动的,则直属父元素必须使用 .cl 清除浮动

4、遵从所有标签本身都是容器原则,最大化简化便签套用,不在元素外层添加无意义标签。如:

<!--错误-->
<div><img src="{F file="images/bg.jpg"}"></div>

<!--正确-->
<img src="{F file="images/bg.jpg"}">

5、所有的图片都应该加上 alt 属性

6、除了 LOGO 之外 所有的图片都尽量加上 width、height属性,并且width和height 的值必须和 1188宽度下的实际显示尺寸已经图片实际尺寸相同

7、H 标签的使用

    1)h1 标签只能使用在 logo 上,如:

<h1><a href="/"><img src="{$_Y['logo']}" alt="{$_Y['title']}"></a></h1>

    2)除了 LOGO 之前的地方调用 h 标签的从 h3 开始,并确保在 h1 标签之后

    3)h 标签使用层级表达正确,不可以颠倒使用。如:

<!--错误-->
<h4>这是模块标题</h4>
<div>
	<h3>这个也是标题</h3>
	<p>这是内容</p>
</div>

<!--正确-->
<h3>这是模块标题</h3>
<div>
	<h4>这个也是标题</h4>
	<p>这是内容</p>
</div>

    4)不可以仅为了渲染字体样式而使用 h 标签,而应该使用 CSS 的 fone-size 和 font-weight 属性控制。

8、正确使用 ul 和 dl,当一个数据集合超过或者有可能超过 3 条 并且数据之间的词义表达相同、HTML语法结构相同的情况下就应该使用列表标签(ul 或 dl)

当一个列表是有标题的情况下使用 dl。如:

<!--正确-->
<dl>
	<dt>友情链接</dt>
	<dd><a href="#">新华网</a></dd>
	<dd><a href="#">新华网</a></dd>
	<dd><a href="#">新华网</a></dd>
</dl>

<!--错误-->
<ul>
	<li>友情链接</li>
	<li><a href="#">新华网</a></li>
	<li><a href="#">新华网</a></li>
	<li><a href="#">新华网</a></li>
</ul>

当一个列表是没有标题的情况下使用 ul 如

<ul>
	<li><a href="#">新华网</a></li>
	<li><a href="#">新华网</a></li>
	<li><a href="#">新华网</a></li>
</ul>

9、为了更好的控制页面,在页面布局中尽可能不要如下标签或代码

    1)<hr />:应该使用 CSS 的 boder 属性替代。

    2)<br />:行内元素换行的,应该使用块状化来替代。

    3)&nbsp;:需要元素之间产生间距的 应该使用 CSS 的 margin 来替代。如果是纯粹文字之间需要间隔文字单位的距离的话 可以将输入法切换到全角状态下输入空格