HTML\CSS标准化命名大全

企鹅博客
企鹅博客
企鹅博客
28697
文章
0
评论
2020年9月16日11:35:15 评论 3 views 2230字阅读7分26秒

在一个内容较多的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标准化命名大全的详细内容,更多请html教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
html中如何修改<audio data-lazy-src=

html中如何修改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比...
html_html/css_WEB-ITnose html教程

html_html/css_WEB-ITnose

回复讨论(解决方案) 直接把那个事件加入到 //jquery$(document).ready(function(){ //事件代码})//jswindow.onload=function(){ //...
HTML无刷新提交表单_html/css_WEB-ITnose html教程

HTML无刷新提交表单_html/css_WEB-ITnose

通常对于无刷新提交表单,我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。 第一种: (html页面) 无刷新提交表单 用户名: 密 码: (PHP...
html5 如何实现客户端验证上传文件的大小 html教程

html5 如何实现客户端验证上传文件的大小

在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等,这其实时得益于浏览器端新增的对文件的校验能力,其中支持HTML 5的浏览器,都会实现W3C...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: