一、前言HTML作為描述網(wǎng)頁(yè)結(jié)構(gòu)的超文本標(biāo)記語(yǔ)言，在百度一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使HTML代碼風(fēng)格保持一致，容易被理解和被維護(hù)。




二、代碼風(fēng)格

2.1. 縮進(jìn)與換行

?


[強(qiáng)制] 使用 4個(gè)空格" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > HTML編碼規(guī)范

HTML編碼規(guī)范

時(shí)間：2023-09-07 10:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-07 10:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML編碼規(guī)范：

一、前言HTML作為描述網(wǎng)頁(yè)結(jié)構(gòu)的超文本標(biāo)記語(yǔ)言，在百度一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使HTML代碼風(fēng)格保持一致，容易被理解和被維護(hù)。




二、代碼風(fēng)格

2.1. 縮進(jìn)與換行

?





示例

<ul>

<li>first</li>

<li>second</li>

</ul>







解釋：




過(guò)長(zhǎng)的代碼不容易閱讀與維護(hù)。但是考慮到 HTML 的特殊性，不做硬性要求。




2.2. 命名










示例

<!-- good -->

<div class="sidebar"></div>




<!-- bad -->

<div class="left"></div>







解釋：




同一個(gè)頁(yè)面中，不同的元素包含相同的id，不符合 id 的屬性含義。并且使用 document.getElementById 時(shí)可能導(dǎo)致難以追查的問(wèn)題。







示例

<!-- good -->

<div id="nav"></div>

<!-- bad -->

<div id="navigation"></div>




<!-- good -->

<p class="comment"></p>

<!-- bad -->

<p class="com"></p>




<!-- good -->

<span class="author"></span>

<!-- bad -->

<span class="red"></span>










解釋：




不允許 class 只用于讓 JavaScript 選擇某些元素，class 應(yīng)該具有明確的語(yǔ)義和樣式。否則容易導(dǎo)致 css class 泛濫。

使用 id、屬性選擇作為 hook 是更好的方式。







解釋：




IE 瀏覽器會(huì)混淆元素的 id 和 name 屬性， document.getElementById 可能獲得不期望的元素。所以在對(duì)元素的 id 與 name 屬性的命名需要非常小心。




一個(gè)比較好的實(shí)踐是，為 id 和 name 使用不同的命名法。




示例

<input name="foo">

<div id="foo"></div>

<script>

// IE6 將顯示 INPUT

alert(document.getElementById('foo').tagName);

</script>




2.3. 標(biāo)簽







示例

<!-- good -->

<p>Hello StyleGuide!</p>




<!-- bad -->

<P>Hello StyleGuide!</P>










解釋：




常見(jiàn)無(wú)需自閉合標(biāo)簽有input、br、img、hr等。




示例

<!-- good -->

<input type="text" name="title">




<!-- bad -->

<input type="text" name="title" />










解釋：




對(duì)代碼體積要求非常嚴(yán)苛的場(chǎng)景，可以例外。比如：第三方頁(yè)面使用的投放系統(tǒng)。




示例

<!-- good -->

<ul>

<li>first</li>

<li>second</li>

</ul>




<!-- bad -->

<ul>

<li>first

<li>second

</ul>
















解釋：




比如 div 不得置于 p 中，tbody 必須置于 table 中。

詳細(xì)的標(biāo)簽嵌套規(guī)則參見(jiàn) HTML DTD 中的 Elements 定義部分。
















解釋：




下面是常見(jiàn)標(biāo)簽語(yǔ)義




示例

<!-- good -->

<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>




<!-- bad -->

<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>










解釋：




在兼容性允許的情況下應(yīng)盡量保持語(yǔ)義正確性。對(duì)網(wǎng)格對(duì)齊和拉伸性有嚴(yán)格要求的場(chǎng)景允許例外，如多列復(fù)雜表單。







示例

<!-- good -->

<img class="avatar" src="image.png">




<!-- bad -->

<span class="avatar">

<img src="image.png">

</span>







2.4. 屬性







示例

<!-- good -->

<table cellspacing="0">...</table>




<!-- bad -->

<table cellSpacing="0">...</table>










