WEB标准一:标准定义、好处、名词解释、常用术语、命名习惯 – 尐洛

1. WEB标准是什么?

    “WEB标准”是一系列标准的总称。一般的误区经常把WEB标准说成DIV+CSS。准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页面的方法。DIV 应该指的是XHTML标签,而CSS 指的是样式表。

 

2. 采用WEB标准开发的好处

  2.1 节约运营成本

    2.2 用户友好性

  2.3 内容跨平台的可用性

  2.4 加快页面解析速度

  2.5 更良好的用户体验

 

3. 名词解释

  1. 横切

    页面中950px宽并且对高度没有限制的容器称为一个标准横切。

  2. 留白

    两个容器或碎片之间的上、下、左、右的空白距离。

  3. 继承

    元素可以从其父级元素中获得一些可为自己使用的属性或值。

  4. 图片定位

    把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中,利用CSS中对图片进行遮罩属性,多用于页面中的修饰图。

  5. 底图

    页面中在标签中使用的背景图。

  6. 齐底(图)线

    用户区分横切或碎片结束的线或图。

  7. 页面结构

    页面的基础框架,由横切、布局元素组成。

  8. 焦点区(图)

    最易注意的区域。

  9. 导航

    在页面中具有导向性的链接集合。

  10. 头图

    页面主题图片。

  11. 间距

    碎片或文字间的距离。

  12. 行高

    文字段落中行与行之间的距离。

  13. 首行缩进

    文字段落首行缩进。

  14. 浮动

    使被定义的区域脱离正常的页面文档流。

  15. 碎片

    由文字、图片组合成的内容区域。

  16. 通栏广告

    与页面内容区同宽的广告区域。

  17. 功能按钮

    具有交互属性的功能按钮。

  18. 私有样式

    当前页面独立使用的样式,不具备公用性。

  19. 水平(垂直)居中

    在页面中的某个元素处于父级的上下或左右的相同距离。

  20. 标准头(尾)

    定义相同的页面头或尾元素集合。

 

4. 常用技术术语

  1. 浮动: float

  2. 宽: width

  3. 高: height

  4. 块元素: block

  5. 背景: background

  6. 无序列表:ul

  7. 链接: a

  8. 表单: form

  9. 图片: img

  10. 段落: p

  11. 文档类型定义: DTD

  12. 字体: font-family

  13. 字号: font-size

  14. 边框: border

  15. 文字对齐: text-align

  16. 行高: line-height

  17. 字色: color

  18. 背景不循环: no-repeat

  19. 内边距: padding

  20. 外间距: margin

  21. 显示方式: display

  22. 悬停: hover

  23. 文字修饰: text-decoration

  24. 上: up

  25. 底: bottom

  26. 左: left

  27. 右: right

  28. 自动: auto

  29. 粗体: bold

  30. 正常: normal

 

5. 一些约定

  良好的命名习惯,对一个WEB标准网站的开发来说,必定事半功倍。以下是常用的一些命名习惯:

  1. 样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符;

  2. 样式名尽量语义化或简写;

  3. 样式名需要组合拼写时,采用驼峰式拼写,即:KeyWord;

  4. 使用px(像素)为基本计量单位;

  5. 页面中空格的使用:全角:中文空格  半角:  

  6. 项目完成包中,文件及及文件名称全部采用小写字母,不使用中文文件名;

  7. 减少DIV的嵌套层数;

  8. 给重要图片加上alt属性;给重要的元素和截断的元素加上title;

  9. 使用正确的注释方法;

  10. 非特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,如:style,font等;

  11. 双标记签都要有开始和结束标签,单标记标签的后面一定要加”/“ ,如<br/>, 并且有正确的层次;

  12. 其它特殊符号:

    1) < ( &lt; )

    2)  > ( &gt; )

 

 6. 命名空间

  6.1 外挂样式名称

    全局: global.css

      全局样式为公站公用,为页面样式基础,页面中必须包含。 

    结构: layout.css

      页面结构类型复杂,并且公用类型较多时使用。多用在首页类页面及产品类页面中。

    私有: style.css

      独立页面所使用的样式文件,页面中必须包含。

    模块: module.css

       产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。

    主题: themes.css

      实现换肤功能时应用。

    补丁: mend.css

      基于以上样式进行的私有化修补。

 

  6.2 常用名称

    头:header    

    尾:footer

    Logo: logo

    版权: copyright

    内容块:content

    栏目块:column

    结构左:left

    结构中:center

    结构右:right

    矩阵导航:matrixNav

    首页导航:indexNav

    频道二级:channelNav

    导航文字:navText

    内容导航:nav

    内容主导航:mainNav

    子内容导航:subNav

    边导航:sidebar

    左导航:leftsidebar

    右导航:rightsidebar

    广告:ad

    搜索:search

    关键字:keyWord

    标签:tag

    菜单:menu

    滚动:scroll

    列表:list

    下拉:drop

    按钮:btn

    登陆:login

    登陆条:loginbar

    注册:reg

    提示信息:msg

    打印:print

    地图:map

    功能区:shop

    Flash:flash

    标题:title

    更多:more

    博客:blog

    视频:video

    媒体:media

    新闻:news

    热点:hot

    评论:review

    合作:cooperate

    联系:contact

    加入我们:joinUs

    合作伙伴:partner

    友情链接:link

    论坛社区:club

    投票:vote

    摘要:summary

    服务:service

    指南:guild

    描述:description

    信息:info

    状态:status

    注释:note

    下载:download

    价格:price

    地址:address

    产品:products

    跳转:jump

    条:bar

    线:line

    小技巧:Tips

 

