一：HTML规范
1.HTML标签名、类名、标签属性和大部分属性值统一用小写，基本所有的HTML代码使用小写。
2.不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。 例如<link rel="stylesheet" href="" >
3.元素属性值使用双引号语法，元素属性值可以写上的都写上。 例如：<input type="radio" name="name" checked="checked" >
4.元素嵌套规范，每个块状元素独立一行，内联元素可选。
---/html/ |
| |---- /index |
| |---- /index/index.html 首页 |
| |---- /user/ 与用户相关的页面 |
| |---- /user/login.html 登录页 |
---/css/ |
| |---- /base.css 重置浏览器样式 |
| |---- /page 逻辑页面的css |
| |---- /page/pagename.css 单独书写的css |
| |---- /common.css css通用样式库 |
---/js/ |
| |---- /lib 公用组件 |
| |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |
| |---- /page 逻辑页面的js |
| |---- /page/pagename.js 单独书写的js |
| |---- /common.js 公用方法 |
---/img/ |
| |---- /page 页面对应的图片 |
| |---- /page/wap 手机端图片夹 |
| |---- /page/wap/wap_icon.png 手机端图标 |
| |---- /logo.png 公用图片 |
二、格式&编码
文本文件： `.xxx` UTF-8_\(无BOM\)_ 编码
图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
动态图片： `.gif`
压缩文件： `.tar.gz` `.zip``.rar`
三、图片规范
1.内容图：
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
2.背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
-
PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
-
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
-
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
-
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
四、常用命名推荐
| CSS样式命名 | |
|---|---|
| 网页公共命名 | |
| wrapper | 页面外围控制整体布局宽度 |
| container或content | 容器,用于最外层 |
| layout | 布局 |
| head, header | 页头部分 |
| foot, footer | 页脚部分 |
| nav | 主导航 |
| sub_nav | 二级导航 |
| menu | 菜单 |
| sub_menu | 子菜单 |
| side_bar | 侧栏 |
| sidebar_l, sidebar_r | 左边栏或右边栏 |
| main | 页面主体 |
| tag | 标签 |
| msg message | 提示信息 |
| tips | 小技巧 |
| Vote | 投票 |
| friendlink | 友情链接 |
| title | 标题 |
| summary | 摘要 |
| login_bar | 登录条 |
| search_input | 搜索输入框 |
| hot | 热门热点 |
| search | 搜索 |
| search_output | 搜索输出和搜索结果相似 |
| search_bar | 搜索条 |
| search_results | 搜索结果 |
| copyright | 版权信息 |
| branding | 商标 |
| logo | 网站logo标志 |
| site_info | 网站信息 |
| site_info_legal | 法律声明 |
| site_info_credits | 信誉 |
| join_us | 加入我们 |
| partner | 合作伙伴 |
| service | 服务 |
| regsiter | 注册 |
| arr arrow | 箭头 |
| guild | 指南 |
| site_map | 网站地图 |
| list | 列表 |
| home_page | 首页 |
| sub_page | 二级页面子页面 |
| tool, toolbar | 工具条 |
| drop | 下拉 |
| dorp_menu | 下拉菜单 |
| status | 状态 |
| scroll | 滚动 |
| tab | 标签页 |
| left right center | 居左、中、右 |
| news | 新闻 |
| download | 下载 |
| banner | 广告条(顶部广告条) |
五、js 规范
命名方法：小驼峰式命名
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。
示例
原文地址：https://www.jb51.cc/wenti/3282290.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
