Web开发规范 (一)

via:Github

通用规范

  • 使用空格代替TAB,windows和Linux的Tab占位不同。
  • CSS样式属性和 JavaScript代码后边添加分号; ,方便断句,利于压缩。
  • 文件内容编码均统一为UTF-8。
  • CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示。

文件规范

  • 文件名用英文单词,多个单词用驼峰命名法。
  • 一些浏览器会将含有这些词的作为广告拦截,文件命名、ID、CLASS等所有命名避免以上词汇。ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao

HTML书写规范

  • 为每个HTML页面的第一行添加标准模式(standard mode)的声明,确保在每个浏览器中拥有一致的展现。
    <!DOCTYPE html>
  • 文档类型声明统一为HTML5声明类型,编码统一为UTF-8。
    <meta charset="UTF-8">
  • <HEAD>中添加信息。
 <meta name="author" content="smile@kang.cool">//作者
 <meta name="description" content="hello">//网页描述
 <meta name="keywords" content="a,b,c">//关键字,“,”分隔
 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">//设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅
 <meta http-equiv="Pragma" content="no-cache">//禁止浏览器从本地机的缓存中调阅页面内容
 <meta http-equiv="Window-target" content="_top">//用来防止别人在框架里调用你的页面
 <meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳转页面,5指时间停留5秒 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
 <meta name="robots" content="none">//content的参数有all,none,index,noindex,follow,nofollow,默认是all
 <link rel="Shortcut Icon" href="favicon.ico">//收藏图标
 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//网页不会被缓存
  • IE支持通过特定<meta>标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求,否则最好是设置为edge mode ,从而通知IE采用其所支持的最新的模式。
meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • 非特殊情况下CSS样式文件外链至HEAD之间,JAVASCRIPT文件外链至页面底部。引入JAVASCRIPT库文件,文件名须包含库名称及版本号及是否为压缩版。引入JAVASCRIPT插件, 文件名格式为库名称+.+插件名称。jQuery.cookie.js

  • HTML属性应当按照以下给出的顺序依次排列,来确保代码的易读性。

class
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role
  • 编码均遵循XHTML标准,标签、属性、属性命名由小写英文、数字和_组成,且所有标签必须闭合,属性值必须用双引号””,避免使用中文拼音尽量简易并要求语义化。
CLASS --> nHeadTitle --> CLASS遵循小驼峰命名法(little camel-case)
ID --> n_head_title --> ID遵循名称+_
NAME --> N_Head_Title --> NAME属性命名遵循首个字母大写+_
<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
  • 当JAVASCRIPT获取单个元素时,通常使用document.getElementById来获取dom元素,document.getElementById兼容所有浏览器,但IE浏览器会混淆元素的ID和NAME属性,所以要区分ID和NAME命名。
<input type="text" name="test">
<div id="test"></div>
<button onclick="alert(document.getElementById('test').tagName)"></button>
<!-- ie6下为INPUT -->
  • 特殊符号应使用转意符。
<    -->    &lt;
>    -->    &gt;
空格  -->     
  • 含有描述性表单元素(INPUT,TEXTAREA)添加LABEL。
<p>
    <label for="test">测试</label>
    <input type="text" id="test" />
</p>
  • 多用无兼容性问题的HTML内置标签,比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定义HTML标签属性时,首先考虑是否存在已有的合适标签可替换,如果没有,可使用须以“data-”为前缀来添加自定义属性,避免使用其他命名方式。
  • 语义化HTML。
  • 尽可能减少<DIV>嵌套。
  • 书写链接地址时避免重定向。
    href="http://www.kahn1990.com/" //即在URL地址后面加“/”
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,941评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,397评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,345评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,851评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,868评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,688评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,414评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,319评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,775评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,096评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,789评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,437评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,993评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,107评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,308评论 3 372
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,037评论 2 355

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,660评论 18 139
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,372评论 2 36
  • Web前端开发规范文档 规范目的: 使开发流程更加规范化。 通用规范: TAB键用两个空格代替(WINDOWS下T...
    荞叶阅读 546评论 0 1
  • #基本功# 《特质》 当你在听演讲的时候,你最喜欢演讲者身上的什么特质? 看到今天晚上的这个话题,演讲者的特质的时...
    蜜丝姜阅读 157评论 0 1
  • 十年前,在洛阳学茶。 大概也是这个样子。每天早早起床,然后穿过车水马龙的大街,到热气腾腾包子铺吃笼包子,这很重要。...
    孔雀堂茶号阅读 407评论 0 3