16CSS命名规范 185724

HTML规范(HTML specification)

在书写html时规范化的意义是什么

• 减少不必要的错误

• 便于团队合作(cooperation)

  ​ 代码工程的全过程中,仅凭一个人的力量是力不从心的,永远要团队作战,那么代码的规范,是团队配合的重要一环

• 所有的HTML代码都使用小写

  编码

• 页面编码采用GBK,在系统允许的前提下可以使用UTF-8

  • 文字编码可以理解为电脑的二进制的具体一个数字00001111对应哪个中文.而utf-8,gbk就是其中的对应方式,由于特性与历史遗留问题,这些对应方式,还不能完全100%统一.

  • 图片

• 内容性质的图片加上alt

  • 这个好理解,综旨是让内容更清晰的传达出去
  • 方便盲人阅读
  • 方便搜索引擎识别(identify)

签名

• 在head中添加对页面相关人员团队的注释.
  
  • 将任务与具体人员挂勾,以便定位更多与这个作者相关的事宜安排
  • 以便出问题时快速找到作者进行调整,因为他最熟悉
  • 离职交接
  • 责任划分

<!--页面设计:xxx|页面制作:xxx|团队博客:http://www.xxx.com/-->

html注释

• 注释的要求

  • 醒目
  • 可以精简可以详细,具体形式依据团队风格而定.具有明确的作用
  • 详尽的注释,更让人能读懂代码
  • 精简的注释,让代码整体结构更清晰,让错误无处藏身.

• ie条件注释—判断不同的ie 版本,显示不同的内容,,,针对浏览器兼容性问题的解决方案.

  • http://www.zcool.com.cn/article/ZNDAyMjE2.html
  • 判断为低版浏览器后的两个解决方案
  • “对不起,你的浏览器版本过低,为了本站对您的服质,请尽快升级浏览器+升级链接”
  • 提供相应版本的浏览器的样式方案,采用古老通用的技术实现相同的效果
    
    • 具体为在同一效果上进行条件判断,
    • 如果为某些低版本浏览器,用a样式方案
    • if 版本高,则显示为b方案.

IE下判断IE版本的语句...[if lte IE 6]……[endif]
------------------------------以ie6为分水岭
<!--[if IE 6]> 
<![endif]--> 
只有IE6版本可见 
<!--[if lte IE 6]> 
<![endif]--> 
IE6及其以下版本可见 
<!--[if gte IE 6]> 
<![endif]--> 
IE6及其以上版本可见 
------------------------------以ie7为分水岭
<!--[if IE 7]> 
<![endif]--> 
只有IE7版本可见 
<!--[if lte IE 7]> 
<![endif]--> 
IE7及其以下版本可见 
<!--[if gte IE 7]> 
<![endif]--> 
IE7及其以上的版本可见 
-----------------------------以ie8为分水岭
<!--[if IE 8]> 
<![endif]--> 
只有IE8版本可见 
<!--[if lte IE 8]> 
<![endif]--> 
IE8及其以下的版本可见 
<!--[if gte IE 8]> 
<![endif]--> 
IE8及其以上的版本可见 
<![if !IE]> 
<![endif]> 
----------------------------

• 单标签不要写/ 闭合,声明为html5页面会息动处理

  • 具体单标签(Single-label)有img,br,hr,input,meta.link
  • 记住每个标签后面都不要跟反斜杠了

• 对标签的特性熟悉,不同的内容合理选择标签

  • http://www.divcss5.com/html/h661.shtml

  • 1、框架布局（使用DIV标签）

  • 2、列表型布局（使用ul li标签）

  • 3、标题型布局（使用h1、h2、h3、h4标签）

  • 4、内容独立样式型（使用span）

  • 5、功能型布局(img、b、strong、u、s等标签)

  • 6、段落（p标签）

  • 7、手动强行换行布局(br标签)

  • 8、表格型（table表格标签）

  • 9、表单布局（form、input等）

  • 详细规定input的类型有利于相应第三方程序做适配

  • 

  • 鼠标光标(cursor)悬浮带小手,多选用a标签

  • 小图标用i标签!

  ​

CSS命名规范

• 避免使用id来调节样式

  • CSS (Cascading Style Sheets)的优势就在于一次编写,处处使用,而id 与这个优势违背

• 以字母开头

  • 不允许单个字母(letter)

• 单词之间的连接

  • 用减号连接,省事
  • css书写的一些规范,行内的习惯!!最好不要用驼峰—可以用做视觉区分,当看到驼峰,立刻可以知道是js 里面的布局

• css导入文件的命名

  • 基本文件叫 base.css
  • 全局样式 global.css
  • 布局样式 layout.css
  • 字体样式 font.css

  css文件命名：
  
  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局，版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
  补丁 mend.css
  打印 print.css

  ​

  见名知意命名法

  常用id的命名：
  
  页头：header
  登录条：loginbar
  注册：regsiter
  标志：logo
  侧栏：sidebar
  广告：banner
  导航：nav
  子导航：subnav
      菜单：menu
          子菜单：submenu
              搜索：search
              滚动：scroll
  页面主体：main
  内容：content
      图标: icon
      显示当前所在位置：breadcrumbs
      标签页：tab             
          文章列表：list
              提示信息：msg
              小技巧：tips
  
              栏目标题：title
                  加入：joinus
                  指南：guild
                  服务：service
                  热点：hot
                  新闻：news
                      下载：download

                  状态：status
  
                  按钮：btn
  
                  投票：vote
  

  页脚：footer
  合作伙伴：partner
  友情链接：friendlink
  版权：copyright

  “`

  ​

• 属性书写顺序,慢慢总结

  • 先总后细
  • 先大后小

类名的组合使用

“`

这个div即是a类也是c 类, 加类名的方法是在原有的双引号里 括格,写第二个类名.

<div class="a c"></div>