日期:2013-09-20  浏览次数:21204 次

  针对教程网站或者旧事网站,教程标题或者旧事标题如何定义呢?

  文档标题是文档的最次要的组成部分,也是搜索引擎蜘蛛爬行时最关注的内容,该如何定义标题呢?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

  A、没有语义的标题定义:

<span class="heading">文章标题</span>

  虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个CSS规则,使其文字象标题一样显示。

.heading {
font-size: 24px;
font-weight: bold;
color: red;

  如今所有的标题都用heading class标记成了大号的粗体字体,并且为红色。但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会是什么样的情况呢?

  虽然class="heading"为这个标签添加了一点意义,但<span>仍然只是一个普通的标签,可以被大多数浏览器的缺省款式所修正掉。

  搜索引擎检索这个页面时会略过<span>标签,就好象它不存在一样,不会对其可能包含的关键字给于一点额外的注重。在后面我们会更多的谈到搜索引擎和标题的关系。

  最后,由于<span>标签是一个内嵌元素,我们可能需求把它嵌套在一个额外的块级元素中,比如<p>标签或<div>标签,为的是使它能够构成单独的行,这会进一步被非必要的代码弄乱你的标签。而这些额外添加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。

  B、无助的<p>和<b>组合

  <p><b>文章标题</b></p> 
  使用一个段落标签,将会给我们带来块级的显示,<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时,我们面对的是同样无意义的结果。

  不象方法A,<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样,搜索引擎也不会由于有一些东西在段落中被加粗了而给予更高的优先。

  难以设计款式

  用普通的<p>和<b>的组合,也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的款式。我们可能想用一个特别的款式来突出标题,来使页面内容更清晰更具结构,但是用这个方法只能使其显示成粗体。

  C、款式加实质

  <h1>文章标题</h1> 
  恩,多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们,<Hn> 就能为页面内容提供灵活的、可索引的、以及可款式化的结构。

  这也是聪明的定义方法,你会发现它很简单。不再需求额外的标签,你可以说,这仅仅比另外两个方法节省了一点点的字节,可以忽略不计,但节省一点是一点。 

  <h1>不断到<h6>,代表了标题的六个级别,从最重要的(<h1>)到最次要的(<h6>)。他们本身就是块级的,不需求添加其它元从来使其单独成行。简单,无效——就是好工具。 

  为标题轻松定制款式

  由于我们使用<h1>标签是独一的,而<b>或<p>标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来款式化。

  更重要的是,虽然完全不用款式,一个标题标签也能明显的表示出一个标题!可视化的浏览器把 <h1>显示成更大的粗体。一个非款式化的页面将以被期望的那样显示文档结构,用适当的标题标签来传达意思。

  屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白,碰到一个标题标签时该做的事情,正确的处理,比页面上的普通文本更注重的来对待。而使用<span>标签,那些不支持CSS的浏览器就不会特别的对待它。

  讨厌的默认款式

  以往,由于浏览器默认的缺省值非常的丑陋,设计者们也许会避免完全的使用标题标签。或者,由于缺省值的巨大尺寸而避免使用<h1>或<h2>,取而代之的是用更高数值的标题标签来实现更小的尺寸。

  然而,需求重点强调的是,我们可以很简单的用CSS来改变这些标题标签——举个例子,一个<;h1>并非一定是占满大半屏幕的巨大标版。在后面,我将证明用CSS来款式化标题标签是多么的简单,希望可以协助你减轻巨大的恐惧。

  对搜索引擎的敌对

  这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面,一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题,只需求你的一点点努力,然而却让搜索引擎更容易的检索到你的页面,让人们最终能找到它们。

  搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 <title>和<meta>,它们会顺着标题标签往页面下面查找。如果你不使用这些标签,那么包含在里面的关键词将不会被认为是有价值的,从而被忽略掉。

  所以只需付出一点点的努力,你就能添加人们基于页面的内容找到你的站点的可能性。听上去不错,不是吗?

  关于标题的次序

  在范例中,这个特别的标题是页面中最重要的,由于它是文档的标题。因此,我们使用最重要的标题标签,<h1>。顺应W3C的规范,一些人认为跳过数个标题级是个不好的使用。举个例子,想象我们在下面的页面:

  <h1>文章标题</h1> 
  我们接下去的标题(如果不是用另一个<h1>反复的话)应该是<h2>,然后是<h3 >,等等。你也许不应该在<h1>后面跳过一级,直接跟上<h3>。我倾向于同意以上的观点,顺着行文保持级别的连续性,来结构一个排版结构。这样的话,给一个曾经存在的页面添加标题和款式就更容易了,你会减少因使用超出的数字而导致的错误。

  前面提到的,设计者也许会用<h4>来标签一个页面上最重要的标题,仅仅是由于它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住,先结构,后设计。我们总是能用CSS来把标题款式化成任何我们喜欢的文字尺寸。

  简单的款式

  使用CSS,最容易做的事情就是给我们的标题设置不同的字体款式。我们可以建立一个CSS规则,它将把款式使用到页面中出现的所有<h1>标签(或者是整个站点,当使用一个外部款式表的时候)。随后,如果我们想要改变整个站点上所有出现<h1>标签的地方的颜色、尺寸、字体的话,我们所有需求做的事情就是修正一些CSS规则,然后它们将立即改变。听上去非常诱惑人,不是吗?

  让我们认识一下我们本人的超级酷的标题:

  <h1>www.52css.com</h1> 

  用CSS改变颜色、字体和尺寸:

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #red;

  页面上所有找到<h1>的地方都将使用Arial字体(或者是缺省的sans-serif字体)、24点大小以及红色。我们可以给文字加上边框,或者让h1的