Web开发规范

Web开发规范

目录规范

项目目录结构常见如下：

├── images/                        # 图片目录
│      ├── demo/                   # 测试用图片
│      ├── logo.png                # 网站logo
│      └── ....                    # 其他图片
├── css/                           # 样式目录
│      ├── u-reset.css             # 重置样式
│      ├── common.css              # 公共样式
│      ├── font.css                # 字体样式
│      ├── index.css               # 首页样式
│      ├── login.css               # 登录样式
│      └── ....css                 # 其他样式
│
├── js/                            # JavaScript目录
│      ├── jquery.js               # 库文件
│      ├── index.js                # 首页js文件
│      ├── login.js                # 登录页js
│      ├── regsiter.js             # 注册页js
│      ├── category.js             # 栏目页js
│      └── .....js                 # 其他js
│
├── font/                          # 字体目录
│      ├── font.ttf
│      ├── font.svg
│      └── font....
│
├── index.html                      # 首页
├── login.html                      # 登录页
├── regsiter.html                   # 注册页
├── category.html                   # 栏目页
├── list.html                       # 列表页
├── show.html                       # 详情页
└── README.md

 

文件及文件夹命名规范

文件名称统一用英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符

命名规范思想

  1. 使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，
  2. 当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作

HTML命名规范

  1. 引文件统一使用 index.htm index.html index.asp 文件名（小写）
  2. 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如： 
    关于我们  aboutus    
信息反馈  feedback       
产 品  product
    如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质

  • 放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
  • 标志性的图片取名为： logo
  • 在页面上位置不固定并且带有链接的小图片我们取名为 button
  • 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
  • 装饰用的照片我们取名： pic
  • 不带链接表示标题的图片我们取名： title
比如：banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif
logo_police.gif  logo_national.gif  pic_people.jpg

 

代码规范

HTML编码规范

head区是指 html 代码的<head>和</head>之间的内容。

必须加入的标签

<head>
    <meta charset=utf-8">   <!-- 网页显示字符集 -->
    <title> xxx </title>    <!-- 网页标题 -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta content="webkit" name="renderer" />
    <meta name="keywords" content="xxx,xxx,xxx,...">    <!-- 关键字 -->
    <meta name="description" content="xxxxxxxxxxxxxxxxxxxxxxxxxx"> <!-- 网页描述 -->
</head>

可以选择加入的标签

标签描述
<meta http-equiv="window-target" content="_top"> 用来防止别人在框架里调用你的页面。
<meta name="robots" content="none"> 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。
<link rel="shortcut icon" href="favicon.ico"> 站标、收藏夹图标
<script src="script/xxxxx.js"></script> 所有的 javascript 的调用尽量采取外部调用

 

CSS编码规范

名称版本描述下载大小压缩大小
u-reset.css u-reset.css-status 一个简洁的重置样式库 点击下载 u-reset.css-size npm-minsize
  1. 引入重置样式文件(推荐使用u-reset.css),保证浏览器默认样式一致性
  2. 使用外部引入样式文件，并且在head中引入样式文件
  3. 协同开发请统一命名规范，如：命名采用中划线、下划线，采用BEM风格 （block element modifier）
  4. 协同开发避免重名，规避 class 与 id 命名:重复使用率高的命名, 请以自己代号加下划线起始, 比如 bao_clear、jwh_logo_box
  5. 为css文件及模块添加注释说明
  6. css 属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. (尽量保证同类属性写在一起.)

    属性列举: 布局定位属性主要包括: margin、padding、float（包括clear）、position（相应的top,right,bottom,left）、display、visibility、overflow 等；自身属性主要包括: width& height & background & border; 文本属性主要包括：font、color、text-align、text-decoration、text-indent等；其他属性包括: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom 等.所列出的这些属性只是最常用到的.

  7. 书写样式代码前, 考虑并提高样式复用率;
  8. 充分利用 html 自身属性及样式继承原理减少代码量
  9. 背景图片请尽可能使用 sprite 技术, 减小 http 请求, 考虑到多人协作开发, sprite 按模块制作;

常用类名和id的命名

命名部分命名命名部分命名
头 header 内容 content/container
尾 footer 导航 nav
侧栏 sidebar 栏目 column
页面外围控制整体布局宽度 wrapper 左右中 left right center
登陆条 loginbar 标志 logo
广告 banner 页面主体 main
热点 hot 新闻 news
下载 download 子导航 subnav
菜单 menu 子菜单 submenu
搜索 search 友情链接 friendlink
页脚 footer 版权 copyright
滚动 scroll 内容 content
标签页 tab 文章列表 list
提示信息 msg 小技巧 tips
栏目标题 title 加入 joinus
指南 guild 服务 service
注册 regsiter 状态 status
投票 vote 合作伙伴 partner

字体使用规范

通用字体设置

对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。

中文字体/英文字体/数字 进行统一

body{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

PC端字体要求：

  • Windows 使用 微软雅黑 字体
  • Mac 使用苹方 字体

移动端字体要求

  • iOS 9 中文字体是"苹方"、英文字体是Helvetica
  • DroidSansFallback 字体是 Google 为手机"Android"内建的系统字体，支持繁体中文、简体中文、韩文、日文。英文和数字字体是Droid Sans
  • 如无特殊需求，手机端无需定义中文字体，使用系统默认
  • 英文字体和数字字体可使用 Helvetica ，三种系统都支持

图片规范

  1. 所有页面元素类图片均放入 img 文件夹, 测试用图片放于 img/demo 文件夹;
  2. 命名全部用英文字母、数字、_ 的组合，其中不得包含汉字、空格、特殊字符，尽量用易懂的词汇, 便于团队其他成员理解，命名分头尾两部分, 用下划线隔开, 比如 ad_left01.gif、btn_submit.gif;
  3. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间,使用的图片一定要经过压缩处理;
  4. 尽量避免使用半透明的 png 图片(若使用, 请参考 css 规范相关说明);
  5. 运用 css sprite 技术集中小的背景图或图标, 减小页面 http 请求, 但注意, 请务必在对应的 sprite psd 源图中划参考线, 并保存至 img 目录下.

注释规范 （给一部分内容做注释处理的时候，开始和结束都要有）

  1. html 注释: 注释格式 <!--这儿是注释-->;
  2. css 注释: 注释格式 /*这儿是注释*/;
    • 文件头部需要写清楚文件的用途、作者、创建日期、版本（可选）
  3. 注释需要表述清楚，表明代码块的总用区域、功能。

HTML注释示例

index.html
<!-- #轮播图模块开始 -->
...
<!-- #轮播图模块结束 -->

<!-- #最新推荐模块开始 -->
...
<!-- #最新推荐模块结束 -->

CSS注释示例

index.css
/*
    开发者：张三
    时间：2019-7-29
    描述：网站首页样式
*/

/* 轮播图模块开始 */
...
/* 轮播图模块结束 */

/* 最新推荐模块开始 */
...
/* 最新推荐块结束 */
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/janewh/p/13896625.html