HTML和CSS命名规范

html/css命名规范:

有规范才能统一,才能更好的交流,命名不但要自己能看懂,还要别人也能很容易明白。所以,有一个规范的命名规则是很重要的.

  1. 所有的命名最好都小写
  2. 属性的值一定要用双引号("")括起来,且一定要有值
  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

重置样式:reset.css /normalize. css

猜你喜欢

转载自blog.csdn.net/qq_40995162/article/details/83693001