在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便。许多新手朋友在设计一个HTML文件时,可能只会依据自己的想法随便给一些简单的名称,但若是一味的乱起名称,不仅会让团队的伙伴看不明白,还会导致标签名称混乱,这样会使得代码维护十分困难,是非常不利于管理的。所以我们在设计整个网站,还是一个单独的HTML页面,都应该要有良好的命名规则。在本文中,主要讲解CSS命名规则,这也包括了对HTML标签命名

文件名称必须由英文字母开头,通常命名的规则是根据内容的分类和框架的类型翻译成英文单词来命名,例如:div id="nav"(表示为这个div是个导航条),所有单词应当用小写字母,名称中可以使用数字,或下划线,例如:div="main_piclist"(表示主要内容下的图片列表)、div="nav_bg.jpg"(表示导航条的背景图),还可以使用中划线进行名称之间的连接,例如:div="main-left"(表示左侧内容的布局)所有命名要尽量避免使用中文字符,要以最少的字母达到最容易理解的含义,除非一看即懂,否则尽量不缩写。

HTML标签的命名/CSS标准化命名大全

页面结构命名

  1. page:代表整个页面,用于最外层。
  2. wrap:外套,将所有元素包在一起的一个外围包,用于最外层
  3. wrapper:页面外围控制整体布局宽度,用于最外层
  4. container:一个整体容器,用于最外层
  5. head、header:页头区域,用于头部
  6. nav:导航条
  7. content:内容,网站中最重要的内容区域,用于网页中部主体
  8. main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
  9. column:栏目
  10. sidebar:侧栏
  11. foot、footer:页尾、页脚。网站一些附加信息放置区域,(或命名为copyright)用于底部

导航命名

  1. nav、navbar、navigation、nav-wrapper:导航条或导航包,代表横向导航
  2. topnav:顶部导航
  3. mainbav:主导航
  4. subnav:子导航
  5. sidebar:边导航
  6. leftsidebar 或 sidebar_a :左导航
  7. rightsidebar 或 sidebar_b:右导航
  8. title:标题
  9. summary:摘要/li>
  10. menu:菜单。区域包含一般的链接和菜单
  11. submenu:子菜单
  12. drop:下拉
  13. dorpmenu:下拉菜单
  14. links:链接菜单

功能命名

  1. logo:标记网站logo标志
  2. banner:标语、广告条、顶部广告条
  3. login:登陆,(例如登录表单:form-login)
  4. loginbar:登录条
  5. regsiter:注册
  6. tool、toolbar:工具条
  7. search:搜索
  8. searchbar:搜索条
  9. searchlnput:搜索输入框
  10. shop:功能区,表示现在的
  11. icon:小图标
  12. label:商标
  13. homepage:首页
  14. subpage:二级页面子页面
  15. hot:热门热点
  16. list:文章列表,(例如新闻列表:list-news)
  17. scroll:滚动
  18. tab:标签
  19. sitemap:网站地图
  20. msg 或 message:提示信息
  21. current:当前的
  22. joinus:加入
  23. status:状态
  24. btn:按钮,(例如搜索按钮可写成:btn-search)
  25. tips:小技巧
  26. note:注释
  27. guild:指南
  28. arr、arrow:标记箭头
  29. service:服务
  30. breadcrumb:(即页面所处位置导航提示)
  31. download:下载
  32. vote:投票
  33. siteinfo:网站信息
  34. partner:合作伙伴
  35. link、friendlink:友情链接
  36. copyright:版权信息
  37. siteinfoCredits:信誉
  38. siteinfoLegal:法律信息

CSS样式命名

  1. 对齐样式命名:left(左边内容)、center(中间内容)、right(右边内容)等;
  2. 颜色英文命名:red(红色)、green(绿色)、yellow(黄色),又或者border_red(红色边框)等;
  3. 颜色代码命名:f00(红色)、ff0(黄色)、f90(橙色)等;
  4. 文字大小命名:font12px(字体12像素)、font16px(字体16像素)等;
  5. 页面线条命名:line_x (横线)、line_y (纵线)或 line_red(红线)、line_black(黑线)
  6. 图片图标命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
  7. 页面广告命名:ad_01、ad_02
  8. 背景框架命名:nav_bg(代表导航条的背景图片位置)、tool_bg(代表工具栏的背景图片位置)

