<![CDATA[css探索之旅 - 推开XHTML的大门]]> http://blog.doyoe.com/ zh-cn PBlog2 v2.4 css探索之旅 http://blog.doyoe.com/images/logos.gif http://blog.doyoe.com/ css探索之旅 http://blog.doyoe.com/article.asp?id=212 <![CDATA[你所看到的div布局]]> dooyoe@gmail.com(飘零雾雨) Fri,12 Dec 2008 09:50:39 +0800 http://blog.doyoe.com/default.asp?id=212 　　随着近几年来，web标准的思维被越来越多的人所接受和学习。传统的网页布局逐渐发生了变化，table布局开始慢慢的淡出人们的视线，而使用div组合css来进行的布局则异军突起。

　　这种情况的出现，并不是说明table是不符合web标准的，而恰恰是web标准的深化，使得大家开始慢慢去理解每个标签其本身的真实意义，table的真实用途也逐渐让大家所认知和接受。

　　table，顾名思义，是表格的意思，在xhtml中它也是被定义为表格。table标签其本身是用来创建表格，装载数据的。然后却正是由于表格固有的行和列特性，人们发现使用table可以很简单的就将内容固定在一个区域内，形成一个布局并搭建出web页面。然而人们在灵活使用其外在表现的同时，把它的实质作用给忽略了，似乎再也没人认为table仅仅是用来装载数据的，而“页面布局”也成了table的一个“特性”。久而久之，table就成了页面布局的“默认方式”。

　　有那么一批人或者组织，他们始终致力于还原html的本质，让资源被合理的使用。或许正是因为他们的努力和奔走相告，人们开始慢慢正视这个问题，并加入到这个行列里，身体力行。

　　在今天，你会发现，已经有越来越多的web开始摒弃传统的布局方式，而转向更有“意义”的(div)css布局。

　　css是什么？css称为层叠样式表，是用来样式化结构的，并赋予结构任意的表现形式。

　　而div又是什么呢？不知道是干嘛的！它只是一个区块元素，本身无实际意义。一个无实际意义的标签正好拿来“堆积木”，可以想怎么摆就怎么摆，因为我们可以通过css来控制其显示方式和位置，形成你想要的页面布局。

　　相对于传统table布局，一个是在固定好的布局内填充内容，一个是对已有的内容进行任意布局，两种方式，优劣不言而喻。

　　本质上来说，div布局并不成立，div只是一个内容载体，而页面的显示方式是由css来完成的，或许叫做css布局更为合适。

　　一个理想的页面，应该是结构与表现分离的（当然还有行为，这里不讲）。而css布局正暗合此意。而我们还等什么呢？赶紧试试啊！

]]> http://blog.doyoe.com/article.asp?id=211 <![CDATA[XHTML之超级链接a]]> dooyoe@gmail.com(飘零雾雨) Wed,19 Nov 2008 21:06:15 +0800 http://blog.doyoe.com/default.asp?id=211 　　HTML中有一个标记为互联网的兴起和发展起着举足轻重的作用，正是由于这个标记的存在，才成就了今天的互联网这张“网”，这个标记是就<a>。

　　互联网之所以成为互联网，就是通过a(也就是超级链接)将世界各地的网页链到一起，才形成了这张大而无形的网。

　　a标签其实是取自anchor(锚)的首字母缩写。属性href就是a的精髓所在，它为链接指定一个链接源URL，也就是说要链接到哪个地方或者哪个页面。

　　target属性是用来指定该链接如何打开，比如我们要让链接在一个新开的窗口中打开，那么我们只需将target的值设置为_blank即可，它的值还有_self, _top_parent等。虽说这个属性可以让链接变得更丰富，但在XHTML中，target属性已经是不被推荐使用的了。

　　随着SE越来越深入人们的生活，网站拥有者也就越来越希望自己的网站能够被SE更多的收录，以提升被网民查看的几率。这也就让a的另外一个不非常显著的属性重新被重视起来，那就是title属性，它是用来代表链接的附加提示信息的，比如对该链接的一些说明。虽说title属性对SEO并没有很强很明显的作用，但还是有一定的功效。

　　一个简单的链接可以写成：

<a href="URL" title="对链接的说明信息" target="打开链接的方式">我是一个简单的超级链接</a>

　　当然，a标记还有许多其它的属性，如rel,type等等，但一般情况下使用几率比较小。

