PHP基础PHP教程php框架JavaScript

asp.netAJAX正则表达式ASP

输入banner图图片脚本导航/分类

html和css的编码规范

HTML和CSS编码规范内容

一、HTML规范

二、CSS规范

三、注意事项：

四、常用的命名规则

五、CSS样式表文件命名

六、文件命名规则

一、HTML规范：

1.代码规范

  • 页面的第一行添加标准模式声明
  • 代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
  • html中除了开头的DOC和 'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
  • 建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言 lang="zh-CN"
  • 不同doctype在不同浏览器下会触发不同的渲染模式 
https://www.gxlcms.com/
https://www.gxlcms.com/html https://www.gxlcms.com/lang=https://www.gxlcms.com/"zh-CN">
  https://www.gxlcms.com/head>
      https://www.gxlcms.com/meta https://www.gxlcms.com/charset=https://www.gxlcms.com/"UTF-8">
      https://www.gxlcms.com/meta https://www.gxlcms.com/http-equiv=https://www.gxlcms.com/"X-UA-Compatible" https://www.gxlcms.com/content=https://www.gxlcms.com/"IE=Edge">
  https://www.gxlcms.com/head>
  ....
https://www.gxlcms.com/html>
  • 不要使用@import
    • 与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：
      • 使用多个 元素
      • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
      • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
https://www.gxlcms.com/
https://www.gxlcms.com/link https://www.gxlcms.com/rel=https://www.gxlcms.com/"stylesheet" https://www.gxlcms.com/href=https://www.gxlcms.com/"core.css">

https://www.gxlcms.com/
https://www.gxlcms.com/style>https://www.gxlcms.com/
  https://www.gxlcms.com/@https://www.gxlcms.com/import https://www.gxlcms.com/url(https://www.gxlcms.com/"more.css");
https://www.gxlcms.com/style>

引入 CSS 和 JavaScript 文件
  • 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值
https://www.gxlcms.com/
https://www.gxlcms.com/link https://www.gxlcms.com/rel=https://www.gxlcms.com/"stylesheet" https://www.gxlcms.com/href=https://www.gxlcms.com/"code-guide.css">

https://www.gxlcms.com/
https://www.gxlcms.com/style>https://www.gxlcms.com/
 https://www.gxlcms.com//* ... */
https://www.gxlcms.com/style>

https://www.gxlcms.com/
https://www.gxlcms.com/script https://www.gxlcms.com/src=https://www.gxlcms.com/"code-guide.js">https://www.gxlcms.com/https://www.gxlcms.com/script>

2.注释


  • 注意：--后不要留空格，若留空格，其他注释全加空格（方便后续程序开发）换句话说，注释要全局统一

eg:


为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要换行。CSS、JS注释亦然。



为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 https://www.gxlcms.com/span https://www.gxlcms.com/class=https://www.gxlcms.com/"avatar"> https://www.gxlcms.com/img https://www.gxlcms.com/src=https://www.gxlcms.com/"..."> https://www.gxlcms.com/span> https://www.gxlcms.com/ https://www.gxlcms.com/img https://www.gxlcms.com/class=https://www.gxlcms.com/"avatar" https://www.gxlcms.com/src=https://www.gxlcms.com/"...">

6.布尔型属性

https://www.gxlcms.com/input https://www.gxlcms.com/type=https://www.gxlcms.com/"text" https://www.gxlcms.com/disabled>

https://www.gxlcms.com/input https://www.gxlcms.com/type=https://www.gxlcms.com/"checkbox" https://www.gxlcms.com/value=https://www.gxlcms.com/"1" https://www.gxlcms.com/checked>

https://www.gxlcms.com/select>
 https://www.gxlcms.com/option https://www.gxlcms.com/value=https://www.gxlcms.com/"1" https://www.gxlcms.com/selected>1https://www.gxlcms.com/option>
https://www.gxlcms.com/select>

二、css规范

1、语法

1.1、缩进
[强制]使用 https://www.gxlcms.com/4 个空格做为一个缩进层级，不允许使用 https://www.gxlcms.com/2 个空格 或 tab 字符。

1.2、空格

1.3、选择器

1.4、行

1.5、属性

1.6、前缀

1.7、简写

