你的HTML頁面書寫規范嗎？必須知道的HTML書寫規范

言：每一個行業都有自己的規范，不已規矩，不成方圓。尤其是代碼，代碼規范便于閱讀，便于維護。

1.用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。

2.嵌套元素應當縮進一次（即兩個空格）。

3.對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。

4.不要在自閉合（self-closing）元素的尾部添加斜線

5.不要省略可選的結束標簽（closing tag）（例如，</li> 或</body>）。

6.為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。<!DOCTYPE html>

7.語言屬性

根據 HTML5 規范：

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等.

<html>

</html>

8.IE 兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

9.字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

</head>

10.引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

<style>

/* ... */

</style>

11.

布爾（boolean）型屬性

布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

12.

減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：

<span>

</span>

13.

不要使用 @import

與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：

使用多個 <link> 元素

通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能

14.

class 命名

class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。

class 名稱應當盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

言

對于項目，那就是我們的親兒子啊，作為一個前端菜鳥，面向用戶就是將自己的兒子介紹給別人認識，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺咯，哈哈哈~

常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學，肯定少不了跟Css打交道，命名、縮寫、書寫順序等都是有一定規范，這個規范可能來源于你、我、或者瀏覽器等不定向人群（這個規范是我瞎編的），今天自己整合收集，以及個人項目用到的html+css的書寫規范送給在"編程界"奮斗的小伙伴，你不是一個人在戰斗。

話不多說，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來打我。

一命名規則說明

1、所有的命名最好都小寫

2、屬性的值一定要用雙引號("")括起來，且一定要有值如class="app",id="app"

3、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整例如：<div></div>

4、空元素要有結束的tag或于開始的tag后加上"/" <br />、<img />

5、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

6、<h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢,因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。

7、給每一個表格和表單加上一個唯一的、結構標記id

8、給圖片加上alt標簽,alt屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。假設由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：網速太慢、src 屬性中的錯誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。

9、盡量使用英文命名原則

10、盡量不縮寫，除非一看就明白的單詞如btn。

11、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。

12、scss中的變量、函數、混合、placeholder采用駝峰式命名

13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；

14、減少id命名，id在JS是唯一的，不能多次使用，id的優先級優先與class，所以id應該按需使用，而不能濫用。

二網頁外層重要部分CSS樣式命名

 wrap ------------------ 用于最外層 
 header ---------------- 用于頭部 
 main ------------------ 用于主體內容（中部） 
 main-left ------------- 左側布局 
 main-right ------------ 右側布局 
 nav ------------------- 網頁菜單導航條 
 content --------------- 用于網頁中部主體 
 footer ---------------- 用于底部

三樣式屬性順序

1. 定位：positionz-indexleftrighttopbottomclip等。

2. 自身屬性：widthheightmin-heightmax-heightmin-widthmax-width等。

3. 文字樣式：colorfont-sizeletter-spacing, colortext-align等。

4. 背景：background-imageborder等。

5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。

6. css3中屬性：content、box-shadow、animation、border-radius、transform等

/* yes */ 
 .example { 
 z-index: -1;
 display: inline-block;
 font-size: 16px;
 color: red; 
 background-color: #eee; 
} 
/* no */ 
.example { 
 color: red; 
 background-color: #eee; 
 display: inline-block; 
 z-index: -1; 
 font-size: 16px; 
 }

目的：減少瀏覽器reflow(回流)，提升瀏覽器渲染dom的性能。

關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

文檔加載完成到完全顯示之間瀏覽器的渲染流程為：

1）瀏覽器解析html構建dom樹，解析css構建cssom樹即css rule tree：將html和css都解析成樹形的數據結構；dom樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。2）構建render樹：DOM樹和cssom樹合并之后形成render樹。為了構建渲染樹，瀏覽器大體完成了下列工作：從DOM樹的根節點開始遍歷每個可見節點。對于每個可見節點，為其找到適配的CSSOM規則并應用它們。發射可見節點，連同其內容和計算的樣式。渲染樹中包含了屏幕上所有可見內容及其樣式信息。3）布局render樹：有了render樹，瀏覽器已經知道網頁中有哪些節點，各個節點的css定義以及它們的從屬關系，接著就開始布局，計算出每個節點在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點是從render樹的根節點開始的，對應dom樹的document節點，其初始位置為(0,0)，詳細的布局過程為：每個renderer的寬度由父節點的renderer確定。父節點遍歷子節點，確定子節點的位置(x,y)，調用子節點的layout方法確定其高度，父節點根據子節點的height, margin, padding確定自身的高度)。4）渲染，繪制render樹：瀏覽器已經知道啦哪些節點要顯示，每個節點的css屬性是什么，每個節點在屏幕中的位置是哪里。就進入啦最后一步，按照計算出來的規則，通過顯卡把內容畫在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序按照dom樹的結構分布render樣式，完成第（2）步，然后開始遍歷每個樹節點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的的書寫順序，在解析過程中，一旦瀏覽器發現某個元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發生變化，其他元素也可能會受到回流的影響而重新排位，最終導致（3）步驟花費時間太久而影響到（4）步驟的顯示，影響了用戶體驗。

注：render樹的結構不等同于DOM樹的結構，一些設置display:none的節點不會被放在render樹中，但會在dom樹中。

有些情況，比如修改了元素的樣式，瀏覽器并不會立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁面默認字體等瀏覽器會馬上進行reflow。為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現在屏幕上，并不會等到所有html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在網絡上下載其余內容。

