htnl类名命规范

2018-06-24 01:20:27来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

html类名命名规范

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:从零开始学习html(十二)CSS布局模型——上

下一篇:从零开始学习html(十三) CSS代码缩写,占用更少的带宽