解釋：




不允許使用單引號(hào)，不允許不使用引號(hào)。




示例

<!-- good -->

<script src="esl.js"></script>




<!-- bad -->

<script src='esl.js'></script>

<script src=esl.js></script>










示例

<input type="text" disabled>

<input type="checkbox" value="1" checked>










解釋：




使用前綴有助于區(qū)分自定義屬性和標(biāo)準(zhǔn)定義的屬性。




示例

<ol data-ui-type="Select"></ol>




三、通用




3.1. DOCTYPE










示例

<!DOCTYPE html>







示例

<meta http-equiv="X-UA-Compatible" content="IE=Edge">







解釋：




有助于提高頁(yè)面的可訪問(wèn)性，如：讓語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，令翻譯工具確定其翻譯語(yǔ)言等。




示例

<html lang="zh-CN">




3.2. 編碼







示例

<html>

<head>

<meta charset="UTF-8">

......

</head>

<body>

......

</body>

</html>










解釋：




UTF-8 編碼具有更廣泛的適應(yīng)性。BOM 在使用程序或工具處理文件時(shí)可能造成不必要的干擾。




3.3. CSS和JavaScript引入







示例

<link rel="stylesheet" src="page.css">







解釋：




text/css和text/javascript是type的默認(rèn)值。







解釋：




結(jié)構(gòu)-樣式-行為的代碼分離，對(duì)于提高代碼的可閱讀性和維護(hù)性都有好處。







解釋：




在頁(yè)面渲染的過(guò)程中，新的CSS可能導(dǎo)致元素的樣式重新計(jì)算和繪制，頁(yè)面閃爍。







解釋：




將 script 放在頁(yè)面中間將阻斷頁(yè)面的渲染。出于性能方面的考慮，如非必要，請(qǐng)遵守此條建議。




示例

<body>

<!-- a lot of elements -->

<script src="init-behavior.js"></script>

</body>







頁(yè)面相同，建議省略協(xié)議前綴。




解釋：




使用protocol-relativeURL引入CSS，在IE7/8下，會(huì)發(fā)兩次請(qǐng)求。是否使用protocol-relativeURL應(yīng)充分考慮頁(yè)面針對(duì)的環(huán)境。




示例

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>




四、 head




4.1. title










解釋：




title 中如果包含 ascii 之外的字符，瀏覽器需要知道字符編碼類型才能進(jìn)行解碼，否則可能導(dǎo)致亂碼。




示例

<head>

<meta charset="UTF-8">

<title>頁(yè)面標(biāo)題</title>

</head>




4.2. favicon







解釋：




在未指定 favicon 時(shí)，大多數(shù)瀏覽器會(huì)請(qǐng)求 Web Server 根目錄下的 favicon.ico 。為了保證favicon可訪問(wèn)，避免404，必須遵循以下兩種方法之一：







示例

<link rel="shortcut icon" href="path/to/favicon.ico">




4.3. viewport







解釋:




viewport meta tag可以設(shè)置可視區(qū)域的寬度和初始縮放大小，避免在移動(dòng)設(shè)備上出現(xiàn)頁(yè)面展示不正常。




比如，在頁(yè)面寬度小于 980px 時(shí)，若需 iOS 設(shè)備友好，應(yīng)當(dāng)設(shè)置 viewport 的 width 值來(lái)適應(yīng)你的頁(yè)面寬度。同時(shí)因?yàn)椴煌苿?dòng)設(shè)備分辨率不同，在設(shè)置時(shí)，應(yīng)當(dāng)使用 device-width 和 device-height 變量。




另外，為了使 viewport 正常工作，在頁(yè)面內(nèi)容樣式布局設(shè)計(jì)上也要做相應(yīng)調(diào)整，如避免絕對(duì)定位等。關(guān)于 viewport 的更多介紹，可以參見(jiàn) Safari Web Content Guide的介紹




五、圖片










解釋:




多余的 title 影響看圖體驗(yàn)，并且增加了頁(yè)面尺寸。







解釋:




可以提高圖片加載失敗時(shí)的用戶體驗(yàn)。










解釋:




