IT北瓜

点击下方图片或者混乱的标记语言漫画链接，可以打开更大、更清晰的大图。

混乱的标记语言XHTML2/HTML5漫画

漫画中提到两个链接地址：

• 漫画中提到的链接1: An Unofficial Q&A about the Discontinuation of the XHTML2 WG
• 漫画中提到的链接2: In defense of web developers

本文转自：Yes! B/S !

原文地址：http://www.cnblogs.com/JustinYoung/archive/2009/07/30/misunderstanding-markup-xhtml-2-comic-strip.html

      （PS：本文与不良标签同样来自于Neo翻译的HTML Dog CSS Tutorials的中文版，阅读这样的文章真的是一种享受…）

这个教程给那些虽然已经了解HTML，但对经不起未来XHTML标准的考验，隐含在分离内容和表现后面含义还未觉醒的人们。

分离内容和表现

HTML从来就不是表现的手段，但从用户端结合元素来格式化文本，开发者从中找到操作布局的方法。CSS的强大，使得现在不再需要用HTML做任何表现了，而内容也可以完全从表现（CSS）中分离出来。

这样做有很多好处──通常可以压缩文件容量，有着用一个主要样式表就可控制整个网站而不是单个页面的灵活性，也可能使页面更易用，更具亲和力。

遵循这些基本原则基本上意味着你不应该在HTML内使用样式化的任何事物了。比如font的标签，比如bgcolor的属性不应该再使用。甚至在图像标签img内的边框属性border在XHTML 1.1中也是非法的了。别担心，过时的HTML可以样式化，CSS更可以样式化，而且可以做得更好。

不仅仅是从HTML内剥离表现，内容的结构意味着在适合的地方使用明确的HTML标签。比如，h1，h2等应用在标题上──而不仅仅是使用CSS使字体变大而已。

最佳指引就是一个可视化的浏览器上使用其默认的样式来呈现一个没有样式表（或者有样式表，但不支援样式表的文本浏览器，比如lynx——译者注）的页面。

表格不应该用在布局上──表格用来表示表格式的数据（我们已经不厌其烦地说了很多次──译者注）。也许对于已经习惯传统结构的HTMLer来说，完全改变有很大的技术难度。这个方法很大程度上压缩了文件，而且，基于这些显性代码，它变得更易用，更具亲和力。

关于更多，请阅读CSS高级指南的布局。

标签

在XHTML中所有的标签都必须小写和关闭。没有闭合标签的（如br和img）必须用英文半角正斜杠“/”在后面自关闭（如<br />）。注意在斜杠前应该有一个英文半角空格。

标记也必须是合式的，使元素正确嵌套（比如<strong><em>this</em></strong>，而不是<strong><em>this</strong></em>）。

所有的文档都要有html，head，title和body元素。也必须从文档类型声明开始。

文档主体应该从 p， h1，h2， h3，h4，h5，h6，div， pre，address，ins或者del开始。

属性

所有的属性必须是小写的，它们的值也要用英文半角引号括（"）起来。

精简属性是不允许的（比如<input type="checkbox" checked />）。按惯例，精简属性必须给出跟属性名称一样的值（如 <input type="checkbox" checked="checked" />）。

名字 name属性不再是合法的了（除了在表单元素中），应该使用id来代替。

目标属性target不是一个合法的属性。庆幸吧，它有些癫狂。

在img里，alt属性是必须的。

亲和力

为残障人士制做具有亲和力网页的理由是不证而明的。不仅是人道的，而且也对老年用户和五官功能减退的用户有利（想一想，有一天我们老了，视力消退，五官不灵，怎么浏览互联网？为年老积点德，现在就考虑亲和力吧！——译者注）。亲和力不仅与有严重残障人士方便，也使大部分少量消退功能（特别是视觉）的用户更为易用。

