前端规范
参考资料：
说明：
红字为重要，
黄字为不确定或不会，
参1～n为参考的资料链接
本来整理在印象笔记，无序列表在博客园编辑器显示不正常，望谅解 (已修正^_^)
转载请注明出处，建议请留言谢谢。
http://www.cnblogs.com/liu-zhen/p/4340190.html
系列文章
敬请期待
HTML闭合标签
HTML与CSS属性书写顺序
更好的利用title与alt属性
如何正确的使用HTML标题
总的原则
实用高于完美
尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
重要内容的代码尽量靠前，利于SEO
dome结构
- dome
- index.html(静态页面)
- styles
- reset.css
- style
- scripts
- jquery-1.8.2.min.js
- script.js
- images
- bg
DOME（百度云下载：http://pan.baidu.com/s/1hqAaST2）
index.html
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>标题</title> 6 <meta name="keywords" content=""/> 7 <meta name="description" content=""/> 8 9 <link rel="stylesheet" href="styles/reset.css"/> 10 <link rel="shortcut icon" href="images/bg/favicon.ico"/> 11 12 <link rel="stylesheet" href="style/style.css"> 13 <script src="./scripts/jquery-1.8.2.min.js"></script> 14 <script src="./scripts/script.js"></script> 15 </head> 16 <body> 17 18 </body> 19 </html>
1 /* reset */ 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 3 header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} 4 table{border-collapse:collapse;border-spacing:0;} 5 caption,th{text-align:left;font-weight:normal;} 6 html,body,fieldset,img,iframe,abbr{border:0;} 7 i,cite,em,var,address,dfn{font-style:normal;} 8 [hidefocus],summary{outline:0;} 9 li{list-style:none;} 10 h1,h2,h3,h4,h5,h6,small{font-size:100%;} 11 sup,sub{font-size:83%;} 12 pre,code,kbd,samp{font-family:inherit;} 13 q:before,q:after{content:none;} 14 textarea{overflow:auto;resize:none;} 15 label,summary{cursor:default;} 16 a,button{cursor:pointer;} 17 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} 18 del,ins,u,s,a,a:hover{text-decoration:none;} 19 body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} 20 body{background:#fff;} 21 /*a,a:hover{color:#333;}*/ 22 /* /reset */ 23 24 /* 通用样式 */ 25 26 /* /通用样式 */
1 window.onload=function(){ 2 3 } 4 $(function(){ 5 6 })
文件夹命名
方案一（适合一般项目）：
- 项目名
- index.html(静态页面)
- styles
- reset.css
- scripts
- jquery.js
- images
- bg
- bg1.png
- img1.jpg
- bg
方案二（适合较小项目）：
- 项目名
- index.html(静态页面)
- img
- reset.css
- music.mp3
- jquery.js
- images
- bg
- bg1.png
- img1.jpg
- bg
备：如果由多个单词组成，使用-连接符连接
上面bg即为背景图，包括各种logo，按钮背景，CSS Sprite等等