前端編碼規範（2）HTML 規範

来源:https://www.cnblogs.com/zhaowy/archive/2018/02/01/8400179.html
-Advertisement-
Play Games

文檔類型 推薦使用 HTML5 的文檔類型申明： <!DOCTYPE html> （建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。 HTML 中最好不要將無 ...


文檔類型

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

（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。

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

HTML 驗證

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

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

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

不推薦

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

推薦

 
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Test</title>
  4. <article>This is only a test.</article>

省略可選標簽

HTML5 規範中規定了 HTML 標簽是可以省略的。但從可讀性來說，在開發的源文件中最好不要這樣做，因為省略標簽可能會導致一些問題。

省略一些可選的標簽確實使得頁面大小減少，這很有用，尤其是對於一些大型網站來說。為了達到這一目的，我們可以在開發後期對頁面進行壓縮處理，在這個環節中這些可選的標簽完全就可以省略掉了。

腳本載入

出於性能考慮，腳本非同步載入很關鍵。一段腳本放置在 <head> 內，比如 <script src="main.js"></script>，其載入會一直阻塞 DOM 解析，直至它完全地載入和執行完畢。這會造成頁面顯示的延遲。特別是一些重量級的腳本，對用戶體驗來說那真是一個巨大的影響。

非同步載入腳本可緩解這種性能影響。如果只需相容 IE10+，可將 HTML5 的 async 屬性加至腳本中，它可防止阻塞 DOM 的解析，甚至你可以將腳本引用寫在 <head> 里也沒有影響。

如需相容老舊的瀏覽器，實踐表明可使用用來動態註入腳本的腳本載入器。你可以考慮 yepnope 或 labjs。註入腳本的一個問題是：一直要等到 CSS 對象文檔已就緒，它們才開始載入（短暫地在 CSS 載入完畢之後），這就對需要及時觸發的 JS 造成了一定的延遲，這多多少少也影響了用戶體驗吧。

終上所述，相容老舊瀏覽器(IE9-)時，應該遵循以下最佳實踐。

腳本引用寫在 body 結束標簽之前，並帶上 async 屬性。這雖然在老舊瀏覽器中不會非同步載入腳本，但它只阻塞了 body 結束標簽之前的 DOM 解析，這就大大降低了其阻塞影響。而在現代瀏覽器中，腳本將在 DOM 解析器發現 body 尾部的 script 標簽才進行載入，此時載入屬於非同步載入，不會阻塞 CSSOM（但其執行仍發生在 CSSOM 之後）。

所有瀏覽器中，推薦

 
  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.   </head>
  5.   <body>
  6.     <!-- body goes here -->
  8.     <script src="main.js" async></script>
  9.   </body>
  10. </html>

只在現代瀏覽器中，推薦

 
  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="main.css">
  4.     <script src="main.js" async></script>
  5.   </head>
  6.   <body>
  7.     <!-- body goes here -->
  8.   </body>
  9. </html>

語義化

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

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

多媒體回溯

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

提供可替代內容對可用性來說十分重要。試想，一位盲人用戶如何能知曉一張圖片是什麼，要是沒有 @alt 的話。

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

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

關註點分離

理解 web 中如何和為何區分不同的關註點，這很重要。這裡的關註點主要指的是：信息（HTML 結構）、外觀（CSS）和行為（JavaScript）。為了使它們成為可維護的乾凈整潔的代碼，我們要儘可能的將它們分離開來。

嚴格地保證結構、表現、行為三者分離，並儘量使三者之間沒有太多的交互和聯繫。

就是說，儘量在文檔和模板中只包含結構性的 HTML；而將所有表現代碼，移入樣式表中；將所有動作行為，移入腳本之中。

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

清晰的分層意味著：

  • 不使用超過一到兩張樣式表（i.e. main.css, vendor.css）
  • 不使用超過一到兩個腳本（學會用合併腳本）
  • 不使用行內樣式（<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）

