整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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>
<meta charset="UTF-8">
</head>
10.引入 CSS 和 JavaScript 文件
根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
11.
布爾（boolean）型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。
<input type="checkbox" value="1" checked>
12.
減少標簽的數量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：
<!-- Not so great -->
<span>
<img src="...">
</span>
<!-- Better -->
<img src="...">
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 { ... }
TML 文檔由 HTML 元素定義。
HTML 元素
<phtml 元素指的是從開始標簽（start="" tag）到結束標簽（end="" tag）的所有代碼。<="" p="" style="color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; white-space: normal;">
| 開始標簽 * | 元素內容 | 結束標簽 * |
|---|---|---|
| <p> | 這是一個段落 | </p> |
| <a href="default.htm"> | 這是一個鏈接 | </a> |
| <br> |
*開始標簽常被稱為起始標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。
HTML 元素語法
HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學習更多有關屬性的內容。
嵌套的 HTML 元素
<p大多數 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">
HTML 文檔由嵌套的 HTML 元素構成。
HTML 文檔實例
<!DOCTYPE html>
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
以上實例包含了三個 HTML 元素。
HTML 實例解析
<p> 元素:
<p>這是第一個段落。</p>
這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素擁有一個開始標簽 <p> 以及一個結束標簽 </p>.
元素內容是: This is my first paragraph.
<body> 元素:
<body>
<p>這是第一個段落。</p>
</body>
The <body> 元素定義了 HTML 文檔的主體。
這個元素擁有一個開始標簽 <body> 以及一個結束標簽 </body>。
元素內容是另一個 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
The <html> 元素定義了整個 HTML 文檔。
這個元素擁有一個開始標簽 <html> ，以及一個結束標簽 </html>.
元素內容是另一個 HTML 元素（body 元素）。
不要忘記結束標簽
即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：
<p>這是一個段落
<p>這是一個段落
以上實例在瀏覽器中也能正常顯示，因為關閉標簽是可選的。
但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
HTML 空元素
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。
<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
HTML 提示：使用小寫標簽
HTML 標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。
W3CSchool 使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
著崗位競爭的越來越激烈，而設計師掌握的技能要求也越多，設計師不光只會設計，而且也要懂（會）代碼（會手寫代碼更會加金的），所以我們要做一位懂代碼設計師，還好Jason在大學學過代碼，畢業也做過一段時間的設計+前端，我將我在代碼方面的知識總結分享給大家，趕緊往下看吧
基礎認識
html語句是由標簽+屬性構成的
html 標簽由開始標簽和結束標簽組成，開始標簽是被括號包圍的元素名，結束標簽是被括號包圍的斜杠和元素名，但某些 html 元素沒有結束標簽，比如 <br />、<img>，這類標簽稱為單標簽。
屬性的語法
1、寫在標簽的<>內，而且在標簽代碼之后，如<p *></p>
2、屬性名=""(一定得是英文的引號，不能是中文的引號。其實不用引號對于它的顯示沒有影響，但加上引號為標準做法)
如 align="center" align為屬性名 center left right是屬性值
3、有的標簽沒有任何屬性（<br>），有的標簽雖然有屬性，但可以不加上也不影響它的使用(<p></p>),但有的標簽則是必須與屬性連用方能正常顯示(<a></a>)
網頁的基本結構
<html>
<head></head>
<body></body>
</html>
html，head，body 是html代碼必不可少的三大標簽，其中
html標簽：用于定義html文件的標簽，這個標簽意味著這個文件是一個html文件
head標簽：里面的內容不能再瀏覽器中直接呈現，但它會用后臺運作的方式為html頁面提供種種功能
body標簽：里面出現的內容會在瀏覽器中得到直接呈現，供讀者瀏覽
必須要記住的標簽和屬性
放在<head></head>之間的
<title> </title>
<title> </title>標簽定義html文檔的標題。<title>與</title>之間的內容將顯示在瀏覽器窗口的標題欄。
<meta>標簽
<meta>標簽類可以插入很多很有用的元素屬性。常用的有以下四種：
<meta name="keywords" content="study,computer">
用來標記搜索引擎在搜索你的頁面時所取出的關鍵詞。
<meta name="author" content=“wutao">
用來標記文檔的作者。
<meta http-equiv=“content-type” content=“text/html; charset=gb2312”>
用來標記你的頁面的解碼方式。
<meta http-equiv=“refresh” content=“5;url=http://www.xnc.edu.cn”>
用來自動刷新網頁
放在<body></body>之間的
與文字相關的標簽
文字標題
<h#> ... </h#>
#=1, 2, 3, 4, 5, 6
段(paragraph) <p>
空白占位符
換行<br>
文字的分區顯示
<div align=#> ... </div> (#=left, center, right)
<i> 顯示斜體文本效果。
<b> 呈現粗體文本效果。
<big> 呈現大號字體效果。
<small> 呈現小號字體效果。
無序列表
無序列表是由<ul>和<li>元素定義的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
<ul>和<li>中均可加入type屬性，type的屬性值有：disc(圓)、circle（圓圈）、square（方塊）
有序列表 start 值為數字
有序列表由<ol>和<li>定義:
<ol>
<li>sports</li>
<li> drink</li>
<li> friends</li>
</ol>
....................................................................
我的微信公眾號：UI嚴選 —越努力，越幸運
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
