|
开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。 在XHTML中我们必须声明文档的类型，以便于浏览器知道你的文档是什么类型的，而且声明部分要加在文档的head之前。如： <!DOCTYPE Doctype goes here> 注:DOCTYPE声明不是 XHTML 文档的一部分，它也不是文档的一个元素，所以我们没必要加上结束标签。XHTML属性都是在<html>标签里面。然而当我们在w3.org验证时，并不解释我们的文档有没有声明类型。这是因为"xmlns=http://www.w3.org/1999/xhtml"是一个固定的值，如果你没声明的话，它也会被自动的加到<html>标签前。 我们使用DOCTYPE时的基本机构： <!DOCTYPE ...> DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。 XHTML 1.0 提供了三种DTD声明可供选择： 1、过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 当你需要利用 HTML 的表示特性时，可以使用这种文档类型定义。它支持大部分标准的 HTML 4 标记和属性。 2、严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 当你想要真正清晰的标记、避免表示上的混乱时，将此与 CSS 一起使用。已经从该语言中除去了几个标记（如 <center> ），甚至还除去了其它标记的某些属性（如 H1 标记的 align 属性）。 3、框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 用于框架页的定义，注意，其他的xhtml文档类型是不支持框架页的。 完整的xhtml声明还包含一个xml头。 也就是这个样子：<?xml version="1.0" encoding="UTF-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 在xml头中，定义了页面的文字编码，我们可以看到这段代码说明我们的页面文字编码是全球通用码Unicode UTF-8，如果你做的中文页面有很多国外的华人朋友在看的话，就建议采用这种编码格式，虽然它占用的空间会大一些。 由于微软在对web标准的支持方面说一套做一套，如果我们只在xml头中声明文字编码，可能会让我们的页面在IE6中文字全部都是乱码。所以我们还有必要在head区中加入一个文字编码声明，也就是Content-type。 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 这样完整的文档头信息就成了下面这个样子。 <?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?><! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head> 当然，head区中还有 <title>文档标题</title> 我们平时做网页的时候，对这些内容几乎都是从来不理的，认为它们没什么用，然而，事实上它们给出了文档遵循的规范，让浏览器可以更好的解析和显示我们的网页，所以这些代码是不可缺少的。 如何转换现有的结构为XHTML我们选择什么样的DOCTYPE？理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 我们从现在的HTML转换为XHTML注意以下几点： xhtml和我们之前用的HTML语言不同，它规定了相当严格的规范，而我们必须遵守它。这里就给出主要的规范。 一、在每个页面的首部都加上文档类型的说明。如： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 当然可以选择其他类型的。 二、标记和name 要都用小写，所有属性值必须使用双引号。 如: 顺便说一下，如果你使用PHP来写后台程序的话，为了适应这条规则，那么PHP中的字符串就只能用单引号来括了。 三、关闭所有的元素。 注意：自关闭标签，自关闭标签的意识就是不成对的标签在使用的时候结尾不是简单的用">"号结束，而是要使用"/>"结束，这表示这个标签已经关闭了，而且为了不引起误解，应当用空格把它们和前面的内容隔开。 如： 四、属性不能被缩减: 在HTML里，一些属性可以被缩减。而XHTML则不允许这样做。 如： 五、标签不能交叉。在HTML中，标签的交叉使用是允许的，大多数的浏览器都能自动解析出它们。但xhtml不允许这么做。 如： 六、不要使用被排斥的元素: 一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的，而在XHTML 1.0 Strict下则不被支持(还有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (对于某些元素)和background。 七、我们打开W3C DTD 的官方网站：http://validator.w3.org/check/referer，验证时一般错误可能会出现在你的标签嵌套里。也可以用官方网站提供的转换工具tidy来实现转换：http://www.w3.org/People/Raggett/tidy/，我不建议大家直接来使用该工具来验证，因为我们毕竟是新学XHTML我们还是自己转换，这样我们可以熟悉XHTML啊，再者说我们还要学习tidy工具的使用，那样也是比较麻烦的。 八、我们直接打开下面的页面可以直接输入网址来验证我们的程序了：http://webjx.com/js/standard.htm 注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。 打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。 补充DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。 举例说明DOCTYPE对CSS及JS的影响也许你已经发现选用或不用DOCTYPE对你的页面的影响是非常大的，甚至对于不同浏览器结果也不一样。下文以对一段javascrīpt的影响说明： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 上文页面是通过按aa超链接表现javascrīpt控制div的高度，读者可以自己试一下 1. IE浏览（我用的是IE 6），content的高度会变大，同时alert出height:360，offsetHeight:362 2. firefox，content的高度不会变，同时alert出height:60，offsetHeight:62 3. 去掉最上面的一句<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 我曾看到好多人运行到这里就会得到一个结论去他的DOCTYPE，用了它好多东西都不对了。我以为不是这样的，DOCTYPE定义了一个规范集，去检验你代码的正确性规范性，去掉了DOCTYPE也许只会在你当前机器上的浏览器正确运行，也就是说你的程序不能做到通用，难道这是你追求的吗？这时你会说那上面的问题怎么办呢，难道在firefox就不能那么做吗？回答是当然可以，仔细看一下上面的代码其实是有问题的，在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">标准中对象的高度、大小必须指定单位的如px,pt等，如果不指定那就要依赖于应用浏览器的默认或支持情况了，因此修改代码如下： <scrīpt>
运行一下看看是不是对了呢？ 定义DOCTYPE是个好习惯，也希望大家能写出标准规范的代码。 制作流程图片设计--内容模版页制作--CSS样式设计--后台程序制作 由于风格设计与内容制作分离，风格设计和后台程序制作是可以分离同步进行的。这也比传统的图片设计-页面（内容加样式）-连接后台程序这样的流程效率要高。 附加一节：Block Element和Inline Eliment首先，说明一下什么是Block-level Element 这个概念是HTML 4.0中提出的概念。在html中，有一部分元素是在页面中显示为块级的元素，它们最大的特点就是只要是块级元素结束，那么它下面的元素都会跟着换行。 而Inline Element被称为行内元素，它结束后，后面的内容不换行，会跟着它继续显示。 http://www.htmlhelp.com/reference/html40/block.html 这个页面中列出了大多数的块级元素。 注意在xhtml中用的时候它们都要是小写的。 所谓的语义网在这时候就体现出来了，仔细看这些标签，所有的标签都有它们自己的含义和用途。我们现在做网站的时候其实根本不管这些，完全是在乱用它们。 此外，注意后面的注解是灰色的标签，这些标签全都是在xhtml中不被支持的标签。 http://www.htmlhelp.com/reference/html40/inline.html 这个页面中列出了大多数的inline element标签。 它们同样有各自的语义和用途，也用灰色标出了很多在xhtml中不支持（其实是在HTML 4的严格语法中不推荐）的元素。 大家都知道了block-level element和inline element的概念。但之前我们并不关注它，在xhtml中，这个概念才真正得到应用，因为xhtml中规定，block-level element之间可以嵌套，也可以使用block element来包含inline elemtnt，但不可以使用inline element来包含block-level element. 也就是说，<a href="example.htm"><p>段落文字</p></a>这种代码是绝不允许的。 推荐几个可以去看源代码参考的网站。 XHTML 的模块化为什么要模块化设计XHTML呢？XHTML虽然简单，但是它的内容很多，包括了一个网络设计师需要的绝大多数功能。XHTML一方面内容繁多复杂，但是从另一个角度来看它却是非常简单的。为了将XHTML分割成小的模块，W3C已经建立起了小型的已经定义好了的一系列XHTML元素，他们独立的能被与其他XML标准合并成的大型的更复杂的程序的简单设备所使用。 通过XHTML模型，程序设计师能够做如下的事情： 1.选择那些能够被使用XHTML构建块标准的设备所支持的元素。 2.在遵循XHTML标准的同时使用XML可以对XHTML扩展。 3.简单化的XHTML可以应用于像掌上电脑、移动电话、电视和家用电器等设备。 4.通过加入心的XML功能（像声音、多媒体的）将XHTML延续到复杂程序的设计上。 5.像XHTML基本（XHTML对于移动设备的一个子集）那样来定义XHTML的轮廓。 模块名 描述 Applet Module * applet元素. Base Module 定义基本元素. Basic Forms Module 定义基本的表单元素 Basic Tables Module 定义基本的表格元素 Bi-directional Text Module 定义 bdo 元素. Client Image Map Module 定义浏览器的 image map 元素. Edit Module Defines the editing elements del and ins. Forms Module Defines all elements used in forms. Frames Module 定义框架集元素 Hypertext Module 定义 a 元素. Iframe Module 定义 iframe 元素. Image Module 定义 img 元素. Intrinsic Events Module 定义事件改变属性元素 Legacy Module Defines deprecated* elements and attributes. Link Module 定义link 元素. List Module 定义 list 元素 ol, li, ul, dd, dt, dl. Metainformation Module 定义 meta 元素. Name Identification Module Defines the deprecated* name attribute. Object Module 定义object 和param 元素. Presentation Module 定义表现元素如 b 和 i. scrīpting Module 定义 scrīpt and noscrīpt 元素. Server Image Map Module 定义 server side image map 元素. Structure Module 定义结构 html, head, title and body. Style Attribute Module 定义 style 属性. Style Sheet Module 定义style 元素. Tables Module 定义表内应用的元素. Target Module 定义 target 属性. Text Module 定义 text container 元素如： p and h1. * 表示不赞成应用到XHTML中 (责任编辑：admin) |