7. 基本设置-global.css

  7.1 全局设置

    文字(text-align):align(居中)

    上下边距(margin, padding):0

    左右边距(margin):auto(自动)

    底色(background):#FFF(白色)

    字体(font-family)、字号(font-size)、字色(color):”宋体“ 12px #666

    body 内容整体居中 : body>div 

 

    全局CSS定义

    /* 全局CSS 定义 */
    body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体’;text-align:center;}
    body > div{margin-right:auto;margin-left:auto;text-align:center; }
    div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
    h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
    ul,ol,li{list-style:none}
    table,td,input,textarea{font-size:12px}

 

7.2 页面标签初始化设置

  1. 常用基本标签 div, form, ul, ol, li, span, p, dl, dt, dd, img

    设置基本标签的间距、边框默认值为0.

  2. h1~h6 标题

    默认标题内字号 12px, 内外间距为0px, 文字不加粗。

  3. ul,ol,li 列表

    默认不显示项目符号。

  4. h2 栏目标题

  5. 默认链接颜色

    常态下不显示文字下划线,颜色为灰(#333),鼠标悬浮时:显示文字下划线,颜色变为暗灰(#CCC)

 

7.3 页面宽度

  默认页面宽(area):950px

 

7.4 .clear

  结束容器内各元素的浮动属性,使相邻容器或元素节点正常显示。

 

9.2 推荐样式拼写顺序

  1. 显示与定位: display, position, float, list-style

  2. 元素自身: width, height, margin, padding, border, background

  3. 文本外观:  color, font, line-height, text-align, text-decoration, other

      例:

          .test{float:left;width:950px;margin:10px;background:#fff;color:#000;}  

 

9.3 样式编写规则

  1. 遵循W3C XHTML 代码编写规范

  2. 优先公用样式,其次结构、再碎片,合并相关元素属性,按从大到小排列。

  3. 样式中使用修饰图遮罩方法,将公用图片的样式名称复写定义。

  4. 继承样式定义,多级关系可省略多级父元素名称,至少包含最外层父元素名称,独立碎片除外。

  5. 横切以#contentA,#contentB…定义,且公用样式和横切加注释说明。

  6. 样式定义简写,替除多余空格字符。

 

12 浏览器兼容

  12.1 兼容浏览器及兼容要求

    1. IE浏览器: IE6.0, IE7.0

    2. Firefox浏览器

    3. Opera浏览器

    4. Safari浏览器

    所定义样式语法定义在常用浏览器中显示无结构、颜色、效果差异。

 

  12.3 各版本浏览器HACK / 12.4.1 浏览器兼容的一般写法

    区别各版本浏览器的样式方法,注意样式定义顺序。

    当需要解决浏览器兼容问题时,一般采用下面写法可以解决,如margin问题:

    margin:8px: 正常语法,所有浏览器都能够正常解析

    *margin:9px: 针对IE7.0的特殊写法,只针对IE7.0以上的浏览器有效。

           _margin:10px: 针对IE6.0的特殊写法,只针对IE6.0 以上浏览器有效。

    _margin/**/:10px: 针对IE5.0的特殊写法。 IE6.0不支持,IE7.0支持。

 

  12.4.3 Firefox浮动层背景图不能自动平铺

    嵌套DIV,当子div为浮动(float)时,父div的高度在Firefox不能根据子DIV自动变化。浏览器高度不能自动计算。导致的结果是当父层div有背景色和背景图时不能自动平铺。

    解决办法是:给父层div 添加样式clear 清除浮动,这样父div 就会随子div高度自动计算,如下代码:

    .clear:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

      .

      .

      .

17 代码书写规范

  17.1 注释

    17.1.1 HTML注释

    正确的注释规范:<!– 这里是注释 –> 感叹号后面2个横线,结束时2个横线

    17.1.2 CSS样式注释

    由于 CSS+DIV 制作页面,样式代码多,布局比较复杂,更便于页面后期的维护,更改。所以有必要在样式中加上注释。注释规则如下:

    /* 这里是注释 */

 

  17.2 缩进

    根据页面代码结构进行包含缩进,这样代码层次结构清晰。

  17.3 回车

    同级间结构或碎片代码块之间添加换行。

 

【本文内容摘自:搜狐WEB标准_前端技术应用规范】



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量