【html/css】html/css命名规范

  无论做什么,规则总是最重要的。无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往。

  人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自己在过后都看不懂时,就成为了交流中的障碍了。所以,有一个规范的命名规则是很重要的。命名规则有很多,大家各取所需,这里介绍一下在html/css中一些约定俗成的命名规范,权作记录:

  1、所有的命名最好都小写

  2、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"

  3、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

  4、空元素要有结束的tag或于开始的tag后加上"/"

  5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

  6、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

  7、给每一个表格和表单加上一个唯一的、结构标记id

  8、给图片加上alt标签

  9、尽量使用英文命名原则

  10、尽量不缩写,除非一看就明白的单词


  CSS命名规则:

    头:header                内容:content/containe

    尾: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


  HTML标签 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               指南:guild

      服务:service             热点:hot

      新闻:news              下载:download

      投票:vote               合作伙伴:partner

      友情链接:link            版权:copyright


  样式文件命名:

    主要的:master.css

    布局版面:layout.css

    专栏:columns.css

    文字:font.css

    打印样式:print.css

    主题:themes.css

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。