web标准.docx

1、web标准1 WEB 标准是什么？ “WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。一般的误区经常把WEB标准说成DIV+CSS。准确的说法应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而 CSS指的是样式表了。 2 采用 WEB 标准开发的好处 2.1节约运营成本 采用WEB标准制作，我们可以做到表现和形式及内容的分离，我们采用XHTML语言来表现(数据)，用CSS来控制(页面元素呈现的)形式。写的好的页

2、面，XHTML 代码中基本上都是用户要看的数据，而其他修饰性的东西，全部由CSS来控制。这样一来(XHTML)页面的体积就大大减小了，这样带宽上的费用就会大家降低了，这个是怎么降低的？ 带宽成本： 页面总K数*pv/天=流量/天 *页面总K 数=总下载量之和通过公式可以看出，页面总K数越小，流量越小；举个例子：首页如果每减少1K，按每天1000万pv 计算，那么每天将会节约10G的带宽流量。 通过公式反推，如果带宽一定的情况下，页面总K数越小，可容纳同时访问的用户就越多。 带宽/页面总K 数=pv *当前pv为同时访问量 人工成本： 通过样式表控制所有的页面元素的表现，假如修改网站的整体风格，

3、你只需要修改一下样式表文件，就可以轻松搞定了。大可不必对页面进行重新编写代码和内容填充。2.2用户友好性 第一类：普通用户(每个访问我们网站的人)； 第二类：搜索引擎； 第三类：更多的设备（手机、PDA、媒体机等） 采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问(显示)页面，且页面的结构清晰，要找的数据可以很方便的浏览到。而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，访问起来很友好，很容易理解页面中哪里是标题(H1H6标签)，哪里是段落(p 标签)，哪里是段落里要强调的内

4、容(strong标签) 等，它可以很容易的分析出来。而一个SEO好的站点，被搜索引擎收录的机会更多，这个也意味着会被更多的普通用户访问到，搜索引擎会带来更多的用户。随着智能手机的大量普通及Wifi 配置渐渐成为主流，手机上网需求变得越来越迫切，以使我们也不得不考虑到页面在手机上的显示，对于当前标准化形式下，基于标准，将是可行之道！ 2.3内容跨平台的可用性 通过将内容与设计进行分离的方法，可以使信息以较低的成本实现跨平台的转换。 2.4加快页面解析速度 通过实际测试证明，采用内容与设计分离的结构进行页面设计，可使浏览器对网页的解析速度大幅提高，相对于老式的内容与设计混编的方法，浏览器在解析中可

5、以更好的解析结构、内容和设计。 2.5更良好的用户体验 采用表现与内容分离技术使我们在建设网站时，能够充分的对网站的内容、设计统一性、可用性进行思考与设计，从而提高网站的可用性，改善用户体验及印象。同时更加适用于在web 2.0浪潮中不断变化的互联网形态。3 名词解释 1. 横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切2. 留白两个容器或碎片之间的上、下、左、右的空白距离3. 继承元素可以从其父级元素中获得一些可为自己使用的属性或值。4. 图片定位把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图5.

6、 底图页面中在标签中使用的背景图6. 齐底(图)线用于区分横切或碎片结束的线或图7. 页面结构页面的基础框架，由横切、布局元素组成8. 焦点区(图)最易注意的区域 9. 导航 在页面中具有导向性的链接集合 10. 头图 页面主题图片11. 间距 碎片或文字间的距离12. 行高文字段落中行与行之间的距离13. 首行缩进文字段落首行缩进14. 浮动使被定义的区域脱离正常的页面文档流15. 碎片由文字、图片组合成的内容区域16. 通栏广告与页面内容区同宽的广告区域17. 功能按钮具有交互属性的按钮18. 私有样式当前页面独立使用的样式，不具备公用性19. 水平(垂直)居中在页面中的某个元素处于父级的

7、上下或左右的相同距离20. 标准头(尾)定义相同的页面头或尾元素集合4 常用技术术语 1. 浮动：float2. 宽：width3. 高：height4. 块元素：block5. 背景：Background6. 无序列表：ul7. 链接 ：a8. 表单：form9. 图片：img10. 段落：p11. 文档类型定义:DTD12. 字体：font-family13. 字号：font-size14. 边框：border15. 文字对齐：text-align16. 行高：line-height17. 字色：color18. 背景不循环：no-repeat19. 内边距:padidng20. 外间距：

