严格的遵循 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 来替代。如果是纯粹文字之间需要间隔文字单位的距离的话 可以将输入法切换到全角状态下输入空格
