html命名规范

命名规范

header 头部 menu菜单栏 banner导航栏 show显示
不能使用拼音 或汉语
不能使用数字开头命名
可以用下划线或横杠命名 ,一般用来拼两个名字
命名的两种方式
class类命名:指代一类用法
可以使用多个类命名
id命名
具有唯一性

企业命名规范

标题: title

摘要: summary

箭头: arrow

商标: label

网站标志: logo

转角/圆角: corner

横幅广告: banner

子菜单: subMenu

搜索: search

搜索框: searchBox

登录: login

登录条:loginbar

工具条: toolbar

下拉: drop

标签页: tab

当前的: current

列表: list

滚动: scroll

服务: service

提示信息: msg

热点:hot

新闻: news

小技巧: tips

下载: download

栏目标题: title

热点: hot

加入: joinus

注册: regsiter

指南: guide

友情链接: friendlink

状态: status

版权: copyright

按钮: btn

合作伙伴: partner

投票: vote

左/右/中:left/right/center

简介:profiles

评论:comment

ID命名

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

(3)功能

标志:logo

广告:banner

登陆:login

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

新闻: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 { }
(5)图标库的引用
1.字体图标的颜色
i { color:#ddd; }
2.字体图标的大小
i { font-size:20px; }
3.字体图标的位置
i { transform-translateY(30%); }

标签嵌套遵循的规则

p dt h标签 里面不能嵌套块属性标签
a标签不能嵌套a标签
块级元素可以包含内联或某些块级标签
行内元素可以嵌套行内元素 特殊:a标签不能嵌套a标签
初级选择器
*通配符选择器 选择到所有的标签
标签选择器 选择到所对应的tag标签
类选择器 (class) 选择到.class所对应的类
id选择器 选择到id命名的元素
后代选择器 之间是空格 是选择到tag1里面的子元素tag2
div.p 是选择到是div标签 他的名字是p
标签要语义化

背景属性

background-image 背景图片 会覆盖背景颜色
background-repeat 背景平铺 background-repeat:repeat-x 水平方向平铺 repeat-y 垂直方向平铺
background-color 背景颜色
background-position 背景定位 方位值
x水平方向: left center right
%
px距离上边
y垂直方向: top bottom center
%距离左边
px
background-size 背景图片的大小 只给一个值 第二个会默认auto
x:px %
y: px contain 等比例缩放x轴和y轴 直到接触到边缘为止
背景图片综合写法 color image repeat position /size cover 按照盒子最大边等比例缩放
background-attachment:fixed

你可能感兴趣的:(html命名规范)