|-- 项目名|-- src    开发环境|-- html    静态页面模板目录|-- bgimg   背景图目录（假设有的话）|-- image   前景图目录（假设有的话）|-- font    字体目录（假设有的话）|-- scripts      脚本目录|-- styles（Yo）  样式目录|-- lib   基础库|-- core      核心代码：reset|-- element   元素|-- fragment  公用碎片|-- layout    布局|-- widget    组件|-- usage  项目具体实现|-- project 某个子项目|-- core      核心代码：桥接lib中的core，可以进行项目级扩展|-- fragment  项目公用碎片|-- module    模块|-- page      page桥接文件目录：src-list|-- export    page pack之后的文件目录|-- prd    生产环境|-- bgimg   背景图目录（假设有的话）|-- image   前景图目录（假设有的话）|-- font    字体目录（假设有的话）|-- scripts      脚本目录|-- styles（Yo）  样式目录|-- project1 子项目|-- index.css|-- login.css|-- and etc...|-- project2 子项目|-- index.css|-- login.css|-- and etc...|-- and etc...

src, scripts, styles 三个目录是为了和现有项目保持一致，避免修改过大，所以保持不变。
html 目录，用于存放前端开发做的静态页面，以备查阅、备份、review或给后端套页面。
bgimg, image, font 三个目录在Qunar一般不会直接存在，因为我们有source服务器，这些资源都会在那上面管理；不过特殊情况也会有，比如一些独立的项目，没有使用source的，那么就需要遵循这样的目录划分。
至于 html, bgimg, image, font 这几个目录为什么没有加 s，主要是因为不希望大家去想某个目录是否为复数，简单点就好。
prd 为生产环境目录，以 xxx 项目中的一个子项目 mobile 为例，其生产环境中的某个CSS外链大致如下：//sitename.com/prd/styles/mobile/index.css

.m-detail { sRules; }
.m-detail-hd { sRules; }
.m-detail-bd { sRules; }
.m-detail-ft { sRules; }

+<section class="m-list">
+<section class="m-info">

<!-- TODO: 图文混排 -->
<div class="g-imgtext">
<img src="1.png" alt="" />
.../* TODO: 图文混排 comm: g-imgtext */
.g-imgtext { sRules; }

<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);
}

<link type="text/css" rel="stylesheet" href="base.css" />
<script type="text/javascript" src="base.js"></script>

<link rel="stylesheet" href="base.css" />
<script src="base.js"></script>
因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript

<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />

<input type="text" readonly />
<input type="text" disabled />
这里的 readonly 和 disabled 属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如: required

<a href=http://www.qunar.com class="home">去哪儿网</a>

<a href="http://www.qunar.com" class="home">去哪儿网</a>

<span><dfn>交叉嵌套</span></dfn>

<span><dfn>交叉嵌套</dfn></span>
不允许非法的子元素嵌套。

<ul><h3>xx列表</h3><li>asdasdsdasd</li><li>asdasdsdasd</li>
</ul>

<div><h3>xx列表</h3><ul><li>asdasdsdasd</li><li>asdasdsdasd</li></ul>
</div>不推荐inline元素包含block元素；

<span><h1>这是一个块级h1元素</h1><p>这是一个块级p元素</p>
</span>

<div><h1>这是一个块级h1元素</h1><p>这是一个块级p元素</p>
</div>

<div>balabala...
<link rel="stylesheet" href="*.css">

<div>balabala...</div>
<link rel="stylesheet" href="*.css" />
虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间

<img src="banner.jpg" />

<img src="banner.jpg" alt="520即将到来，爱就大声说出来" />
alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍。对于纯粹的装饰性图片，alt属性值可以留空，如 alt=""

<input type="radio" name="color" value="0" /><label>蓝色</label>
<input type="radio" name="color" value="1" /><label>粉色</label>

<input type="radio" id="blue" name="color" value="0" /><label for="blue">蓝色</label>
<input type="radio" id="pink" name="color" value="1" /><label for="pink">粉色</label>
for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域

<!-- 新闻列表模块 -->
<div class="m-news g-mod"
...
<!-- /新闻列表模块 --><!-- 排行榜模块 -->
<div class="m-topic g-mod"
...
<!-- /排行榜模块 -->
注释内容左右两边保留和注释符号有1个空格位，在注释内容内不允许再出现中划线“-”，某些浏览器会报错。注释风格保持与原生HTML的语法相似：成对出现 <!-- comment --><!-- /comment -->