四 css樣式書寫規范

使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。

去掉小數點前的“0”

簡寫命名(前提是要讓人看懂你的命名才能簡寫哦)

16進制顏色代碼縮寫

連字符CSS選擇器命名規范

1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？

輸入的時候少按一個shift鍵；
瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）
能良好區分JavaScript變量命名（JS變量命名是用“_”）

功能

狀態

注釋的寫法

/* Header */ 
 內容區
 
 /* End Header */

id的命名

1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center(2)導航

導航：nav

主導航：mainnav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

(3)功能

標志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：register

搜索：search

功能區：shop

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標籤頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

打印 print.css

五 HTML5-語義化

距HTML5標準規范制定完成并公開發布已經有好些年了，但是多數公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。

什么是語義化？就是用合理、正確的標簽來展示內容，比如h1~h6定義標題。

語義化優點：

易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
方便其他設備解析，如盲人閱讀器根據語義渲染網頁
有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。

1、header

<header>定義文檔或者文檔的部分區域的頁眉，應作為介紹內容或者導航鏈接欄的容器。在一個文檔中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。

2、nav

<nav>描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。在一個文檔中，可定義多個元素。

3、main

<main>定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個文檔中不能出現多個<main>標簽。

4、article

<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的元素可嵌套在代表博客文章的元素中。

5、aside

<aside>元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。

6、footer

<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。使用footer插入聯系信息時，應在 footer 元素內使用元素。注意不能包含<footer>或者<header>

7、section

<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組。

如果元素內容可以分為幾個部分的話，應該使用 <article>而不是 <section>。不要把 <section>元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候，應使用<div>。

碼規范

CSS樣式表是一個序列通用字符集，傳輸和存儲過程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯

文檔內嵌樣式表編碼

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

當樣式出現在其它文檔，如 HTML 的 STYLE 標簽或標簽屬性 "style"，樣式的編碼由文檔的決定。

文檔外鏈樣式表編碼

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文檔外鏈樣式表的編碼可以由以下各項按照由高到低的優先級順序決定：

HTTP “Content-Type” 字段參數 “charset”（或其它協議相似的參數）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元數據設置（如果有的話）
引用樣式表字符集或文檔編碼（如果有的話）
假定為 UTF-8 編碼

樣式表編碼

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

@charset規則一定要在樣式文件的第一行首個字符位置開始，否則的話就會有機會讓 BOM 設置生效（如果有設置 BOM 的話）而優于 [@charset ]() 作為樣式表的編碼
@charset ""; 一定要寫上，并且用小寫字母，不能出現轉義符

團隊約定

樣式文件必須寫上 [@charset ]() 規則，并且一定要在樣式文件的第一行首個字符位置開始寫，編碼名用 “UTF-8”
字符 [@charset ]() ""; 都用小寫字母，不能出現轉義符，編碼名允許大小混寫
考慮到在使用“UTF-8”編碼情況下 BOM 對代碼的污染和編碼顯示的問題，在可控范圍下，堅決不使用 BOM。（更多關于 BOM 可參考 BOM的介紹和「帶 BOM 的 UTF-8」和「無 BOM 的 UTF-8」有什么區別？）

推薦：

@charset "UTF-8";

.jdc{}

不推薦：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規則不在文件首行首個字符開始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset規則沒有用小寫 */

.jdc{}

/* 無@charset規則 */
.jdc{}

更多關于樣式編碼：CSS style sheet representation

代碼風格

代碼格式化

樣式書寫一般有兩種：一種是緊湊格式 (Compact)

.jdc{ display: block;width: 50px;}

一種是展開格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

團隊約定

統一使用展開格式書寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。

/* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的標簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進

統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）

.jdc {
    width: 100%;
    height: 100%;
}

分號

每個屬性聲明末尾都要加分號；

.jdc {
    width: 100%;
    height: 100%;
}

代碼易讀性

左括號與類名之間一個空格，冒號與屬性值之間一個空格

推薦：

.jdc { 
    width: 100%; 
}

不推薦：

.jdc{ 
    width:100%;
}

逗號分隔的取值，逗號之后一個空格

推薦：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推薦：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個css選擇器或新申明開啟新行

推薦：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推薦：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

.jdc {
    color: rgba(255,255,255,.5);
}

不推薦：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進制數值能用簡寫的盡量用簡寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為 0 指明單位

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引號

css屬性值需要用到引號時，統一使用單引號

/* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

屬性書寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法

CSS3 瀏覽器私有前綴在前，標準前綴在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多關于瀏覽器私有前輟寫法：#Vendor-specific extensions

參考閱讀

Google Code Guide

在線咨詢

上一篇：Html中的空格
下一篇：通過簡單Html代碼實現實時Web編輯器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

你的HTML頁面書寫規范嗎？必須知道的HTML書寫規范

言：每一個行業都有自己的規范，不已規矩，不成方圓。尤其是代碼，代碼規范便于閱讀，便于維護。

碼規范

文檔內嵌樣式表編碼

文檔外鏈樣式表編碼

樣式表編碼

團隊約定

代碼風格

代碼格式化

代碼大小寫

選擇器

代碼縮進

分號

代碼易讀性

屬性值引號

屬性書寫順序

CSS3瀏覽器私有前綴寫法

參考閱讀

您的項目需求