`
houshina
  • 浏览: 738 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

html、css代码规范

阅读更多

一、省略ur地址中的 http: 或 https: 的部分 , 在引用样式表文件、脚本文件、图片以及其它媒体文件时,都可以这样做,除非使用这两种协议都无法获取到资源,也就是说必须使用其它协议才能获取到资源的,就不能省略啦,只有http:和https:是可以省略的。这样做的好处是能减少文件的体积,而且还能避免一些相对url中混乱问题的产生。

 

 

<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script><!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
  background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
  background: url(//www.google.com/images/example);
}

 

 

 

二、通用代码风格

  1、每次缩进两个空格,不要使用tab键进行缩进,也不要把tab键以及空格混合起来进行缩进。单纯的使用空格进行缩进就好了。

<ul>
  <li>Fantastic
  <li>Great
</ul>
 
.example {
  color: blue;
}

 

 

 2、只使用小写,包括标签名、属性名、属性值(一些可以自定义的字符串属性值除外)

 

 

<!-- 不推荐 -->
<A HREF="/">Home</A>
 
<!-- 推荐 -->
<img src="google.png" alt="Google">

 

 

三、通用Meta规则

  1、确保你的IDE使用的是UTF-8编码来保存文件的,且不要带上BOM。在定义页面的编码时使用<meta charset="utf-8"> 就好了。在样式表文件里不用去声明UTF-8编码什么的。

  2、在需要地地方进行注释。

  3、用 TODO 来标志代码中需要完善的地方

 

 

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

 

 

四、HTML书写规则

   1、文档类型。HTML5的文档类型对所有的html文档都适用:<!doctype html>。另外,最好使用html,而不是xhtml.

   2、使用规范化的html,并使用W3C HTML validator之类的工具来进行检测。

 

 

<!-- 不规范 -->
<title>Test</title>
<article>This is only a test.
 
<!-- 规范 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

 

 

3、使用语义化的html标签,根据用途来选择标签。

 

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
 
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

 

 

4、把多媒体元素可知化。像图片、视频、动画等多媒体元素,要有相关的文字来体现其内容,比如<img> 可以使用alt属性来说明图片内容。

 

<!-- 不推荐 -->
<img src="spreadsheet.png">
 
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

 

 

5、确保页面的 结构、样式、行为三者相分离。确保文档或模板中只包含html,把用到的样式都写到样式表文件中,把脚本都写到js文件中。这在多人协作时非常重要。

 

 

<!-- Not recommended -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>
 
<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

 

 

6、优化标签。有些标签是不需要用到的,能少就少。可以参考HTML5 specification来知道哪些标签是必须的,哪些又是多余的。

 

 

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
 
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

 

 

7、省略<style>和<script>的type属性

 

五、HTML代码的格式化

  1、为每个块级元素或表格元素标签新起一行,并且对每个子元素进行缩进

 

 

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

 

 

 

六、css书写规则

   1、使用合法、规范的css,可以通过W3C CSS validator来进行验证。

   2、ID和class的命名尽可能短,并符合语义。

 

/* Not recommended */
#navigation {}
.atr {}
/* Recommended */
#nav {}
.author {}

 

 

 3、尽量少用多重选择器或后代选择器,因为这会影响性能。

 

/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}

 

 4、使用组合属性。css中提供了不少的能进行组合属性连写的地方。比如font,margin,padding等。

 

/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

 

5、如果css属性的值为0,则后面不要带上单位。除非真的是需要。

 

margin: 0;
padding: 0;

 

6、省略小数前面的0。比如 0.8 可以写成 .8

7、在URI类型的值里不要加上引号。比如 @import url(//www.google.com/css/go.css);

8、如果有可能,尽量使用3个字符的十六进制数。

 

/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;

 

9、使用特定的前缀

 

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

 

10、在ID和class中使用 - 来作为连字符。

 

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
 
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}

 

11、避免使用css hack,首先考虑使用另一种写法来解决。

 

七、css格式化规则

  1、按字母的先后顺序来进行css属性的声明,但某些浏览器的私有前缀可以不算进来。

 

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

 

2、对处在{}中的语句进行缩进。

 

@media screen, projection {
 
  html {
    background: #fff;
    color: #444;
  }
 
}

 

3、每个css属性声明后都要使用一个分号,即使是最后的那个。

 

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

 

4、在紧跟属性名的冒号后使用一个空格

/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}

 

5、每一个css选择器或是属性声明都要新起一行。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

 

6、在每一个css规则之间应该空一行

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

 

分享到:
评论

相关推荐

    CSS代码规范与命名规范

    CSS规范常见问题的解决方法

    HTML/CSS代码开发规范文档

    HTML/CSS代码开发规范文档

    CSS代码规范.pdf

    【CSS代码规范】 在编写CSS代码时,遵循一定的规范至关重要,这可以提高代码的可读性、可维护性和团队协作效率。以下是一些常见的CSS代码规范: 1. **HTML基本格式**:HTML文档应遵循标准格式,包括DOCTYPE声明、...

    CSS代码规范.docx

    **CSS代码规范** 在编写CSS代码时,遵循一定的规范至关重要,这不仅有助于代码的可读性和维护性,还可以提高团队协作效率。以下是一些关键的CSS编码规则和建议: 1. **开启Edge模式**: 在HTML文档头部添加`,chrome...

    HTML/CSS代码开发规范文档.docx

    HTML/CSS代码开发规范文档是指导开发者遵循统一标准,提高代码可读性、可维护性和团队协作效率的重要参考资料。以下是对这些规范的详细说明: 1、前言: 规范的前言通常强调遵循编码规范的重要性,它能确保项目的...

    前端代码规范文档,js,css,html等

    前端代码规范文档@js、css、html 等 本文档旨在规范前端开发过程中的代码编写,涵盖 JavaScript、CSS、HTML 等多方面的规范,旨在提高代码的可读性、可维护性和可扩展性。 命名规范 1.1.1 项目命名:全部采用小写...

    HTML/CSS代码开发规范文档.pdf

    HTML/CSS代码开发规范文档是指导开发者遵循统一标准和最佳实践的重要参考资料,旨在提高代码的可读性、可维护性和团队协作效率。以下是对这些规范的详细解释: 1、前言: 规范的前言通常会阐述制定规范的目的,强调...

    个人博客html+css+JavaScript完整代码

    个人博客的HTML+CSS+JavaScript代码应该遵循良好的编码规范,保证代码的可读性和可维护性。同时,为了提高性能,可以进行代码压缩和合并,减少HTTP请求,并利用缓存策略。此外,考虑到搜索引擎优化(SEO),需要合理...

    Js代码规范

    大公司或者多人项目规模化编写Web App时规定的代码规范,便于维护和拓展。让多人代码看起来像是同一个人写的

    编码规范 html css js

    以上是关于HTML、CSS和JavaScript的编码规范的一些基本要点。遵循这些规范,不仅可以提升代码的质量,还能提高团队协作效率,使得项目更容易维护和扩展。同时,随着技术的发展,编码规范也会不断更新和完善,持续...

    HTML+CSS前端编码规范.pdf

    CSS 链接规范指的是在 HTML 代码中链接 CSS 样式文件的方式。一般来说,CSS 文件应使用相对路径或绝对路径连接。 10. CSS hack CSS hack 是指使用特殊的 CSS 代码来解决浏览器之间的兼容性问题。 11. JS 调用规范 ...

    网页编辑 css代码生成器

    6. **代码格式化**:自动整理生成的CSS代码,使其符合规范,便于阅读和理解。 7. **实时预览**:在编写过程中提供实时预览功能,让用户在编写代码的同时就能看到效果,便于调整和优化。 **使用步骤** 1. 打开CSS...

    Head First HTML与CSS、XHTML 配套代码

    《Head First HTML与CSS、XHTML 配套代码》是一本专为初学者设计的教材,旨在帮助读者从零开始掌握网页制作的基础知识。这本书通过直观、趣味的方式讲解了HTML、CSS以及XHTML的核心概念,使得学习过程既轻松又有效。...

    CSS命名规范CSS命名规范

    CSS 命名规范是指在编写 CSS 代码时,遵守一定的命名规则,以便于代码的阅读、维护和重用。下面是一些常用的 CSS 命名规范: * 文件命名规范:global.css、layout.css、font.css、link.css、print.css 等 * 常用类/...

    HTML-CSS代码开发规范文档程序人员参考指南

    HTML_CSS代码开发规范文档 程序人员参考指南

    HTML+CSS布局、规范、兼容

    HTML+CSS布局、规范及兼容是前端开发中非常重要的知识点。对于初学者而言,掌握正确的布局技术和编码规范能够帮助他们更好地编写出兼容性强、可维护性高的网页。以下知识点将详细介绍HTML和CSS中的布局模型、定位...

    京东首页Html+css+javascript代码

    在本项目中,“京东首页Html+css+javascript代码”展示了如何使用前端开发的三大核心技术——HTML、CSS和JavaScript,来构建一个类似京东首页的网页。这个项目旨在帮助开发者理解购物网站的基本架构,并通过实践增强...

    网站前端代码规范,新整理了一份HTML+CSS+IMG的规范,不含JS

    前端开发是构建网页和应用程序的重要部分,而良好的代码规范能够提高代码可读性,降低维护成本,提升团队协作效率。以下是一份关于HTML、CSS和图像处理的前端规范的详细说明: 1. HTML规范: - 结构清晰:HTML代码...

Global site tag (gtag.js) - Google Analytics