<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div>

<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p>
</div>

<p>标题</p>

<h1>标题</h1>

<section class="m-detail"><header class="m-detail-hd"><h1 class="title">模块标题</h1></header><div class="m-detail-bd"><p class="info">一些实际内容</p></div><footer class="m-detail-ft"><a href="#" class="more">更多</a></footer>
</section>

.xiangqing { sRules; }
.news_list { sRules; }
.zhuti { sRules; }

.detail { sRules; }
.news-list { sRules; }
.topic { sRules; }

left, right, center, red, black

nav, aside, news, type, search

navigation => navi
header => head
description => des

navigation => nav
header => hd
description => desc

.info { sRules; }
.current { sRules; }
.news { sRules; }

.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }

main{
display:inline-block;
}
h1,h2,h3{
margin:0;
background-color:rgba(0,0,0,.5);
}

main {display: inline-block;
}
h1,h2,h3 {margin: 0;background-color: rgba(0, 0, 0, .5);
}

body {margin: 0;padding: 0;font-size: 14px
}

body {margin: 0;padding: 0;font-size: 14px;
}

body {margin: 0px;padding: 0px;
}

body {margin: 0;padding: 0;
}

body {opacity: 0.6;text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

body {opacity: .6;text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

body {
background-image: url("sprites.png");
}
@import url("global.css");

body {background-image: url(sprites.png);
}
@import url(global.css);

body {background-color: #FF0000;
}

body {background-color: #f00;
}

.g-box {display: block;float: left;width: 500px;height: 200px;margin: 10px;padding: 10px;border: 10px solid;background: #aaa;color: #000;font: 14px/1.5 sans-serif;
}

.g-box {display: block;position: relative;z-index: 2;top: 10px;left: 100px;float: left;width: 500px;height: 200px;margin: 10px;padding: 10px;border: 10px solid;background: #aaa;color: #000;font: 14px/1.5 sans-serif;
}

.g-box {-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-o-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

/* 普通注释 */

/**
* 模块: m-detail
* 描述：酒店详情模块
* 应用：page detail, info and etc...etc
*/

.test {color: #000; /* For all */color: #111\9; /* For all IE */color: #222\0; /* For IE8 and later, Opera without Webkit */color: #333\9\0; /* For IE8 and later */color: #444\0/; /* For IE8 and later */*color: #666; /* For IE7 and earlier */_color: #777; /* For IE6 and earlier */
}

<!--[if <keywords>? IE <version>?]>
<link rel="stylesheet" href="*.css" />
<![endif]-->

<keywords>
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!

<version>
目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性

div#doc { sRules; }
li.first { sRules; }

#doc { sRules; }
.first { sRules; }

#xxx #yyy { sRules; }

#yyy { sRules; }

body {margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;
}

body {margin: 10px;
}

.m-detail {font: bold 12px/1.5 arial, sans-serif;
}
.m-detail .info {font: normal 14px/1.5 arial, sans-serif;
}

.m-detail .info {font: 14px sans;
}

.m-detail {font: bold 12px/1.5 arial, sans-serif;
}
.m-detail .info {font-weight: normal;font-size: 14px;
}

.m-detail {border-width: 1px;border-style: solid;border-color: #000 #000 #f00;
}

.m-detail {border: 1px solid #000;border-bottom-color: #f00;
}

.m-detail {background: #fff;color: #333;&-hd {padding: 5px 10px;background: #eee;.title {background: #eee;}}&-bd {padding: 10px;.info {font-size: 14px;text-indent: 2em;}}&-ft {text-align: center;.more {color: blue;}}
}

.m-detail {background: #fff;color: #333;
}
.m-detail-hd {padding: 5px 10px;background: #eee;
}
.m-detail-hd .title {background: #eee;
}
.m-detail-bd {padding: 10px;
}
.m-detail-bd .info {font-size: 14px;text-indent: 2em;
}
.m-detail-ft {text-align: center;
}
.m-detail-ft .more {color: blue;
}

所有图片必须经过一定的压缩和优化才能发布

使用PNG格式而不是GIF格式，因为PNG格式色彩更丰富，还能提供更好的压缩比；
在需要兼容IE6的项目中，尽可能选择PNG8，而不是使用PNG24+滤镜。

内容图片建议使用JPG，可以拥有更好地显示效果；
装饰性图片使用PNG。

CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取；
CSS Sprite可以减少http请求。