项目规范

最新推荐文章于 2023-02-25 13:39:24 发布

star3175

最新推荐文章于 2023-02-25 13:39:24 发布

阅读量100

点赞数

分类专栏： web基础文章标签： html javascript 前端

本文链接：https://blog.csdn.net/star3175/article/details/127565741

版权

web基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目规范

1、项目文件夹

根据项目名称创建项目文件夹。如：ushop
html、css、img、js 文件均归档至项目名称目录中
HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html
css 文件以英文命名
- 公用样式通常命名为reset.css（常用的浏览器样式）
- public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式）
- 首页通常命名为index.css, 其他页面依实际模块或功能需求命名
图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名
- （如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）
- 常用图片格式 gif 、png 、jpg

目录结构参考

---/html/
|---- /user/                    与用户相关的页面  
|---- /user/login.html          登录页
---/css/
|---- /reset.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                 公用图片

2、HTML 书写规范

2.1 文档类型声明及编码

统一为 html5 声明类型
编码统一为 utf-8

2.2 书写规范

书写时根据页面结构实现层次分明的缩进
标签必合
属性值必须用双引号包括
通常小写字母

2.3 语义化 HTML

根据页面结构选择合适的标签
- 如标题根据重要性用 h1-h6不同等级的标签标记、段落标记用p，结构简章重复的部分用 ul、li标签
- 页面中重要的图片内容要添加 alt=“”替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容
根据模块内容定义class和id名称
- 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright

2.4 合理嵌套HTML标签

合理嵌套HTML标签，
- ul和li是固定嵌套，ul直接子元素必须是li;
- dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;
- p标签不允许嵌套p标签;a标签不允许嵌套
- a标签和其他交互性元素比如button
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

2.5 保证结构与表现相分离

CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
在页面中尽量避免使用行内样式即 style=“”或行间属性，尽量使用 class 或者 id

3、css 书写规范

3.1 编码

编码统一为 utf-8

3.2 书写代码前

确定版心（页面有效区）
考虑样式表规划，提高样式重复使用率
提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局
布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类（如鼠标点击后的样式等）

3.3 书写代码时

添加注释：应该为大区块样式添加注释，小区块适量注释
class 与 id 的命名
- 命名要语义化、简明化
- CSS命名时要加前缀如：.zg_top{}
- 常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、top_nav;
- 避免使用中文拼音，尽量使用简易的单词组合
- 常用命名方法二：首字母大写，驼峰式命名，如：topNav
代码格式
保持代码缩进与格式
建议单行书写
选择器

尽可能不使用通配符选择器 *
合理使用id选择器（页面中唯一的元素，如头部，底部）
避免使用标签限定id或者类选择器
- 如：div#test { } p.box {}
避免层集嵌套

3.4 css 属性书写顺序

建议遵循：
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
1. 文档流相关属性（display、 position、float、clear、 visibility）
2. 盒模型相关属性（width、 height、margin、padding、border）
3. 装饰性相关属性（background、opacity、cursor）
4. 内容排版相关属性（color、font、line-height、text-align、text-indent、vertical-align）
书写代码过程中要兼容兼容问题，对熟知的兼容问题在书写代码过程中一并处理。

3.5 类名命名参考

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 下载