日期:2014-04-12  浏览次数:21019 次

  Web标准把网页分成三个独立组成部分:

  * 结构:HTML,XHTML,XML

  * 表现:CSS1,CSS2

  * 行为:ECMAScript, DOM

  Web标准至今汉有对外观审美做任何指点方针和戒律,对站点的外观和感觉没有做任何限制,它们只不过使浏览器能够正确地表现设计师创建的站点,协助客户依据公司的市场需求和用户分析来制定目标。

  Web标准可以做到:

  * 在图形浏览器上更精确的控制、定位和排版

  * 复杂的交互行为

  * 可访问性

  * 支持多种浏览器

  * 新、旧浏览器都可以任务

  * 保证可以任务在将来的旅游器上

  * 重新设计网站时间缩短

  * 支持非传统设备

  * 易为任何网页提供适合打印的版本

  * 在发布流程中易重新设计文档

  * HTML转换到XML基础的置标言语

  使用web标准的缘由:

  * 加强交互能力

  * 加强可访问性

  * 减少维护任务量

  * 减少带宽

  * 降低成本

  XHTML是一个基于XML的置标言语,看起来与HTML有些想像,只要一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似HTML的角色的XML。

  本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功用及HTML(大多数)的简单特性。

  ----Jeffery Zeldman

  切换到XHTML的10个理由:

  * XHTML是当前替代HTML4标记言语的标准。

  * XHTML是能与其它基于XML的标记言语、使用程序及协议进行良好的交互任务。

  * XHTML比HTML有更好的分歧性。

  * XHTML1.0是通向XHTML未来版本的桥梁

  * 老的浏览器能顺应XHTML

  * 新浏览器都优待XHTML而不是HTML

  * XHTML能很好在无线设备等其它用户代理上。

  * XHTML是Web标准家族的一部分

  * XHTML可助你去掉表现层代码的恶习

  * XHTML可助你养成标记校验来测试页面任务的习惯

  XHTML规则:

  * 以正确的DOCTYPE和名字空间开始

  * 使用META内容元素声明你的内容编码言语

  * 用小写字母写所有元素和属性名称

  * 给所有的属性值加引号,属性间以空格分隔。

  * 给所有的属性赋一个值

  * 关闭所有标签

  * 用空格和斜线关闭空标签

  * 不要在注释内容中使用"――"

  * 确保使用<和&表示< 和 & .

  XHTML1提供的DTD有三种:

  * Transitional,过渡的,最宽松的DTD,独一容忍表现层的标记、垃圾元素和属性的DTD

  * Strict,严厉的,

  * Frameset,框架的,

  XHTML声明内容编码的方法:

  * XML prolog,即,但浏览器多不处理此

  * 中插入Content-Type元素指定编码言语,

  * 通过web服务器上前往的HTTP头部设置编码言语,w3c推荐这种方法。

  添加结构的通用机制

  * DIV和SPAN元素,联合id和class属性,提供了一个把结构添加到文档的通用机制。

  * 这些元素定义了内置的内容(SPAN)和者块级别(DIV),而没有在内容中引入其它表现层的东西。

  * ID属性类似于代码中的特殊区域的标签,提示那个区域需求特殊的处理。当一个ID属性值被用于一个特殊设置的CSS,它称为CSS选择器,id是创建一个选择器的最容易和通用的方法。

  * ID的命名须用字母和下划线开头,不能用数字进行开头。

  ID的功用

  * 作为一个款式表选择器,最小化XHTML页面文件;

  * 作为超链的锚(anchor),替代过时的name属性;

  * DOM脚本中援用元素的方法;

  * 作为一个声明的对象元素名字;

  * 作为通常目的流程处理的工具。

  # 一个款式表,是一个集合,一个由一个或多个规则定义组成的集合,这些定义将决定被选中的元素如何被显示。

  # 一个CSS定义由两部分组成:选择器和声明。其中,声明是也是一个集合,集合元素放在一对{}内,每一元素以";"结束,每个元素由两部分组成:属性和值,属性和值之间用": "分隔。

  # 以#开头的选择器,为id选择器,以.开头的选择器为选择器。

  # 多个选择器可以共享同一声明,这时不同选择之间以逗号分隔。

  # 依据CSS,页面的子元素从母元素承继特性,但有些旧浏览器不支持(如Netscape 4)。如果不想让子元素承继母元素特性,则子元素可自在定义相关属性。

  # CSS不区分大小写,但当与一个HTML文件关联时,类别和id名称是区分大小写的。

  # 为了便于编辑CSS,可以添加一些空格或换行符。

  # 款式表可以通过三种方式作用于页面的显示

  1. 外联/导入

   <link rel="StyleSheet" href="/styles/mystylesheet.css" type="text/css" media="all />

  或

  <style type="text/css" media="all">
  @import "/styles/mystylesheet.css";
  </style>

  或

  <style type="text/css" media="all">
  @import url("/styles/mystylesheet.css");
  </style>

  注:@Import 法只要5.0以上的浏览器支持

  2. 嵌入(在XHTML页面head位置嵌入)

以下是援用片段:
<head>
<style type="text/css">
<!-

-->
</style>

</head>

  使用嵌入的缘由:

  * 该款式表只用于本页面

  * 用户还在使用IE3

  * 设计师不断修正款式表,需求立即看到效果

  3. 内联(在元素上加上款式属性)

  为整个站点指定字体:

  * body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; }

  * 由多个字母组成的字体名称须用引号包括;

  *