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 文件合并功能

<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>

登录后复制

引入 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>

登录后复制