Bootstrap入門

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代碼時,儘量避免多餘的父元素。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章