https://www.gxlcms.com//* Bad CSS */
https://www.gxlcms.com/main>https://www.gxlcms.com/nav https://www.gxlcms.com/{
   https://www.gxlcms.com/https://www.gxlcms.com/padding:https://www.gxlcms.com/ https://www.gxlcms.com/10px;
}
https://www.gxlcms.com/.selector, https://www.gxlcms.com/.selector-secondary, https://www.gxlcms.com/.selectorhttps://www.gxlcms.com/[type=text] https://www.gxlcms.com/{  

   https://www.gxlcms.com/https://www.gxlcms.com/padding:https://www.gxlcms.com/https://www.gxlcms.com/15px;  
    https://www.gxlcms.com/https://www.gxlcms.com/margin:https://www.gxlcms.com/https://www.gxlcms.com/0px https://www.gxlcms.com/0px https://www.gxlcms.com/15px; 
   https://www.gxlcms.com/https://www.gxlcms.com/background-color:https://www.gxlcms.com/https://www.gxlcms.com/rgba(https://www.gxlcms.com/0, https://www.gxlcms.com/0, https://www.gxlcms.com/0, https://www.gxlcms.com/0.5);
   https://www.gxlcms.com/https://www.gxlcms.com/box-shadow:https://www.gxlcms.com/https://www.gxlcms.com/0px https://www.gxlcms.com/1px https://www.gxlcms.com/2px https://www.gxlcms.com/#CCC,inset https://www.gxlcms.com/0 https://www.gxlcms.com/1px https://www.gxlcms.com/0 https://www.gxlcms.com/#FFFFFF 
}  
https://www.gxlcms.com/.selector, https://www.gxlcms.com/.selector-secondary, https://www.gxlcms.com/.selectorhttps://www.gxlcms.com/[type=text] https://www.gxlcms.com/{https://www.gxlcms.com/https://www.gxlcms.com/padding:https://www.gxlcms.com/https://www.gxlcms.com/15px;https://www.gxlcms.com/https://www.gxlcms.com/margin:https://www.gxlcms.com/https://www.gxlcms.com/0px https://www.gxlcms.com/0px https://www.gxlcms.com/15px;}

https://www.gxlcms.com//* Good CSS */ 
https://www.gxlcms.com/main > https://www.gxlcms.com/nav https://www.gxlcms.com/{
   https://www.gxlcms.com/https://www.gxlcms.com/padding:https://www.gxlcms.com/ https://www.gxlcms.com/10px;
}
https://www.gxlcms.com/.selector,  
https://www.gxlcms.com/.selector-secondary,  
https://www.gxlcms.com/.selectorhttps://www.gxlcms.com/[type="text"] https://www.gxlcms.com/{  
   https://www.gxlcms.com/https://www.gxlcms.com/padding:https://www.gxlcms.com/ https://www.gxlcms.com/15px;  
   https://www.gxlcms.com/https://www.gxlcms.com/margin-bottom:https://www.gxlcms.com/ https://www.gxlcms.com/15px; 
   https://www.gxlcms.com/https://www.gxlcms.com/background-color:https://www.gxlcms.com/ https://www.gxlcms.com/rgba(https://www.gxlcms.com/0,https://www.gxlcms.com/0,https://www.gxlcms.com/0,.https://www.gxlcms.com/5);
   https://www.gxlcms.com/https://www.gxlcms.com/background:https://www.gxlcms.com/
     transparent https://www.gxlcms.com/url(aVeryVeryVeryLongUrlIsPlacedHere)
       no-repeat https://www.gxlcms.com/0 https://www.gxlcms.com/0;
   https://www.gxlcms.com/https://www.gxlcms.com/box-shadow:https://www.gxlcms.com/ https://www.gxlcms.com/0 https://www.gxlcms.com/1px https://www.gxlcms.com/2px https://www.gxlcms.com/#ccc, inset https://www.gxlcms.com/0 https://www.gxlcms.com/1px https://www.gxlcms.com/0 https://www.gxlcms.com/#fff;
}

2.注释

eg: /* S 注释内容 */

为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。

/* E 注释内容 */

3.命名规范

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

https://www.gxlcms.com//* Bad example */
.t { ... }
.red { ... }
.header { ... }

https://www.gxlcms.com//* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

4.选择器

https://www.gxlcms.com//* Bad example */
span { ... }
.page-container https://www.gxlcms.com/#stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

https://www.gxlcms.com//* Good example */
.avatar { ... }
.tweet-header .username { ... } https://www.gxlcms.com///不要超过3个
.tweet .avatar { ... }

5.声明顺序