这个问题越来越牵涉法律问题了，比如美国的“508条款”的采用，试图积极推动强制使用亲和力；在英国，所有的政府网站必须有一个指定的亲和力程度。什么时候才可以有像在建筑物上的亲和措施的立法，以便普遍用在商业网站上？（中国还不知道什么时候有这种立法呢！但不等于我们就不要关注我们设计的网页的合法性。——译者注）

如果能遵循上述的建议，你的HTML应该已经具备了为残障用户服务的高度亲和力。还有更多的创作使你的亲和力更上一层楼，而且不难。见亲和连接和亲和表单指南。

      （PS：HTML Dog CSS Tutorials致力于教授最佳的XHTML与CSS布局，分为初级，中级，高级三个级别。是个很好的教程，还有Neo翻译的中文版，Leeo英文实在不行，所以看的是中文版，文章语言风趣幽默、通俗易懂，看起来你不会觉得累，至少我这么觉得，⊙﹏⊙b汗~~~不良标签一文内容也是来自Neo翻译的中文版，觉得这篇文章讲的内容很好，所以收藏了…）

这次着眼于一些童话世界和史前时代的HTML标签。它们是被HTML标准抛弃的不良、肮脏、十足丑陋的，胡乱荒谬的属性，只能部分地工作在一个次版本的浏览器上或者可以被新标签取代的标签。

有人建议我们不要歌颂标准尽管我们教授基于标准的HTML和CSS，但如果这样的话，用户（特别是初学者）会遭遇不良的入门方法和不良练习，同时他们并不知道哪里出错了。所以我们的答案是：一份拒绝不良标签的指南。

HTML已经尝试去除表现和朝向内容发展，导致这样一个基本原理：从表现（CSS）中分离出内容意义（HTML）。这将会给网页减肥，因为一个表现指令集合（以外部CSS文档的形式）可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。

部分不良标签基本上是表现标签（比如small），它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现，而且还是不必要的庞大（比如font标签）或者对可用性有害的可恶的（比如blink）。

标签

下面这些是你可能会经常碰到的可以有更好选择的标签：

• b 可以用来产生粗体元素。使用strong（意味着强烈强调）代替更有意义，或者用CSS来完成这项工作，增加font-weight: bold的规则，用来表明粗体元素。
• i可以用来产生斜体元素。使用em（表示强调），这也更有意义。或者可以用CSS来表现斜体：font-style: italic
• big可以产生更大字体。使用标题（如h1，h2等，当文本本来就是一个标题时）代替，增加了意义，或简单地在CSS中使用font-size属性，获取更多的控制权。
• small 可以产生小字体。CSS（font-size）再一次取得更多的控制权。
• hr 可用用来展现一条水平线。在CSS中用hr设计很少见，CSS的border-top，border-bottom属性或者朴素的图像做这个效果会更好。

上述的标签与最新的HTML标准尽管都兼容，但对内容却没有任何好标签应有的意义。They could be more useful but they aren’t particularly harmful, and might easily be mistaken for innocent butter-wouldn’t-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.

• u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
• center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center，还有left、right和justify。
• menu用来创建菜单列表。它并没有ul做的完美，在因为无序列表更通用，ul高高地站在menu的尸体上。
• layer和div元素相似，都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作，所以再也没有什么用。
• blink或者marquee。大声说不！它们应该像本身意义一样被期待，但有着十分有限的支持，和，只会产生非常，非常恶心的笑话。
• font，可以用来定义元素的字体名称，尺寸和颜色，在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站（甚至新的也有）像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的，把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的（如，每次你使用p元素），而CSS，则可以用一条简短的代码来应用重复元素，甚至控制整个网站。使用CSS方法，不仅可以使页面比被大量font标签寄生的更苗条，而且更容易维护因为你所需要做得只是改变CSS文件中的一行，而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。

属性

可能你认为你正在使用良好的标签，但还是有一些麻烦的寄生虫属性潜伏，它们随时会冒出来。

• name用来为一个元素指定一个名字，它在如input的表单元素中完全被接受，但在其它地方，name的工作已经被id属性取代。
• text和bgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的color和background-color属性在应用到body选择符时也可以做到。
• background可以在body标签中指定一个背景图画。CSS会做得更好，用如background-image的属性来处理背景图片。
• link、alink、vlink在body标签中用来指定连接（未访问，激活和已访问）。CSS宝贝──:link、:active和:visited会做这项工作。
• align可以用来对齐某个元素的内容（比如 <div align="center">Stuff</div>），但是，像center标签，CSS的text-align属性是新的老板。
• target可以用不同的方式打开一个连接，最常用的是打开新窗口（比如<a href="wherever.html" target="_blank">Help me</a>）。看起来不错，但你不要对你的网站这样做。用户并不预期不可思议的东西（比如新窗口）出现，而且最常用的浏览工具是浏览器的后退按钮，如果你打开新窗口，这将不可用。它是非法和不易用的。

/*
注意
保留标签的表现属性如图像的width和height，表格的cellpadding和cellspacing，是由于这些元素经常使用不同的值。这不是完美的解决方案，但如果你的网页有大量的图像和表格，你没有其他的明智选择，只好使用它们。

最让人难以理解的表现属性是textarea标签，它仅有cols和rows两个合法属性，在最新的HTML版本中也是必须的。
*/

良好标签，不良使用

要进入你的卧室你可以弯腰通过一个狗洞，但等等，还有一扇有把手的为人类准备的门！哇，看——刚好适合一个进入。

使用HTML标签（好标签），无论相信与否（相信它！），有一个很好的的理由：你使用它们有一个好前提，你就会有一个更好的结果。

网页本身对用户来说，比起HTML标签语法语义更易用，屏幕阅读器常会在遇到一个ul标签或者有着h1或h2的标题标签时强调突出它们。

在HTML标签世界中最被滥用的就是表格了。表格常常用来布局，但表格应该仅仅只用来展示表格式数据，就如它们本身的设计意图。不用表格的布局方法不是追求开悟的某种禅，它不仅可以显著地为网页减肥，而且更易于维护和重新设计。

/*
注意
有时侯设计者还会用在这里提到的这些标签和属性（特别是用表格来布局）来做过渡型的设计──既可以工作在老版本的浏览器上（尤其是Netscape4），也可以工作在现代浏览器上。表格确实可以在CSS不称职的Netscape4上有更强的表现控制。很不幸，这些用户很少而且越来越少了，而展现表格布局的缺点一览无遗的移动设备用户越来越多。上述的无表格设计可以预防这些缺点，尽管对一小部分的用户有些许的表现改变，但还能在所有的浏览其中保持着完全的功能。
*/

框架

Goldilocks认为喝上一杯麦片粥是一个不错的注意，但三个硕大的肉食哺乳动物突然出现，把她丢出窗户。框架就是装麦片粥的杯子。它们看起来似乎不错，但已经到了濒危阶段而且很快就会消失。

大部分的网站并不是用框架，而一般用户也会把一个文档当作一页。

有些情况，如你要防止用户不能把特定的网页添加到书签，又如你希望用户用Email或即时聊天软件推荐特定的网页，又或你想把整个网站变得十分复杂，让使用屏幕阅读器的用户在框架之间频繁操作，还或者你想迷惑搜索引擎，够了够了，你使用框架吧！

总之，框架只会增加复杂性和丧失可用性。

/*
注意
只要你遵循下列规则，你不会在犯错上有前途：

1）一个标签或者属性就算只有一点点的跟表现搭上，都不要使用。那是CSS的事。并且CSS做得更好。

2）把标签使用在如它的名字所暗示的用途上。表格标签是用在表格式数据上的。标题标签是用在标题上的。等等等等。

3）特定的内容用恰当的标签。列表用list，标题用hx(x = 1 - 7)等等等等。
*/