語(yǔ)法
* 縮進(jìn)統(tǒng)一(tab鍵或4個(gè)空格)
* 每一個(gè)塊級(jí)元素都另起一行惩猫,每一行都使用統(tǒng)一的縮進(jìn)對(duì)齊(head和body的子元素不需要縮進(jìn))呀忧。
* 在屬性上靶病,使用雙引號(hào),不要使用單引號(hào)旁仿;
* 標(biāo)簽屬性全小寫(xiě)藕夫,用中劃線做分隔符,標(biāo)簽必須合并
* 不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線(HTML5 規(guī)范 指出他們是可選的)枯冈;
* 不要忽略可選的關(guān)閉標(biāo)簽
* 減少標(biāo)簽數(shù)量毅贮,在保證彈性的基礎(chǔ)上盡量減少嵌套層數(shù),盡量不要javascript生成標(biāo)簽
* 模塊之間添加注釋
* 頁(yè)面中盡量避免使用style屬性尘奏,如style=“...”滩褥。
* 給圖片加上alt標(biāo)簽
HTML5 doctype
* 在每個(gè) HTML 頁(yè)面開(kāi)頭使用這個(gè)簡(jiǎn)單地 doctype 來(lái)啟用標(biāo)準(zhǔn)模式,使其每個(gè)瀏覽器中盡可能一致的展現(xiàn)炫加。雖然doctype不區(qū)分大小寫(xiě)瑰煎,但是按照慣例,doctype大寫(xiě)
* <!DOCTYPE html>
Language 屬性
* <html lang="zh-cmn-Hans"> //單一的 zh 和 zh-CN 均屬于廢棄用法俗孝。中文使用這個(gè)
字符編碼
* <meta charset="UTF-8"> 一般使用這個(gè)
兼容模式
* IE8兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
* 360瀏覽器采用急速內(nèi)核
<meta name="renderer" content="webkit">
移動(dòng)設(shè)備優(yōu)先(禁止縮放酒甸,看情況而定)
* 移動(dòng)設(shè)備優(yōu)先
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* 以一個(gè)固定寬度進(jìn)行縮放
<meta name="viewport" content="width=640px,user-scalable=no">
引入CSS, JS
* CSS 和 JavaScript均使用外聯(lián)的方式 ,css外聯(lián)到<head></head>之間 赋铝,根據(jù) HTML5 規(guī)范, 通常在引入 CSS 和 JavaScript 時(shí)不需要指明 type插勤,因?yàn)?text/css 和text/javascript 分別是他們的默認(rèn)值。
* <link rel="stylesheet" href="code-guide.css">
* <style> ... </style>
* <script src="code-guide.js"></script>
* <script> ... </script>
屬性順序
* class
* id
* name
* data-*
* src, for, type, href, value , max-length, max, min, pattern
* placeholder, title, alt
* aria-*, role
* required, readonly, disabled
boolean屬性
* boolean屬性指不需要聲明取值的屬性革骨,XHTML需要每個(gè)屬性聲明取值农尖,但是HTML5并不需要;boolean屬性的存在表示取值為true良哲,不存在則表示取值為false
* <input type="text" disabled>
移動(dòng)端
* iphone設(shè)備中的safari私有meta標(biāo)簽盛卡,它表示:允許全屏模式瀏覽;
<meta content="yes" name="apple-mobile-web-app-capable">
* 告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼筑凫。
<meta content="telephone=no" name="format-detection">