在网站设计中正确运用HTML标签-盈岚科技

在网站设计中正确运用HTML标签

2018年07月11日

长期以来，格式化网站页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用<blockquote>标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签——HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。

既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。

那么正确、合理的文档结构能够带来什么好处呢？我们所提到的“结构”到底又是什么东西呢？

带有语义的标记

为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：

<b><font size="2">Our Family</font></b>

<font size="1">Pictured are Matt and Jeremy.As

usual,Matt is msking a funny face. We don't have many hotos

where he isn't.</font>

下面这一段HTML是为了达到正确的语义而编写的：

　<h3>Our Family</h3>

　<p>Pictured are Matt and Jeremy. As usual, Matt is

　making a funny face. We donÕt have many photos where he

　isnÕt.</p>

</div>

在第一个代码片断中，所有的HTML标签都是用来表现样式的。 <br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。

而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。

关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。

创建良好的标记

每个页面都在结构上有自己不同的需求，所以对于创建HTML来说，很难找到一个完美的一揽子解决方案。但我们却能够总结出一些通用的指导方针，将这些要点烂熟于胸，一定会对编写HTML大有裨益。

•选择DOCTYPE

在HTML的最开始部分声明DOCTYPE（Document Type的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。

“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和</body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。

一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

•指定语言和字符集

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。

示例：

设置文档的XML语言。这里设置为英语的ISO代码en。

设置文档的字符集。这里为UTF-8。

•指定标题

每个HTML页面都需要一个用来描述页面内容的<title>元素。在访客将页面保存至收藏夹时，<title>元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键字格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个唯一的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。

•选用恰当的元素

我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字，而不是为了得到缩进等。

当然，并不是所有的HTML元素都可以在XHTML 1.0 Strict标准中使用的。事实上，虽然XHTML 1.0 Strict标准（以及XHTML 1.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。

示例：

<h3>The Road to Enlightenment</h3>

而不要使用这样的HTML：

<code style="font-size: 1.5em;">The Road to Enlightenment</code>

•避免过度使用div和span

设计HTML时一个常见的错误就是过度使用div和span。少量、必要地合理使用可以明显增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。例如，若是h3更能表示内容的含义，那么就不应该使用div，span也不应该替代label的作用。

但这并不意味着应避免使用div和span。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。

示例：

　<h1>css Zen Garden</h1>

　　<h2>The Beauty of <acronym title="Cascading Style

　　Sheets"> CSS</acronym> Design</h2>

</div>

•尽可能少使用标签

前面两个提示所隐藏的含义就是，HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构，那么尽可能少使用标签应该是一个自始至终都要考虑的问题。仅仅使用必要的标签，将其他不必要的都删掉。这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高），也可以让浏览器能够很快完成文档的解析，即得到更快的呈现速度。

示例：

<p>The Zen Garden aims to excite, inspire, and encourage participation.</p>

而不要这样：

<div>

　<p><span class="text">The Zen Garden aims to excite,

　inspire, and encourage participation.</span></p>

</div>

•适当地使用class和id

为元素添加起标示作用的属性可以让你在稍后很容易将该元素与CSS或JavaScript关联起来。class是一类可重用的属性，能够被重复应用到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。

一个元素可以应用多个class，一个class也可以应用在多个页面元素上。我们也可以为同一个元素同时应用class和id，但要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字（a～z、A～Z、0～9）命名1，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了今后便于调试，还是小心为妙。

注释：1 下划线“_”也可以使用。——译者注

三个合法的标识符：

两个不合法的标识符：

3.时间的检验

若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能完美。

以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。

但是在同样的问题上，网站却没有此类的限制。每次用户来访，Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。

虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。