`
黄继华
  • 浏览: 43119 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

WEB前端开发规范

 
阅读更多


规范目的

  为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则

  符合web标准, 语义化html, 结构、表现、行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

  1. html, css, js, image文件均归档至约定的目录中;

  2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css,其它根据模块或页面内容命名

4. Js文件命名: 英文命名, 后缀.js. 共用common.js,其他依实际模块需求命名.

html书写规范

  1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; mate属性统一为<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">,编码统一为utf-8,书写时利用IDE实现层次分明的缩进,比如dreamweave里代码格式化命令, 代码缩进使用TAB键,尽量别使用空格

  2. css和js文件外链至<head>...</head>之间, css文件要放在js文件上面, js可根据需求放在尾部

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明(html5下的规则), 写法如下:

<linkrel=”stylesheet” href=”…” />

<style>…</style>

<scriptsrc=”…”></script>

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签和属性都用小写字母, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括; 如,height=80,应该写为height=”80”

6. <body>内的模块要加上注释,比如<!—content--><!—leftsidebar-->等

7.注释规范. html注释使用<!--这里是内容(这里面不允许再出现”-”)-->

8.语义化html, 如 标题根据重要性用h系列标题标签, h1-h6的定义应遵循从大到小的原则, 体现文档结构的同时也有利于搜索引擎的查询 (同一页面只能有一个h1,LOGO是一个站点的标志,页面中最重要的地方,所以把它分配给LOGO) , h标签不可段层; 段落标记用p, 列表用ul,ol等,内联元素中不可嵌套块级元素;

遵循表现和结构相分离的原则,代码中不涉及任何表现元素, 如<center><font>标签等

9.能以背景形式呈现的图片, 尽量写入css样式中; 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title

10. 尽可能减少div嵌套, 原则上div嵌套不超出两层, 如

<div class=“box”>

<div class=“welcome”>欢迎访问XXX,您的用户名是

<div class=“name”>用户名</div>

</div>

</div>

完全可以用以下代码替代:

<div class=“box”>

<p>欢迎访问XXX,您的用户名是<span>用户名</span></p>

</div>

11. 特殊符号应使用转意符,比如 <(&lt;) & >(&gt;)& 空格(&nbsp;)等;

12. 必须为含有描述性表单元素(input,textarea)添加label,如

<p>姓名: <inputtype=”text” id=”name” name=”name” /></p>

须写成:

<p><label for=”name”>姓名:</label><input type=”text” id=”name” /></p>

13.关注标签语义化

css编码规范

1. 基本书写规范:

1)编码统一为utf-8

2) 尽量不缩写, 除非一眼就能看明白的单词

3) 用英文和下划线组合命名类/ID, 不允许用拼音和数字; 命名时应根据模块内容命名

4) css全部采用小写,每项定义写成一行, 属性的冒号后面要加空格, 每项定义后面要加分号; 如.box{Width: 150px;}

5) 所有装饰性的背景图片都要写css中, 背景图片使用csssprite

6) 减少使用影响性能的属性, 比如position:absolute || float ; 不允许在css中使用滤镜表达式, 也尽量少用图片repeat,尤其在body当中,渲染性能极差, 如果需要用repeat的话, 图片的宽或高不能少于8px

7) 请注意采用css缩写, 简少代码大小, 提高下载速度, 同时使代码简洁可读. 如

.box{

border-color: #fff;

border-width: 1px;

border-style: solid;

}

可以写为一句:

.box{ Border: 1pxsolid #fff}

8) 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等. 以上所列出的这些属性只是最常用到的, 并不代表全部

9) 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”>

<li>这儿是标题列表<span>2010-09-15</span></li>

</ul>

css定义

ul.list li{position: relative;}

ul.list li span{position: absolute;right: 0}

10) 必须为大区块样式添加注释, 小区块适量注释; 注释使用 /*注释内容*/

11)书写代码前,考虑并提高样式重复使用率, 减少代码

2.命名规则

命名应以体现结构或内容为原则.命名以小写英文字母和下划线组合,避免使用数字,要以字母开头. 以下列出常见的基本命名,这个可以根据个人习惯,但是请保证命名符合内容

页面布局:

-页面头部:header

-图标:logo

-右上快捷区域:quick_links

-页面中部:main

-侧栏:side

-主栏:content

-区块:section

-区块顶部:box_top

-区块中部:container

-区块底部:box_bottom

-页面底部:foot

-版权说明:copyright

常用布局:

-列表布局:list

-标签切换:tab

-排行榜:billboard

-表单:post form

-纯文字区域:text area

-翻页:page navigation

通用模块:

-导航栏:navigation

-登陆框:login box

-搜索框:search box

通用样式:

-高亮:highlight

-激活:active,或者on

-清除浮动:fix,或者clear

-图:pic

-文:txt

图片规范

1. 图片格式仅限于gif||png||jpg

背景图尽量使用png-8的格式(IE6下支持其图片透明度), 对于图片质量要求高的背景图片,使用png-24(IE6下不支持其透明度). 基本原则就是在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

2. 图片命名根据图片用途使用小写字母和下划线组合,如send_btn.png等,方便其它成员理解.

3. 运用css sprite技术集中小的背景图或图标,减小页面http请求

分享到:
评论

相关推荐

    setuptools-41.0.0-py2.py3-none-any.whl

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    Google Cloud Storage(使用gsutil下载)

    Google Cloud CLI安装包GoogleCloudSDKInstaller.exe

    setuptools-18.3.zip

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    罗兰贝格_xx业务计划与控制体系最终报告gltp.pptx

    罗兰贝格_xx业务计划与控制体系最终报告gltp.pptx

    基于JSP医院在线挂号管理系统源码.zip

    这个是一个JSP医院在线挂号管理系统,管理员角色包含以下功能:管理员登录,医生用户管理,修改密码,科室类别信息管理,医生信息管理,添加医生信息,查询医生信息,注册用户管理,黑名单管理,预约信息管理,查询预约信息,医生预约查询,预约信息统计,科室汇总统计等功能。患者角色包含以下功能:查看首页,患者登录,修改密码,修改个人资料,查看预约信息,查看医生信息,查看科室分类,医生查询,预约医生等功能。… 本项目实现的最终作用是基于JSP医院在线挂号管理系统 分为4个角色 第1个角色为管理员角色,实现了如下功能: - 修改密码 - 医生信息管理 - 医生用户管理 - 医生预约查询 - 查询医生信息 - 查询预约信息 - 注册用户管理 - 添加医生信息 - 科室汇总统计 - 科室类别信息管理 - 管理员登录 - 预约信息管理 - 预约信息统计 - 黑名单管理

    麦肯锡-年月―中国xx集团战略咨询项目建议书gltp.pptx

    麦肯锡-年月―中国xx集团战略咨询项目建议书gltp.pptx

    公开整理-各省碳排放数据集(1990-2022年).xlsx

    详细介绍及样例数据:https://blog.csdn.net/li514006030/article/details/138872006

    Screenshot_2024-05-14-22-47-39-925_com.alibaba.android.rimet.hznu.jpg

    Screenshot_2024-05-14-22-47-39-925_com.alibaba.android.rimet.hznu.jpg

    基于Python+Flask弹幕情感分析的直播高光时刻判断模型设计与系统实现+系统功能说明+全部资料齐全+部署文档.zip

    【资源说明】 基于Python+Flask弹幕情感分析的直播高光时刻判断模型设计与系统实现+系统功能说明+全部资料齐全+部署文档.zip基于Python+Flask弹幕情感分析的直播高光时刻判断模型设计与系统实现+系统功能说明+全部资料齐全+部署文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    Vue开发基于Vue + Node的外卖系统设计与实现【源码+lw+部署文档+讲解】

    内容概要:这个项目是基于Vue.js和Node.js的外卖系统的设计与实现,旨在帮助开发者通过实践掌握Vue.js和Node.js的应用,并了解外卖系统的开发流程和技术选型。该系统旨在提供一个完整的在线订餐平台,包括用户注册登录、浏览商家和菜单、下单支付、配送跟踪等功能,以提升用户的订餐体验。源码包含了前端Vue.js和后端Node.js的代码,部署文档详细介绍了系统的部署步骤和环境配置要求,讲解内容涵盖了系统的功能模块、技术选型理由、设计思路以及使用方法。 适合人群:对Vue.js和Node.js有一定了解,并希望通过实践项目提升技能的开发者。 能学到什么:①掌握Vue.js和Node.js的开发流程;②了解外卖系统的业务逻辑和实现方法;③学习前后端分离的开发模式;④了解部署和维护一个完整项目的流程。 阅读建议:本资源旨在帮助开发者通过实践项目掌握Vue.js和Node.js的应用,并了解外卖系统的开发流程。建议在学习过程中结合部署文档进行实践,并深入理解讲解内容中的技术原理和设计思路。同时,鼓励开发者根据实际需求对项目进行拓展和优化,以提升自己的技术水平。

    基于SSM+jsp的家居商城系统

    大学生毕业设计、大学生课程设计作业

    python企业编码管理的程序(可执行程序+源码).zip

    具体的操作步骤如下: (1)生成6位数字防伪编码。当用户在主程序界面中输入数字“1”菜单项时,将进入“生成6位数字防伪编码 (213563型)”的功能执行任务。此时要求输入生成防伪码的数量,可以根据需要输入生成防伪码的数量,如图2所示。按下<Enter>键,开始批量生成防伪码,生成后系统将提示用户生成了多少个注册码和生成文件的位置信息等,如图3所示。单击“确定”按钮,关闭提示信息。在屏幕上可以看到生成的防伪码信息,如图4所示。生成的文件在程序所在目录下的“codepath”文件夹下,名称为“scode1.txt”,如图5所示。

    Centos7-离线安装redis

    Centos7-离线安装redis

    基于JSP鲜花商城网站系统源码.zip

    这个是一个JSP鲜花商城网站系统,用户角色包含以下功能:用户登录与注册,修改个人信息,查看首页,查看分类,查看热销,查看订单,查看鲜花详情,加入购物车,提交订单等功能。管理员角色包含以下功能:订单管理,客户信息管理,鲜花管理,鲜花类目管理,管理员登录等功能。

    setuptools-3.5.1-py2.py3-none-any.whl

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    备自投动作不成功事故处理tp.pptx

    备自投动作不成功事故处理tp.pptx

    基于JSP户籍管理系统源码.zip

    这个是一个JSP户籍管理系统,管理员角色包含以下功能:管理员登陆,户籍管理,迁入管理,迁出管理,反馈投诉管理等功能。用户角色包含以下功能:用户登陆,户籍信息查看,迁入查询,反馈建议等功能。 本项目实现的最终作用是基于JSP户籍管理系统 分为2个角色 第1个角色为管理员角色,实现了如下功能: - 反馈投诉管理 - 户籍管理 - 管理员登陆 - 迁入管理 - 迁出管理 第2个角色为用户角色,实现了如下功能: - 反馈建议 - 户籍信息查看 - 用户登陆 - 迁入查询

    setuptools-36.4.0-py2.py3-none-any.whl

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    Pro Docker/如何使用容器服务进行开发和部署

    如何使用容器服务进行开发和部署

    java班级管理系统.zip

    java班级管理系统

Global site tag (gtag.js) - Google Analytics