盡量遵循 HTML 標(biāo)準(zhǔn)和語義,但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。
img
input
br
hr
等 );</li>
或 </body>
);<img src="/project/web-development/images/google.png" alt="Google">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
<img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
屬性的定義,統(tǒng)一使用雙引號(hào)。
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
a 不允許嵌套 div
這種約束屬于語義嵌套約束,與之區(qū)別的約束還有嚴(yán)格嵌套約束,比如 a 不允許嵌套 a
。
嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許;而語義嵌套約束,瀏覽器大多會(huì)容錯(cuò)處理,生成的文檔樹可能相互不太一樣。
<li>
用于 <ul>
或 <ol>
下;<dd>
,<dt>
用于 <dl>
下;<thead>
,<tbody>
,<tfoot>
,<tr>
,<td>
用于<table>
下;<a>
里不可以嵌套交互式元素 <a>
、<button>
、<select>
等;<p>
里不可以嵌套塊級元素<div>
、<h1>~<h6>
、<p>
、<ul>/<ol>/<li>
、<dl>/<dt>/<dd>
、<form>
等。更多詳情,參考 WEB 標(biāo)準(zhǔn)系列 - HTML 元素嵌套
HTML5 規(guī)范中 disabled
、checked
、selected
等屬性不用設(shè)置值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
沒有 CSS
的 HTML
是一個(gè)語義系統(tǒng)而不是 UI 系統(tǒng)。
通常情況下,每個(gè)標(biāo)簽都是有語義的,所謂語義就是你的衣服分為外套, 褲子,裙子,內(nèi)褲等,各自有對應(yīng)的功能和含義。所以你總不能把內(nèi)褲套在脖子上吧。-- 一絲
此外語義化的 HTML
結(jié)構(gòu),有助于機(jī)器(搜索引擎)理解,另一方面多人協(xié)作時(shí),能迅速了解開發(fā)者意圖。
標(biāo)簽 | 語義 |
<p> | 段落 |
<h1><h2><h3>... | 標(biāo)題 |
<ul> | 無序列表 |
<ol> | 有序列表 |
<blockquote> | 大段引用 |
<cite> | 一般引用 |
<b> | 為樣式加粗而加粗 |
<storng> | 為強(qiáng)調(diào)內(nèi)容而加粗 |
<i> | 為樣式傾斜而傾斜 |
<em> | 為強(qiáng)調(diào)內(nèi)容而傾斜 |
code | 代碼標(biāo)識(shí) |
abbr | 縮寫 |
將你構(gòu)建的頁面當(dāng)作一本書,將標(biāo)簽的語義對應(yīng)的其功能和含義;
<h1>
<h2>
<h3>
<h4> <h5> <h6>
<p>
更多語義化的內(nèi)容,參考 sofish 寫的文章這樣去寫你的 HTML。
為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式(standard mode)的聲明, 這樣能夠確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)。
<!DOCTYPE html>
為什么使用 lang="zh-cmn-Hans"而不是我們通常寫的 lang="zh-CN"呢? 請參考知乎上的討論: 網(wǎng)頁頭部的聲明應(yīng)該是用 lang="zh"還是 lang="zh-cn"?
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
優(yōu)先使用最新版本的 IE 和 Chrome 內(nèi)核。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
viewport
: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小,不包含工具條、選項(xiàng)卡等內(nèi)容;width
: 瀏覽器寬度,輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋?/li>
device-width
: 設(shè)備分辨率寬度,輸出設(shè)備的屏幕可見寬度;initial-scale
: 初始縮放比例;maximum-scale
: 最大縮放比例;為移動(dòng)端設(shè)備優(yōu)化,設(shè)置可見區(qū)域的寬度和初始縮放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iPhone 和 iTouch,默認(rèn) 57x57 像素,必須有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<!-- iPad,72x72 像素,可以沒有,但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
<!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
在未指定 favicon 時(shí),大多數(shù)瀏覽器會(huì)請求 Web Server 根目錄下的 favicon.ico。為了保證 favicon 可訪問,避免 404,必須遵循以下兩種方法之一:
<link rel="shortcut icon" href="path/to/favicon.ico">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超過150個(gè)字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 為移動(dòng)設(shè)備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標(biāo) -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>