web相关 - 迷糊娃娃的博客

- XHTML基础问答作者：阿捷

web相关 2007-8-26 19:2

本文是2002年为硅谷动力网站翻译的稿件。当时xhtml1.0刚刚开始被设计师所接触，所以有下面这个基础

问答。

HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷

和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000

年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本，XHTML和HTML,XML有

什么不同，它增加了什么新功能，今天就让我们来初步认识一下XHTML。

XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了

的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven

pemberton回答的关于XHTML的常见基础问题。

问：什么是XHTML?

答：XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题：

如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工

作会议，会议的结论是：需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们

的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。

问：为什么XHTML 1.0相对HTML 4.0独立发展?

答：并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的

HTML 4.0，

标签集:TAGS:

我要留言To Comment 阅读全文Read All | 回复Comments() 点击Count()

- web1.0 web2.0 web3.0

web相关 2007-8-26 18:52

web1.0----网站是别人的家------我只是看看--------陌路人

web2.0----网站是朋友的家------有人和我聊聊------客人

WEB3.0----网站是你我的家------吃喝买卖随己------主人

标签集:TAGS:转载

我要留言To Comment 阅读全文Read All | 回复Comments() 点击Count()

- 什么是名字空间作者：阿捷

web相关 2007-8-26 18:45

DOCTYPE声明好以后，接下来的代码是：

通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？

这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理

解是：

由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。

当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通

过一个网址指向来识别你的标识。例如：

小王和小李都定义了一个<book>标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空

间是"http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆<book>标识，因为它属于不同的名

字空间。

更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个"谁"用了

一个网址来代替。

XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为

XHTML1.0不能自定义标识，所以它

标签集:TAGS:

我要留言To Comment 阅读全文Read All | 回复Comments() 点击Count()

- 选择什么样的DOCTYPE 作者：阿捷

web相关 2007-8-26 18:41

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码，可以看到第一行就是：

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

打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会

发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那么这些代码有什么含义？一定要放置吗？

什么是

标签集:TAGS:DOCTYPE

我要留言To Comment 阅读全文Read All | 回复Comments() 点击Count()

- 盒模型bug的解决方法作者：阿捷

web相关 2007-8-26 18:11

本文来自：tantek.com，也可以阅读《网站重构》第225-235页了解更多。

我们定义一个最基本的层：

boxtest

div.boxtest{ 
border:20px   solid #60A179;
padding: 30px;
background :  #ffc;
width : 300px;
}

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变

成：300-20-30-20-30=200px。

为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览

器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值

300px。

content

div.content{
border:20px solid #60A179;; 
padding:30px;
background: #ffc;
width :400px;
voice-family :   "\"}\"";
voice-family :inherit;
width :  300px;
}

同样，在Op

标签集:TAGS:转载

我要留言To Comment 阅读全文Read All | 回复Comments() 点击Count()

自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

3.辅助图片一律用背景处理

用XHTML+CSS布局，有一个技术一开始让你不习惯，应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样：

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

尽管可以用<img>直接插在内容中，但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用<img>元素直接插在页面里，而其它的类似logo，标题图片，列表前缀

标签集:TAGS:转载