为_CSS写_HTML

Writing HTML for CSS

如果你是一位网页设计新手，可能需要一些帮助提示来引导你进入HTML（并完全避开虽好但已过时的HTML技术）。如果你已经建立网页，那么可以挑出一些你应该忘记的不好的HTML编写习惯。本章余下的内容，将介绍一些让你妈妈都会引以为豪的HTML编写习惯，帮助你更好地使用CSS。

思考布局结构

Think Structure

HTML通过逻辑来划分和识别文本在网页中所起的作用，给文本添加内涵：比如，<h1>标签是对网页内容最重要的介绍。其他标题让你将内容分割到其他次要但相关的章节中去。就像你手上的这本书一样，例如，一张网页应该有个逻辑结构。本书每章都有个标题（当做<h1>）和几个小节（当做<h2>），它们依次限制更小的子节。想象一下如果每个字都依次排在一起成为一个长段落，那么，这些页面读起来多么困难。

注意：HTML/XHTML的一个好资源：请见Chuck Musciano和Bill Kennedy所著的HTML&XHTML: The Definitive Guide（“O’Reilly”出版），或者访问www.w3schools.com的在线HTML&XHTML教程。所有可用的HTML和XHTML标签的快速列表清单，请访问www.w3schools.com/tags/。

HTML提供了许多除标题之外的其他标签来弥补（即HTML中M的含义）内容，以识别它在网页上的作用。其中最常见的是文本段落用<p>标签，创建无序列表（非编号）用<u1>标签。其他鲜为人知的标签可以表示网页内容非常特殊的类型，如<abbr>指缩写，<code>指计算机代码。

当给CSS编写HTML代码时，使用一个最符合内容在网页中所起作用的标签，而不是根据内容表面看起来的样子来定义标签（见图1-2）。比如，导航栏中的许多链接并不是真正的大标题，也不是普通的文本段落。它更像一个选项的公告栏，因此<u1>标签是个好的选择。或许你会说：“但是在一个列表里，每个子项都是垂直地一个个互相叠加在一起。而我需要一个链接相邻的水平的导航栏。”别担心，用CSS魔法可以将一个垂直的链接列表转换成漂亮的水平导航条，如第9章里提到的那样。

学习两种新的_HTML标签

Two New HTML Tags to Learn

HTML的各种标签分类，不包含很多可能添加到网页上的内容。确实，<code>对弥补计算机程序代码是很棒的，但大部分人会发现一个更方便的<recipe>标签。完全没有标签可不行。庆幸的是，HTML提供两个通用的标签，让你更好地识别内容，并且在此过程中，提供允许给网页中不同元素配上CSS样式的“句柄”。

精华概述

一旦将图片化HTML的思维方式作为构造文档内容的方法，将CSS作为使内容看起来更好的工具，你就会发现编写HTML的更多好处。首先，可以提升像Google、Yahoo和MSN等网站所定义的搜索引擎排名。那是因为当搜索引擎爬取网站时，会索引网站内容，它们必须仔细检查网页上所有的HTML以发现实际内容。使用特殊标签（如<font>）的旧HTML方式和在网页设计中大量的表格，妨碍了搜索引擎的工作。事实上，一些搜索引擎在读取一定量的字符之后就停止读取页面的HTML。如果仅仅

为了设计而使用了大量的HTML，搜索引擎可能会漏掉网页上的重要内容，或者甚至完全漏掉对该网页的排名。

相比之下，简单的、结构化的HTML很容易被搜索引擎读到和索引。使用一个<h1>标签来表示最重要的网页主题（相比只是使文本变大和变粗的做法）是个明智的策略：当索引这个网页时搜索引擎会给标签中的内容更大的权重。

看看Google对于创建易于搜索的网页的建议，请访问www.google.com/webmasters/guidelines. html。

你也可以在http://www.webvisionsevent.com/ podcasts/WV05_Alan_Knecht.mp3的2005年Web远景会议上一个关于SEO（搜索引擎优化，search engine optimization）的优秀演讲中听到一个播客（podcast），并阅读到一篇由该演讲者所著的关于同一主题的文章：www.digital-web.com/ articles/seo_and_your_web_site/。

