解读HTML

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

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

1，选择什么样的DOCTYPE

先看几个网页 <!Doctype html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/x html1-transitional.dtd">

DOCTYPE是什么 DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。 XHTML 1.0 提供了三种DTD声明可供选择：过渡的(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"> 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

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

2，什么是名字空间

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

3，定义语言编码

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

4，调用样式表

调用样式表是指将CSS样式编码写在HTML标签中，利用 HTML 属性 style 来设一个行内样式，格式如下: <h1 style="font-size:12px;color:#000FFF"> 它是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制
多个页面，所以我们只是在调试CSS代码的时候使用。 • 行间样式表 • 内部样式表 • 外部样式表把CSS代码写在HTML页面中，格式如下： <style type="text/css"> h1{font-size:12px; color:#000FFF } </style> <h1>Test</h1> 内部样式表不能达到跨页面使用所以不适合使用，但首页有时可以用。将CSS样式代码单独放在一个外部文件中，可由多个网页调用。 <link rel="stylesheet" rev="stylesheet" href="style.css">

5，head区的其他设置

head区的其他设置 1、收藏夹小图标首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区： <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link
rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 2、为搜索引擎准备的内容允许搜索机器人搜索站内所有链接：<meta content="all" name="robots" /> 设置站点作者信息：<meta name="author" content="ajie@netease.com,阿捷" /> 设置站点的简要介绍(推荐)： <meta name=“description” content=“web标准的教程站点" /> 设置站点的关键词(推荐)： <meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

head区的其他设置---移动终端 3、<html manifest="my.manifest"> my.manifest: # Version 1 my.html my.css my.js
my.png 4、<meta name="viewport“ content="width=device-width, initial- scale=1, maximum-scale=1“ > 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区的其他设置—兼容性 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> X-UA-Compatible是针对ie8+新加的一个设置，为了避免制作出的页面在IE8+ 下面出现错误，建议直接将IE8+使用IE7进行渲染。

6，XHTML代码规范

XHTML代码规范 1.所有的标记都必须要有一个相应的结束标记 <br> <br /> 2.所有标签的元素和属性的名字都必须使用小写 <BODY> <body> 3.所有的XML标记都必须合理嵌套 <p><b></p>/b>
<p><b></b></p> 4.所有的属性必须用引号“ “ 括起来 <input type=button /> <input type=“button” />

XHTML代码规范 5.把所有<和&特殊符号用编码表示任何小于号（<），不是标签的一部分，都必须被编码为& l t ; 任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p; 6.给所有属性赋一个值 <input type="checkbox" checked> <input type="checkbox" checked=“checked”> 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属性。

感谢聆听

解读HTML

解读HTML

cssrain

More Decks by cssrain

Other Decks in Technology

Featured

Transcript

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

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

1，选择什么样的DOCTYPE

先看几个网页 <!Doctype html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

回过头再看看 <!Doctype html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

2，什么是名字空间

3，定义语言编码

4，调用样式表

调用样式表是指将CSS样式编码写在HTML标签中，利用 HTML 属性 style 来设一个行内样式，格式如下: <h1 style="font-size:12px;color:#000FFF"> 它是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制

5，head区的其他设置

head区的其他设置 1、收藏夹小图标首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区： <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link

head区的其他设置---移动终端 3、<html manifest="my.manifest"> my.manifest: # Version 1 my.html my.css my.js

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

6，XHTML代码规范

XHTML代码规范 1.所有的标记都必须要有一个相应的结束标记 <br> <br /> 2.所有标签的元素和属性的名字都必须使用小写 <BODY> <body> 3.所有的XML标记都必须合理嵌套 <p><b></p>/b>

XHTML代码规范 5.把所有<和&特殊符号用编码表示任何小于号（<），不是标签的一部分，都必须被编码为& l t ; 任何大于号（>），不是标签的一部分，都必须被编码为& g t ;

7，校验及常见错误

XHTML代码校验校验网址：http://validator.w3.org/ 校验方式：网址校验、文件上传校验 XHTML校验常见错误原因对照表： No DOCTYPE Found! Falling Back to

Q&A

感谢聆听