首页 > 网站 > WEB开发 > 正文

前端规范

2024-04-27 14:28:40
字体:
来源:转载
供稿:网友

前端规范

参考资料:https://github.com/ecomfe/spec(百度)通过分析github代码库总结出来的工程师代码书写习惯NEC更好的解决方案(网易)说明: 红字为重要,黄字为不确定或不会,参1~n为参考的资料链接  本来整理在印象笔记,无序列表在博客园编辑器显示不正常,望谅解 (已修正^_^)  转载请注明出处,建议请留言谢谢。http://www.cnblogs.com/liu-zhen/p/4340190.html系列文章 前端规范1-HTML规范  前端规范2-CSS规范  HTML嵌套规则敬请期待  HTML闭合标签  HTML与CSS属性书写顺序  更好的利用title与alt属性  如何正确的使用HTML标题
总的原则实用高于完美 尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。 重要内容的代码尽量靠前,利于SEO
dome结构
  1. dome
    1. index.html(静态页面)
    2. styles
      1. reset.css
      2. style
    3. scripts
      1. jquery-1.8.2.min.js
      2. script.js
    4. images
      1. 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>
reset.css
 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 /* /通用样式 */
script.js
1 window.onload=function(){2 3 }4 $(function(){5     6 })

文件夹命名方案一(适合一般项目):
  • 项目名
    • index.html(静态页面)
    • styles
      • reset.css
    • scripts
      • jquery.js
    • images
      • bg
        • bg1.png
      • img1.jpg
方案二(适合较小项目):
  • 项目名
    • index.html(静态页面)
    • img
      • reset.css
      • music.mp3
      • jquery.js
    • images
      • bg
        • bg1.png
      • img1.jpg
备:如果由多个单词组成,使用-连接符连接上面bg即为背景图,包括各种logo,按钮背景,CSS Sprite等等
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表