简单的HTML对搜索引擎来说是友好的<div>标签和<span>标签就像可以装进内容的空容器。因为它们没有内在的视觉属性，你可以使用CSS让它们看起来像你想要的那样，<div>（用于分割）标签表示任何不连续的内容块，很像一个段落或一个标题。但是也能够用它来包围任意数量的其他元素，所以，你能够插入一个标题、一些段落，以及在单个<div>块内部的公告列表。<div>标签是将网页细分成多个逻辑区域的好方法，如横幅、页脚、工具条，等等。使用CSS，可以稍后再定位每个区域，来创建复杂的网页布局（本书第3部分包含了这一主题）。

<span>标签被用于行内元素，即出现在一个更大段落或标题中的文字或短语。它就像其他行内的HTML标签，如<a>标签（用于给段落中的文字添加链接）或者<strong>标签（用于强调段落中的一个词语）。例如，可以使用一个<span>标签来表示公司名称，然后通过CSS用不同的字体、颜色等来高亮显示该名称。这是这些标签作用的一个例子，顺便看看这对属性——id和class——经常用于给网页局部添加样式。

<p>Call customer service at 555-555-5501 for more information</p>

</div>

上述简要介绍的这些标签并非是你最后一次见到。它们经常被用在重CSS型的网页上，在本书中你将学会怎样结合CSS来应用它们，以获得对网页的创造性控制（第47页）。

可以遗忘的_HTML

HTML to Forget

CSS能使你编写更简单的HTML的一大原因在于：你可以停止使用一些只是使网页美观的标签和属性。<font>标签是最明显的例子。它主要的作用是给文本添加颜色，改变大小和字体。它在使网页结构更易被理解方面不起任何作用。

这里是一些可以轻松地用CSS取代的标签和属性列表。

避免用<font>来控制文本的显示。CSS在文本处理方面更棒（格式化文本方面的技术请见第6章）。

停止使用<b>和<i>来使文字变成粗体和斜体。CSS可以使任何标签变成粗体或斜体，因此你不需要这些专门用于格式化的标签。然而，如果你一定要强调一个文字或一个短语，那么就用<strong>标签（浏览器显示<strong>文本为粗体）。对于次要的文本，使用<em>标签来强调（浏览器将该标签内部的内容斜体化）。

注意：为了将一项公布的标题斜体化，<cite>标签起到了一箭双雕的作用。它使标题变成斜体，并给标题加注标签，成为一个便于搜索引擎工作的引用。这个标签是值得收藏的。

忽略用于网页布局的<table>标签。它仅仅用来显示表格式的信息，如电子数据表、进度表和图表等。正如本书第3部分介绍的，也可以借助CSS，用比<table>标签更少的时间和代码来完成所有网页布局。

排除仅仅用来增强内容展现的笨拙的<body>标签属性，如不用background（背景）、bgcolor（背景颜色）、text（文本）、link（链接）、alink（点击链接时）和vlink（点击链接后）来给网页设置颜色和图片。CSS将这些工作完成得更好（见第7章和第8章所介绍的对应这些属性的CSS）。也可以丢掉专门针对浏览器来设置网页边距的属性：leftmargin（左边距）、 topmargin（上边距）、marginwidth（边距宽度）和marginheight（边距高度）。CSS可以轻松地处理网页边距（见第7章）。

不要滥用<br/>标签。如果你习惯使用<br/>（HTML中的<br>）标签来插入一个换行，而不创建一个新的段落，那就得好好改改了。（浏览器自动地——有时令人愤怒地——在段落间插入空格，包括在标头和<p>标签之间。过去，设计师们使用精细的权宜之计来避免他们不想要的段落间距，比如用一些换行来取代一个<p>标签，用<font>标签使段落的第一行看起来像个标题。）使用CSS的边距控制，可以轻松地设置你要在段落、标题和其他块级元素之间看到的间距量（见第135页）。

一般来讲，给color（颜色）、border（边框）、background images（背景图片）或者alignment（对齐方式）标签添加属性——包括格式化一个表格的color（颜色），background（背景）和border（边框）的属性——都是过时的HTML。用alignment（对齐方式）属性给段落和表格单元定位图片和居中文本也一样。替代方法是，可用CSS控制文本的位置（placement）（见第114页）、边界（border）（见第141页）、背景（background）（见第145页）和图片对齐方式（image alignment）（见第172页）。