5.1. 相关的属性声明应当归为一组，并按照下面的顺序排列：
https://www.gxlcms.com/* Positioning
https://www.gxlcms.com/* Box model
https://www.gxlcms.com/* Typographic
https://www.gxlcms.com/* Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。 eg:

https://www.gxlcms.com/.declaration-order https://www.gxlcms.com/{
  https://www.gxlcms.com//* Positioning */
  https://www.gxlcms.com/https://www.gxlcms.com/position:https://www.gxlcms.com/ absolute;
  https://www.gxlcms.com/https://www.gxlcms.com/top:https://www.gxlcms.com/ https://www.gxlcms.com/0;
  https://www.gxlcms.com/https://www.gxlcms.com/right:https://www.gxlcms.com/ https://www.gxlcms.com/0;
  https://www.gxlcms.com/https://www.gxlcms.com/bottom:https://www.gxlcms.com/ https://www.gxlcms.com/0;
  https://www.gxlcms.com/https://www.gxlcms.com/left:https://www.gxlcms.com/ https://www.gxlcms.com/0;
  https://www.gxlcms.com/https://www.gxlcms.com/z-index:https://www.gxlcms.com/ https://www.gxlcms.com/100;

  https://www.gxlcms.com//* Box-model */  https://www.gxlcms.com/https://www.gxlcms.com/display:https://www.gxlcms.com/ block;
  https://www.gxlcms.com/https://www.gxlcms.com/float:https://www.gxlcms.com/ right;
  https://www.gxlcms.com/https://www.gxlcms.com/width:https://www.gxlcms.com/ https://www.gxlcms.com/100px;
  https://www.gxlcms.com/https://www.gxlcms.com/height:https://www.gxlcms.com/ https://www.gxlcms.com/100px;

  https://www.gxlcms.com//* Typography */
  https://www.gxlcms.com/https://www.gxlcms.com/font:https://www.gxlcms.com/ normal https://www.gxlcms.com/13px https://www.gxlcms.com/"Helvetica Neue", sans-serif;
  https://www.gxlcms.com/https://www.gxlcms.com/line-height:https://www.gxlcms.com/ https://www.gxlcms.com/1.5;
  https://www.gxlcms.com/https://www.gxlcms.com/color:https://www.gxlcms.com/ https://www.gxlcms.com/#333;
  https://www.gxlcms.com/https://www.gxlcms.com/text-align:https://www.gxlcms.com/ center;

  https://www.gxlcms.com//* Visual */
  https://www.gxlcms.com/https://www.gxlcms.com/background-color:https://www.gxlcms.com/ https://www.gxlcms.com/#f5f5f5;
  https://www.gxlcms.com/https://www.gxlcms.com/border:https://www.gxlcms.com/ https://www.gxlcms.com/1px solid https://www.gxlcms.com/#e5e5e5;
  https://www.gxlcms.com/https://www.gxlcms.com/border-radius:https://www.gxlcms.com/ https://www.gxlcms.com/3px;

  https://www.gxlcms.com//* Misc */
  https://www.gxlcms.com/https://www.gxlcms.com/opacity:https://www.gxlcms.com/ https://www.gxlcms.com/1;
}

5.2.设置盒子模型 - 是否脱离标准（子絶父相）- 其他属性

注意兼容性写法（纯属个人习惯）

每个范围可由首字母开头为排序：
eg:盒子模型中的第2条中，可由background,border,color等首字母为先排序; 但有些例外，如position肯定排先，后定义left等方向位属性

ps:需要用到媒体查询，将媒体查询放在尽可能相关规则的附近

eg:

.declaration-order {
  display: block;
  https://www.gxlcms.com/float: right;  
  background-color: https://www.gxlcms.com/#f5f5f5;
  border: https://www.gxlcms.com/1px solid https://www.gxlcms.com/#e5e5e5;
  border-radius: https://www.gxlcms.com/3px;
  color: https://www.gxlcms.com/#https://www.gxlcms.com/333;
  font: normal https://www.gxlcms.com/13px https://www.gxlcms.com/"Helvetica Neue", sans-serif;  

  width: https://www.gxlcms.com/100px;
  height: https://www.gxlcms.com/100px;
  text-align: center;
  line-height: https://www.gxlcms.com/100px;

  margin: https://www.gxlcms.com/0 https://www.gxlcms.com/auto;
  padding: https://www.gxlcms.com/10px https://www.gxlcms.com/0;  

  position: absolute;
  top: https://www.gxlcms.com/0;
  right: https://www.gxlcms.com/0;
  bottom: https://www.gxlcms.com/0;
  left: https://www.gxlcms.com/0;
  z-index: https://www.gxlcms.com/100;
  opacity: https://www.gxlcms.com/1;

  transtion: all https://www.gxlcms.com/.5s ease https://www.gxlcms.com/0s;
  animation: name initial https://www.gxlcms.com/2s;
}
@keyframes name{
    https://www.gxlcms.com/0%{}
    https://www.gxlcms.com/100{}
    https://www.gxlcms.com////
    from{}
    to{}
}
@https://www.gxlcms.com/media screen https://www.gxlcms.com/and https://www.gxlcms.com/(min-width) https://www.gxlcms.com/and https://www.gxlcms.com/(max-width){
    and左右之间要留空格
}

