WEB前端编码规范.docx
- 文档编号:1954100
- 上传时间:2022-10-25
- 格式:DOCX
- 页数:30
- 大小:79.88KB
WEB前端编码规范.docx
《WEB前端编码规范.docx》由会员分享,可在线阅读,更多相关《WEB前端编码规范.docx(30页珍藏版)》请在冰豆网上搜索。
WEB前端编码规范
XXXX有限公司
XXXXXXX管X理平台
Web前端代码编写规范
文件状态:
文件标识:
[√]草稿
当前版本:
1.0
[]正式发布
作者:
李光强
[]正在修改
完成日期:
XXXXXX
2016年1月
修改历史
编号
修订后版本号
修订人
修订内容简述
修订日期
1
1.0
李光强
起草
第一部分HTML规范
HTML并不是一种编程语言,而是一种标记语言,它没有任何真正的编程语言中的循环或是流程控制语句。
然而,HTML代码的格式和风格是非常重要的,因为要经常对HTML代码进行维护和修改,因此HTML代码必须有很清晰的逻辑结构和布局,而使其易懂和易于维护。
1.文件定义
2.网站head区代码规范:
head区是指
和之间的内容。必须加入的标签:
2.1公司版权注释
---
文件:
XXX.html
说明:
说明本HTML是用于什么功能
作者:
李四
时间:
2016/1/30
--->
2.2网页显示字符集
简体中文:
charset=utf-8"> 繁体中文: charset=BIG5"> 英语: charset=iso-8859-1"> 2.3作者与版权信息 此处用于存储开发公司版权信息,如: 2.4网页的css,javascript规范 在引用CSS和JS文件时,统一放置在 html中javascript的书写: 2.5网页标题 Title中使用“-”分割,如: 设备管理平台-运维系统。 2.6设置搜索关键词 GoogleAdWords关键字工具: 查询特定关键词的常见查询及扩展匹配。 KEYWROD关S键字最多不超过5个建议长度: 小于等于100个汉字,如果使用的网页编码是UTF-8,不同关键字之间用英文“,”分隔。 2.7网站简介 description是描述网页内容的,因此最好是可以用一句话来概括本网页的主题内容。 description不要超过255个字符,搜索引擎索引一般都会索引Description的前255个字符,因此,这255个字符是做搜索引擎优化的关键。 如果使用的网页编码是UTF-8,那么在Description中的标点符号最好都使用英文,例如英文的逗号、句号等。 如果是中文的话,那么就使用中文的标点符号即可。 2.8其它标签[非必需] 1.设定网页的到期时间。 一旦网页过期,必须到服务器上重新调阅,这样有利于页面信息。 21: 57gmt"> 2.禁止浏览器从本地机的缓存中调阅页面内容。 3.用来防止别人在框架里调用你的页面。 4.自动跳转。 5指时间停留5秒。 5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 CONTEN的T参数有all,none,index,noindex,follow,nofollow。 默认是all。 6.收藏夹图标 16px*16px 7.订阅RSS浏览 是一种描述和同步网站内容的格式。 用户可以通过RSS阅读器订阅。 2.9完整示例 3.html中元素的书写: 3.1段落 段落使用 标签进行定义 Thisisaparagraph 3.2标题 即正文标题一般用
标题使用
至标签进行定义。
定义最大的标题。
定义最小的标题。
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
Thisisaheading
文章中的小标题一定也要加粗。可以把网页中的重要内容做成这样。
用户不用登陆这个网页就可看到更新的内容。
3.3字体的设置标签
换行:
字体修饰不要使用等进行标注,一般使用css样式进行字体样式排版
3.4注意事项
1.
为了保证浏览器的兼容性,必须设置页面背景:2.关闭所有的标签
。
即:
一定要有结束标记。
3.属性值用双引号“”括起来,属性统一使用小写
例如:
4.给所有的属性赋值
正确的写法为:
5.标签要合理嵌套
7.特殊字符用编码标识
如"<"用"<"表示,">"用">"表示。
8.网页中图片优化
一定要加alt属性,alt属性指定了当图片不能显示的时候就显示供替换文本。
内容最好与关键词相关。
如:
一些小图标最好用.png或.gif格式图片,比如说箭头,文章列表前的图标等,在CSS中做成背景。
这些小图标最好做一张图片,用CSS来定位。
9.用结构化的元素输出内容
- 新现代
- 新现代
- 新现代
或者使用
10.标签要有缩进,便于代码阅读修改。
11、tr、td必须定义在table之间;
⋯⋯ |
注:
tbody绝对不可以省略。
12、button按钮必须定义在form之间,否则netscape不支持;
13、html注释
(1)每一独立部分都要表明注释。
例如:
—右边begin-->
--右边end-->
—左边begin-->
—左边end-->块代码的注释
—头部begin-->大量代码块,使用此种样式,方便阅读
—头部end-->
(2)注释要用描述性语言,能够清楚的表达每一部分的意思
4.HTML元素的排序规则
能够使用的HTML元素包括:
div、p、ul、table、span、input、select等。
基本上div、table、ul、p都属于结构性比较强的元素,而span、input则是比较弱的元素,因此不允许有span嵌套div、table等等的情况出现,span可以嵌套input,可以嵌套span。
在写页面的时候可以先不考虑界面呈现,按照这样的规则,把数据直接绑定到HTML元素的节点上。
5.九大原则
原则一:
逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。
由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的CLASS命名。
不要轻易修改共用的CSS,否则可能会影响其它页面。
在每个一级CSS前添加注释,说明哪些页面使用了该CSS。
原则三:
从总到分。
顺序应该是这样:
总体需要用到的>>结构>>模块>>二级模块>>细节;并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。
最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。
结构性的东西应该慎重精细。
原则四:
尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。
1、图片文件的总量会变小;
2、利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;
3、显而易见,这样做非常便于管理,替换或新增的时候工作量很小。
原则五:
切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。
把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。
不光要控制图片文件的多少,还要考虑到这样切会不会造成页
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 前端 编码 规范