使用2個空格縮進
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}
只允許使用小寫。
所有的代碼都用小寫字母:適用于元素名,屬性,屬性值(除了文本和CDATA), 選擇器,特性,特性值(除了字符串)。
<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png"
alt="Google">
建議刪除行尾白空格。
<!-- 不推薦 -->
<p>What? </p>
<!-- 推薦 -->
<p>Yes please.</p>
如果沒有特殊需求,一般采用utf-8編碼。如果是cms站點,則遵守該站點的編碼規(guī)則。
<!-- 網(wǎng)頁編碼 -->
<meta charset="utf-8">
盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。
注釋是否需要詳盡,取決于項目的復雜程度。
一般單行注釋:
<!-- col -->
模塊間注釋:
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->
循環(huán)注釋:
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
<!-- /loop: new list -->
</ul>
cms輸出注釋:
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->
Tab選項卡內容注釋:
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->
使用html5文檔聲明,不再使用XHTML(application/xhtml+xml)。
HTML5是目前所有HTML文檔類型中的首選:
<!DOCTYPE html>
編寫有效、正確的HTML代碼,否則很難達到性能上的提升。
可以使用一些工具驗證你的代碼,如 W3C HTML validator
根據(jù)HTML各個元素的用途而去使用它們。
<!-- 不推薦 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
<!-- 推薦 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
部分標簽說明:
不推薦使用的標簽:
給多媒體元素,比如canvas、videos、 images增加alt屬性,提高可用性(特別是常用的img標簽,盡可量得加上alt屬性,提供圖片的描述信息)。
<!-- 不推薦 -->
<img src="world.jpg">
<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">
在樣式表和腳本的標簽中忽略type屬性。
HTML5默認type為text/css和text/javascript類型,所以沒必要指定。即便是老瀏覽器也是支持的。
<!-- 不推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script>
<!-- 推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>
每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。按設計稿劃分模塊,盡量使頁面模塊化,模塊與模塊之前要有清晰的注釋。
如上面頁面框架,推薦寫法:
<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
<!-- container -->
<div class="container">
<!--news-->
<div class="news">
<h2>news<h2>
<p>...</p>
</div>
<!--news-->
</div>
<!--/container-->
<!--sidebar-->
<div class="sidebar">
sidebar</div>
<!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->
保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。
<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div>
<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>
H標簽使用
strong、b使用
將需要加粗的文字使用b標簽來顯示。
將需要強調的文字(主要指包含關鍵詞的信息)使用strong標簽來強調主要內容。
注:b是粗體標簽,屬于實體標簽,它所包圍的字符將被設為bold(粗體);strong 是加重語氣標簽,屬于邏輯標簽,它的作用是加強字符語氣。
在很多情況下,a都要使用title來說明該鏈接的相關說明或目的意義。
例如:當使用overflow隱藏掉a中的溢出文字時,該a中的title是必不可少的,它可以告訴用戶被隱藏掉的文字內容是什么;又或者當一個圖片型鏈接出現(xiàn)時,該a中的title同樣是必不可少的,它可以告訴用戶這個圖片鏈接是做什么用的。
注:僅在img里添加alt標簽在火狐提示文字是出不來的,alt是圖片加載失敗或未加載完全時顯示出來的提示文字,要想鼠標移上去顯示提示信息應該用title,嚴謹?shù)膶懛ㄊ莍mg里加入alt和title這兩個標簽。
代碼保持精簡,最優(yōu)化,這樣搜索引擎才更喜歡。
TML 符號實體
HTML 符號是不呈現(xiàn)在標準的鍵盤上,比如數(shù)學運算符、箭頭符號、技術符號和形狀。
如需向 HTML 頁面添加這些符號,您可以使用 HTML 實體名稱。
如果不存在實體名稱,您可以使用實體編號。
如果字符沒有實體名稱,您可以使用十進制(或十六進制)引用。
實例
<p>我將顯示 €</p>
<p>我將顯示 €</p>
<p>我將顯示 €</p>
結果如下:
我將顯示 €
我將顯示 €
我將顯示 €
HTML 支持的數(shù)學符號
如果您使用的是一個 HTML 實體名稱或一個十六進制編號,字符總是能正確顯示。
這是與您頁面使用的字符集相互獨立的!
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
? | ∀ | ∀ | 所有(for all) |
? | ∂ | ∂ | 部分(part) |
? | ∃ | ∃ | 存在(exists) |
? | ∅ | ∅ | 空(empty) |
? | ∇ | ∇ | 倒三角(nabla) |
∈ | ∈ | ∈ | 屬于(isin) |
? | ∉ | ∉ | 不屬于(notin) |
? | ∋ | ∋ | 包含的成員(ni) |
∏ | ∏ | ∏ | 連乘(prod) |
∑ | ∑ | ∑ | 總和(sum) |
完整的數(shù)學(Math)參考手冊
HTML 支持的希臘字母
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
Α | Α | Α | Alpha(中文注音:阿耳法) |
Β | Β | Β | Beta(中文注音:貝塔) |
Γ | Γ | Γ | Gamma(中文注音:伽馬) |
Δ | Δ | Δ | Delta(中文注音:德耳塔) |
Ε | Ε | Ε | Epsilon(中文注音:艾普西?。?/td> |
Ζ | Ζ | Ζ | Zeta(中文注音:截塔) |
完整的希臘(Greek)參考手冊
HTML 支持的其他實體
字符 | 編號 | 實體 | 描述 |
---|---|---|---|
? | © | © | 版權所有(REGISTERED SIGN) |
? | ® | ® | 注冊商標(REGISTERED SIGN) |
€ | € | € | 歐元符號(EURO SIGN) |
? | ™ | ™ | 商標(trademark) |
← | ← | ← | 向左箭頭(LEFTWARDS ARROW) |
↑ | ↑ | ↑ | 向上箭頭(UPWARDS ARROW) |
→ | → | → | 向右箭頭(RIGHTWARDS ARROW) |
↓ | ↓ | ↓ | 向下箭頭(DOWNWARDS ARROW) |
? | ♠ | ♠ | 黑桃(BLACK SPADE SUIT) |
? | ♣ | ♣ | 黑梅花(BLACK CLUB SUIT) |
? | ♥ | ♥ | 黑心(BLACK HEART SUIT) |
? | ♦ | ♦ | 黑方塊(BLACK DIAMOND SUIT) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body> <img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標準模式,使其在每個瀏覽器中盡可能一致的展現(xiàn);雖然doctype不區(qū)分大小寫,但是按照慣例,doctype大寫 (關于html屬性,大寫還是小寫)。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范:應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助,告訴它們應當怎么去發(fā)音和翻譯。
更多關于 lang 屬性的說明在這里;在sitepoint上可以查到語言列表;
但sitepoint只是給出了語言的大類,例如中文只給出了zh,但是沒有區(qū)分香港,臺灣,大陸。而微軟給出了一份更加詳細的語言列表.aspx),其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼,讓瀏覽器輕松、快速的確定適合網(wǎng)頁內容的渲染方式,通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染;<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type,因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規(guī)范鏈接使用link
使用style
使用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 屬性順序屬性應該按照特定的順序出現(xiàn)以保證易讀性;
class是為高可復用組件設計的,所以應處在第一位;
id更加具體且應該盡量少使用,所以將它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean屬性指不需要聲明取值的屬性,XHTML需要每個屬性聲明取值,但是HTML5并不需要;
更多內容可以參考 WhatWG section on boolean attributes:
boolean屬性的存在表示取值為true,不存在則表示取值為false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
在JS文件中生成標簽讓內容變得更難查找,更難編輯,性能更差。應該盡量避免這種情況的出現(xiàn)。
在編寫HTML代碼時,需要盡量避免多余的父節(jié)點;很多時候,需要通過迭代和重構來使HTML變得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
盡量遵循HTML標準和語義,但是不應該以浪費實用性作為代價;任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。