5.3.按照首字母排列顺序编写

注意事项：

1. 尽量不使用 !important 声明。

2.媒体查询（Media query）的位置

3.带前缀的属性

4.单行规则声明

5.简写形式的属性声明

https://www.gxlcms.com//* Bad example */
https://www.gxlcms.com/.element https://www.gxlcms.com/{
  https://www.gxlcms.com/https://www.gxlcms.com/margin:https://www.gxlcms.com/ https://www.gxlcms.com/0 https://www.gxlcms.com/0 https://www.gxlcms.com/10px;
  https://www.gxlcms.com/https://www.gxlcms.com/background:https://www.gxlcms.com/ red;
  https://www.gxlcms.com/https://www.gxlcms.com/background:https://www.gxlcms.com/ https://www.gxlcms.com/url(https://www.gxlcms.com/"image.jpg");
  https://www.gxlcms.com/https://www.gxlcms.com/border-radius:https://www.gxlcms.com/ https://www.gxlcms.com/3px https://www.gxlcms.com/3px https://www.gxlcms.com/0 https://www.gxlcms.com/0;
}

https://www.gxlcms.com//* Good example */
https://www.gxlcms.com/.element https://www.gxlcms.com/{
  https://www.gxlcms.com/https://www.gxlcms.com/margin-bottom:https://www.gxlcms.com/ https://www.gxlcms.com/10px;
  https://www.gxlcms.com/https://www.gxlcms.com/background-color:https://www.gxlcms.com/ red;
  https://www.gxlcms.com/https://www.gxlcms.com/background-image:https://www.gxlcms.com/ https://www.gxlcms.com/url(https://www.gxlcms.com/"image.jpg");
  https://www.gxlcms.com/https://www.gxlcms.com/border-top-left-radius:https://www.gxlcms.com/ https://www.gxlcms.com/3px;
  https://www.gxlcms.com/https://www.gxlcms.com/border-top-right-radius:https://www.gxlcms.com/ https://www.gxlcms.com/3px;
}

6.Less 和 Sass 中的嵌套

// Without nesting
.https://www.gxlcms.com/table > thead > tr > th { … }
.https://www.gxlcms.com/table > thead > tr > td { … }

// With nesting
.https://www.gxlcms.com/table > thead > tr {
  > th { … }
  > td { … }
}

了解更多请点击，本文更多参照此文章

常用的命名规则

class的命名

用中划线 ' - '

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：https://www.gxlcms.com/left https://www.gxlcms.com/right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

Id的命名:

用下划线 ' _ '

1)页面结构

容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center

(2)导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

CSS样式表文件命名

主要的 https://www.gxlcms.com/masterhttps://www.gxlcms.com/.css
模块 https://www.gxlcms.com/modulehttps://www.gxlcms.com/.css
基本共用 https://www.gxlcms.com/basehttps://www.gxlcms.com/.css
布局、版面 https://www.gxlcms.com/layouthttps://www.gxlcms.com/.css
主题 https://www.gxlcms.com/themeshttps://www.gxlcms.com/.css
专栏 https://www.gxlcms.com/columnshttps://www.gxlcms.com/.css
文字 https://www.gxlcms.com/fonthttps://www.gxlcms.com/.css
表单 https://www.gxlcms.com/formshttps://www.gxlcms.com/.css
补丁 https://www.gxlcms.com/mendhttps://www.gxlcms.com/.css
打印 https://www.gxlcms.com/printhttps://www.gxlcms.com/.css

文件命名规则

项目命名 全部采用小写方式，以下划线分隔 例：my_project_name 目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。

例：scripts, styles, images, data_models JS文件命名

参照项目命名规则。

例：account_model.js CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.scss HTML文件命名

参照项目命名规则。

例：error_report.html