HTML的語法:
對於屬性的定義,確保全部使用雙引號,絕不要使用單引號;
不要再自閉合(self-closing)元素的尾部添加斜線;
不要省略可選的結束標籤(closing tag).
語言屬性:
根據html5規範:強烈建議爲html根元素指定lang屬性,從而爲文檔設置正確的語言。
這將有助於語音合成工具確定其所應該採用的發音,有助於翻譯工具確定其翻譯時所應遵循的規則等。
<html lang="zh-CN">
<!-- ... -->
</html>
IE兼容模式:
IE通過指定的<meta>標籤來確定繪製當前頁面所採用的IE版本。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼:
通過聲明字符編碼,能夠確保瀏覽器快速病容易的判斷頁面內容的渲染方式。
避免在HTML中使用字符實體標記(character entity),從而全部與編碼格式一致(一般採用UTF-8編碼)。
<head>
<meta charset="UTF-8">
</head>
引入CSS與JavaScript文件:
根據H5規範,在引入CSS和JS文件時一般不需要指定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>
屬性順序:
確保代碼的易讀性:
class
id,name
data-*
src,for,type,href
title,alt
aria-*,role
class 用於標識高度可複用組件,因此應該排在首位。
布爾型屬性:
布爾型屬性可以在聲明時不賦值。XHTML規範要求爲其賦值,H5規範不要求。
元素的布爾型屬性如果有值,就是true,如果沒有值,就是false。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
減少標籤的數量:編寫html代碼時,儘量避免多餘的父元素。