html和css的編碼規範

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">8b05045a5be5764f313ed5b9168a17e6
<span class="hljs-tag">fd1c7470616d86278840d6b7f184939d
  <span class="hljs-tag">544891a773924c17cba16fcfae7625a3
      <span class="hljs-tag">d373320a9b31d54a158ab0c769e5981d
      <span class="hljs-tag">e8039b8767e5ac2709e79e7579269c11
  <span class="hljs-tag">5cdbdac6b254fb497e2050d51cee3b1e
  ....
<span class="hljs-tag">3df78ee2da90f6777fae316d12dd978c
</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">5c6c51bc41886c301ce58ec77317e826
<span class="hljs-tag">d06eb969412e9d4a2552018f00a5f964

<span class="hljs-comment">48df608d85346f715d811edbe2b24159
<span class="hljs-tag">dabd89fc18491d0568a782031b6411c7<span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag">d046036d3cc984786d6dec3577099da1

<span class="hljs-comment">f43272291475af4b6bd8a33a495f4618
<span class="hljs-tag">ab71ecaf05cdb791f516c43a54a9638a<span class="undefined"><span class="hljs-tag">ec5b9b155d57a51cb2f2cc4c7a39dc30
</span></span></span></span></span></span></span></span></span></span></span></code>

---

 

2.註