HTML編碼規(guī)范

版規(guī)則

縮進(jìn)

使用2個(gè)空格縮進(jìn)

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫(xiě)

只允許使用小寫(xiě)。

所有的代碼都用小寫(xiě)字母：適用于元素名，屬性，屬性值（除了文本和CDATA），選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規(guī)Meta規(guī)則

編碼

如果沒(méi)有特殊需求，一般采用utf-8編碼。如果是cms站點(diǎn)，則遵守該站點(diǎn)的編碼規(guī)則。

<!-- 網(wǎng)頁(yè)編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫(xiě)的代碼。說(shuō)明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項(xiàng)目的復(fù)雜程度。

一般單行注釋?zhuān)?/p>

<!-- col -->

模塊間注釋?zhuān)?/p>

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環(huán)注釋?zhuān)?/p>

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋?zhuān)?/p>

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項(xiàng)卡內(nèi)容注釋?zhuān)?/p>

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規(guī)HTML設(shè)計(jì)規(guī)則

文檔類(lèi)型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類(lèi)型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫(xiě)有效、正確的HTML代碼，否則很難達(dá)到性能上的提升。

可以使用一些工具驗(yàn)證你的代碼，如 W3C HTML validator

HTML 的語(yǔ)義性

根據(jù)HTML各個(gè)元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標(biāo)簽說(shuō)明：

div 主要用于布局，分割頁(yè)面的結(jié)構(gòu);
ul/ol 主要用于無(wú)序/有序列表;
dl/dt/dd 當(dāng)頁(yè)面中出現(xiàn)第一行為類(lèi)似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽;
span 沒(méi)有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標(biāo)題, 根據(jù)重要性依次遞減;
h1 最重要的標(biāo)題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標(biāo)簽：

font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對(duì)齊;
s 刪除線;
strike 刪除線;
noframes 無(wú)視框時(shí)的內(nèi)容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個(gè)別視框;
frameset 視框格式總定義;

多媒體元素降級(jí)處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標(biāo)簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標(biāo)簽中忽略type屬性。

HTML5默認(rèn)type為text/css和text/javascript類(lèi)型，所以沒(méi)必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規(guī)則

每個(gè)塊元素、列表元素或表格元素都獨(dú)占一行，每個(gè)子元素都相對(duì)于父元素進(jìn)行縮進(jìn)。按設(shè)計(jì)稿劃分模塊，盡量使頁(yè)面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁(yè)面框架，推薦寫(xiě)法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁(yè)面良好層次

保證整個(gè)頁(yè)面在未加載樣式表時(shí)仍有較好的層次清晰的頁(yè)面結(jié)構(gòu)。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權(quán)重標(biāo)簽使用

H標(biāo)簽使用

h1 權(quán)重高，體現(xiàn)當(dāng)前網(wǎng)頁(yè)中相對(duì)比較重要的信息，但不宜過(guò)多，建議一個(gè)頁(yè)面只放一個(gè);
h2 可以做副標(biāo)題;
h3 可以做新聞列表;
h4-h6 可做相關(guān)新聞的列表標(biāo)簽屬性完整;

strong、b使用

將需要加粗的文字使用b標(biāo)簽來(lái)顯示。

將需要強(qiáng)調(diào)的文字（主要指包含關(guān)鍵詞的信息）使用strong標(biāo)簽來(lái)強(qiáng)調(diào)主要內(nèi)容。

注：b是粗體標(biāo)簽，屬于實(shí)體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體）；strong 是加重語(yǔ)氣標(biāo)簽，屬于邏輯標(biāo)簽，它的作用是加強(qiáng)字符語(yǔ)氣。

標(biāo)簽屬性使用

在很多情況下，a都要使用title來(lái)說(shuō)明該鏈接的相關(guān)說(shuō)明或目的意義。

例如：當(dāng)使用overflow隱藏掉a中的溢出文字時(shí)，該a中的title是必不可少的，它可以告訴用戶(hù)被隱藏掉的文字內(nèi)容是什么；又或者當(dāng)一個(gè)圖片型鏈接出現(xiàn)時(shí)，該a中的title同樣是必不可少的，它可以告訴用戶(hù)這個(gè)圖片鏈接是做什么用的。

注：僅在img里添加alt標(biāo)簽在火狐提示文字是出不來(lái)的，alt是圖片加載失敗或未加載完全時(shí)顯示出來(lái)的提示文字，要想鼠標(biāo)移上去顯示提示信息應(yīng)該用title，嚴(yán)謹(jǐn)?shù)膶?xiě)法是img里加入alt和title這兩個(gè)標(biāo)簽。

精簡(jiǎn)代碼

代碼保持精簡(jiǎn)，最優(yōu)化，這樣搜索引擎才更喜歡。

方案講述如何將圖文聲像或其他類(lèi)型的素材合成一個(gè)可以獨(dú)立運(yùn)行的EXE文件，并制作成可自動(dòng)運(yùn)行的多媒體光盤(pán)或優(yōu)盤(pán)。

臨近畢業(yè)，師生們?cè)谝黄饘W(xué)習(xí)生活了多年，有許多值得留戀的東西。大家希望將以往積攢的圖文聲像素材合成一份個(gè)性化的多媒體作品，并制作成能夠自動(dòng)演示的光盤(pán)或優(yōu)盤(pán)，分發(fā)留念。這個(gè)任務(wù)如果用PPT完成，對(duì)某些特殊類(lèi)型媒體素材的支持實(shí)現(xiàn)起來(lái)比較麻煩，往往需要使用插件或VBA編程實(shí)現(xiàn)。而如果用改Flash制作，又需要一定的技能。

其實(shí)，有更簡(jiǎn)單但比較專(zhuān)業(yè)的方法可以不編程、不裝插件，就能輕松實(shí)現(xiàn)制作效果比較專(zhuān)業(yè)的多媒體紀(jì)念冊(cè)。完成后的作品是一張插入光驅(qū)就能自動(dòng)演示的多媒體光盤(pán)，不依賴(lài)于任何工具軟件環(huán)境便可獨(dú)立運(yùn)行。

本案例我們要制作的紀(jì)念冊(cè)光盤(pán)主要內(nèi)容包括“老師寄語(yǔ)”“生活影集”“班級(jí)頻道”“活動(dòng)錄影”“班長(zhǎng)作品”“歷史珍藏”等多個(gè)部分，每個(gè)部分所展示的媒體類(lèi)型都各不相同。

前期材料準(zhǔn)備工作

首先安裝多媒體設(shè)計(jì)工具M(jìn)ultimedia Builder（簡(jiǎn)稱(chēng)MMB）。接下來(lái)準(zhǔn)備好建立多媒體演示作品所需要的原始素材。包括文字、圖片、錄音、視頻、Flash作品、EXE可執(zhí)行文件作品等。

1. 圖像文件。需要BMP、JPG、PCX、PNG、TIFF等常用格式。如果手頭上的圖像文件不是這些格式，要用圖像轉(zhuǎn)換工具（如SnagIt、ACDSee、XnView Shell Extension等）轉(zhuǎn)換。

2. 視頻文件。可用的視頻文件包括AVI、QT、MOV、MPG、MPEG、M1V、ASF、WMV等常用格式。如果現(xiàn)有視頻文件不是這些格式，用視頻格式轉(zhuǎn)換工具（如格式工廠）轉(zhuǎn)換為以上格式即可。

3. 網(wǎng)頁(yè)文件。現(xiàn)成的HTML網(wǎng)頁(yè)格式文件以及已有的遠(yuǎn)程網(wǎng)絡(luò)地址均可。

4. Flash文件。對(duì)于已有的Flash作品，請(qǐng)準(zhǔn)備好SWF格式的Flash文件。

