网页制作中HTML元素的应用

　　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标签语法语义更易用，屏幕阅读器常会在遇到一个ul标签或者有着h1或h2的标题标签时强调突出它们。 

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

注意 

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

框架 

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

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

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

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

注意 

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

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

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

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