您當前位置：首頁 > web前端 > htmlcss > 前端編碼風格規范之 HTML 規范

前端編碼風格規范之 HTML 規范

來源：程序員人生發布時間：2015-01-20 08:49:19 閱讀次數：4530次

HTML 規范

文檔類型

推薦使用 HTML5 的文檔類型申明： <!DOCTYPE html>.

（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 和它的屬性，比如 application/xhtml+xml 在閱讀器中的利用支持與優化空間都10分有限）。

HTML 中最好不要將無內容元素[1] 的標簽閉合，例如：使用 <br> 而非<br />.

HTML 驗證

1般情況下，建議使用能通過標準規范驗證的 HTML 代碼，除非在性能優化和控制文件大小上不能不做出妥協。

使用諸如 W3C HTML validator 這樣的工具來進行檢測。

規范化的 HTML 是顯現技術要求與局限的顯著質量基線，它增進了 HTML 被更好地應用。

不推薦

<title>Test</title>
<article>This is only a test.

推薦

<!DOCTYPE html>
<meta charset="utf⑻">
<title>Test</title>
<article>This is only a test.</article>

省略可選標簽

HTML5 規范中規定了 HTML 標簽是可以省略的。但從可讀性來講，在開發的源文件中最好不要這樣做，由于省略標簽可能會致使1些問題。

省略1些可選的標簽確切使得頁面大小減少，這很有用，特別是對1些大型網站來講。為了到達這1目的，我們可以在開發后期對頁面進行緊縮處理，在這個環節中這些可選的標簽完全就能夠省略掉了。

腳本加載

出于性能斟酌，腳本異步加載很關鍵。1段腳本放置在 <head> 內，比如<script src="main.js"></script>，其加載會1直阻塞 DOM 解析，直至它完全地加載和履行終了。這會造成頁面顯示的延遲。特別是1些重量級的腳本，對用戶體驗來講那真是1個巨大的影響。

異步加載腳本可減緩這類性能影響。如果只需兼容 IE10+，可將 HTML5 的 async 屬性加至腳本中，它可避免阻塞 DOM 的解析，乃至你可以將腳本援用寫在 <head> 里也沒有影響。

如需兼容老舊的閱讀器，實踐表明可以使用用來動態注入腳本的腳本加載器。你可以斟酌 yepnope 或 labjs。注入腳本的1個問題是：1直要等到 CSS 對象文檔已就緒，它們才開始加載（短暫地在 CSS 加載終了以后），這就對需要及時觸發的 JS 造成了1定的延遲，這多多少少也影響了用戶體驗吧。

終上所述，兼容老舊閱讀器(IE9-)時，應當遵守以下最好實踐。

腳本援用寫在 body 結束標簽之前，并帶上 async 屬性。這雖然在老舊閱讀器中不會異步加載腳本，但它只阻塞了 body 結束標簽之前的 DOM 解析，這就大大下降了其阻塞影響。而在現代閱讀器中，腳本將在 DOM 解析器發現 body 尾部的 script 標簽才進行加載，此時加載屬于異步加載，不會阻塞 CSSOM（但其履行仍產生在 CSSOM 以后）。

所有閱讀器中，推薦

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->

    <script src="main.js" async></script>
  </body>
</html>

只在現代閱讀器中，推薦

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

語義化

根據元素（有時被毛病地稱作“標簽”）其被創造出來時的初始意義來使用它。打個比方，用 heading 元夙來定義頭部標題，p 元夙來定義文字段落，用 a 元夙來定義鏈接錨點，等等。

有根據有目的地使用 HTML 元素，對可訪問性、代碼重用、代碼效力來講意義重大。

以下示例列出了1些的語義化 HTML 主要情況：

不推薦

<b>My page title</b>
<div class="top-navigation">
  <div class="nav-item"><a href="#home">Home</a></div>
  <div class="nav-item"><a href="#news">News</a></div>
  <div class="nav-item"><a href="#about">About</a></div>
</div>

<div class="news-page">
  <div class="page-section news">
    <div class="title">All news articles</div>
    <div class="news-article">
      <h2>Bad article</h2>
      <div class="intro">Introduction sub-title</div>
      <div class="content">This is a very bad example for HTML semantics</div>
      <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
      <div class="article-foot-notes">
        This article was created by David <div class="time">2014-01-01 00:00</div>
      </div>
    </div>

    <div class="section-footer">
      Related sections: Events, Public holidays
    </div>
  </div>
</div>

<div class="page-footer">
  Copyright 2014
</div>

推薦

<!-- The page header should go into a header element -->
<header>
  <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
  <h1>My page title</h1>
</header>

<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
  <!-- A listing of elements should always go to UL (OL for ordered listings) -->
  <ul>
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#news">News</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
  </ul>
</nav>

<!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
<main class="news-page" role="main">
  <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
  <section class="page-section news">
    <!-- A section header should go into a section element -->
    <header>
      <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
      <h2 class="title">All news articles</h2>
    </header>

    <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
     re-usable module / section that can occur multiple times on a page) a article element should be used -->
    <article class="news-article">
      <!-- An article can contain a header that contains the summary / introduction information of the article -->
      <header>
        <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
        <div class="article-title">Good article</div>
        <!-- Small can optionally be used to reduce importance -->
        <small class="intro">Introduction sub-title</small>
      </header>

      <!-- For the main content in a section or article there is no semantic element -->
      <div class="content">
        <p>This is a good example for HTML semantics</p>
      </div>
      <!-- For content that is represented as side note or less important information in a given context use aside -->
      <aside class="article-side-notes">
        <p>I think I'm more on the side and should not receive the main credits</p>
      </aside>
      <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
      <footer class="article-foot-notes">
        <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
         while the actual text in the time element can also be more human readable / relative -->
        <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
      </footer>
    </article>

    <!-- In a section, footnotes or similar information can also go into a footer element -->
    <footer class="section-footer">
      <p>Related sections: Events, Public holidays</p>
    </footer>
  </section>
</main>

<!-- Your page footer should go into a global footer element -->
<footer class="page-footer">
  Copyright 2014
</footer>

多媒體回溯

對頁面上的媒體而言，像圖片、視頻、canvas 動畫等，要確保其有可替換的接入接口。圖片文件我們可采取成心義的備選文本（alt），視頻和音頻文件我們可以為其加上說明文字或字幕。

提供可替換內容對可用性來講10分重要。試想，1位盲人用戶如何能知曉1張圖片是甚么，要是沒有 @alt 的話。

（圖片的 alt 屬性是可不填寫內容的，純裝潢性的圖片便可用這么做：alt=""）。

不推薦

<img src="luke-skywalker.jpg">

推薦

<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

盡可能用 alt 標簽去描寫圖片，假想你需要對那些只能通過語音或看不見圖片的用戶表達圖片究竟是甚么。

不推薦

<img src="huge-spaceship-approaching-earth.jpg" alt="Header image">

推薦

<img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">

關注點分離

理解 web 中如何和為什么辨別不同的關注點，這很重要。這里的關注點主要指的是：信息（HTML 結構）、外觀（CSS）和行動（JavaScript）。為了使它們成為可保護的干凈整潔的代碼，我們要盡量的將它們分離開來。

嚴格地保證結構、表現、行動3者分離，并盡可能使3者之間沒有太多的交互和聯系。

就是說，盡可能在文檔和模板中只包括結構性的 HTML；而將所有表現代碼，移入樣式表中；將所有動作行動，移入腳本當中。

在此以外，為使得它們之間的聯系盡量的小，在文檔和模板中也盡可能少地引入樣式和腳本文件。

清晰的分層意味著：

不使用超過1到兩張樣式表（i.e. main.css, vendor.css）
不使用超過1到兩個腳本（學會用合并腳本）
不使用行內樣式（<style>.no-good {}</style>）
不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）
不使用行內腳本（<script>alert('no good')</script>）
不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
不使用表象 class 名（i.e. red, left, center）

不推薦

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="grid.css">
  <link rel="stylesheet" href="type.css">
  <link rel="stylesheet" href="modules/teaser.css">
</head>
<body>
  <h1 style="font-size: 3rem"></h1>
  <b>I'm a subtitle and I'm bold!</b>
  <center>Dare you center me!</center>
  <script>
    alert('Just dont...');
  </script>
  <div class="red">I'm important!</div>
</body>
</html>

推薦

<!DOCTYPE html>
<html>
<head>
  <!-- Concatinate your style sheets into a single one -->
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
  <h1 class="title"></h1>
  <!-- Don't use presentational elements and assign sensible classes -->
  <div class="sub-title">I'm a subtitle and I'm bold!</div>
  <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
  <span class="comment">Dare you center me!</span>
  <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
   what you want to do with it -->
  <div class="important">I'm important!</div>

  <!-- Put all your scripts into files and concatinate them into a single one -->
  <script async src="main.js"></script>
</body>
</html>

HTML 內容至上

