htnl类名命规范

html 命名规则

1、注意事项:

1. 一概小写;

2. 尽可能用英文;

3. 不加中杠和下划线;

4. 尽可能不缩写，除非一看就明白的单词.

主要的 master.css 模块 module.css

基本共用 base.css 布局，版面 layout.css

主题 themes.css 专栏 columns.css

文字 font.css表单 forms.css

补丁 mend.css 打印 print.css

5. 坚持以字母开头命名选择器，这样可保证在全部浏览器下都能兼容。

2、经常使用的css命名规则

头：header 内容：content/container 尾：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

3、注释的写法:

内容区

4、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指南：guide 服务：service热点：hot

新闻：news下载：download 投票：vote合做伙伴：partner 友情连接：link 版权：copyright

5、class的命名:

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

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

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

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

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

.left { float:left; }

.bottom { float:bottom; }

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

.barnews { }

.barproduct { }

篇二：Web前端开发命名规则

Smart UI前台开发帮助

1. 开发规范

1.1. HTML

1.1.1. HTML命名规范

1.1.2. HTML编写要求

1) 要求只能使用上述规定的标签 2) 每一个标签要求结构完整；

如：<span/>应写为: <span></span>

除hr、br、img、input外标签都应该是标签对完整的 <br /><hr/><img />

 

1.2. JS

1.2.1. Javascript

1.2.1.1.

JS命名规范

1.2.1.2. JS注释规范

1.2.1.3. JS编写要求

1) 要求结构清晰，代码规范。

2) 全部string对象必须以'单引号包括起来，如内部须要在使用',使用转义符\" 3) 一个function 中内容不能过长，应该适当根据功能拆分红多个function。 4) 全部dom对象尽可能所有使用jquery的方法进行操做

5) 关于js数据类型的处理应尽可能使用jshepler,类型的prototype来完成.

6) 尽可能使用局部变量，减小全局变量的使用，以减小内存的占用 7) 减小js闭包的使用，尽可能避免内存泄露的风险。

8) 使用var弱类型对象时应该明确标示其做用范围，一旦含义改变时必定要注释清楚。

9) 统一使用ipsa2.0的基础组件库（jscontrols）编码，非特殊状况禁止直接调用控件（plugin）。 10) $ihelper库中已包含大多数状况的操做，基础操做应该都用$ihelper完成。

1.2.2. Jquery

1.2.2.1.

Jquery编写要求

1) 选择的性能的顺序是id>tag>class,因此使用时，尽可能使用性能高的选择器。 2) 有意识的用多重匹配的选择器

如：$('#id : tag')

3) 尽可能使用id选择器获取单个对象或者idselector的链结构方式查询

如：$('#parentid child')

4) 在使用数据对象，或是json对象时，最后一项必定不能加",",不然IE7下脚本会出错

5) 全部的dom对象的样式设置必须使用css()样式设置的方式，不能使用width()这种直接设置的方式。

1.2.3. jq plugins

1.2.3.1.

jq plugins结构顺序

属性定义、私有变量、私有方法、主体方法

1.2.3.2. jq plugins编写要求

1) 严格按定义的结构编写，注明实现功能及更新记录、注释清晰、标准化

2) 控件编写以前，要将显示端html完成、css规范完成（全部命名必须有该plugin名称的前缀+‘-’+命名）。 3) 属性定义根据状况定义初始化值

4) 编写方法，须要详细了解基础库中的内容。判断是不是为能够为公用仍是只能私有。 5) 绝对禁止有固定的ID对象

6) 对外部引入的控件，详细的使用实例，实例都须要完整；了解的代码和修改的功能都要详细注释。 7) 尽可能采起在jscontrol的方式去控制控件达到须要的效果。

1.2.4. icontrols

对全部的plugins进行封装，对外统一出口，经过jsconfig设定各plugins属性初始化值

1.3. CSS

1.3.1. CSS基本命名规范

1) 采用组合命名规则，基本标签：对象简写+‘-’+功能命名；子对象为父对象命名+‘-’+功能命名

如：button：btn-save

2) 对于容器标签，则与对象命名相同便可 3) 了解各浏览器hack的写法

4) 明确各选择器的优先级，做用范围。

1.3.2. 全局CSS

1) body，主要控制内的全部内容的基础样式，如字体样式、背景等 2) *，清空全部对象的有影响的默认样式 3) 各种基础标签的通用样式

如：img{border-width: 0px;}

1.3.3. CSS编写规范

1) 使用CSS3.0的标准编写。

2) 子对象对采用链选择器的方式定义；

3) 对象尽可能使用class选择器去匹配；对于特殊功能的才考虑使用ID选择器； 4) 标签选择器只能在全局CSS中定义，和子对象匹配的时候使用（也应尽可能少使用），

其余时候禁止定义。

5) 开发端禁止使用滤镜；设计端也应尽可能少使用滤镜。

1.3.4. CSS基本布局规范

篇三：html使用规范和css命名规则

Css的命名规则和Html标签使用规则

1 Css命名规则

1.1 样式文件命名规则

主要的 master.css

布局，版面 layout.css

模块 module

.css

 

主题 themes.css

基本共用 base.css

表单 forms.css

专栏 columns.css

文字 font.css

打印样式 print.css

补丁 mend.css

1.2 样式命名规则

1.2.1 框架

外 套： wrap

主导航： mainnav

子导航： subnav

页 脚： footet

整个页面： content

页 眉： header

页 脚： footer

商 标： label

标 题： title

主导航： mainbav

顶导航： topnav

边导航： sidebar

左导航： leftsidebar

右导航： rightsidebar

旗 志： logo

标 语： banner

菜单内容1： menu1 content

菜单容量： menu container

子菜单： submenu

边导航图标：sidebarIcon

注释：note

面包屑： breadcrumb(即页面所处位置导航提示）

容器：container

内容：content

搜索：search

登录：Login

功能区： shop(如购物车，收银台)

当前的current

1.2.2 颜色

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

.red {color:red;}

.f60 {color:#f60;}

.ff8600 {color:#ff8600;}

1.2.3 字体大小

直接使用’font+字体大小’做为名称,如

.font12px {font-size:12px;}

.font9pt {font-size:9pt;}

1.2.4 对齐

使用对齐目标的英文名称,如

.left {float:left;}

.right {float:right;}

1.2.5 命名方式

使用’类别+功能’的方式命名,如

.barnews {}

.barproduct {}

1.2.6 注意事项

1) 一概小写;

2) 尽可能用英文;

3) 不加中杠和下划线;

4) 尽可能不缩写，除非一看就明白的单词.

1.3 html标签使用规则

1.3.1 书写规范

1.3.1.1 页头定义

编码用utf-8

1.3.1.2 全部代码必须小写

<title>和<TITLE>是不一样标签

1.3.1.3 标签必需要有一个相应的结束标记

<p>sfdsfds</p>

<img />

1.3.1.4 元素属性值必须包含在双引号中

<p style=”属性值”></p>

1.3.1.5 标签注释

<--信息 Begin -->

内容区

<--信息 End -->

1.3.2 标签概述

通常咱们使用的HTML元素包括：div, p, ul, table, span, input, select。

基本上div, table, ul, p都属于结构性比较强的元素，而span, input则是比较弱的元素，所以不容许有span嵌套div, table等的状况出现，span能够嵌套input, 能够嵌套span。

1.3.3 Seo特殊要求标签

1.3.3.1 标题标签

1) h一、h二、h3每一个页面只能出现一次

2) h四、h五、h6单个页面能够屡次使用