社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > html和css的編碼規範

html和css的編碼規範

WBOY
發布： 2016-08-30 09:21:06
原創
1103 人瀏覽過

HTML和CSS編碼規範內容

一、HTML規範

二、CSS規範

三、注意事項：

四、常用的命名規則

五、CSS樣式表檔命名

六、文件命名規則

一、HTML規範：

1.代碼規範

  • 頁面的第一行新增標準模式宣告
  • 程式碼縮排：tab鍵設定四個空格（通常在軟體右下角設定對應空格大小）
  • html中除了開頭的DOC和 'UTF-8'或head里特殊情況可以大寫外，其他都為小寫，css類都為小寫
  • 建議為 html 根元素指定 lang 屬性，從而為文件設定正確的語言 lang="zh-CN"
  • 不同doctype在不同瀏覽器下會觸發不同的渲染模式 
<code class="hljs xml"><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></code>
登入後複製
  • 不要使用@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 分別是他們的預設值
<code class="hljs xml"><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></code>
登入後複製

 

2.註


  • 注意：--後面不要留空格，若留空格，其他註解全加空格（方便後續程式開發）換句話說，註解要全域統一

eg:


為書寫規範，最好每一個需要註解都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。 CSS、JS註解亦然。



為書寫規範，最好每一個需要註釋都需要開頭和結尾，減少後續麻煩和錯誤。不要換行。 CSS、JS註解亦然。