web前端规范

阿里云云栖号

HTML

原则

1.规范 。保证您的代码规范,保证结构表现行为相互分离。

2.简洁。保证代码的最简化,避免多余的空格、空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

3.实用。遵循标准,但是不能以牺牲实用性为代价。

4.忠诚。选择一套规范,然后始终遵循。不管代码由多少人参与,都应该看起来像一个人写的一样

语法

1.小写. html标签、属性全部小写。

2.嵌套. 所有元素必须正确嵌套。

3.闭合. 双标签必须闭合,单标签(自关闭标签)不闭合 如


4.双引号. 双引号属性值,不要使用单引号。

注释

1.详尽注释。解释代码解决问题、解决思路等。

2.模块注释。建议不使用模块结束注释。

文档

1.文档类型使用html5标准文档类型,文档类型声明之前,不允许出现任何非空字符。不允许添加强制改变文档模式。

2.html元素上指定lang属性。显示页面语言,有助于语言合成工具来确定怎样发音,以及翻译工具决定使用的规则,等等。

3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。

属性

1.双引号属性值,不要使用单引号。

2.省略type属性。使用style、link、script,不用指定type属性,因为 text/css 和 text/javascript 分别是他们的默认值。

3.省略Boolean属性值。Boolean属性不用添加取值,disabled,checked,selected等。

4.省略url类属性资源协议头。

5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-->src,for,type,href->title,alt->aria-,role。

6.多媒体元素添加替代属性。图像增加alt属性,音视频增加替代文字。

元素

1.避免冗余标签。

2.避免JS生成标签。

3.段落文字应该用p,避免使用br。

4.列表项放ul,ol,dl,不要使用一系列的div或p。

5.input使用for属性绑定label。

6.使label标签包裹radio或checkbox和他们的文字,不用再使用for属性。

8.form button应制定type类型,使用type="submit"、type="reset"或type="button"。

参考: http://www.php100.com/html/it...

CSS

全局:global.css

全局样式为全站公用,为页面样式基础,页面中必须包含。

结构:layout.css

页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中。

私有:style.css

独立页面所使用的样式文件,页面中必须包含。

模块 module.css

产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。

主题 themes.css

实现换肤功能时应用。

补丁 mend.css 基于以上样式进行的私有化修补。

CSS命名规范

头:header

内容:content/containe

尾: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

1.命名统一采用小写

注意事项::

一律小写;

尽量用英文;

不加中杠和下划线;

尽量不缩写,除非一看就明白的单词.

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

clipboard.png

(2)字体大小,直接使用”font+字体大小”作为名称,如

clipboard.png

(3)对齐样式,使用对齐目标的英文名称,如

clipboard.png

(4)标题栏样式,使用”类别+功能”的方式命名,如

clipboard.png

XHTML文件中id的命名

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

Javascript

使用驼峰标记法

首字母是小写的,接下来的字母都以大写字符开头。例如:

clipboard.png

不要使用 switch

switch 在所有的编程语言中都是个非常错误的难以控制的语句,建议用 if else 来替换它。

操作符(+,-,*,/,%)前后请加空格

例如

clipboard.png

缩进

使用两个空格来代替tab

字符串

统一使用单引号(‘),不使用双引号(“)。这在创建 HTML 字符串非常有好处:

三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

clipboard.png

推荐

clipboard.png

澄清:分号与函数

分号需要用在表达式的结尾,而并非函数声明的结尾。区分它们最好的例子是:

clipboard.png

每一次的记录,都是向前迈进的一步

本文作者:donggggg

阅读原文

本文为云栖社区原创内容,未经允许不得转载。

阅读 1.7k

阿里云官网内容平台!汇聚阿里云优质内容(入门、文档、案例、最佳实践、直播等)!如需转载或内容类合...

27.3k 声望
35.3k 粉丝
0 条评论

阿里云官网内容平台!汇聚阿里云优质内容(入门、文档、案例、最佳实践、直播等)!如需转载或内容类合...

27.3k 声望
35.3k 粉丝
文章目录
宣传栏