免費(fèi)AI編程助手
HTML
語(yǔ)法
- 縮進(jìn)使用soft tab（4個(gè)空格）；
- 嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)；
- 在屬性上，使用雙引號(hào)，不要使用單引號(hào)；
- 屬性名全小寫，用中劃線做分隔符；
- 不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線（HTML5 規(guī)范?指出他們是可選的）；
- 不要忽略可選的關(guān)閉標(biāo)簽，例：
?和?。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="https://atts.w3cschool.cn/attachments/image/cimg/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>HTML5 doctype
在頁(yè)面開頭使用這個(gè)簡(jiǎn)單地doctype來(lái)啟用標(biāo)準(zhǔn)模式，使其在每個(gè)瀏覽器中盡可能一致的展現(xiàn)；
雖然doctype不區(qū)分大小寫，但是按照慣例，doctype大寫 （關(guān)于html屬性，大寫還是小寫）。
<!DOCTYPE html>
<html>
...
</html>lang屬性
根據(jù)HTML5規(guī)范：
應(yīng)在html標(biāo)簽上加上lang屬性。這會(huì)給語(yǔ)音工具和翻譯工具幫助，告訴它們應(yīng)當(dāng)怎么去發(fā)音和翻譯。
更多關(guān)于?lang?屬性的說(shuō)明在這里；
在sitepoint上可以查到語(yǔ)言列表；
但sitepoint只是給出了語(yǔ)言的大類，例如中文只給出了zh，但是沒(méi)有區(qū)分香港，臺(tái)灣，大陸。而微軟給出了一份更加詳細(xì)的語(yǔ)言列表，其中細(xì)分了zh-cn, zh-hk, zh-tw。
<!DOCTYPE html>
<html lang="en-us">
...
</html>字符編碼
通過(guò)聲明一個(gè)明確的字符編碼，讓瀏覽器輕松、快速的確定適合網(wǎng)頁(yè)內(nèi)容的渲染方式，通常指定為'UTF-8'。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>IE兼容模式
用?``?標(biāo)簽可以指定頁(yè)面應(yīng)該用什么版本的IE來(lái)渲染；
如果你想要了解更多，請(qǐng)點(diǎn)擊這里；
不同doctype在不同瀏覽器下會(huì)觸發(fā)不同的渲染模式（這篇文章總結(jié)的很到位）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>引入CSS, JS
根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時(shí)不需要指明?type，因?yàn)?text/css和?text/javascript?分別是他們的默認(rèn)值。
HTML5 規(guī)范鏈接
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="https://atts.w3cschool.cn/attachments/image/cimg/script>
<!-- In-document JS -->
<script>
...
</script>屬性順序
屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；
classidnamedata-*src,?for,?type,?href,?value?,?max-length,?max,?min,?patternplaceholder,?title,?altaria-*,?rolerequired,?readonly,?disabled
class是為高可復(fù)用組件設(shè)計(jì)的，所以應(yīng)處在第一位；
id更加具體且應(yīng)該盡量少使用，所以將它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">boolean屬性
boolean屬性指不需要聲明取值的屬性，XHTML需要每個(gè)屬性聲明取值，但是HTML5并不需要；
更多內(nèi)容可以參考?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生成標(biāo)簽
在JS文件中生成標(biāo)簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應(yīng)該盡量避免這種情況的出現(xiàn)。
減少標(biāo)簽數(shù)量
在編寫HTML代碼時(shí)，需要盡量避免多余的父節(jié)點(diǎn)；
很多時(shí)候，需要通過(guò)迭代和重構(gòu)來(lái)使HTML變得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">實(shí)用高于完美
盡量遵循HTML標(biāo)準(zhǔn)和語(yǔ)義，但是不應(yīng)該以浪費(fèi)實(shí)用性作為代價(jià)；
任何時(shí)候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來(lái)解決問(wèn)題。
更多建議：