Download presentation
Presentation is loading. Please wait.
2
标准规范 2.自己偏好习惯 3.讨论／建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码，所有代码都应该看上去像是一个人编写的一样。
3
HTML的规范
4
2、在属性上，使用双引号，不要使用单引号。
1、嵌套的节点应该缩进（两个空格）。 2、在属性上，使用双引号，不要使用单引号。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>
5
3、Language attribute【语言属性】
根据 HTML5 规范： 鼓励网站作者在 html 元素上指定 lang 属性，来指出页面的语言。这样做会有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。 <html lang="en-us"> <! > </html>
6
4、引入 CSS 和 JavaScript 根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。 <!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- JavaScript --> <script src="code-guide.js"></script>
7
5、属性顺序 HTML 属性应该按照特定的顺序出现以保证易读性。 class id, name data-*
src, for, type, href title, alt aria-*, role Classes 是为高可复用组件设计的，所以他们处在第一位。Ids 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。 <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
8
6、减少标签数量 避免多余的父节点 / 属性能简写就简写 <input type="text" disabled>
<input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select> <!-- Not so great --> <span class="avatar"><img src="..."></span> <!-- Better --> <img class="avatar" src="...">
9
CSS的规范
10
1、CSS基本格式[语法] 空格 [4点] 换行 [3点] 引号 冒号 小数点 0单位 大小写（color） .selector,
空格 [4点] 换行 [3点] 引号 冒号 小数点 单位 大小写（color） .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin: px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
![1、CSS基本格式[语法] 空格 [4点] 换行 [3点] 引号 冒号 小数点 0单位 大小写（color） .selector,](http://slidesplayer.com/slide/14286488/89/images/10/1%E3%80%81CSS%E5%9F%BA%E6%9C%AC%E6%A0%BC%E5%BC%8F%5B%E8%AF%AD%E6%B3%95%5D+%E7%A9%BA%E6%A0%BC+%5B4%E7%82%B9%5D+%E6%8D%A2%E8%A1%8C+%5B3%E7%82%B9%5D+%E5%BC%95%E5%8F%B7+%E5%86%92%E5%8F%B7+%E5%B0%8F%E6%95%B0%E7%82%B9+0%E5%8D%95%E4%BD%8D+%E5%A4%A7%E5%B0%8F%E5%86%99%EF%BC%88color%EF%BC%89+.selector%2C.jpg "空格 [4点] 换行 [3点] 引号 冒号. 小数点 0单位 大小写（color） .selector, .selector-secondary, .selector[type= text ] { padding: 15px; margin: px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }")
11
2、CSS属性声明顺序 1、Positioning 定位 2、Box model 盒模型 3、Typographic 排版
4、Visual 外观
12
1 2 3 4 5 /* Positioning 定位 */ position: absolute; top: 0; right: 0;
bottom: 0; left: 0; z-index: 100; /* Box-model 盒模型 */ display: block; float: right; width: 100px; height: 100px; 1 1 2 /* Typography 排版 */ font: normal 13px "宋体"; line-height: 1.5; color: #333; text-align: center; /* Visual 外观 */ background: #ccc; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc 杂项*/ opacity: 1; 3 4 5
13
3、媒体查询位置[尽量将媒体查询的位置靠近他们相关的规则]
.element { ...} .element-avatar { ... } @media (min-width: 480px) { } 与 <link> 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。 5、前缀属性（对齐方式） /* Prefixed properties */ .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
![3、媒体查询位置[尽量将媒体查询的位置靠近他们相关的规则]](http://slidesplayer.com/slide/14286488/89/images/13/3%E3%80%81%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E4%BD%8D%E7%BD%AE%5B%E5%B0%BD%E9%87%8F%E5%B0%86%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E7%9A%84%E4%BD%8D%E7%BD%AE%E9%9D%A0%E8%BF%91%E4%BB%96%E4%BB%AC%E7%9B%B8%E5%85%B3%E7%9A%84%E8%A7%84%E5%88%99%5D.jpg ".element { ...} .element-avatar { ... (min-width: 480px) { } 与 <link> 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。 5、前缀属性（对齐方式） /* Prefixed properties */ .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }")
14
6、Class 命名规范 1、命名为全小写 2、可以使用短划线（不要使用下划线） 3、命名时使用最近的父节点或者父 class 作为前缀
4、尽量使用英文命名原则 5、尽量不缩写，除非一看就明白的单词
15
相对网页外层重要部分CSS样式命名 外套 wrap ------------------用于最外层
头部 header 用于头部 主要内容 main 用于主体内容（中部） 左侧 main-left 左侧布局 右侧 main-right 右侧布局 导航条 nav 网页菜单导航条 内容 content 用于网页中部主体 底部 footer 用于底部 mainL,mainR,menu,bottom,top
16
DIV+CSS命名参考表
17
实用高于完美 尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
太很喜欢简化，简化，简化 结果就是给程序员会看不懂了。 然后增加自己的工作量（有任何问题，样式都要我这调整。）
18
按钮 btnGreen btnGreenB btnGreenS btnSearch btnSure 背景颜色 .bgWhite .bgRed .bgGray 边框颜色 .borderWhite .borderRed .borderGray 字体色 .red .green .yellow .... 标题 titleRed titleGray titleGrayB titleGrayS newsTT newsTT_gray 位置： .fleft {float:left;} .fright {float:right;} /** 间距 + 对齐 **/ .mt5 {margin-top:5px;} .mt10 {margin-top:10px;} .mb10 {margin-bottom:10px;} .textL {text-align:left;} .textR {text-align:right;} .textC {text-align:center;} 命名 .leftNews .indexNews 框架： row mainL mainR
19
END 1、为简化而简化，少，少，少 2、class命名，特别些组合class。再学
Similar presentations
