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">
<span class="hljs-tag">html <span class="hljs-attribute">lang=<span class="hljs-value">"zh-CN">
  <span class="hljs-tag">head>
      <span class="hljs-tag">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
      <span class="hljs-tag">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></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注释亦然。