久久久精品国产免费看片_九九热日本在线视频_国产精品黄色网站_亚洲人妻在线播放视频

返回列表2015.09.23

HTML 代碼規(guī)范

嚴(yán)格的遵循 HTML 代碼規(guī)范進(jìn)行開發(fā)模板，可以實(shí)現(xiàn)減少大量的代碼冗余，從而提高編程速度和調(diào)試速度。

1、多層元素包含關(guān)系下，遵從外層控制寬度，內(nèi)層控制高度原則,并且盡量減少對元素的寬高控制。如：

<!--錯誤-->
<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、如果需要對單行文本的容器設(shè)置高度，則使用 line-height 替代 height,并且賦予 .s 類

3、子元素有設(shè)置浮動的，則直屬父元素必須使用 .cl 清除浮動

4、遵從所有標(biāo)簽本身都是容器原則，最大化簡化便簽套用，不在元素外層添加無意義標(biāo)簽。如：

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

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

5、所有的圖片都應(yīng)該加上 alt 屬性

6、除了 LOGO 之外 所有的圖片都盡量加上 width、height屬性，并且width和height 的值必須和 1188寬度下的實(shí)際顯示尺寸已經(jīng)圖片實(shí)際尺寸相同

7、H 標(biāo)簽的使用

    1）h1 標(biāo)簽只能使用在 logo 上，如：

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

    2）除了 LOGO 之前的地方調(diào)用 h 標(biāo)簽的從 h3 開始，并確保在 h1 標(biāo)簽之后

    3）h 標(biāo)簽使用層級表達(dá)正確，不可以顛倒使用。如：

<!--錯誤-->
<h4>這是模塊標(biāo)題</h4>
<div>
	<h3>這個也是標(biāo)題</h3>
	<p>這是內(nèi)容</p>
</div>

<!--正確-->
<h3>這是模塊標(biāo)題</h3>
<div>
	<h4>這個也是標(biāo)題</h4>
	<p>這是內(nèi)容</p>
</div>

    4）不可以僅為了渲染字體樣式而使用 h 標(biāo)簽,而應(yīng)該使用 CSS 的 fone-size 和 font-weight 屬性控制。

8、正確使用 ul 和 dl，當(dāng)一個數(shù)據(jù)集合超過或者有可能超過 3 條 并且數(shù)據(jù)之間的詞義表達(dá)相同、HTML語法結(jié)構(gòu)相同的情況下就應(yīng)該使用列表標(biāo)簽(ul 或 dl)

當(dāng)一個列表是有標(biāo)題的情況下使用 dl。如：

<!--正確-->
<dl>
	<dt>友情鏈接</dt>
	<dd><a href="#">新華網(wǎng)</a></dd>
	<dd><a href="#">新華網(wǎng)</a></dd>
	<dd><a href="#">新華網(wǎng)</a></dd>
</dl>

<!--錯誤-->
<ul>
	<li>友情鏈接</li>
	<li><a href="#">新華網(wǎng)</a></li>
	<li><a href="#">新華網(wǎng)</a></li>
	<li><a href="#">新華網(wǎng)</a></li>
</ul>

當(dāng)一個列表是沒有標(biāo)題的情況下使用 ul 如

<ul>
	<li><a href="#">新華網(wǎng)</a></li>
	<li><a href="#">新華網(wǎng)</a></li>
	<li><a href="#">新華網(wǎng)</a></li>
</ul>

9、為了更好的控制頁面，在頁面布局中盡可能不要如下標(biāo)簽或代碼

    1)<hr />：應(yīng)該使用 CSS 的 boder 屬性替代。

    2)<br />：行內(nèi)元素?fù)Q行的，應(yīng)該使用塊狀化來替代。

    3）&nbsp;：需要元素之間產(chǎn)生間距的 應(yīng)該使用 CSS 的 margin 來替代。如果是純粹文字之間需要間隔文字單位的距離的話 可以將輸入法切換到全角狀態(tài)下輸入空格