解读HTML 单东林 2012年07月 UED分享 · 交流 http://cssrain.github.io 

1，选择什么样的DOCTYPE 2，什么是名字空间 3，定义语言编码 4，调用样式表 5，head区的其他设置 6，XHTML代码规范 7，校验及常见错误 内容： 

1，选择什么样的DOCTYPE 

先看几个网页 

DOCTYPE是什么 DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏 览器就根据你定义的DTD来解释你页面的标识，并展现出来。 XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合 xhtml的写法)。 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用 这种DTD。 

回过头再看看 

我们应该选择什么样的DOCTYPE 对于XHTML1.0来说，理想情况当然是严格的DTD，但对于我们大多数刚接触web标 准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种 DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 HTML5 的出现，让我们有了新的选择，可以直接像淘宝一样选择： 注：“表现层的标识、属性”是指那些纯粹用来控制表现的tag，例如用于字体的 font、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现 表现形式，我们过渡的目的是最终实现数据和表现相分离。 

2，什么是名字空间 

名字空间 这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。 名字空间是什么作用呢？ 由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能 相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了 避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别 你的标识。 XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要 定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同， 就是http://www.w3.org/1999/xhtml。 

3，定义语言编码 

编码语言 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的 编码语言，根据你的需要定义。 但是要补充说明的是，XML文档并丌是这样定义语言编码的，XML的定义方式如下： 注意：这是W3C推荐使用的定义方法。那为什么我们丌直接采用这种方法呢？原因是一些 浏览器对标准的支持丌完善，丌能正确理解这样的定义方法，比如IE6/windows。所以在 目前过渡方案下，我们依然推荐使用meta方式。 

4，调用样式表 

调用样式表 是指将CSS样式编码写在HTML标签中，利用 HTML 属性 style 来设一个 行内样式，格式如下:

它是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制 多个页面，所以我们只是在调试CSS代码的时候使用。 • 行间样式表 • 内部样式表 • 外部样式表 把CSS代码写在HTML页面中，格式如下： h1{font-size:12px; color:#000FFF }

Test

内部样式表不能达到跨页面使用所以不适合使用，但首页有时可以用。 将CSS样式代码单独放在一个外部文件中，可由多个网页调用。 

5，head区的其他设置 

head区的其他设置 1、收藏夹小图标 首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌 入head区： 2、为搜索引擎准备的内容 允许搜索机器人搜索站内所有链接： 设置站点作者信息： 设置站点的简要介绍(推荐)： 设置站点的关键词(推荐)： 

head区的其他设置---移动终端 3、 my.manifest: # Version 1 my.html my.css my.js my.png 4、 width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放 注意：为了离线缓存，你还需要修改服务器 上的 content-type 头文件。在 Apache 中， 你要么将这些放在设置文件中，要么放在一 个 .htaccess 文件中。 AddType text/cache-manifest manifest 

head区的其他设置—兼容性 X-UA-Compatible是针对ie8+新加的一个设置，为了避免制作出的页面在IE8+ 下面出现错误，建议直接将IE8+使用IE7进行渲染。 

6，XHTML代码规范 

XHTML代码规范 1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写 3.所有的XML标记都必须合理嵌套

/b>

4.所有的属性必须用引号“ “ 括起来 

XHTML代码规范 5.把所有<和&特殊符号用编码表示 任何小于号（<），不是标签的一部分，都必须被编码为& l t ; 任何大于号（>），不是标签的一部分，都必须被编码为& g t ; 任何与号（&），不是实体的一部分的，都必须被编码为& a m p; 6.给所有属性赋一个值 7.不要在注释内容中使“--” 

7，校验及常见错误 

XHTML代码校验 校验网址：http://validator.w3.org/ 校验方式：网址校验、文件上传校验 XHTML校验常见错误原因对照表： No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。 No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。 end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。 an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。 element "DIV" undefined---DIV标签不能用大写，要改成小写div。 required attribute "alt" not specified---图片需要加alt属性。 required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。 

Q&A 

感 谢 聆 听