產(chǎn)品 logo、用戶頭像、用戶產(chǎn)生的圖片等有潛在下載需求的圖片，以 img 形式實(shí)現(xiàn)，能方便用戶下載。無(wú)下載需求的圖片，比如：icon、背景、代碼使用的圖片等，盡可能采用 css 背景圖實(shí)現(xiàn)。




六、表單




6.1. 控件標(biāo)題







解釋:




有兩種方式：










推薦使用第一種，減少不必要的 id。如果 DOM 結(jié)構(gòu)不允許直接嵌套，則應(yīng)使用第二種。




示例

<label><input type="checkbox" name="confirm" value="on"> 我已確認(rèn)上述條款</label>




<label for="username">用戶名：</label> <input type="textbox" name="username" id="username">







6.2. 按鈕




[強(qiáng)制] 使用 button 元素時(shí)必須指明 type屬性值。




解釋:




button 元素的默認(rèn) type 為 submit，如果被置于 form 元素中，點(diǎn)擊后將導(dǎo)致表單提交。為顯示區(qū)分其作用方便理解，必須給出 type 屬性。




示例

<button type="submit">提交</button>

<button type="button">取消</button>







6.3. 可訪問(wèn)性 (A11Y)







解釋:




負(fù)責(zé)主要功能的按鈕應(yīng)相對(duì)靠前，以提高可訪問(wèn)性。如果在 CSS 中指定了 float: right 則可能導(dǎo)致視覺(jué)上主按鈕在前，而 DOM 中主按鈕靠后的情況。




示例

<!-- good -->

<style>

.buttons .button-group {

float: right;

}

</style>




<div class="buttons">

<div class="button-group">

<button type="submit">提交</button>

<button type="button">取消</button>

</div>

</div>




<!-- bad -->

<style>

.buttons button {

float: right;

}

</style>




<div class="buttons">

<button type="button">取消</button>

<button type="submit">提交</button>

</div>







解釋:




當(dāng)瀏覽器 JS 運(yùn)行錯(cuò)誤或關(guān)閉 JS 時(shí)，提交功能將無(wú)法工作。如果正確指定了 form 元素的 action 屬性和表單控件的 name 屬性時(shí)，提交仍可繼續(xù)進(jìn)行。




示例

<form action="/login" method="post">

<p><input name="username" type="text" placeholder="用戶名"></p>

<p><input name="password" type="password" placeholder="密碼"></p>

</form>







type 屬性。




解釋:




根據(jù)內(nèi)容類型指定輸入框類型，能獲得能友好的輸入體驗(yàn)。




示例

<input type="date">




七、多媒體







解釋:




音頻應(yīng)盡可能覆蓋到如下格式：







視頻應(yīng)盡可能覆蓋到如下格式：







示例

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

<source src="audio.ogg" type="audio/ogg">

<object width="100" height="50" data="audio.mp3">

<embed width="100" height="50" src="audio.swf">

</object>

</audio>




<video width="100" height="50" controls>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

<object width="100" height="50" data="video.mp4">

<embed width="100" height="50" src="video.swf">

</object>

</video>










示例

<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>




八、模板中的 HTML







示例

<!-- good -->

{if $display == true}

<div>

<ul>

{foreach $item_list as $item}

<li>{$item.name}<li>

{/foreach}

</ul>

</div>

{/if}




<!-- bad -->

{if $display == true}

<div>

<ul>

{foreach $item_list as $item}

<li>{$item.name}<li>

{/foreach}

</ul>

</div>

{/if}







示例

<!-- good -->

<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>




<!-- bad -->

<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>







示例

<!-- good -->

<table>

{foreach $item_list as $item_group}

<tr>

{foreach $item_group as $item}

<td>{ $item.name }</td>

{/foreach}

<tr>

{/foreach}

</table>




<!-- bad -->

<table>

<tr>

{foreach $item_list as $item}

<td>{ $item.name }</td>

{if $item@iteration is div by 5}

</tr>

<tr>

{/if}

{/foreach}

</tr>

</table>

公眾號(hào)：電腦資訊


關(guān)鍵詞：規(guī)范,編碼

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