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单个页面可以多次使用

htnl类名命规范的更多相关文章

  1. Python的pep8(代码规范)

    Python的pep8-代码规范 1.    代码布局设计 1.1    缩进 A.   使用四个空格来进行缩进 B.   换行的时候可以使用反斜杠,最好的方法是使用园括号,在使用反斜杠的时候,在反斜 ...

  2. PEP8编码规范

    1.代码布局设计 1.1 缩进 -4个空格进行缩进 1.2 tab键-在python2中tab和空格是混用的,但是在python中基本上使用tab(pycharm开发工具会自动对代码缩进) 1.3 最 ...

  3. PHP 代码规范、流程规范、git规范

    1. 命名规范 (1).变量命名规范 1.变量使用驼峰命名法 禁止使用拼音或者拼音加数字 2.变量也应具有描述性,杜绝一切拼音.或拼音英文混杂的命名方式 3.变量包数字.字母和下划线字符,不允许使用其 ...

  4. java基础知识总结(1)

    定义类: 访问修饰符 class 类名{ }   访问修饰符如:public .priate是可选的 class是声明类的关键字 按照命名规范,类名首字母大写   例:创建“人”类,关键代码: pub ...

  5. SignalR的另类实现技巧

    很久之前发表过一篇名为<通过三个DEMO学会SignalR的三种实现方式>的文章,在那篇文章里面详细介绍了在WEB应用下的常用SignalR实现方法,而今天我们来利用SignalR来实现其 ...

  6. python面向对象基础-01

    面向对象(OOP)基本概念 前言 话说三国时期曹军于官渡大败袁绍,酒席之间,曹操诗兴大发,吟道:喝酒唱歌,人生真爽! 众将直呼:"丞相好诗",于是命印刷工匠刻板印刷以流传天下; 待 ...

  7. Java02

    一.IDE的概念.eclipse的介绍.安装.使用 (用eclipse写HelloWorld例子)     1.什么是IDE(Integrated Development Environment)? ...

  8. PHP中面相对象对象的知识点整理

    面向对象 万物皆对象,将构成问题的事务分解到各个对象上,建立对象的目的不是为了完成一个工作,而是为了描述某个事务在解决问题中的行为,更符合人的思维习惯,代码重用性高,可扩展性. ___________ ...

  9. Java:一个简单的Java应用程序

    /** * 这是文档注释 * @version  * @author  */ /* 这之间的内容也是注释 */ //这是行注释 public class FirstSample { public st ...

随机推荐

  1. js DOM 案例

    模态框 <html> <head> <meta charset="UTF-8"> <title>模态框</title> ...

  2. ORA-01113 & ORA-01110同时出现

    \NOARCHIVED LOG , 没备份 , Redo Log 被覆盖 , 某个datafile不能online 设计知识点:BBED> set block 1BBED> p kcvfh ...

  3. git中多账号切换问题的解决方案(转)

    作者:知乎用户链接:https://www.zhihu.com/question/23028445/answer/416231632来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  4. C# 多线程五之Task(任务)一

    1.简介 为什么MS要推出Task,而不推Thread和ThreadPool,以下是我的见解: (1).Thread的Api并不靠谱,甚至MS自己都不推荐,原因,它将整个Thread类都不开放给Win ...

  5. Shell脚本 | 一键获取安卓应用活动名

    上篇文章提到,启动时间的计算需要用到应用启动页的活动名(Activity_Name). 如何获取活动名呢?通常有如下几种方式: 1.询问 Dev 同事 2.adb logcat ActivityMan ...

  6. [Python 从入门到放弃] 4. 什么是可选参数

    参数在函数中使用,顾名思义.可选参数就是:这个参数是可选的 也就是可有可无 我们来看一下这个例子: ver 1: 1.定义一个迭代输出列表元素的函数myPrint 2.参数为 列表 def myPri ...

  7. php里use关键字与class_alias的作用域区别

    use可以用在命名空间下,也可以不用再命名空间下,他在两者中的作用是一致的,都是在编译的时候执行,不真正的加载类,因为是编译的时候执行,所以只能在全局环境使用,及不能使用在方法内部,条件判断内部. 引 ...

  8. mysql 获取自增主键

    MyBatis 3.2.6插入时候获取自增主键方法有二 以MySQL5.5为例: 方法1: <insert id="insert" parameterType="P ...

  9. 深入Spring:自定义事务管理

    转自: http://www.jianshu.com/p/5347a462b3a5 前言 上一篇文章讲了Spring的Aop,这里讲一下Spring的事务管理,Spring的事务管理是建立在Aop的基 ...

  10. 程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现)

    http://blog.csdn.net/pzhtpf/article/details/7559896 程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现) 程序员必知的8大 ...