【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

时间: 2024-08-03 19:18:44

【html/css】html/css命名规范的相关文章

css的一些命名规范

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值

CSS+DIV标签命名规范 搜索引擎最喜欢

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则: 登录条:loginBar  标志:logo  侧栏:sideBar   广告:banner   导航:nav   子导航:subNav   菜单:menu   子菜单:subMenu   搜索:search   滚动:scroll   页面主体:main   内容:content   标签页:tab   文章列表:list   提示信息:msg   小技

CSS命名规范

html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:

常用html、CSS、javascript前端命名规范

常用html.CSS.javascript前端命名规范 无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下. 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本

css命名规范[来自网络]

1.css命名规范: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 抽奖:raffle广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friend

css命名规范和书写规范

1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等) CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,mar

Html+CSS命名规范:

 Html+CSS命名规范: 1.样式命名: 2.样式文件命名: 数据库命名规范(Oracle表名长度不要超过30个字符,sql不限制): 1.数据库命名: 2.数据表命名:架构名+产品名+模块名.如:Report.Rept_ReportTemplateData 3.数据列命名:

项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr

CSS命名规范参考及书写注意事项

CSS书写顺序 *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align - /*文字*/ color font content /*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈.*/