CSS样式表命名

  1. index.css:单独为首页建立样式
  2. head.css:头部样式,多个页面头部设计风格相同时使用。
  3. base.css:共用样式。
  4. style.css:独立页面所使用的样式文件。
  5. global.css:页面样式基础,全局公用样式,页面中必须包含。
  6. layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
  7. module.css:模块,用于产品类页,也可与其它样式配合使用。
  8. master.css:主要的样式表
  9. columns.css:专栏样式
  10. themes.css:主体样式
  11. forms.css:表单样式
  12. mend.css:补丁,基于以上样式进行的私有化修补。

HTML标签的命名/CSS标准化命名大全的更多相关文章

  1. CSS选择器命名及常用命名

    CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”, ...

  2. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  3. DIV+CSS规范命名大全集合

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19)   网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...

  4. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. css中标签,类名,id名的命名 语义化命名

    作为前端开发人,经常头疼于雷鸣,标签,id名的命名,不知道应该基于什么原则. 原则: 2 当命名的时候,问自己,这个元素是要来做什么?(根据使用目的).ad-banner 4 避免依靠位置和视觉效果命 ...

  6. 有利于SEO优化的DIV+CSS的命名规则小结

    可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合  CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...

  7. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

  8. CSS 的命名和书写

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) ...

  9. CSS 常用命名

    在前端开发中,规范使用 DIV+CSS 命名,可以增强团队合作提高开发效率,有利于页面后期的维护和优化. 1.页面结构 wrap:外套.包裹,用于最外层. wrapper:外套,用于页面外围控制整体布 ...

随机推荐

  1. [国嵌攻略][182][Sqlite嵌入式数据库移植]

    数据库系统构成 在计算机系统中,保存数据的方式一般有两种: 1.普通文件方式 2.数据库方式 相比于普通文件方式,使用数据库来管理大批量数据具有更高的效率与安全性. 数据库系统一般由三个部分构成 1. ...

  2. php(ThinkPHP)实现微信小程序的登录过程

    源码也在我的github中给出 https://github.com/wulongtao/think-wxminihelper 下面结合thinkPHP框架来实现以下微信小程序的登录流程,这些流程是结 ...

  3. 数据结构与算法(c++)——双缓存队列

    "双缓存队列"是我在一次开发任务中针对特殊场景设计出来的结构.使用场景为:发送端持续向接收端发送数据包--并且不理会接收端是否完成业务逻辑.由于接收端在任何情况下停止响应即可能产生 ...

  4. 怎样用PS对照片进行美白?

    摘录自:http://product.pconline.com.cn/itbk/software/ps/1408/5336118.html 步骤1.打开需要美白肤色的照片.本教程为防止侵犯他人肖像权, ...

  5. MyBatis 查询示例

    环境搭建 数据库schema 1)datasource.xml配置 <?xml version="1.0" encoding="UTF-8"?> & ...

  6. 图表工具--- ECharts.js学习(一) 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  7. 设置vs环境

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  8. programing

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  9. spring使用@Cache的简单实现

    基于xml的配置感觉没有注解形式简单明了,咱不考虑了. 进入正题之前先提个疑问,希望知道的人能告诉一下 下述介绍会有这段代码: @Cacheable(value="myCache" ...

  10. IIS使用十大原则,(IIS过期时间,IIS缓存设置) 【转载】

    1. 自定义错误页虽然自定义错误页很简单,但只有少数管理员有效地利用了它.管理员可以在MMC中将HTTP错误信息映像到服务器上的绝对URL或是某个文件,更为详细的信息可以在这里找到.如果你嫌这太麻烦, ...