5. 可執(zhí)行文件。若有EXE可執(zhí)行作品文件，或想把某個(gè)系統(tǒng)小工具集成到多媒體作品中，準(zhǔn)備好這些EXE文件即可。

建立媒體工程文件

啟動(dòng)MMB軟件，系統(tǒng)默認(rèn)載入一個(gè)擴(kuò)展名為MBD的多媒體工程文件，文件名為Media1.mbd，為便于辨認(rèn)和保存，最好給工程起一個(gè)合適的文件名，例如“畢業(yè)紀(jì)念冊(cè).mbd”，并將文件存盤(pán)。

設(shè)定工程樣板參數(shù)

點(diǎn)擊MMB系統(tǒng)菜單命令“方案→方案設(shè)置”，彈出“方案設(shè)置”窗口，定義好窗口尺寸，考慮到目標(biāo)用戶(hù)的屏幕可能有大有小，為了顧及到大多數(shù)用戶(hù)，這里可以設(shè)置一個(gè)比較適中窗口尺寸，比如1024×768。此外，還可根據(jù)需要設(shè)置好窗口的其他特性（圖1）。

作品主菜單布局規(guī)劃

設(shè)計(jì)的第一步是布局多媒體作品的主控菜單。

在設(shè)計(jì)窗口的最底部出現(xiàn)的頁(yè)面欄中，默認(rèn)出現(xiàn)的只有“頁(yè)面1”一個(gè)頁(yè)面文件，我們需要用“頁(yè)面→添加頁(yè)面”命令，添加足夠多的頁(yè)面文件。

點(diǎn)擊“頁(yè)面1”，然后用左側(cè)工具箱中的“文本按鈕”工具給該頁(yè)面添加功能按鈕，并將按鈕調(diào)整到適當(dāng)?shù)奈恢茫p擊按鈕，給按鈕命名（比如：“老師寄語(yǔ)”）。以此類(lèi)推，給主菜單中要出現(xiàn)的所有模塊添加功能按鈕，例如“生活影集”“班級(jí)頻道”“活動(dòng)錄影”“班長(zhǎng)作品”“歷史珍藏”等，作為裝飾還可添加一個(gè)封面圖片。這樣，主控菜單項(xiàng)目就設(shè)計(jì)好了。

各級(jí)功能模塊的設(shè)計(jì)

主控菜單設(shè)計(jì)好之后，接下來(lái)就是設(shè)計(jì)各級(jí)功能模塊。

1. 老師寄語(yǔ)致辭

老師寄語(yǔ)是以文字方式保留的資料，因此這里我們要設(shè)計(jì)一個(gè)展示文字的頁(yè)面。點(diǎn)擊“頁(yè)面2”，從左側(cè)工具面板中選擇“創(chuàng)建文本框”按鈕，接著選擇“創(chuàng)建段落文字框”命令，在頁(yè)面中加入段落文字框（圖2），然后將老師寄語(yǔ)文字復(fù)制到該文字框中。拖動(dòng)邊框設(shè)置好文本框在頁(yè)面中的位置。

接著建立菜單按鈕動(dòng)作鏈接。返回到主控菜單“頁(yè)面1”，雙擊“老師寄語(yǔ)”按鈕，在彈出的窗口中點(diǎn)選“動(dòng)作”組下的第一個(gè)按鈕，接下來(lái)在彈出的動(dòng)作窗口中設(shè)置觸發(fā)操作為“鼠標(biāo)點(diǎn)擊時(shí)→跳至某頁(yè)（標(biāo)簽）”，頁(yè)面選擇為“頁(yè)面2”（圖3）。這樣就為主控菜單的第一個(gè)按鈕建立了點(diǎn)擊后轉(zhuǎn)到相應(yīng)頁(yè)的鏈接。

2. 生活學(xué)習(xí)影集

生活影集主要是展示老師和同學(xué)的一些優(yōu)秀攝影作品，素材是各類(lèi)圖片，因此這里我們要設(shè)計(jì)圖片展示頁(yè)面。

