1.2、HTML規范 · 開發規范

[TOC] # HTML規范盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。 **標簽** * 自閉合（self-closing）標簽，無需閉合 ( 例如： img input br hr 等 )； * 可選的閉合標簽（closing tag），需閉合 ( 例如：</li> 或 </body> )； * 盡量減少標簽數量； **Class 與 ID** * class 應以功能或內容命名，不以表現形式命名； * class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔； * 使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class； **屬性順序** * id * class * name * data-xxx * src, for, type, href * title, alt * aria-xxx, role **引號** * 屬性的定義，統一使用雙引號。 **嵌套** * a 不允許嵌套 div這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。 * 嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。 **語義嵌套約束** ~~~ <li> 用于 <ul> 或 <ol> 下； <dd>, <dt> 用于 <dl> 下； <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下； ~~~ **嚴格嵌套約束** ~~~ inline-Level 元素，僅可以包含文本或其它 inline-Level 元素; <a>里不可以嵌套交互式元素<a>、<button>、<select>等; <p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。 ~~~ 更多詳情，參考WEB標準系列-HTML元素嵌套 **布爾值屬性** * HTML5 規范中 disabled、checked、selected 等屬性不用設置值。 # HTML命名規范 1. 所有的命名最好都小寫 2. 屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb" 3. 每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整 4. 空元素要有結束的tag或于開始的tag后加上"/" 5. 表現與結構完全分離，代碼中不涉及任何的表現元素，如：style、font、bgColor、border 等 6. h1到h6的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。 7. 給圖片加上alt 標簽，優點是在于在圖片發生錯誤時，alt 可以體現給用戶 8. 盡量使用英文命名原則 9. 盡量不縮寫，除非一看就明白的單詞 10. 用div等標簽布局；表格型數據，table首選。 11. 代碼風格采用樹形結構，提高可讀性；避免冗余嵌套。 12. 模塊之間必須保持獨立，區塊化布局，方便隨意增刪改，多人協作維護。 # **HTML常用命名** **網站類** * index.html 首頁 * 404.html 404錯誤頁 * print.html 打印頁 * header.html 頁頭 * footer.html 頁腳 * sitemap.html 網站地圖 * passport.html 通行證 * rank.html 排行榜 * roll.html 滾動新聞 * solution.html 解決方案 * joinus.html 加入我們 * partner.html 合作伙伴 * service.html 服務 * aboutus.html 關于我們 * contact.html 聯系我們 * company.html 公司介紹 * organization.html 組織結構 * culture.html 企業文化 * strategy.html 發展策略 * honor.html 公司榮譽 * aptitudes.html 企業資質 * events.html 大事記 * business.html 商務合作 * contract.html 服務條款 * privacy.html 隱私聲明 * CSR.html 企業社會責任 * news-開頭.html 新聞相關 * article-開頭.html 資訊相關 * picture-開頭.html 圖片相關 * photo-開頭.html 相冊相關 * product-開頭.html 產品相關 * goods-開頭.html 商品相關 * system-開頭.html 系統相關 * tag-開頭.html tag相關 * brand-開頭.html 品牌相關 * help-開頭.html 幫助相關 * member-開頭.html 會員相關 * search-開頭.html 搜索相關 **系統類** *暫無 # **HTML常見結構** **頁面頭部** ~~~ <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> //讓360等雙核瀏覽器使用極速模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> //告訴IE瀏覽器，IE8/9及以后的版本都會以最高版本IE來渲染頁面。 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> /* content屬性值 : width:可視區域的寬度，值可為數字或關鍵詞device-width height:同width intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放 maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。 user-scalable:是否可對頁面進行縮放，no 禁止縮放 */ <title>網站標題，控制在25個字、50個字節以內</title> <meta name="keywords" content="關鍵詞,5個左右,單個8漢字以內"> <meta name="description" content="網站描述，字數盡量空制在80個漢字，160個字符以內！"> <link rel="Bookmark" href="favicon.ico" > //書簽圖標 <link rel="Shortcut Icon" href="favicon.ico" /> //瀏覽器標題左側小圖標 <script type="text/javascript" src="jquery.min.js"></script  <link href="h-ui/css/H-ui.css" rel="stylesheet" type="text/css" /> <link href="iconfont/iconfont.css" rel="stylesheet" type="text/css" /> <link href="h-ui/css/style.css" rel="stylesheet" type="text/css" />  </head> ~~~