Prower's Blog » 网页制作

解读HTML：关于Profile的只言片语

摄氏度 — Sat, 13 Dec 2008 04:43:46 +0000

制作出一个页面其实是很简单的事，但是制作出一个好的页面却是一件挺困难的事，要使一个页面最终能很好的呈现出来，包括在许多未知的环境下都能很好的呈现，这即是一件更困难的事情。在一份基于Web标准的HTML文档中，需要声明很多的规则，比如DOCTYPE声明、xmlns声明等，只有做出了这些声明，网页文档才能更好的在不同的浏览器中最大程度的呈现出一样的效果。

在使用Wordpress程序搭建的博客（其它程序搭建的博客也可能有）的页面代码里会有一句这样的代码：

而当我们在博客的后台添加友情链接时如果标注一下链接关系的话，就能得到这样的代码：

阿猎的SEO博客

在这个链接中的rel=”friend”即是对这个链接的关系声明，声明我与该链接的主人是朋友关系，当然除朋友关系外还有很多其他关系可选，具体请查看XFN1.1。

在之前日志中的声明中我们即可得知，如果没有一份统一的规则约束的话，浏览器们可以根据自己设定的默认样式来呈现网页，呈现出来的效果可能就会有很大的偏差。而对于这种关系网络来说，如果没有一份统一的规则约定的话，就变得没有丝毫的意义，比如你把朋友定义成“frieng”，而我要按照拼音来定义成“pengyou”，这个定义的数据将变得毫无意义。

所以我们在HTML文档的标签中使用“profile”属性引入一个声明，声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式，然后按照这份XFN微格式中约定的方式来描述关系网络，于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系数据。

当然，这其中的微格式数据对于平常通过浏览器来阅读HTML文档的用户来说，没有什么实际性的意义，可是对于某些用户代理器来说，通过读取这份XFN微格式数据再加上其它的诸如hCard等微格式数据，那么即可在互联网上呈现出人与人之间的关系网络。

对于不同的数据声明需要为其指定描述的位置，而profile的值即是对这个数据的描述的位置，或者可以简单的理解成是为不同的用户代理器指定相同的约定规则。

对于一个页面中引用的多份数据声明，只需要在profile的值中将其用空格隔开即可：

解读HTML：WEB标准从头开始

摄氏度 — Fri, 05 Dec 2008 15:58:45 +0000

在较早之前的网页上，我们经常可以看到如下的网页结构代码：

这是一个网页

……

……

很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。

做出一个页面，跟做好一个页面，中间有着很遥远的距离。

在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。

浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type（文档类型）。

DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。

DOCTYPE所声明的DTD（文档类型定义）分为三种，分别是：

Transitional（过渡的）：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签；

Strict（严格的）：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性；

Frameset（框架的）：这个专门针对页面设计中包含有框架的DTD。

由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计；而Strict的DTD对于大多数人来说还只是一种理想化的方式；Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。

现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：

这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：

过渡的DTD：

严格的DTD：

唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。

解读HTML：WEB标准的误解

摄氏度 — Tue, 02 Dec 2008 06:45:33 +0000

在HTML4 Elements中共计有91个标签，然而在这么多的标签中经常被使用到的标签不到四分之一，在这些常用的标签中有两个标签是属于最通用型的——div、span，这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中，再加上之前很多人直接把WEB标准误解为就是div+css，于是在一个页面里出现了特多的div或者是span标签，尽管这些地方本身有更符合语义的标签来实现。

Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。

于是Web标准中的结构标签几乎变成了div的秀场。

div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。

Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。

所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。

Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。

明明标签可以实现粗体样式，为什么还要用标签再搭配粗体样式去实现呢？

解读HTML：大厦的基石

摄氏度 — Mon, 24 Nov 2008 05:36:07 +0000

在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话，网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来，学HTML就像是学英文字母ABC一般简单。

正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用标签，斜体用标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。

而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。

真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。

一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。

我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。

而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据标签来显示成标题，根据
标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。

如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。

从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。

奇效堂网站设计制作

摄氏度 — Fri, 26 Sep 2008 00:28:19 +0000

十一长假即将到来，工作上似乎也进入了一个恶忙期，很多东西都要赶在十一前出来，之前闲散的生活瞬间就蒸发了，公司要制作江西红博会的专题，这个据说很大已经举办了四届的活动在之前却一直没有听说过，除此外还要赶着网站会员中心的全面改版，还答应了帮几个朋友制作网站。就一个字形容：忙！

没有充分理解奇效堂的公司理念，只是在原网站的基础上进行了简单的改版。