　　有了a 的存在，才有了我们今天丰富多彩的互联网，a值得你喜欢。

相关阅读：

]]> http://blog.doyoe.com/article.asp?id=210 <![CDATA[校检XHTML页面？争议？]]> dooyoe@gmail.com(飘零雾雨) Tue,18 Nov 2008 22:22:03 +0800 http://blog.doyoe.com/default.asp?id=210 　　什么是校检XHTML页面呢？W3C为XHTML规范弄了一个检测工具，通过这个工具，你就可以检查自己写的XHTML是否符合规范。

　　有些估计要问了，为什么要校检呢？难道没通过校检的页面它的XHTML就一定是不好的吗？为什么一定要走这个形式呢？

　　如果确实需要这样问，我也觉得这是一个非常棒的问题。但对这个问题，我也说几句。

　　这里所说的校检并非是用来特别说明你的页面好坏，通常我也不喜欢这种形式主义。之所以我提出校检你的XHTML页面，那是因为通过校检，你可以发现并改正你的XHTML存在的一些不符合规范的地方，当你校检的次数多了，对XHTML的一些规范也就了解的差不多了，这时候你就可以选择不再去为自己的页面一一校检，因为在你写出某个页面来的时候，你已经知道该页面中有哪些地方是不符合规范的，但实际需求又使得你必须这样做，这时候我们可以选择一个折中的方式来处理，不必过于对未通过校检而耿耿于怀。

　　所以校检其实一种态度，是对自己负责对公司负责的态度。在校检的同时，一方面你自己的技能得以提升，另一方面公司的页面代码质量也得到改进。这是于人于己都有利的事，在学习XHTML的同时，我们何乐而不为呢？

　　XHTML校检地址：The W3C Markup Validation Service

　　我们可以将上一节我们那个“第一个XHTML页面”拿来校检，测试看是否能通过XHTML规范。

]]> http://blog.doyoe.com/article.asp?id=209 <![CDATA[第一个XHTML页面]]> dooyoe@gmail.com(飘零雾雨) Tue,18 Nov 2008 12:47:49 +0800 http://blog.doyoe.com/default.asp?id=209 　　在对XHTML有了一定的了解后，我们就可以开始自己的第一个XHTML页面了，当然，"Hello World!"依然是最佳选择。

　　我们知道，在写XHTML之前，首先得为它选择一个合适的DOCTYPE，这里，我们将使用Strict(严格类型)的。

　　好了，做好了准备之后，Let's say "Hello World!".

XHTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>第一个XHTML页面：Hello World!</title>
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>

 　　好了，这就是我们的第一个XHTML页面，我们已经将Hello World!打印出来了。

 　　这是一个最简单的XHTML页面，我们也可以将它当成是所有XHTML的一个原始框架，就类似以前的HTML基本结构。

 　　我们来看看这些代码，开头的2行，不用讲了，就是本文一开始说的DOCTYPE，当然，这里你也可以选择其它的DOCTYPE。

　　接下来是<html>标记，我们可以看到在<html>里比以前多出了几个属性，其中xmlns指的是命名空间，这个属性是必须的，因为即使你不写上去，这个属性也会被自动添加。再有就是lang，这个是用来指定元素内部的内容的所用语言类型，而你在写了lang属性之后，就必须再额外添加一个xml:lang属性，用来指定内部xml的语言类型，我们这里写的是"zh-cn"，当然你也可以用en或其它的语种。大部分xhtml标记都拥有lang属性。

　　再接下来就是<head>标记了，使用过HTML我们就知道，head还可以包含title, meta, link等标记。这里有一个需要注意的地方就是，我们将title标记写在了2个指定页面编码和语言的meta标记之下，这是为了防止出现乱码的情况。其实的meta标记可以根据你的习惯写在title标记之后。同时，我们还注意到在meta标记里面加了一个"/"。这是为什么呢？原因是XHTML是一种作为XML应用而被重新定义过的，所以它的一些语法必须要和XML一致，而在XML里，要求所有的标记必须关闭。由于在之前的HTML中，meta标记是不被要求关闭的，所以在XHTML中我们给它加上"/"，让它自关闭(这样的标记还有link, br等)，在添加"/"的同时，还需要在之前加上一个空格，因为在有些浏览器中，如果不加上空格，会出现解析错误。而在HTML要求需要关闭的标记，在XHTML就一定需要关闭，如：

<p>Hello World!</p>

　　不可以写成：

<p>Hello World!

　　它必须加上</p>关闭标记用以结束。

　　最后保存的时候，别忘了要保存为UTF-8格式，因为我们在代码里已经指定了页面编码为UTF-8，所以需要保持一致。至于为什么选择UTF-8而不选择gb2312，我想说的是，我喜欢通用的东西，因为我不想看到自己做的东西因为环境变化后，而变的糟糕无趣。

]]> http://blog.doyoe.com/article.asp?id=208 <![CDATA[怎样开始XHTML？]]> dooyoe@gmail.com(飘零雾雨) Mon,17 Nov 2008 20:51:44 +0800 http://blog.doyoe.com/default.asp?id=208 　　了解了一些关于XHTML的特征之后，我们如何着手自己的第一个XHTML页面呢？

　　如同XML一般，首先我们必须为自己的XHTML选择一个“版本”，这就是所谓的DOCTYPE。

　　对于目前的XHTML1.0，共提供了3种可选的DOCTYPE：

  • 过渡的(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，任何表现层的标识和属性都不被推荐。完整代码如下：

    <!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">

　　理想状态下，应该是使用严格的(Strict)DOCTYPE申明，不过由于很多原因，目前使用过渡的(Transitional)还是比较好的选择，因为它还允许使用一些HTML4.0里面的表现标记和属性，相对初学者来讲，还是比较“和谐”的，因为它更容易掌握。

　　在选择了适合自己的DOCTYPE后，接下来的操作就类似你以前操作HTML了，只是XHTML的语法想多HTML更为严谨，且有一些HTML标记在XHTML已经不再被推荐使用。

　　XHTML和HTML的一些语法差别：

  • XHTML元素必须正确的嵌套
  • XHTML标记的必须用小写字母
  • XHTML元素都必须有关闭或自关闭
  • XHTML所有属性值都必须使用引号包起来

　　部分XHTML不推荐使用的标记：

　　b, big, hr, i, small, sub, sup, tt, basefont, center, dir, font, isindex, menu, s, strike, u, iframe

　　Come on, 来写你的第一个XHTML页面吧。

]]> http://blog.doyoe.com/article.asp?id=207 <![CDATA[为什么使用XHTML？]]> dooyoe@gmail.com(飘零雾雨) Mon,17 Nov 2008 19:56:02 +0800 http://blog.doyoe.com/default.asp?id=207 　　XHTML是当前HTML的继承者。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大，这时候仍使用HTML就显得有些捉襟见肘。

　　由于HTML能被所有的浏览解析，所以从HTML基础上改造而来的XHTML也同样可以被大部分常见的浏览器正确地解析。因为XHTML与HTML在大部分地方还是相同的，所以我们几乎可以不用担心浏览器对XHTML的支持问题，更何况，所有的浏览器商都还在不留遗力的更新着自己的产品。

　　XHTML是作为一种 XML 应用被重新定义的 HTML，可以被所有的支持XML的设备读取，同时在其余的浏览器升级至支持XML之前，XHTML能够培养我们编写拥有良好结构的文档的习惯，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。

　　所以使用XHTML不仅是为了使得你的代码具备更好的可读性和兼容性，更是在培养你在应付未来变化的适应能力。拥有HTML编写经验的你，何不试着转向XHTML，对于你来说，这没有任何难度和坏处。

]]> http://blog.doyoe.com/article.asp?id=206 <![CDATA[什么是XHTML？]]> dooyoe@gmail.com(飘零雾雨) Mon,17 Nov 2008 18:43:25 +0800 http://blog.doyoe.com/default.asp?id=206 　　当XML越来越成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们是否依然需要HTML?

　　答案是：需要。我们依然需要使用HTML。因为大量的开发者已经习惯使用HTML来作为他们的设计语言，而且，已经有成千上万的网站是采用HTML编写的。于是为了让开发者由HTML向XML平滑过渡，XHTML就应运而生。
 
　　HTML是一种基本的WEB设计语言，XHTML是一种基于XML的标记语言，与HTML基本相同，只有一些微小却重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，本质上，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
 
　　所以，我们可以说XHTML是一种作为XML应用而被重新定义的更严格更纯净的HTML。

　　XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写。于2000年的1月26日成为 W3C 标准，且在2000年底，国际W3C组织(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。

]]>