htnl类名命规范

html 命名规则

一、注意事项:

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. 坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。

二、常用的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

三、注释的写法:

内容区

四、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

五、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) h1、h2、h3每个页面只能出现一次

2) h4、h5、h6单个页面可以多次使用

转载于:https://www.cnblogs.com/xbo1198627701/p/6875276.html