Prower's Blog » HTML

为什么视觉设计师需要懂HTML

摄氏度 — Tue, 23 Jun 2009 13:56:04 +0000

注：本文所说的视觉设计师专指网页视觉设计师。

网页设计师与平面设计师都归类为设计师，其实这两个职业是跨行业的，虽然有很多设计师一直在跨行业工作着。这两个职业的最大区别应该是在思维上，对于平面设计师来说，天马行空般的创新思维很重要，他们需要的是在一张白纸上勾画出符合客户需求的绚丽创意；而对于网页设计师来说，更多的是需要考虑创意在网络上实现的成本以及可能性，天马行空般的思维成了次要的。

这也就是为何很多时候，网页设计师去做平面设计师的工作要比反过来容易得多。也许可以用这样一个比喻来形容：网页设计师去做平面设计师的工作就像是放开圈养在马棚里的马，也许没了撒野的能力，但还能奔跑；而平面设计师去做网页设计师的工作，则更像是原本狂奔的野马突然被圈养在马棚里，框架的束缚会让野马变成手足无措。

回到标题提出的问题，为什么视觉设计师需要懂HTML？

HTML就是那束缚野马的框架。任何天马行空的创意都需要限定在这个框架之中，并非是创意无法实现，而是需要考虑实现创意的成本。

对于平面设计师来说，画面是设计的核心，画面就是他们所想要表达的内容；而对于网页设计师来说，画面则是用来衬托内容的一种形式，内容才是网页设计师所要表达出来的核心。

相对于平面设计的单一性来说，网页设计更多的还有注重设计的可重用性。每个网站都是由很多的页面构成的，而这些页面中的样式大部分都是可重用的。

如果视觉设计师不懂HTML，不能准确的分析一个网页的结构，那将可能给开发的成本带来很大的提高。而互联网产品的一个特点是更新迭代的时间快，如果投入的成本过高则会影响更新迭代的速率，最终将会影响到产品的发展。

最后说一点，如果视觉设计师不懂HTML，那对开发人员来说，则是一种灾难。

Flash的层叠顺序问题(z-index)

摄氏度 — Thu, 08 Jan 2009 02:50:40 +0000

很多人在写页面代码时都会遇到过这样一个问题，那就是当Flash与页面中的其它HTML结构有重叠的时候，默认情况下Flash总是显示在最上面，从而遮挡住了与它有重叠部分的HTML结构，就算为该Flash或是HTML结构标签定义z-index属性却依然是无效的。

因为默认情况下在网页中添加的Flash在浏览器中是以窗口模式存在的，是独立于浏览器的HTML结构渲染的，所以这种情况下的Flash会遮盖住与它重叠的HTML。

比如这个页面：Flash的层叠顺序（z-index）

在Adobe Flash的发布设置里关于HTML的设置有一项是“窗口模式”，这里面提供了三个选项，分别是：窗口(window)、不透明无窗口(opaque)、透明无窗口(transparent)。

这三种模式分别表示着Flash在页面中的三种表现形式，根据这三种表现形式，我们就找到了解决这个问题的方法，就是将页面中的Flash模式(wmode)设置为不透明无窗口(opaque)或者是透明无窗口(transparent)，在这两种模式下页面中的Flash将与HTML结构是处于同一级别的，所以就可以通过z-index来控制页面中的重叠部分到底是Flash显示在上还是HTML结构显示在上。

比如这个页面：Flash的层叠顺序(z-index)

当我们需要在页面中加载一个弹出Flash广告时，并且不希望它被页面中的其它Flash所遮挡时，就可以使用这种方法来解决。同样的如果这个弹出Flash是不规则形状的时候，就可以将模式(wmode)设置为透明无窗口(transparent)，这样即可以除去Flash本身所带有的背景。

解读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：命名空间与字符编码

摄氏度 — Tue, 09 Dec 2008 14:36:07 +0000

在做项目的过程中，我们经常会建立各种各样的规范，以方便团队之间更好的合作更好的完成项目；同样我们也经常会听到各种各样的协议，比如Google的IM软件Gtalk使用的开放的XMPP协议，只要其他IM软件也遵循XMPP协议就能与Gtalk使用互通；而互联网上的信息无以计数，这些信息本身是独立存在的，如何将其串联并呈现在用户眼前，就需要使用到HTTP协议。

同样的道理，因为浏览器们各自的内核不同，对于默认样式的渲染也不尽相同，所以就需要一份各浏览器都遵循的规则来保证同一个网页文档在不同浏览器上呈现出来的样式是一致的，这个规则就是DOCTYPE声明。

因为互联网是互通的，所以任意的两个或者以上的网页文档都可能会涉及到数据交换，而因为XML语言是允许用户自定义标签的，所以任意两个交换的文档就可能会出现相同的标签，从而导致相同标签的冲突，所以就需要一个命名空间以区分开交换文档中可能存在的相同标签。

XHTML做为HTML向XML过渡的一种语言，并不能实现XML语言中的用户自定义标签，所以XHMTL文档中的命名空间都是相同的：

xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。

在制作一个网页的时候，除了在开始的时候声明DOCTYPE（文档类型）之外，如果是XHTML文档还需要声明命名空间，而第三个需要声明的就是网页文档的字符编码类型：

为了能被浏览器正确的解释以及通过W3C验证，每个XHTML文档都应该声明所使用的字符编码。很多时候网页文档出现乱码大部分都是由于字符编码不对而引起的。

utf-8是unicode的一种变长度的编码表达方式，做为一种全球通用型的字符编码正越来越多的网页文档所使用，使用utf-8字符编码的网页可最大程度的避免不同区域的用户访问相同网页时因字符编码不同而导致的乱码现象。

但是当我们打开国内的大多数网站看，特别是门户型的大型网站，关于字符编码的声明却并非是utf-8，而是gb2312：

当然，除了gb2312外还有一些网站使用gbk或者是gb18030编码，这三种字符编码都是属于简体中文字符集。也就是说，如果一台电脑没有安装简体中文字符集时，当它访问字符编码为gb2312的中文网页时，则显示出来的是乱码。

既然使用gb2312字符编码时会因为不同区域的用户访问而可能出现乱码现象，那为何不使用utf-8呢？

其中一个原因可能历史遗留的原因，而另一个更重要的原因应该是由于两种编码的存储方式不同而造成的文档体积不同。

使用gb2312字符编码集时，一个汉字是占用2个字节的大小，而一个汉字在utf-8编码中所占的字节数却往往都是在3个字节，甚至是3个以上的字节。所以对于同一个中文文档来说，使用gb2312字符编码来进行存储的体积是要小于utf-8编码所存储的文档大小的。

而对于文字多访问量大的中文网站来说，使用gb2312编码的网页文档在下载传输上可以节省下不小的流量，再者是因为中文网站的用户群体基本上都锁定在中文用户上，这些也就是很多网站使用gb2312编码而不是utf-8编码的原因。

但是文字多访问量大的网站，国内并不多，再加上可能成对的乱码问题，所以在制作网页的时候推荐使用utf-8编码。

当然，不管用何种编码，最重要的是整站使用的编码要统一。

对于字符编码的声明除了上面的方式，还可能看到另一种声明方式：

这种声明方式是针对老版本的浏览器的，在浏览器已经普遍更新换代的今天已经不推荐使用这种声明方式。

解读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结构来呈现的。