HTML和CSS編碼規範內容

一、HTML規範

二、CSS規範

三、注意事項：

四、常用的命名規則

五、CSS樣式表檔命名

六、文件命名規則

一、HTML規範：

1.代碼規範

頁面的第一行新增標準模式宣告
程式碼縮排：tab鍵設定四個空格（通常在軟體右下角設定對應空格大小）
html中除了開頭的DOC和 'UTF-8'或head里特殊情況可以大寫外，其他都為小寫，css類都為小寫
建議為 html 根元素指定 lang 屬性，從而為文件設定正確的語言 lang="zh-CN"
不同doctype在不同瀏覽器下會觸發不同的渲染模式

<span class="hljs-doctype"><!DOCTYPE html>
<span class="hljs-tag"><<span class="hljs-title">html <span class="hljs-attribute">lang=<span class="hljs-value">"zh-CN">
  <span class="hljs-tag"><<span class="hljs-title">head>
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=Edge">
  <span class="hljs-tag"></<span class="hljs-title">head>
  ....
<span class="hljs-tag"></<span class="hljs-title">html>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

不要使用@import
- 與標籤相比，@import 指令慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：
  - 使用多個元素
  - 透過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 檔案編譯為一個檔案
  - 透過 Rails、Jekyll 或其他系統中提供過 CSS 檔案合併功能

<code class="hljs xml"><span class="hljs-comment"><!-- Use link elements -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"core.css">

<span class="hljs-comment"><!-- Avoid @imports -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
  <span class="hljs-at_rule">@<span class="hljs-keyword">import <span class="hljs-function">url(<span class="hljs-string">"more.css");
<span class="hljs-tag"></<span class="hljs-title">style>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

引入 CSS 和 JavaScript 檔案

根據HTML5規範, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的預設值

<span class="hljs-comment"><!-- External CSS -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"code-guide.css">

<span class="hljs-comment"><!-- In-document CSS -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag"></<span class="hljs-title">style>

<span class="hljs-comment"><!-- JavaScript -->
<span class="hljs-tag"><<span class="hljs-title">script <span class="hljs-attribute">src=<span class="hljs-value">"code-guide.js"><span class="undefined"><span class="hljs-tag"></<span class="hljs-title">script>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>