HTML 內容至上

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

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

  • 不要引入一些特定的 HTML 結構來解決一些視覺設計問題
  • 不要將 img 元素當做專門用來做視覺設計的元素
  • 圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現出了與內容相關的一些信息。

Type 屬性

省略樣式表與腳本上的 type 屬性。鑒於 HTML5 中以上兩者預設的 type 值就是 text/css 和 text/javascript，所以 type 屬性一般是可以忽略掉的。甚至在老舊版本的瀏覽器中這麼做也是安全可靠的。
不推薦

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

推薦

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

可用性

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

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

Tab Index 在可用性上的運用

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

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

ID 和錨點

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

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

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

格式化規則

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

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

 
  1. <blockquote>
  2.   <p><em>Space</em>, the final frontier.</p>
  3. </blockquote>
  5. <ul>
  6.   <li>Moe</li>
  7.   <li>Larry</li>
  8.   <li>Curly</li>
  9. </ul>
  11. <table>
  12.   <thead>
  13.     <tr>
  14.       <th scope="col">Income</th>
  15.       <th scope="col">Taxes</th>
  16.     </tr>
  17.   </thead>
  18.   <tbody>
  19.     <tr>
  20.       <td>$ 5.00</td>
  21.       <td>$ 4.50</td>
  22.     </tr>
  23.   </tbody>
  24. </table>

HTML 引號

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

不推薦

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

推薦

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • OkHttp實現全局過期token自動刷新
    #遇到問題： 當前開發的 App 遇到一個問題： 當請求某個介面時，由於 token 已經失效，所以介面會報錯。但是產品經理希望 app 能夠馬上刷新 token ，然後重覆請求剛纔那個介面，這個過程對用戶來說是無感的。>也就是靜默自動登錄，然後繼續請求：>請求 A 介面－》伺服器返回 token ...
  • iOS學習——獲取當前最頂層的ViewController
    在iOS開發過程中，我們經常性會需要獲取當前頁面的ViewController，然後利用ViewController進行一些操作，例如在最頂層的ViewController上展示一個UIAlertController，或者在最頂層的ViewController上present另一個ViewContr ...
  • Android5.0新控制項
    谷歌在推出Android5.0的同時推出了一些新控制項，Android5.0中最常用的新控制項有下麵5種。 1. CardView（卡片視圖） CardView顧名思義是卡片視圖，它繼承FrameLayout。它是一個帶圓角的背景和陰影FrameLayout。CardView被包裝為一種佈局，並且經常在 ...
  • Android EventLine框架製作過程 二 Activity上主線程與子線程之間的通信
    github項目代碼地址，歡迎start https://github.com/979451341/EventLine 接著上一篇繼續寫，這次我們要在接收函數上使用元註解來區別接收函數需要在哪個線程執行 然後在EventLine裡面添加兩個常量 使用元註解 實現我們需要得到activity的rece ...
  • 從零開始學習前端JAVASCRIPT — 8、JavaScript基礎RegExp(正則表達式)
    1：正則的概念 正則表達式(regular expression)是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串，將匹配的子字元串做替換或者從某個字元串中取出符合某個條件的子串等。 為什麼要用正則：前端往往有大量的表單數據校驗工作，採用正則表達式會使得數據校驗的工作量大大減輕。 ...
  • JavaScript基礎：BOM的常見內置方法和內置對象
    本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 BOM的介紹 JavaScript的組成 JavaScript基礎分為三個部分： ECMAScript：JavaScript的語法標準。包括變數、表達式 ...
  • 官網jquery壓縮版引用地址:
    3.1.1版本 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 3.0.0版本 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script ...
  • 正則表達式（輕鬆入門級）
    前言：正則表達式又稱為火星文，因為視覺上讓人感覺很複雜。本文將會詳細介紹正則表達式，初學者只要認真閱讀過，定會有收穫。 1、正則的概念 正則表達式（regular expression）是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串，將匹配的子字元串替換或者從某個字元串中取出符 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類