zoukankan      html  css  js  c++  java

  • 前端规范

    参考资料：
    说明：
         红字为重要，黄字为不确定或不会，参1～n为参考的资料链接
    　　本来整理在印象笔记，无序列表在博客园编辑器显示不正常，望谅解 (已修正^_^)
    　　转载请注明出处，建议请留言谢谢。http://www.cnblogs.com/liu-zhen/p/4340190.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,5b8b4f53;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等等
     
    欢迎各位批评指正，您的建议是我不竭的动力。
  • 相关阅读:
    大数据
    优化
    gnu
    sed
    hadoop部署
    安装 zookeeper
    ansible
    ssh 配置无密码登录
    未完待续
    解正向代理、反向代理、透明代理
  • 原文地址：https://www.cnblogs.com/liu-zhen/p/4340190.html
Copyright © 2011-2022 走看看