首先在頁(yè)面2之后添加足夠多能容納照片的頁(yè)面并用位圖工具按鈕給每個(gè)頁(yè)添加一幅照片。

接下來(lái)用上面介紹的類(lèi)似方法為主控“生活影集”按鈕與第一張照片建立鏈接，同時(shí)建立各張照片的點(diǎn)擊動(dòng)作為跳轉(zhuǎn)到下一頁(yè)。完成生活影集部分的制作。

3. 校辦特色頻道

為了將同學(xué)們自己制作的校辦特色網(wǎng)站頻道植入多媒體作品中作為留念，我們需要將HTML網(wǎng)頁(yè)文件及其涉及到的所有相關(guān)文件集成到多媒體作品之中。

首先添加一個(gè)頁(yè)面，作為頻道頁(yè)面。點(diǎn)擊“網(wǎng)頁(yè)”工具按鈕，在添加的空白頁(yè)中畫(huà)出網(wǎng)頁(yè)出現(xiàn)的位置，雙擊對(duì)象設(shè)置好網(wǎng)頁(yè)文件名或網(wǎng)頁(yè)地址（圖4）。

接下來(lái)為“班級(jí)頻道”主控按鈕與頻道頁(yè)面建立鏈接。方法同上。

4. 活動(dòng)錄像視頻

在校期間的許多活動(dòng)都是視頻文件，如何將這些視頻文件集成到多媒體工程文件之中呢？

首先添加視頻系列縮略圖頁(yè)面，然后插入要展示的視頻縮略圖片，再添加一些空白頁(yè)面作為每個(gè)視頻的放置頁(yè)面，并用“視頻”工具按鈕給每個(gè)視頻頁(yè)面添加一個(gè)相應(yīng)的視頻文件（圖5）。

最后建立“活動(dòng)錄影”主控按鈕與視頻縮略圖頁(yè)面的鏈接。方法同上。

5. 班長(zhǎng)獲獎(jiǎng)作品

班長(zhǎng)曾經(jīng)在全國(guó)Flash游戲大賽中獲獎(jiǎng)，為班級(jí)爭(zhēng)得了榮譽(yù)，把他的Flash作品集成到多媒體作品中也很有意義。那么如何實(shí)現(xiàn)呢？

對(duì)于Flash作品的導(dǎo)入，MMB軟件專(zhuān)門(mén)提供了Flash導(dǎo)入接口，我們只需先設(shè)定好Flash放置頁(yè)面，然后用Flash工具按鈕置入已有Flash文件即可（圖6）。

6. 珍藏EXE文件

還有一些有意義的文件是以前班里部分同學(xué)的軟件作品，這些作品都是以EXE可執(zhí)行文件的方式存在的。那么如何將這些文件也集成到多媒體作品中呢？

對(duì)于EXE類(lèi)文件的導(dǎo)入，我們需要用捆綁對(duì)象的方法來(lái)解決。首先點(diǎn)擊“捆綁對(duì)象”按鈕，在屏幕上畫(huà)出對(duì)象所在區(qū)域，雙擊區(qū)域設(shè)置捆綁對(duì)象EXE文件（圖7）。

以上兩步也需建立主控按鈕與本頁(yè)面的鏈接，方法同上。此外還需建立各頁(yè)面的跳轉(zhuǎn)，方法也雷同。

將作品編譯并刻盤(pán)

每個(gè)模塊設(shè)計(jì)之后，通過(guò)“方案→調(diào)試”命令反復(fù)調(diào)試并修改設(shè)計(jì)，滿(mǎn)意之后，就可以將作品編譯成可以獨(dú)立運(yùn)行的EXE文件了。

點(diǎn)擊“文件→檢查并發(fā)布”命令，彈出編譯發(fā)布窗口，在窗口中輸入編譯文件的輸出路徑，選擇編譯的質(zhì)量為“最佳質(zhì)量”，確定之后稍等片刻便可獲得可以獨(dú)立運(yùn)行的多媒體文件。

編譯的同時(shí)會(huì)產(chǎn)生一個(gè)Autorun.inf文件，如果我們把這個(gè)文件連同編譯所得的EXE文件一并刻錄到光盤(pán)上或拷貝到優(yōu)盤(pán)的根目錄中，那么這張光盤(pán)或這個(gè)優(yōu)盤(pán)就變成了一個(gè)可以自動(dòng)運(yùn)行的電子紀(jì)念冊(cè)。

對(duì)路徑-以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱(chēng)之為相對(duì)。

絕對(duì)路徑-以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱(chēng)為絕對(duì)，意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的。
其實(shí)絕對(duì)路徑與相對(duì)路徑的不同之處，只在于描述目錄路徑時(shí)，所采用的參考點(diǎn)不同。由于對(duì)網(wǎng)站上所有文件而言，根目錄這個(gè)參考點(diǎn)對(duì)所有文件都是一樣的，因此，運(yùn)用以根目錄為參考點(diǎn)的路徑描述方式才會(huì)被稱(chēng)之為絕對(duì)路徑。　

　　以下為建立路徑所使用的幾個(gè)特殊符號(hào)，及其所代表的意義。

　　“.”–代表目前所在的目錄。

　　“..”–代表上一層目錄。

　　“/”–代表根目錄。

例：假設(shè)讀者所建立的Web站點(diǎn)擁有如下圖所示目錄路徑。假若要在Ref.htm文件中引用BeRef.gif文件時(shí)，其相對(duì)路徑如下：
　　./SubDir2/BeRef.gif
上面的引用路徑中，”.”代表目前的目錄(Dir1)，所以”./SubDir2”代表目前目錄下的SubDir2。其實(shí)，也可以省略”./”直接用這個(gè)式引用。

　　SubDir2/BeRef.gif

　　若使用絕對(duì)路徑以根目錄為參考點(diǎn)引用該文件時(shí)，引用路徑如下：

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站點(diǎn)的目錄之結(jié)構(gòu)如下圖示:

　　引用BeRef.gif文件的相對(duì)路徑又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件時(shí)其相對(duì)路徑如下：
　　../SubDir2/BeRef.gif
　　上面的引用路徑中，”..”代表上一層目錄，所以，/Dir2”代表上一層目錄下的Dir2子目錄。若使用絕對(duì)路徑引用時(shí)，則引用路徑如下：　　
/Dir2/BeRer.gif
　　我們?cè)倥e一個(gè)比較復(fù)雜的例子，來(lái)比較一下相對(duì)路徑與絕對(duì)路徑的使用。假設(shè)在讀者所建立的Web站點(diǎn)中，擁有如下圖的目錄路徑。

　　我們用以一個(gè)表格來(lái)說(shuō)明在上圖的情況下，某文件引用另一文件時(shí)，所應(yīng)使用的相對(duì)路徑與絕對(duì)路徑。　　　　

　　上表中比較需要說(shuō)明的是”../../”所代表的意義。

　　“..”代表上一層目錄，而”../../”所代表的是上一層目錄的上一層目錄。所以，從上表中可以看出，如果引用的文件存在于目前目錄的子目錄中，或者存在于上一層目錄的另一個(gè)子目錄中，運(yùn)用相對(duì)路徑是比較方便的。如果不是時(shí)，則利用絕對(duì)路徑。從上表中，亦可以看出，當(dāng)被引用的是同一個(gè)文件時(shí)，引用文件所使用的絕對(duì)路徑是一樣的。

在線咨詢(xún)

上一篇：奉上六個(gè)經(jīng)典的HTML5面試問(wèn)題，太有用啦
下一篇：JQuery基礎(chǔ)筆記及面試題+JavaScript筆記及面試題（含答案）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商