前端开发规范手册_第1页
前端开发规范手册_第2页
前端开发规范手册_第3页
前端开发规范手册_第4页
前端开发规范手册_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

前端开发规范手册1.1概述为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.2.1文件命名规则文件夹和文件名一律全部用小写英文单词，禁止出现简拼、拼音、数字、无意义的命名，英文单词尽量使用一个进行描述，简洁易懂；多个单词用驼峰命名法。2.2文件存放位置cn存放中文HTML文件en存放英文HTML文件flash存放Flash文件images存放图片文件imagestudio存放PSD源文件flashstudio存放flash源文件inc存放include文件library存放DW库文件media存放多媒体文件project存放工程项目资料temp存放客户原始资料js存放JavaScript脚本css存放CSS文件2.3html书写规范为每个HTML页面的第一行添加标准模式（standardmode）的声明，确保在每个浏览器中拥有一致的展现。<!DOCTYPEhtml>文档类型声明统一为HTML5声明类型，编码统一为UTF-8。<metacharset="UTF-8"><HEAD>中添加信息。<metaname="author"content="smile@kang.cool">//作者<metaname="description"content="hello">//网页描述<metaname="keywords"content="a,b,c">//关键字,“，”分隔<metahttp-equiv="expires"content="Wed,26Feb199708：21：57GMT">//设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅<metahttp-equiv="Pragma"content="no-cache">//禁止浏览器从本地机的缓存中调阅页面内容<metahttp-equiv="Window-target"content="_top">//用来防止别人在框架里调用你的页面<metahttp-equiv="Refresh"content="5;URL=/">//跳转页面，5指时间停留5秒网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引<metaname="robots"content="none">//content的参数有all,none,index,noindex,follow,nofollow，默认是all<linkrel="ShortcutIcon"href="favicon.ico">//收藏图标<metahttp-equiv="Cache-Control"content="no-cache,must-revalidate">//网页不会被缓存IE支持通过特定<meta>标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求，否则最好是设置为edgemode，从而通知IE采用其所支持的最新的模式。<metahttp-equiv="X-UA-Compatible"content="IE=Edge">非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部。<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="css/main.css"></head><body><!--逻辑代码--><!--逻辑代码底部--><scriptsrc="lib/jquery/jquery-2.1.1.min.js"></script></body></html>引入JAVASCRIPT库文件，文件名须包含库名称及版本号及是否为压缩版。jQuery-1.8.3.min.js引入JAVASCRIPT插件,文件名格式为库名称+.+插件名称。jQuery.cookie.jsHTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性。Classid、namedata-*src、for、type、hreftitle、altaria-*、role避免使用中文拼音尽量简易并要求语义化。CLASS-->nHeadTitle-->CLASS遵循小驼峰命名法（littlecamel-case）ID-->n_head_title-->ID遵循名称+_NAME-->N_Head_Title-->NAME属性命名遵循首个字母大写+_<divclass="nHeadTitle"id="n_head_title"name="N_Head_Title"></div>当JAVASCRIPT获取单个元素时，通常使用document.getElementById来获取dom元素，document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的ID和NAME属性，所以要区分ID和NAME命名。<inputtype="text"name="test"><divid="test"></div><buttononclick="alert(document.getElementById('test').tagName)"></button><!--ie6下为INPUT-->特殊符号应使用转意符。<--><>-->>空格-->含有描述性表单元素（INPUT，TEXTAREA）添加LABEL。<p><labelfor="test">测试</label><inputtype="text"id="test"/></p>多用无兼容性问题的HTML内置标签,比如span、em、strong、optgroup、label等,需要自定义html标签属性时，首先考虑是否存在已有的合适标签可替换，如果没有,可使用须以“data-”为前缀来添加自定义属性，避免使用其他命名方式。语义化HTML。尽可能减少<DIV>嵌套。书写链接地址时避免重定向。href="/"//即在URL地址后面加“/”HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号2.4css书写规范为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE。即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不能通过W3C验证的代码（如:cursor:hand;）放到另一个文件中，再用下面的方法导入。<!--放置所有浏览器样式--><linkrel="stylesheet"type="text/css"href=""><!--只放置IE必须，而不能通过w3c的--><!--[ifIE]<linkrel="styleshee

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论