8、margin21. 显示方式：display22. 悬停:hover23. 文字修饰：text-decoration24. 上：up25. 底:bottom26. 左：left27. 右：right28. 自动：auto29. 粗体:bold30. 正常：normal31. 对象的定位方式 position5 一些约定 虽然CSS 算不上是程序语言，但是程序语言的命名规则却为CSS所用。良好的命名习惯，对一个WEB标准网站的开发来说，必将事半功倍。 我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。 1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；

9、2. 样式名尽量语义化或简写； 3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword； 4. 使用px(像素)为基本计量单位； 5. 页面中空格的使用：全角：中文空格 半角；  6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 7. 减少DIV的嵌套层数； 8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title； 9. 使用正确的注释方法（详见“注释”章节）； 10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等； 11. 双标记签都要有开始和结束标签，单标记标签的

10、后面一定要加“ /”,例如：等，并且有正确的层次；12. 其它特殊符号： 1) (>)6 命名空间 6.1外挂样式名称 全局：public.css 全局样式为全站公用，为页面样式基础，页面中必须包含。 结构：layout.css 页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。 私有：style.css 独立页面所使用的样式文件，页面中必须包含。 模块 module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。 默认 default.css文章 article.css图片 photo.css下载 soft.css主题 themes.c

11、ss 实现换肤功能时应用。 补丁 mend.css 基于以上样式进行的私有化修补。6.2 常用名称 (1)页面结构容器: container页头：header内容：content/container/content(A)页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center浮左浮右：fl fr清除浮动 clear(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单

12、：menu子菜单：submenu标题：title摘要：summary路径：path(3)模块化命名模块头部：hd模块内容部分：bd模块底部：ft(4)各内容页对应标题：title副标题：subtitle属性：properties简介：infor内容：content分页：page插入广告：insert_ad表情：expression功能选项：options上下篇：up_down评论：comments相关内容：related下载地址：download播放地址：play_add(5)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search日

13、期：date功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的：current小技巧：tips图标：icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright7 基本设置-public.css 7.1 全局设置 上下边距(margin、padding)：0(px) 左右边距(margin)：auto(自动) 底色(background):#FFF(白色) 字体(fon

14、t-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ bodymargin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋体; div,form,ul,ol,li,span,p,dl,dt,dd,imgmargin:0;padding:0;border:0;h1,h2,h3,h4,h5,h6margin:0;padding:0;font-size:12px;font-weight:normal;ul,ol,lilist-style:nonetable,

15、td,input,textareafont-size:12px7.2 页面标签初始化设置 1. 常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img设置基本标签的间距、边框默认值为0。2. h1h6标题默认标题内字号12px，内外间距为0px，文字不加粗。3. ul,ol,li 列表默认不显示项目符号。4. h2 栏目标题说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5. 默认链接颜色常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。7.3 页面

16、宽度 默认页面宽(命名规范)：按栅格化进行7.4 .clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法方法一.clear clear:both; height:0; font-size:0; line-height:0或.clear border-top: 1px solid transparent !important;margin-top: -1px !important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;

17、visibility: hidden;或.clearclear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0使用方法: 方法二.clearzoom:1;.clear:after clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content: .; 或.claerheight:auto; _height:200px; mi

18、n-height:200px; verflow:auto; zoom:1; _overflow:visible;使用方法:送水送气 送花服务 宾馆住宿 家电维修 餐饮电话 电脑网络 7.5 自定义属性 1. 文字列表 ： (样式名)用于文字列表，区分为两种字体(12px/14px)，默认行内间距上下3px。 2. 图片列表 ：(样式名)用于组图型碎片，默认具有claar属性，容器内img、span标签为块级元素,并清除图片上下外间距 3. 图文混排： (样式名)碎片内使用、区分图片及文字，默认形态为左图右文，且图片与文字间距为10px。 4. 文字类：加粗(b)、arial 字体(.fontA

19、rial) 处理局部应用 5. 浮动： (fl/fr)用于构建页面框架 6. 留白: (blank5/blank8)设定页面中留白高度为5px、8px两种7.6 完整代码 /* 全局CSS定义 */ bodytext-align:center;margin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋体; div,form,ul,ol,li,span,p,dl,dt,dd,imgmargin:0;padding:0;border:0; 需要举例说明 8 框架设置8.1 约定 1. 横切结构样式为area，所有横要带有id，名称：contentA,contentB 2. 结构元素使用div标签，标签嵌套注意层级关系，如： 8.2 说明 8.2.1 栏间留白 三栏时定义中间栏，多栏定义时从第二栏开始定义。 8.2.2 横切留白 横切间留白，在下一个横切中定义，如：margintop:10px基本碎片形式