W3C规范学习

时间 2019-11-18

标签 w3c 规范学习栏目 C&C++ 繁體版

原文原文链接

w3c：万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。
W3C组织是对网络标准制定的一个非赢利组织，W3C是万维网联盟的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。html

W3C网页标准不是一个标准，而有W3C万维网联盟组织起草和发布的一系列标准的集合。web

W3C网页标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。浏览器

对应的标准也分三方面：服务器

1.结构化标准语言主要包括XHTML和XML；网络

2.表现标准语言主要包括CSS；框架

3.行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。ide

出现问题：
1. 网页代码的错乱、网页页面显示误差；
2. 针对各类浏览器的动态JS特效，忽略了部分潜在用户；
3. 移植性差的代码，残障人士没法顺利浏览网站内容等。工具

如何符合w3c规范？布局

一、确保全部的标签都使用小写字母学习

二、确保全部的属性值都放在引号里

三、确保全部成对标签出现的顺序、不成对的标签都用/>结束, ”/”和”>”之间不要有空格

如何让你的站点标准起来,怎么改善现有网站

咱们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一块儿的方式来创建网站。学习使用XHTML+CSS的方法须要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是按部就班，分阶段来逐步达到彻底符合网站标准的目标。若是你是新手，或者对代码不是很熟悉，也能够采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

1．初级改善

* 为页面添加正确的DOCTYPE

不少设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来讲明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。因此，若是你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)严格型（Strict ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(3)框架型（Frameset ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于咱们初级改善来讲，只要选用过渡型的声明就能够了。它依然能够兼容你的表格布局、表现标识等，不至于让你以为变化太大，难以掌握。

Tip:你懒得输入上面过渡型代码的话，能够访问http://www.macromedia.com/网站的首页，而后查看源代码，把head区一样的代码拷贝粘贴就能够了。

* 设定一个名字空间（Namespace）

直接在DOCTYPE声明后面添加以下代码：

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明容许你经过一个在线地址指向来识别你的namespace。只要照样输入代码就能够。

* 声明你的编码语言

为了被浏览器正确解释和经过标识校验，全部的XHTML文档都必须声明它们所使用的编码语言。代码以下：

这里声明的编码语言是简体中文GB2312，你若是须要制做繁体内容，能够定义为BIG5。

* 用小写字母书写全部的标签

XML对大小写是敏感的，因此，XHTML也是大小写有区别的。全部的XHTML元素和属性的名字都必须使用小写。不然你的文档将被W3C校验认为是无效的。例以下面的代码是不正确的：

正确的写法是：

<title>公司简介</title> 一样的，<P>改为<p>，<B>改为<b>等等。这步转换很简单。

* 为图片添加 alt 属性

为全部图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样作对正经常使用户无关紧要，但对纯文本浏览器和使用屏幕阅读机的用户来讲是相当重要的。只有添加了alt属性，代码才会被W3C正确性校验经过。注意的是咱们要添加有意义的alt属性，象下面这样的写法毫无心义：

正确的写法：

* 给全部属性值加引号

在HTML中，你能够不须要给属性值加引号，可是在XHTML中，它们必须被加引号。

例：height="100"，而不能是height=100。

* 关闭全部的标签

在XHTML中，每个打开的标签都必须关闭。就象这样：

<p>每个打开的标签都必须关闭。</p> <b>HTML能够接受不关闭的标，XHTML就不能够。</b>这个规则能够避免HTML的混乱和麻烦。举例来讲：若是你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的同样显示。须要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们本身。例如：<br /> <img src="webstandards.gif" />

通过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但咱们还须要校验一下是否真的符合标准了。咱们能够利用W3C提供免费校验服务（http://validator.w3.org/）。发现错误后逐个修改。在后面的资源列表中咱们也提供了其余校验服务和对校验进行指导的网址，能够做为W3C校验的补充。当最后经过了XHTML验证，恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧！

2．中级改善

接下来咱们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，咱们须要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都须要花点时间的，不是吗？诀窍在于边作边学。假如你一直采用表格布局，根本没用过 CSS，也没必要急于跟表格布局说再见，你能够先用样式表代替 font 标签。随着你学到的越多，你能作的就越多。好，一块儿来看看咱们须要作哪些事：

* 用CSS定义元素外观

咱们在写标识时已经养成习惯，当但愿字体大点就用<h1>，但愿在前面加个点符号就用<li>。咱们老是想< h1>的意思是大的，<li>的意思是圆点，<b>的意思是“加粗文本”。而实际上， <h1>能变成你想要的任何样子，经过CSS，<h1>能变成小的字体，<p>文本可以变成巨大的、粗体的， <li>可以变成一张图片等等。咱们不能强迫用结构元素实现表现效果，咱们应该使用CSS来肯定那些元素的外观。例如，咱们可使原来默认的 6级标题能够看起来大小同样：

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

* 用结构化元素代替无心义的垃圾

许多人可能历来都不知道HTML和XHTML元素设计本意是用来表达结构的。咱们不少人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：

句子一<br /> 句子二<br /> 句子三<br />

若是咱们采用一个无序列表代替会更好：

你或许会说“可是<li>显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你彻底能够用CSS关掉圆点。

* 给每一个表格和表单加上id

给表格或表单赋予一个惟一的、结构的标记，例如

接下来，在书写样式表的时候，你就能够建立一个“menu”的选择器，而且关联一个CSS规则，用来告诉表格单元、文本标签和全部其余元素怎么去显示。这样，不须要对每一个<td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只须要一个附着的标记（标记 “menu”的id标记），你就能够在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善咱们这里先列主要的三点，但其中包含的内容和知识点很是多，须要咱们逐步学习和掌握，直到最后实现彻底采用CSS而不才用任何表格实现布局。

创建网站标准的目的就是：
1. 简化HTML代码，下降网站建设的成本；
2. 保证网站在长期互联网环境中能有效；
3. 增强网站的兼容性，能适应不一样的网络设备和网络终端。
而后，咱们看看遵循标准对浏览者的好处：
1. 浏览者能够根据需求定制本身想要的表现形式；
2. 网页内容能够被更多的特殊人群所浏览（包括色盲、视弱等）；
3. 网页的加载速度会明显提高；
4. 浏览者没必要专门为一个网页去下载另外一个浏览器浏览，保持了网页在各类浏览器中的兼容性；
5. 网页有适用于打印的版本。

最后，来讨论一下对站长和企业的好处：1. 容易被搜索引擎所抓取；2. 网络带宽要求降低，节省服务器成本；3. 提升网站的可移植性，可扩展性，可塑性；4. 客户体验上升，从而吸引更多用户驻足您的网站，给您带来更多的效益。