登陆

用户

上一篇:苹果App Store公布最
新应用审核标准:更加严格 下一篇:以苏宁易购为例,看推荐
运营平台的产品实践

HTML 命名规范说明

来源:荣华软件   2019-04-19 09:21

一、命名规则说明: 
1)、所有的 命名最好都小写
2)、属性的 值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3)、每个标 签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上"/"
5)、表现与结构完全分离,代码中 不涉及任何的表现元素,如style、font、bgColor、border等
6)、标签h1到h5的定义,应遵循 从大到小的原则,体现文档的结构,并有利 于搜索引擎的查询。
7)、给每一 个表格和表单加上一个唯一的、结构标记id
8)、给图片加上alt标签
9)、尽量使 用英文命名原则
10)、尽量不缩写,除非一 看就明白的单词

DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。


二、相对网 页外层重要部分CSS样式命名:
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部


三、DIV+CSS命名参考表:  
1、以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合:
CSS样式命名
   
网页公共命名:
页面外 围控制整体布局宽度:#wrapper  
容器,用于最外层: #container或#content  
布局:#layout    
页头部分:#head, #header   
页脚部分: #foot, #footer 
主导航:#nav   
二级导航:#subnav  
菜单:#menu    
子菜单: #submenu  
侧栏: #sideBar 
左边栏或右边栏:#sidebar_a, #sidebar_b   
页面主体:#main  
标签:  #tag
提示信息:#msg #message   
小技巧:#tips   
投票:#vote   
友情连接:#friendlink   
标题:  #title 
摘要: #summary  
登录条:  #loginbar 
搜索输入框:#searchInput   
热门热点:#hot   
搜索: #search 
搜索输 出和搜索结果相似:#search_output   
搜索条:#searchBar  
搜索结果:#search_results   
版权信息:#copyright   
商标: #branding 
网站LOGO标志:#logo   
网站信息:#siteinfo 
法律声明: #siteinfoLegal    
信誉: #siteinfoCredits  
加入我们:#joinus  
合作伙伴:#partner    
服务:#service   
注册: #regsiter  
箭头:arr/arrow   
指南: #guild 
网站地图: #sitemap
列表:#list   
首页:#homepage 
二级页面子页面  :#subpage   
工具条:#tool, #toolbar   
下拉: #drop  
下拉菜单:#dorpmenu   
状态:  #status 
滚动:  #scroll 
标签页:.tab   
居左、中、右: .left .right .center
新闻:.news     
下载:  .download 

广告条(顶部广告条) :.banner

电子贸易相关:

产品: .products   
产品价格:.products_prices 
产品描述: .products_description    
产品评论:.products_review   
编辑评论: .editor_review  
最新产品: .news_release  
生产商:.publisher 
缩略图: .screenshot    
常见问题:.faqs   
关键词:.keyword   
博客:.blog   

论坛:.forum

CSS文件命名    说明:  

主要的:master.css,style.css    
模块:   module.css
基本共用:  base.css 
布局,版面:layout.css   
主题: themes.css  
专栏:columns.css   
文字、字体:font.css   
表单: forms.css  
补丁:mend.css

打印:print.css


CSS命名其它说明:
DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符 号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。
通常我 们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1h2h3h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可 根据自己需要选择性使用。

DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。


2.CSS样式文件命名如下
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css

主题 themes.css


四、英文命名技巧:
如果遇到不常用的,可以借 助翻译工具进行翻译取其英文命名。
推荐使 用谷歌在线翻译工具:http://translate.google.cn/
谷歌翻译工具介绍:http://www.divcss5.com/css-tool/t346.shtml

五、 DIV命名
站点:site
首页:homepage
导航:nav
布局:layout
搜索:search
网页头部:head/header
二级页面/子页面:subpage     subContent
登录条:loginbar  toolbar
侧栏:side/sidebar
广告:banner
子导航:subnav
当前位 置导航面包屑导航:crumb
菜单:menu
子菜单:submenu
滚动:scroll
下拉:drop
表单:form
箭头:arr/arrow
下拉菜单:dropmenu
主题/外观:theme
页面主体:main
内容:content
标签页:tab
列表:list
工具条:tool/toolbar
转角/圆角:cor/corner
提示信息:msg
小技巧:tips
标题:title
特别的:speciscal
资源:source
加入:join-department
指南:guild
服务:service
热点:hot   news_hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
关于我们:aboutus
网站地图:sitemap
合作伙伴:partner
友情链接:friendlink
网页底部:foot/footer
版权:copyright
提交:submit
搜索框:searchbox
文本框:textbox
统计:count
以上结 构就可以组合使用,例如:左列标题lefttitle;底部导航footernav
 
  规范不 是说要所有人照一个样子来命名css,我们可 以根据自己的需要定制命名规则,只要记住命名的规则,就可以 根据网站本身的特点来创造具有自己风格的命名方式。
  一、目前网 页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于 一组用于定义字体样式的class,我们可以使用f即foot的头字 母为前缀进行命名,如:
  f-blue:表示蓝色字体样式
  f-blod:表示粗体字体样式
对于网 页中如新闻频道的一些新闻的现实样式,可以用n作为前 缀进行样式设计,如:
  n-title:新闻标题
  n-list:新闻列表
  二、我们还 可以将代表各个部分的名字组合起来使用,如 ,对于上面的例子,我们可以这样命名:
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
  这样的 命名方式同样清晰明了,为大多 网页设计师所接受,只不过 要特别注意大小写的区分,css中是区别大小写的.开始时容易出错,多加注意便可.
  按照这 样的一些命名方式,我们可 以非常明确的知道css中的每一个class的用途,便于使用和设计、维护。
想一想,你要想 出很多名字来命名css也很麻烦的,是吧?
 
————————-另外一个规范——————-
 
1.CSS ID 的命名
外 套:  wrap/container
主导航:  main_nav
子导航:  subnav
页 脚:  footet
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar

右导航:  rightsidebar

旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面 所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current
 
2.另外在 编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>
 
3.样式文件命名
主要的 master.css  
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css

主题 themes.css

---------------------

  

       随时随 地了解更多最新资讯,关注荣华软件官方公众号:ronghuasoft



0条回答

登陆后可回复

  1. 登陆
  2. 注册
服务热线

400-692-8081

( 周一至周五 09:00-17:00 )

联系我们

名称:烟台荣 华软件科技有限公司

地址:烟台市高新区航天路101号C栋5楼516

座机:0535-3458081

邮箱:001@

Q Q:327195471

Copyright@2018 烟台荣 华软件科技有限公司 版权所有 鲁ICP备14003838号-1

友情链接:    V8彩票定位胆多少赔率   V8彩票app二维码   大象彩票导航网   V8彩票备用网址   大象彩票开户