HTML編碼規范

版規則

縮進

使用2個空格縮進

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

.example {
  color: blue;
}

大小寫

只允許使用小寫。

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

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

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

行為空格

建議刪除行尾白空格。

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

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

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

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

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

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

循環注釋：

<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輸出注釋：

<!-- 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選項卡內容注釋：

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

常規HTML設計規則

文檔類型

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

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

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

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<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>

部分標簽說明：

div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

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

多媒體元素降級處理

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

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

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

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<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代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- 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

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<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>

權重標簽使用

H標簽使用

h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
h2 可以做副標題;
h3 可以做新聞列表;
h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。

方案講述如何將圖文聲像或其他類型的素材合成一個可以獨立運行的EXE文件，并制作成可自動運行的多媒體光盤或優盤。

臨近畢業，師生們在一起學習生活了多年，有許多值得留戀的東西。大家希望將以往積攢的圖文聲像素材合成一份個性化的多媒體作品，并制作成能夠自動演示的光盤或優盤，分發留念。這個任務如果用PPT完成，對某些特殊類型媒體素材的支持實現起來比較麻煩，往往需要使用插件或VBA編程實現。而如果用改Flash制作，又需要一定的技能。

其實，有更簡單但比較專業的方法可以不編程、不裝插件，就能輕松實現制作效果比較專業的多媒體紀念冊。完成后的作品是一張插入光驅就能自動演示的多媒體光盤，不依賴于任何工具軟件環境便可獨立運行。

本案例我們要制作的紀念冊光盤主要內容包括“老師寄語”“生活影集”“班級頻道”“活動錄影”“班長作品”“歷史珍藏”等多個部分，每個部分所展示的媒體類型都各不相同。

前期材料準備工作

首先安裝多媒體設計工具Multimedia Builder（簡稱MMB）。接下來準備好建立多媒體演示作品所需要的原始素材。包括文字、圖片、錄音、視頻、Flash作品、EXE可執行文件作品等。

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

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

3. 網頁文件。現成的HTML網頁格式文件以及已有的遠程網絡地址均可。

4. Flash文件。對于已有的Flash作品，請準備好SWF格式的Flash文件。

5. 可執行文件。若有EXE可執行作品文件，或想把某個系統小工具集成到多媒體作品中，準備好這些EXE文件即可。

建立媒體工程文件

啟動MMB軟件，系統默認載入一個擴展名為MBD的多媒體工程文件，文件名為Media1.mbd，為便于辨認和保存，最好給工程起一個合適的文件名，例如“畢業紀念冊.mbd”，并將文件存盤。

設定工程樣板參數

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

作品主菜單布局規劃

設計的第一步是布局多媒體作品的主控菜單。

在設計窗口的最底部出現的頁面欄中，默認出現的只有“頁面1”一個頁面文件，我們需要用“頁面→添加頁面”命令，添加足夠多的頁面文件。

點擊“頁面1”，然后用左側工具箱中的“文本按鈕”工具給該頁面添加功能按鈕，并將按鈕調整到適當的位置，雙擊按鈕，給按鈕命名（比如：“老師寄語”）。以此類推，給主菜單中要出現的所有模塊添加功能按鈕，例如“生活影集”“班級頻道”“活動錄影”“班長作品”“歷史珍藏”等，作為裝飾還可添加一個封面圖片。這樣，主控菜單項目就設計好了。

各級功能模塊的設計

主控菜單設計好之后，接下來就是設計各級功能模塊。

1. 老師寄語致辭

老師寄語是以文字方式保留的資料，因此這里我們要設計一個展示文字的頁面。點擊“頁面2”，從左側工具面板中選擇“創建文本框”按鈕，接著選擇“創建段落文字框”命令，在頁面中加入段落文字框（圖2），然后將老師寄語文字復制到該文字框中。拖動邊框設置好文本框在頁面中的位置。

接著建立菜單按鈕動作鏈接。返回到主控菜單“頁面1”，雙擊“老師寄語”按鈕，在彈出的窗口中點選“動作”組下的第一個按鈕，接下來在彈出的動作窗口中設置觸發操作為“鼠標點擊時→跳至某頁（標簽）”，頁面選擇為“頁面2”（圖3）。這樣就為主控菜單的第一個按鈕建立了點擊后轉到相應頁的鏈接。

2. 生活學習影集

生活影集主要是展示老師和同學的一些優秀攝影作品，素材是各類圖片，因此這里我們要設計圖片展示頁面。

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

接下來用上面介紹的類似方法為主控“生活影集”按鈕與第一張照片建立鏈接，同時建立各張照片的點擊動作為跳轉到下一頁。完成生活影集部分的制作。

3. 校辦特色頻道

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

首先添加一個頁面，作為頻道頁面。點擊“網頁”工具按鈕，在添加的空白頁中畫出網頁出現的位置，雙擊對象設置好網頁文件名或網頁地址（圖4）。

接下來為“班級頻道”主控按鈕與頻道頁面建立鏈接。方法同上。

4. 活動錄像視頻

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

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

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

5. 班長獲獎作品

班長曾經在全國Flash游戲大賽中獲獎，為班級爭得了榮譽，把他的Flash作品集成到多媒體作品中也很有意義。那么如何實現呢？

對于Flash作品的導入，MMB軟件專門提供了Flash導入接口，我們只需先設定好Flash放置頁面，然后用Flash工具按鈕置入已有Flash文件即可（圖6）。

6. 珍藏EXE文件

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

對于EXE類文件的導入，我們需要用捆綁對象的方法來解決。首先點擊“捆綁對象”按鈕，在屏幕上畫出對象所在區域，雙擊區域設置捆綁對象EXE文件（圖7）。

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

將作品編譯并刻盤

每個模塊設計之后，通過“方案→調試”命令反復調試并修改設計，滿意之后，就可以將作品編譯成可以獨立運行的EXE文件了。

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

編譯的同時會產生一個Autorun.inf文件，如果我們把這個文件連同編譯所得的EXE文件一并刻錄到光盤上或拷貝到優盤的根目錄中，那么這張光盤或這個優盤就變成了一個可以自動運行的電子紀念冊。

對路徑-以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。

絕對路徑-以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。
其實絕對路徑與相對路徑的不同之處，只在于描述目錄路徑時，所采用的參考點不同。由于對網站上所有文件而言，根目錄這個參考點對所有文件都是一樣的，因此，運用以根目錄為參考點的路徑描述方式才會被稱之為絕對路徑?！?/span>

　　以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。

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

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

　　“/”–代表根目錄。

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

　　SubDir2/BeRef.gif

　　若使用絕對路徑以根目錄為參考點引用該文件時，引用路徑如下：

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站點的目錄之結構如下圖示:

　　引用BeRef.gif文件的相對路徑又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件時其相對路徑如下：
　　../SubDir2/BeRef.gif
　　上面的引用路徑中，”..”代表上一層目錄，所以，/Dir2”代表上一層目錄下的Dir2子目錄。若使用絕對路徑引用時，則引用路徑如下：　　
/Dir2/BeRer.gif
　　我們再舉一個比較復雜的例子，來比較一下相對路徑與絕對路徑的使用。假設在讀者所建立的Web站點中，擁有如下圖的目錄路徑。

　　我們用以一個表格來說明在上圖的情況下，某文件引用另一文件時，所應使用的相對路徑與絕對路徑?！　　　?/span>

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

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

在線咨詢

上一篇：奉上六個經典的HTML5面試問題，太有用啦
下一篇：JQuery基礎筆記及面試題+JavaScript筆記及面試題（含答案）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商