国产激情视频专区在线观看_av天堂最新一区二区三区_人妻系列无码不卡免费专区_亚洲欧美日韩综合在线一

返回列表2015.09.23

HTML 代碼規(guī)范

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

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

<!--錯(cuò)誤-->
<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="#">首頁(yè)</a></li>
	<li><a href="#">首頁(yè)</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">首頁(yè)</a></li>
	<li><a href="#" class="s">首頁(yè)</a></li>
</ul>
<from>
	<input type="text" value="">
	<input type="submit" value="提交">
</from>
</div>

2、如果需要對(duì)單行文本的容器設(shè)置高度，則使用 line-height 替代 height,并且賦予 .s 類

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

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

<!--錯(cuò)誤-->
<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 開(kāi)始，并確保在 h1 標(biāo)簽之后

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

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

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

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

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

當(dāng)一個(gè)列表是有標(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>

<!--錯(cuò)誤-->
<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)一個(gè)列表是沒(méi)有標(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、為了更好的控制頁(yè)面，在頁(yè)面布局中盡可能不要如下標(biāo)簽或代碼

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

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

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