在网站上引导访问者的技巧

Tips to Guide Your Way

通常来说，有张地图对于了解地形走向总是好的。如果还不能确定怎样使用HTML来创建结构完善的网页，那么，以下这些小技巧便可以让你轻松地开始工作。

每页只用一个<h1>标签来识别该页的主题。把它当作一个章的标题：每章只会有一个标题。正确使用<h1>的另一个好处是，有助于网页被搜索引擎恰当地索引（见前面“思考布局结构”）。

使用标题来表示文本的相对重要性。再次提醒思考轮廓：当两个标题对你的网页来说同样重要时，那就给两个标题使用同等级的标题；如果一个不太重要或者它是另一个的子标题，那就使用下一级的标题。例如，<h2>下面就是<h3>标签（见图1-4）。一般来说，有序地使用标头，尽量不跳号比较好，如不要在<h2>下面就用<h5>标签。

加油站

HTML遵循一定的原则：例如，<html>标签包着网页上的其他标签，<title>标签一定要出现在<head>标签里面。XHTML提供一套甚至更为严格的原则。这些原则很容易被忘记，或者干脆出现失误。错误（或者无效，正如那些专家们所说）的HTML导致网页在不同的网页浏览器上看起来不一样。更重要的是，你无法用无效的HTML创建有效的CSS。所庆幸的是，有一些工具可以检查网页上的HTML写得是否正确。

检验网页的最容易的方法请访问W3C的网站http://validator.w3.org/（见图1-3）。W3C，或者万维网联盟，是负责决定许多Web技术和语言标准的组织，包括HTML、XHTML和XML。

如果W3C检验器发现网页上的错误，它会告诉你是什么错误。如果你用Firefox，则不必访问W3C网站便可以下载一个能直接在浏览器上检验网页的扩展。

它甚至可以试图修正所遇到的问题。你可在此处下载该扩展：http://users.skynet.be/mgueury/ mozilla/。另一个类似的适用于Safari浏览器工具的下载网址为：www.zappatic.net/safaritidy/。

检验网页

给文本的停顿、段落处使用<p>标签。

当你已经有一个包含几个相关项目的列表时，就使用无序列表，比如导航链接、标题，或者一整套像这样的技巧。

使用有序列表来表示一个过程的步骤，或者定义一组项目的顺序。本书的教程（见第123页）是个好范例，像“最受僧侣们欢迎的10大网站”这样的排名列表也不错。

要创建一个术语表和它们的定义或者描述，就用<dl>（定义列表）标签，并结合使用<dt>（定义术语）以及<dd>（定义描述）标签。（怎样结合使用这些标签的一个范例请访问www.w3schools.com/tags/tryit.asp?filename= tryhtml_list_definition。）

如果要包含一个引用语，比如来自另一个网站的文本摘录、一篇电影评论、或者只是你祖父的一些至理名言，试着给长段落使用<blockquote>标签，或者给俏皮话使用<q>标签。

利用一些生僻的标签如<cite>来引入一本书的标题、报纸文章或者网站，用<address>标签来识别和提供该网页创作者的联系信息（用做版权提示也很棒）。

如第20页中所详细阐述的，要完全避开任何一个只是用来改变文本或图片展现效果的标签或者属性。因为如你所见，CSS完全可以轻松地实现这些功能。

当没有HTML标签符合条件，但又必须识别网页上的一个元素或一组元素，来获得与众不同的展现效果时，那就使用<div>和<span>标签（见第18页）。你将在后续的章节中得到更多关于怎样使用这些标签的建议（例如第47页）。

记得要关闭标签。开始的<p>标签需要它的搭档一起配合（关闭的</p>标签），就如其他标签一样，除了一些自我关闭的标签如<br/>和<img/>之外。

用W3C检验器来检测网页（见图1-3和第22页方框中的内容）。书面很差的或笔误严重的HTML将导致很多古怪的浏览器错误。

【查看所有评论(0)条】