不要讓非內容信息污染了你的 HTML。現在貌似有1種偏向：通過 HTML 來解決設計問題，這是明顯是不對的。HTML 就應當只關注內容。

HTML 標簽的目的，就是為了不斷地展現內容信息。

不要引入1些特定的 HTML 結構來解決1些視覺設計問題
不要將 img 元素當作專門用來做視覺設計的元素

以下例子展現了誤將 HTML 用來解決設計問題的這兩種情況：

不推薦

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

推薦

<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

圖片和 SVG 圖形能被引入到 HTML 中的唯1理由是它們顯現出了與內容相干的1些信息。

不推薦

<!-- Content images should never be used for design elements!  -->
<span class="text-box">
  <img src="square.svg" alt="Square" />
  See the square next to me?
</span>

推薦

<!-- That's clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

/* We use a :before pseudo element with a background image to solve the problem */
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(square.svg) no-repeat;
  background-size: 100%;
}

Type 屬性

省略樣式表與腳本上的 type 屬性。鑒于 HTML5 中以上二者默許的 type 值就是 text/css 和 text/javascript，所以 type 屬性1般是可以疏忽掉的。乃至在老舊版本的閱讀器中這么做也是安全可靠的。

不推薦

<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>

推薦

<link rel="stylesheet" href="main.css">
<script src="main.js"></script>

可用性

如果 HTML5 語義化標簽使用得當，許多可用性問題已引刃而解。ARIA 規則在1些語義化的元素上可為其添上默許的可用性角色屬性，使用得當的話已使網站的可用性大部份成立。假設你使用 nav, aside, main,footer 等元素，ARIA 規則會在其上利用1些關聯的默許值。更多細節可參考 ARIA specification

另外1些角色屬性則能夠用來顯現更多可用性情形（i.e.role="tab"）。

Tab Index 在可用性上的應用

檢查文檔中的 tab 切換順序并傳值給元素上的 tabindex，這可以根據元素的重要性來重新排列其 tab 切換順序。你可以設置 tabindex="⑴" 在任何元素上來禁用其 tab 切換。

當你在1個默許不可聚焦的元素上增加了功能，你應當總是為其加上tabindex 屬性使其變成可聚焦狀態，而且這也會激活其 CSS 的偽類:focus。選擇適合的 tabindex 值，或是直接使用 tabindex="0" 將元素們組織成同1 tab 順序水平，并強迫干預其自然瀏覽順序。

微格式在 SEO 和可用性上的應用

如果 SEO 和可用性環境條件允許的話，建議斟酌采取微格式。微格式是通過在元素標簽上申明1系列特定數據來達成特定語義的方法。

谷歌、微軟和雅虎對如何使用這些額外的數據1定程度上的達成1致，如果正確的使用，這將給搜索引擎優化帶來巨大的好處。

你可以訪問 schema.org 取得更多內容細節。

看1個電影網站的簡單例子：

不帶微格式

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

帶有微格式

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

ID 和錨點

通常1個比較好的做法是將頁面內所有的頭部標題元素都加上 ID. 這樣做，頁面 URL 的 hash 中帶上對應的 ID 名稱，即構成描點，方便跳轉至對應元素所處位置。

打個比方，當你在閱讀器中輸入 URL http://your-site.com/about#best-practices，閱讀器將定位至以下 H3 上。

<h3 id="best-practices">Best practices</h3>

格式化規則

在每個塊狀元素，列表元素和表格元素后，加上1新空白行，并對其子孫元素進行縮進。內聯元素寫在1行內，塊狀元素還有列表和表格要另起1行。

（如果由于換行的空格引發了不可預計的問題，那將所有元素并入1行也是可以接受的，格式正告總好錯誤誤正告）。

推薦

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

HTML 引號

使用雙引號(“”) 而不是單引號(“) 。

不推薦

<div class='news-article'></div>

推薦

<div class="news-article"></div>

[1]: 此處的空白元素指的是以下元素：area, base, br, col,command, embed, hr, img, input, keygen, link, meta, param,source, track, wbr

其他精彩文章

jQuery教程(19)-jquery ajax操作之序列化表單

jQuery教程(18)-ajax操作之履行POST要求

jQuery教程(20)-jquery ajax + php 操作之為Ajax要求提供不同...

jQuery教程(21)-jquery ajax 回調函數

jQuery教程(22)-ajax操作之毛病處理

jQuery教程(24)-ajax操作之Ajax和事件

更多關于android開發文章

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 利用對象來更新數據 UpdateData(object o)

下一篇 SQL 事務（存儲過程與事務）

分享到: