《XHTML简介》word版.doc

XHTML简介XHTML简介2011-06-03 13：49XHTML简介XHTML文档框架为了让初学者一上来就能对XHTML有一个感性认识，先在这里将XHTML文档的框架结构做一个简单展示：?xml version=1.0encoding=UTF-8?！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Strict/ENhtml xmlns=head title文档标题/title/head body h1文档正文内容/h1/body/html麻雀虽小，五脏俱全，这个文档完整的演示了一个标准的XHTML页面。你可以在你的机器上新建一个文本文档(记事本)，将其后缀名改为.html，然后双击用浏览器打开，这样你就能够看到一个页面。当然，也有可能你看到的是乱码，这个问题稍后再作详细解释，先来大致了解一下XHTML。要不然，你说你在写XHTML，别人问你什么是XHTML啊?，你却答不出，那岂不糗大了！什么是XHTML XHTML的全名是eXtensible HyperText Markup Language(可扩展的超文本标记语言)。根据W3C的官方解释，XHTML()是一个用XML语法对HTML重新阐述的语言。如果用稍微准确一点的语言来说，XHTML是一个基于XML的置标语言，并且看起来和HTML有些相像，只有一些小的但却重要的区别。为什么要用XML重新阐述HTML呢?XML是一致的，而HTML则不具备这个特征。基于XML的语言和工具是目前Web表现的金币和通向未来的钥匙。如果你用基于XML的语言开发页面，你的站点就会很好地和其他基于XML的语言、应用程序和协议进行交互。但是，原始的XML数据还不能服务大多数Web浏览器，还不能期待它们更智能地做一些事情，比如显示一个精细格式化的网页。XHTML是一个过度技术，结合了XML的强大功能及HTML的简单特性。而且，以后由XHTML转换到XML是很简单的，甚至根本不用转换，因为XHTML本身就是基于XML的。大体上可以这样理解，XHTML就是一个扮演着类似HTML的角色的XML，它可以显示在旧的和新的Web浏览器中，同样可以工作在大多数的Internet设备中，比如从Palm的pilots到Web电话，到屏幕阅读器。XHTML是当前置标语言的标准(用来替代HTML 4)，用来为Web内容设计严格的、合理的文档结构，并能和其他类似CSS和DOM的Web标准进行协作，还能很好地和其他现有的和未来的基于XML的语言、应用程序和协议进行交互。XHTML包含格式化的文本数据，它的结构包括：标题、副标题、段落、数字列表、定义列表等等，就像HTML一样容易学习和使用。剖析框架我们已经看到了XHTML页面的基本框架结构，知道了什么是XHTML，并且很可能迫不及待的已经亲自动手创建了一个页面。千万别小看这些工作，慢慢你会发现这个基本框架其实就是一个标准框架，我们在Internet上看到的所有色彩斑斓的网页，都是在此基础上扩展而来的。当然，也有不少不符合这个框架的，那是因为它们不符合Web标准。关于Web标准的问题，前面已经谈到，在此不再废话，接下来我们一起剖析一下这个简单的基本框架，你会发现暗藏许多道道！XML文档说明?xml version=1.0encoding=UTF-8?位于所有XML文档的顶部，叫做XML文档说明。XHTML是一个基于XML的置标语言，当然也少不了这个说明。这个位于顶部是有说道的，必须是位于文档的第一行第一列，也就是说文档必须开篇便是这个说明，前面不能有任何东东，包括空格和注释，够绝的吧，绝绝对对的顶部。说明包含两个内容：version=1.0：文档采用的XML语言的版本。这一项是必须的！encoding=UTF-8：文档采用的编码格式。这一项是可选的，若没有，则采用缺省编码格式！编码格式是一个很复杂的东东，我搜集了一些材料，正在潜心研究，以期终极解决，等有了成果，有了时间，我会整理出来，大家一块参考。大家多数用的是Windows，系统默认的编码格式是GBK，所以我在上面说你很可能看到的是乱码，把UTF-8改为GBK就OK了，试试看！你知道吗?当前流行的浏览器对于标准的支持并不是那么完美，所以有时候对于这个XML文档说明的解析会发生错误：MSIE6或MSIE7会完全忽略这个说明。也就是说，不管你在说明中指定文档采用何种编码，它都不予理睬。那么MSIE6或MSIE7是如何识别文档的编码的呢?它会自动分析你的文档的实际存储编码，并将按此编码显示。这句话听着很拗口，举个例子说明一下。假设你使用的是Windows操作系统，你用记事本新建了一个.txt文件，然后将上面的基本框架结构代码敲进去，当然我猜你会拷贝，这个也没关系，一样的，将其重命名为framework.html，这时你应该看到图标变为一个网页的图标，说明你已经成功创建了一个页面。如果你重命名后，图标没有变化，则很可能是因为系统隐藏了扩展名，系统默认是隐藏已知文件类型的扩展名的，你需要将系统设置为显示扩展名，具体设置方法是：打开我的电脑-工具-文件夹选项-查看，在高级设置中下拉，找到隐藏已知文件类型的扩展名，选中它，即可！若再不行，我也没辙了，附近找个高手请教一下吧！元归正传，此时你创建的文档的实际存储编码是GBK，而你指定的编码为UTF-8。很明显，你的文档和指定的编码是不符的，这是有问题的。但是，双击一下，用IE打开看看，正确显示了，没有乱码，神奇吧！从某种角度上来说，IE的这种做法是很智能的，我们不用去考虑编码问题，它会自动识别，总是以正确的形式显示。但是，这种智能往往会在不经意间给我们带来大的麻烦。它智能地屏蔽了我们对于编码这一本质的理解，让我们误以为编码是无关紧要的。更要命的是，当我们指定了错误的编码时，它也能够正确的显示，我们还沾沾自喜于自己的错误而不知，实际上已经种下了隐患。智能化、傻瓜化是微软产品的一大特点，这是它的优点，也是他的缺点，好美的辩证法-这句纯属个人感慨，废话！IE智能得有些不专业，那我们看看最近很火的Firefox表现如何?我用的是Firefox/，应该是最新版本。把上面的网页用Firefox打开一看，果然不负众望，是乱码！现在，我们稍作修改，把XML文档说明中的UTF-8改为GBK，再用Firefox看一下(刷新一下就行)。嗯，这次真的不负众望，正确显示了！Firefox真的不负众望吗?再试它一试！用UltraEdit-32新建一个文档，将刚才做好的页面代码拷贝进去，让XML文档说明中的编码为UTF-8，保存文档为UTF-8格式，用我们可爱的Firefox看一眼。不错，出现了可爱的正确显示，没有乱码。你是不是快要爱上Firefox了，接下来可要看清楚喽，再漂亮的人也有缺点！把XML文档说明中的UTF-8改为GBK，保存一下，再用Firefox看看。如何?正确显示，没有乱码，但是这次并不可爱！估计你和我一样，想看到的是乱码才对。嗯，你和我都没有错，错的是Firefox。Firefox也会自动识别文档的实际存储编码，若文档的实际存储编码为UTF-8，他就会忽略用户的编码指定，不顾一切的使用UTF-8显示。看来，软件还是软件，怎么都不及人聪明！但是软件还不是人写的，怎么就不能严格按照标准来?说明：这里提到了UltraEdit-32编辑器，用它把一个文档存储为指定的编码格式，例如UTF-8，可能有些同胞对此不太熟悉，有些迷茫。没关系，UltraEdit-32是一个很好用的文本编辑器，网上很容易下到，如果想要，留下你的Email，我会发给你，我的版本是UltraEdit-32 13.10a+1，中文版、英文版都有，还有一个注册码生成器。关于UltraEdit-32的使用，我下一节将会简单讲解，UltraEdit-32功能很丰富、很强大，我也只是蜻蜓点水的用，想深入探究的可以看它的帮助文档，安装完成后自带的有。最后顺带说一下，要想把一个文档存储为UTF-8的格式，其实记事本也可以轻松做到，当你保存一个尚未取名的文档，或者是另存为一个文档时，都会跳出一个对话框，要求你输入保存的名称，你有没有看到最下方的编码下拉框，看看里面都有什么，明白了吧?相信你一定已经明白了，俺就不废话了！再来说一款比较流行的，很优秀的浏览器Opera的表现。我用的是Opera/9.50 beta，也应该是最新版本。它的表现和Firefox雷同，不再赘述，有兴趣的可以自己测试一下。Opera和Firefox一样是开源的，很容易下载到，不过我用的Opera/9.50 beta是英文版，好像还没有中文版，将就一下吧！说完了浏览器对于编码方式解析的bug，再说说它们对于缺省编码的解析情况。前面说过，XML文档说明中的encoding=UTF-8是可省的，若省略则使用默认的缺省编码解析。上述三个主流浏览器对于缺省编码的解析却有着惊人的一致-自动分析文档的实际存储编码，并将按此编码显示。我也觉得这样是最合理的！所以，当我们不指定XML文档说明中的编码时，浏览器会自动识别编码，并总是正确地显示。你是不是觉得很好，很方便?不错，是很方便，但却不好！我不赞同这么做，使用完整的XML文档说明，在说明中将编码格式明确地指定，当然更要正确地指定！推荐原因：方便自己或别人在看文档时了解文档采用的编码格式。不然，可能猜上半天，最后还搞错了。方便使用程序对文档进行自动化处理和转换。比如，对于文档编码格式的检查校验，或者利用XML转换工具将文档信息转换为别的形式，和其他应用程序通信。3.符合Web标准，能够在将来的浏览器中不做任何修改的继续正确运行。你可能要发牢骚了，我指定了编码格式，浏览器又不会完全按照我指定的编码去解析，有意义吗?就算指定错了，它可能仍傻傻的正确显示，我也不知道指定的编码有误啊，反而画蛇添足?怎么能让浏览器一定按照我指定的编码去显示呢?这个当然也是有办法解决的，如果你运气不好，遇到了这种问题，也不用太着急，咱兵来将挡，水来土掩，接着往下看三种DTD所谓DTD就是Document Type Definition的缩写，直译过来就是文档类型定义。这个直译的效果还不错，以后就叫做文档类型定义吧。大家顾名思义一下，文档类型定义就是对于文档类型的定义，作用就是定义文档类型的。转来转去，我也晕了，大家先有个感性认识，一块儿仔细看看。XHTML 1提供了三种DTD：过渡的(Transitional)、严格的(Strict)、框架的(Frameset)。过渡的-！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/ENTransitional.dtd，最宽松的DTD，他宣称的目标是自己活，也让别人活；严格的-！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Strict/EN，挥着鞭子的冷酷的DTD，逼着你不能使用表现层的标记和属性。框架的-！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Frameset/ENFrameset.dtd，20世纪90年代最流行的布局方式，同样地，也可以在你的设计中使用。个人觉得，这里没有什么好说的。过渡型的要求很宽松，是为了推动XHTML取代HTML的进程，专门为那些已经习惯与使用老式的、非标准的HTML的人准备的，方便它们向严格的XHTML过渡；而框架的更是很少人用，可以略过；将来的方向是严格的(Strict)，因为只有它才完全符合将标记和表现层分离的设计宗旨。大家还是奔着方向跑吧！html和命名空间html标签(也称作标记)是XHTML页面的主体部分，除了文档说明和DTD声明外，整个页面的所有内容都包含在该标签中。html标签由html和/html两部分构成，我们不妨称之为开标签和闭标签。它们分别标识着html的开始和结束。html标签内包含head和body两个标签，分别标识页面头和页面体。细心的你一定发现了，html的开标签中还包含了xmlns=这么个东东。这个叫做标签的属性，所有的属性都是放在开标签中的。xmlns是xml和namespace的缩写，就是xml的命名空间的意思。那么什么是命名空间呢?这个嘛，这个嘛这个我也只是大概的知道有那么回事，还不能彻底说清楚里面的道道。好像是命名空间定义了可以使用的标签以及使用规则，使用不同的命名空间，可以使用不同的标记集合，如果你想使用特定的标记，就得声明它对应的命名空间。注意噢，我这里说的是好像是哦，暂不对此说法付法律责任。关于这个，我下去会抽空好好研究，然后再和大家分享探讨，敬请随时关注。也欢迎路过的高手给予指点，免去我的摸黑的痛苦！嘿嘿如果你暂时不想深入研究，那就先不要管它，知道有这么回事就行，日后有缘再杀个回马枪，将它彻底解决。到时如果我还没搞清楚，别忘告诉我一声噢。这里先就这么用，甭管它。head你已经知道，head标记包含于html。那么它是干什么的呢?head标记也同样由head/head两部分构成。head一般没有属性，有两个基本用途：1.定义文档声明包括标题的定义、关键字的定义，还有文档编码的定义等等。标题的定义，大家已经见过了，title文档标题/title就是，用浏览器打开你刚才做的网页看看，看到它在哪里了吗?没看见的请仔细扫描一下左上角。2.定义文档引用包括css的引用，script的引用等。这个又分为外部引用和内部引用。涉及内容很多，以后再慢慢详细介绍。你是不是要问我head里怎么也有一个文档编码的定义?再想想我们在前面设的悬念-如何让浏览器一定按照我指定的编码去显示呢?噢，噢噢噢噢噢噢相信你想到了！对，就是在这里再指定一下文档的编码。格式如下：meta http-equiv=Content-Typecontent=text/html；charset=UTF-8/别处不用动，只需将charset=UTF-8中的UTF-8改为你想要设定的编码即可。你可以自己按照上面用过的方法测试一下，看看浏览器是不是听你的话。反正上面的三个浏览器都很听我的话，如果你的不听话，就是你的人品问题了，呵呵！只要在文档的head中加入了这句编码声明，浏览器会严格的执行编码检查。此时，XML文档说明中的编码指定将会被忽略，也就是说如果XML文档说明中的编码指定和head中的相悖，浏览器会毫不犹豫的按照head中的执行，上面三个浏览器均如此。也就因此，有些人建议把XML文档说明去掉，我还是推荐两个都留着，并且保持一致。推荐原因还是上面那三条。所有的head标记里的内容都不显示在页面的正文中。或者说，除了title标记的内容显示在浏览器的标题栏外，其余的内容都根本不显示。(其实，还有一个也是显示的，那就是网站的图标。或许你已经发现，浏览好多的网站页面时，在浏览器地址栏的开头都会显示一个别致的图标，那是怎么弄上去的呢?待日后专门讲解head标记时再详细解答，到时你会发现head原来还有那么多奇妙的用途！)body现在就剩下body了！顾名思义，在body/body之间的就是正儿八经的页面主体内容了。把你想写的，想在页面中展示的内容，无论文章，还是图片，都尽情的写进body吧，它会将它们完美展示！前提是-你得写的正确！如何才能写得正确，做出一个靓丽的、符合标准的、专业的页面呢?这次可不是且听下回分解了，而是得慢慢的认真专研！当然，我也会在下好多回分解。基本上，以后的所有回，都是为了这个目标而努力。补充补充三点：注释。和别的程序设计语言一样，XHTML也有自己的注释(HTML就有)。注释格式很简单，以！-开始，以-结尾，即！-注释-。注释基本上可以出现在页面文档的任何位置，除了一个标记的内部，如head！-文档头-，因为这会造成解析的歧义，引起错误和混乱。排版和缩进。这个是编程风格的问题。一个好的程序员，包括页面编程，应该具备良好的编程风格，使