htnl类名命规范
2018-06-24 01:20:27来源:未知 阅读 ()
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单个页面可以多次使用
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 前端命名规范 2020-03-17
- css权值和优先级+命名规范 2020-01-31
- web前端命名规范 2019-12-09
- 网站优化 2019-11-13
- CSS语法规范一 2019-10-30
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash