[教程] Bad Tags ——有害的标签 [复制链接]

csmtv　楼主

初级会员

帖子: 117
体力: 150
威望: 4

发表于 2006-11-28 06:06:55 |显示全部楼层

本人翻译的文章，水平有限，所以语句不太顺，希望大家指点下

原文：http://www.htmldog.com/guides/htmlintermediate/badtags/
已经翻译HTML初中级教程，后所在栏目：http://www.w3cpro.cn/tutorial/index.html
本站找友情连接，要加的朋友请跟贴

十六有害的标签 Bad Tags
这篇文章注意以前完美童话中的html标签，有害的，糟糕的，明显丑陋的，应该被排除在标准html之外的标签，要想只有一半工作量要么颠覆浏览器要么使用更加简单推荐的新标签。

尽管前面的基础教程已经提出了符合标准的建议，但初学者基础不同或者练习不对，这里进行总结。

html正尝试从表现转向语意，进而分离语意（HTML）和表现（CSS）。这个已经大范围运用于网页，因为这样一个单一的表现指令（CSS文件）可以使用在许多的页面。这样，网站更利于管理，想改变全站只需改变一个简单的代码。

一些有害的标签其实是简单的表现标签（比如small），它们可以用CSS里面相同意思的代码取代。其他一些不是表现的标签，但却没必要（比如font标签）或者对可用性不利（比如blink）。

标签 Tags
下面列举的标签可以用更好的选择：

b标签的是加粗的意思，这里可以用strong代替，或在在css里面添加font-weight:bold。

i表示斜体字元素，可以使用em代替，或是在css里面添加font-style:italic。

big用来表现大文字，标题上可以使用h1,h2等等代替，其他可以在cssfont-size里具体控制。

small用来表现小文字，可以在cssfont-size里控制。

hr表示水平线，可以在CSS里用border-top或border-bottom代替，也可用图片表现。

上面提及的标签都适应最近的HTML标准，但是它们没有赋予语意给内容。它们也许有更多用处但它们没有显著的害处，当站在下面糟糠的标签上可能非常容易犯错。

u表示下划线元素。它让文本像连接一样保持下划线，这也许就是这个标签消失的原因，人们真的不喜欢没有连接的文本有下划线。

center可以让元素居中。CSS属性text-align不仅可以居中center还有left,right和justify。 menu用来制作一个菜单列表，它比ul干的漂亮，但是无序列表更加普遍，ul取代menu。

layer和div元素很像，但只工作在老版本netscape浏览器，用处不大。

blink或marquee。对它们坚决说不。

font，可以用来定义字体的名称、大小、颜色。旧的网站（甚至现在的）在整个页面连续不断的使用font标签，就像白蚁灾祸。一些来自网页创建软件，布置font标签环绕在每个元素控制文字颜色或大小。用font标签应用到每一个元素，用CSS表示的话只需简单的一句即可，而且可以全站实现更改。使用这个方法，不仅可以减轻网页体积，改变简单的一句css语句就可改变font所表示的内容。这样保持了网站风格的一致。font标签和滥用表格是网页体积臃肿的主要原因。

属性 Attributes

现在你可能正确使用标签，但它们有一些令人烦恼的寄生属性，可能导致变味。

name分配一个name给元素，在form元素比如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最严重的滥用就是表格，表格被用来布局，但它们仅仅只是用来表示表格数据。不用表格布局的想法不是像佛教徒一样寻求启迪，它有真正的益处，不仅减轻网页体积，同时可以容易的维护和重新设计网页。

有时一些设计者使用一些标签和属性完成过渡性的设计（特别是表格布局），一是可以支持老版本浏览器（Netscape 4）。在Netscape 4表格比CSS的表现好，但它的用户非常少而且正在减少，现在移动用户正在增多，表格布局就显的非常糟糕。上面提到的表格优点远超缺点，原因在于在尽量少的风格下页面需要考虑所有浏览器的功能。

框架 Frames
金发姑娘认为这是一个非常不错的主意为一碗稀饭帮助她，但是随后三个大型食肉动物出现把她扔出了窗户。框架就像是属于熊的一碗稀饭。它们看起来不错，但是危险时刻存在。

大部分网站都不用框架，大部分网站用户只使用单一的页面。

但是如果，由于一些原因，你需要防止用户添加一个指定的页面到它们的书签，或者你想防止经由email或即时信息介绍的指定页面，或者你想添加另外一个级别的整体复杂性给使用屏幕阅读器的残疾用户，他们需要在框架间导航，或者你想进入搜索引擎地狱，就用框架吧。

基本上，框架什么也不做，只增加了复杂性和失去可用性。

最后如果你跟循下面的规则，不会错的太离谱。

1)如果标签或属性的名称比较生僻，建议注释下，或不用它。这样使用css的效率会提高。

2)让标签做符合它名称的工作。表格就用在表格数据。标题就用标题，等等。

3)当你有明确的内容，使用适当的标签。列表用列表，标题用标题，等等。

好的阅读效果请访问：http://www.w3cpro.cn/tutorial/xhtml/98.html

[ 本帖最后由 csmtv 于 2006-11-28 06:11 编辑 ]