HTML規(guī)范

語法

* 縮進統(tǒng)一(tab鍵或4個空格)
* 每一個塊級元素都另起一行,每一行都使用統(tǒng)一的縮進對齊(head和body的子元素不需要縮進)。
* 在屬性上,使用雙引號,不要使用單引號;
* 標簽屬性全小寫,用中劃線做分隔符,標簽必須合并
* 不要在自動閉合標簽結(jié)尾處使用斜線(HTML5 規(guī)范 指出他們是可選的);
* 不要忽略可選的關(guān)閉標簽
* 減少標簽數(shù)量,在保證彈性的基礎(chǔ)上盡量減少嵌套層數(shù),盡量不要javascript生成標簽
* 模塊之間添加注釋
* 頁面中盡量避免使用style屬性,如style=“...”。
* 給圖片加上alt標簽

HTML5 doctype
* 在每個 HTML 頁面開頭使用這個簡單地 doctype 來啟用標準模式,使其每個瀏覽器中盡可能一致的展現(xiàn)。雖然doctype不區(qū)分大小寫,但是按照慣例,doctype大寫
* <!DOCTYPE html>

Language 屬性

* <html lang="zh-cmn-Hans">     //單一的 zh 和 zh-CN 均屬于廢棄用法。中文使用這個

字符編碼

* <meta charset="UTF-8">     一般使用這個

兼容模式

* IE8兼容模式

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

* 360瀏覽器采用急速內(nèi)核

      <meta name="renderer" content="webkit">

移動設(shè)備優(yōu)先(禁止縮放,看情況而定)

* 移動設(shè)備優(yōu)先

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

* 以一個固定寬度進行縮放

      <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 時不需要指明 type,因為 text/css 和text/javascript 分別是他們的默認值。
* <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需要每個屬性聲明取值,但是HTML5并不需要;boolean屬性的存在表示取值為true,不存在則表示取值為false
* <input type="text" disabled>

移動端

* iphone設(shè)備中的safari私有meta標簽,它表示:允許全屏模式瀏覽; 

      <meta content="yes" name="apple-mobile-web-app-capable">    

* 告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。

      <meta content="telephone=no" name="format-detection">
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容