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） ：需要元素之间产生间距的应该使用 CSS 的 margin 来替代。如果是纯粹文字之间需要间隔文字单位的距离的话可以将输入法切换到全角状态下输入空格