整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
嵌套元素應當縮進一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。
不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。
實例：
<!DOCTYPE html><html>
HTML5 doctype
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。
實例：
<!DOCTYPE html><html>
語言屬性
根據 HTML5 規范：
強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。
lang 屬性的知識可以從 此規范 中了解。
這里列出了語言代碼表。
<html lang="zh-CN">
IE 兼容模式
IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head>
引入 CSS 和 JavaScript 文件
根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。
HTML5 spec links
Using link
Using style
Using script
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>
實用為王
盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。
屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
布爾（boolean）型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。
更多信息請參考 WhatWG section on boolean attributes：
元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。
如果一定要為其賦值的話，請參考 WhatWG 規范：
如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。
簡單來說，就是不用賦值。
<input type="text" disabled><input type="checkbox" value="1" checked><select>
減少標簽的數量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：
<!-- Not so great --><span class="avatar">
JavaScript 生成的標簽
通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
1. HTML的代碼文件
（1）打開Hbuilder開發工具，新建項目，點擊右鍵新建一個HTML文檔。
（2）在文檔中寫HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>產品列表</title>
</head>
<body>
這是產品頁面
<b>好好學習，天天向上</b>
<h1>好好學習，天天向上</h1>
</body>
</html>
溫馨提示：
常用的快捷鍵：
Ctrl+s:保存
ctrl+c:復制
ctrl+x：剪切
ctrl+v：粘貼
2. HTML的基本結構
對于HTML文件的后綴名一般為“html”或“htm”
2.1HTML的標簽格式
（1）什么是HTML標簽？
HTML標簽是有開始標簽和結束標簽組成
開始標簽：是被尖括號包圍的元素名。
結束標簽：是被尖括號包圍的斜杠和元素名
<元素>內容 </元素>
例如：<b>好好學習天天向上</b>
注意：有些HTML標簽是沒有結束標簽的, <hr/>
(2)單標簽和雙標簽
雙標簽：例如：<b></b>
單標簽：<hr/> <br/>
(3) 標簽的屬性
<font size="1">好好學習</font>
<font size="7">好好學習</font>
<h1 title="h1" style="color: red;">
我是一個標題標簽
</h1>
3. HTML基本結構的認識
<!--<!DOCTYPE html>:文檔聲明，告知瀏覽器文檔使用哪種HTML或XHTML規范，讓瀏覽器通過正確的方式解析我們的網頁，讓網頁能夠正確的顯示。-->
<!DOCTYPE html>
<!-- <html>標簽：是網頁的跟標簽-->
<html>
<!--head是網頁頭，一般表示網頁中描述信息-->
<head>
<!--
meta：提供網頁的相關信息，有利于搜索引擎收錄
charset="UTF-8"： 設置網頁編碼方式為utf-8
name="Keywords" ：設置網頁關鍵字
name="viewport": 設置網頁視窗大小
-->
<meta name="Keywords" content="HTML5前端開發工程師入門到精通課程"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title></title>：表示網頁的標題 -->
<title></title>
</head>
<body>
<!--
<body></body>：網頁的主體內容，用戶呈現的內容，比如文字，圖片，鏈接，視頻……
-->
</body>
</html>
4. HTML的注釋
<!--這里是注釋的內容-->
5. HTML的編碼問題
常見編碼個格式：
UTF-8:國際通用的編碼格式
GBK/GB2312:中文編碼字符
HTML的編碼：<meta charset="UTF-8">
6. HTML規范
（1）html標簽都是有尖括號包圍的標簽，比如<b>
（2）標簽通常是成對存在，<b></b>,<h1></h1>
（3）HTML不區分大小寫，我們建議小寫。
（4）HTML可以嵌套，但是允許交叉嵌套
正確寫法：<b> <h1>我很粗</h1> </b>
錯誤寫法：
<b> <h1>我很粗 </b></h1>
TML 字符集
如需正確地顯示 HTML 頁面，瀏覽器必須知道使用何種字符集。
萬維網早期使用的字符集是 ASCII。ASCII 支持 0-9 的數字，大寫和小寫英文字母表，以及一些特殊字符。
由于很多國家使用的字符并不屬于 ASCII，現代瀏覽器的默認字符集是 ISO-8859-1。
如果網頁使用不同于 ISO-8859-1 的字符集，就應該在 <meta> 標簽進行指定。
ISO 字符集
ISO 字符集是國際標準組織 (ISO) 針對不同的字母表/語言定義的標準字符集。
下面列出了世界各地使用的不同字符集：
| 字符集 | 描述 | 使用范圍 |
|---|---|---|
| ISO-8859-1 | Latin alphabet part 1 | 北美、西歐、拉丁美洲、加勒比海、加拿大、非洲 |
| ISO-8859-2 | Latin alphabet part 2 | 東歐 |
| ISO-8859-3 | Latin alphabet part 3 | SE Europe、世界語、其他雜項 |
| ISO-8859-4 | Latin alphabet part 4 | 斯堪的納維亞/波羅的海（以及其他沒有包括在 ISO-8859-1 中的部分） |
| ISO-8859-5 | Latin/Cyrillic part 5 | 使用古代斯拉夫語字母表的語言，比如保加利亞語、白俄羅斯文、俄羅斯語、馬其頓語 |
| ISO-8859-6 | Latin/Arabic part 6 | 使用阿拉伯字母的語言 |
| ISO-8859-7 | Latin/Greek part 7 | 現代希臘語，以及由希臘語衍生的數學符號 |
| ISO-8859-8 | Latin/Hebrew part 8 | 使用希伯來語的語言 |
| ISO-8859-9 | Latin 5 part 9 | 土耳其語。除了土耳其字符取代了冰島文字，其它與 ISO-8859-1 相同。 |
| ISO-8859-10 | Latin 6 | 拉普蘭語、日耳曼語、愛斯基摩北歐語 |
| ISO-8859-15 | Latin 9 (aka Latin 0) | 與 ISO 8859-1 類似，歐元符號和其他一些字符取代了一些較少使用的符號 |
| ISO-2022-JP | Latin/Japanese part 1 | 日本語 |
| ISO-2022-JP-2 | Latin/Japanese part 2 | 日本語 |
| ISO-2022-KR | Latin/Korean part 1 | 韓語 |
Unicode 標準
由于上面列出的字符集都有容量限制，而且不兼容多語言環境，Unicode 聯盟開發了 Unicode 標準。
Unicode 標準涵蓋了世界上的所有字符、標點和符號。
不論是何種平臺、程序或語言，Unicode 都能夠進行文本數據的處理、存儲和交換。
Unicode 聯盟
Unicode 聯盟開發了 Unicode 標準。他們的目標是用標準的 Unicode 轉換格式 (UTF) 來取代現有的字符集。
Unicode 標準已經獲得了成功，在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中，Unicode 已經得到了實現。在許多操作系統以及所有的現代瀏覽器中，Unicode 同樣得到了支持。
Unicode 聯盟與領導性的標準發展組織進行合作，比如 ISO、W3C 以及 ECMA。
Unicode 可以被不同的字符集兼容。最常用的編碼方式是 UTF-8 和 UTF-16：
| 字符集 | 描述 |
|---|---|
| UTF-8 | UTF8 中的字符可以是 1-4 個字節長。UTF-8 可以表示 Unicode 標準中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是網頁和電子郵件的首選編碼。 |
| UTF-16 | 16 比特的 Unicode 轉換格式是一種 Unicode 可變字符編碼，能夠對全部 Unicode 指令表進行編碼。UTF-16 主要被用于操作系統和環境中，比如微軟的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字節代碼環境。 |
提示： 最前面的 256 個 Unicode 字符集字符對應于 256 個 ISO-8859-1 字符。
提示： 所有 HTML 4 處理器均已支持 UTF-8，而所有 XHTML 和 XML 處理器支持 UTF-8 和 UTF-16！
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
