Bad Tags — 有害的标签

本文由会员 cmstv 翻译希望大家指点

原文: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

时间: 2024-11-19 20:32:18

Bad Tags — 有害的标签的相关文章

初学网页标准应该注意:有害的标签

标准|初学|网页 这篇文章注意以前完美童话中的html标签,有害的,糟糕的,明显丑陋的,应该被排除在标准html之外的标签,要想只有一半工作量要么颠覆浏览器要么使用更加简单推荐的新标签. 尽管前面的基础教程已经提出了符合标准的建议,但初学者基础不同或者练习不对,这里进行总结. html正尝试从表现转向语意,进而分离语意(HTML)和表现(CSS).这个已经大范围运用于网页,因为这样一个单一的表现指令(CSS文件)可以使用在许多的页面.这样,网站更利于管理,想改变全站只需改变一个简单的代码. 一些

分类(Categories)和标签(Tags)

今天网页教学网要和大家一起探讨一个网站可用性话题,那就是分类和标签的可用性问题.像博客或网络杂志这类的网站会以各种各样的方式组织和排序它们的内容以使更多的内容得到关注.按日期排序和按作者排序是网站系统通常的自动处理方式,在这两种方式基础上有两种概念来完成排序:分类(Categories)和标签(Tags).你可以同时使用这两种方法,但是可能会制造很多影响用户体验的困扰.那么你到底应该用哪种方法和为什么要用那种方法呢?让我们来一一调查这两种排列方法. 分类(Categories) 分类就像是文件夹

jQuery 标签插件 Tags Input Plugin 使用实例教程

一这个插件是jquery开发的标签功能加强,生成或删除标签非常好用,还能对输入重复标签进行检查,配合JQuery autocomplete插件实现自动完成功能.官网:http://xoxco.com/projects/code/tagsinput/ 使用方法如下  引入 <link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css"

在Wordpress iNove主题中利用Simple Tags插件实现输出相关日志的方法

考虑各方面的情况,我没有采用其他一些wordpress相关日志(RelatedPosts)插件,而是充分应用Simple Tags插件强大的相关日志,相关标签功能,结合iNove主题,利用Simple Tags实现了输出相关日志的功能,感觉还不错.虽然Simple Tags可以通过后台设定相关日志,但是添加的相关日志列表不能控制其出现的位置. 安装步骤如下: 第一步:下载并安装Simple Tags插件.为什么要先安装这个插件呢?因为Simple Tags插件可以根据标签产生相关日志. 第二步:

自定义分页标签

近期在做的S2SH项目,因为多处用到分页,BOSS要求小弟将其抽象出来.小弟不才,实际参与开发的经验也就1年. 于是花了点时间将其做成自定义标签供所有需要分页的业务调用.小结一下,供新手参考 自定义标签使用如下: JSP页面引入: <%@ taglib uri="/htdz-tag" prefix="htdz-tag"%> 在需要摆放翻页的相关按钮处使用: <htdz-tag:PagerTag pagesize="${pagesize}&

Struts 2杂谈(2):如何向标签文件中的Struts 2标签传递参数值

标签文件是JSP自定义标签中的一种,实现的方法在WEB-INF\tags目录或子目录中建立一个.tag文件,如table.tag,并通过taglib指令来引用.tag文件所在的目录,代码如下: <%@ taglib prefix="t" tagdir="/WEB-INF/tags"%> 如果在标签文件中使用Struts 2标签,就会带来一个问题.下面先看一个例子. 在WEB-INF\tags目录中建立一个table.tag文件,代码如下: <%@

使用Spring MVC表单标签

概述 在低版本的Spring中,你必须通过JSTL或<spring:bind>将表单对象绑定到HTML表单页面中,对于习惯了Struts表单标签的开发者来说,Spring MVC的这一表现确实让人失望.不过这一情况已经一去不复返了,从Spring 2.0开始,Spring MVC开始全面支持表单标签,通过Spring MVC表单标签,我们可以很容易地将控制器相关的表单对象绑定到HTML表单元素中. 在上一篇文章<Spring MVC的表单控制器>中(http://tech.it16

中英文对照学习认识一下XML语言

xml XML was designed to describe data and to focus on what data is.XML 的产生是用来描述数据并关注数据的实质是什么 HTML was designed to display data and to focus on how data looks.HTML 则是用来显示数据,它所关注的是数据显示的效果 What You Should Already Know [ 哪些是你应该已经知道的 ] Before you continue

十大WordPress MU管理员插件

Wordpress MU是Wordpress的多用户版本,因为程序结构的关系,Wordpress MU并不一定能兼容Wordpress的插件.WordPress MU有全局的插件和针对单个站点的插件,分别存放在不同的目录./wp-content/mu-plugins/ 目录下存放的是全局的插件,无需逐个博客激活插件,默认就已经自动调用./wp-content/plugins/ 目录下存放的是分站点的插件,只针对单个站点有效,这类插件和WordPress的插件基本兼容. 对于WordPress M