标记语言——标题

总览:

不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性增色不少.

从外观来说,网页的标题通常是使用较大的字号,或许会用和主体文字不同的颜色或者字体.标题的作用是"简要的描述往后章节所讨论的主题",W3C这样描述 — 显示网页内各个段落的概要.

怎样来创建一个页面标题来使得我们要展现的信息得到最有效的利用?在这个章节中,我们将研究几种常用的处理标题的方法,试着从中找出其中一种对我们最有帮助的方式,然后,我们将使用一些css的技巧和窍门来为最棒的方法装饰一番.

创建文档标题的最好方法是什么?

在回答这个问题之前,让我们假设现在正要把标题放置在文档的页首,我们来看看能够达成类似效果的三种方式.

方法A:有意义吗?

<span class="heading">Super Cool Page Title</span>

虽然<span>标签在某些场合会是个方便的标签,但是对于页面标题来说,它的意义并不大,使用这个方法的唯一好处是我们可以为 heading 类指定一个css样式,以便让文字看起来像是个标题.

.heading {

font-size: 24px;

font-weight: bold;

color: blue;

}

现在,所有标记了heading类的标题都会变大,变粗,变蓝,很棒对吧?但是,如果有人使用一个不支持css的浏览器访问这个页面会怎么样呢?

举例来说,如果我们把css样式放在旧浏览器不支持的外部样式表文件里 — 或者屏幕阅读器为有障碍的用户朗读页面时会怎么样呢?通过这些途径访问这个页面的使用者将看不到(听不到)标题和正文文字的差异.

class="heading"这样的标注方法稍~~微的描述了标签内容的意义,但是<span>只是个一般用途的容器,只是让大部分浏览器改变默认显示样式而已.

搜索引擎在抓取到这个页面时,会跳过<span>标签就像它不曾在那边一样,不会为里面可能包含的关键字提升权重,稍后在本章节内会提到更多搜索引擎和页面标题的关系.

最后,由于<span>标签是一个行内元素,我们大多需要把方法A的内容在放置到另一个块级容器中,比方说<p>或者<div>,以便让它独占一行.这样会生成许多不必要的代码,就算你加上需要的容器,不支持css的浏览器仍然会以他本来的方式显示文字,让用户看不出标题和正文的任何区别.

方法B: P和B的组合

<p><b>Super Cool Page Title</b></p>

方法B使用了段落标签,这会让我们得到我们想要的块级元素的显示效果,而<b>标签会让文字呈现粗体的样式(在大多数浏览器上) — 但是我们以这样的方式标记重要的标题时,仍然要面对同样缺少语义性的结果.

不像方法A,<b>标签的存在就算缺少css样式的定义,在大多数浏览器中还是会将文字以粗体的样式呈现.但是和<span>标签一样,搜索引擎不会为段落内的粗体文字提升关键字权重.

难以加上样式

使用单纯的p和b的标签组合,让我们无法为这个标题加上和其它段落有所区别的样式,或许我们想以独特的方式强调标题,为页面内容加上定义和结构 — 但是使用了这个方法让它呈现粗体后,我们就没有办法去做这些事情了.

方法C:样式与实质

<h1>Super Cool Page Title</h1>

哈哈,我们的好朋友标题标签来了,标题标签从一开始就是存在的,但是许多网页设计师还是无法以一致的方式使用它们.如果使用得当,标题标签能够提供页面内容的锚点,提供灵活的,可索引的,可更改样式的结构.

从标签本身的观点来看,你一定会爱上它的简洁,它们不需要额外的容器标签,你甚至能说这个方法能比前两个方法节省了一些字节,可能可以忽略,但是每小一个字节就是改变.

<h1>到<h6>分别代表了6层标题,从最重要的<h1>到最不重要的<h6>,他们本身就是块级元素不需要一个额外的容器就能自成一行,简单而又有效率 — 是完成这项工作的最佳工具.

容易定义样式

因为<h1>标签拥有独特的意义,不像<b>或者<p>标签那样会在文内用到多次,因此我们能用css为它加上各式各样的样式(我们会在本章的"更多技巧"中深入讨论).

更重要的是,就算不加上任何的样式定义,标题标签看起来就很明显是个标题!浏览器会用大字体,粗体字呈现<h1>的内容,就算去掉页面所有的样式定义,仍然可以看到文档的结构,因为正确的标题标签描述的是内容意义,而不是表现方式. (图 2-1)



图 2 - 1: 脱离样式后使用标题标签的页面内容

屏幕阅读器,PDA,移动电话和其他一些视觉的非视觉的浏览器也能识别并正确处理标题标签的内容,把它的重要性突出于页面其他内容之上.使用<span>标签,不支持(或无法支持)css的浏览器就不会认为它有什么特别之处.

讨厌的默认样式

在网页设计史上,设计师们都会避免使用标题标签,完全是因为不加上样式的时候,标题标签看起来就和怪物没什么两样,二者择其一,其中一部分人会因为默认字体大小太大而避免使用<h1>或<h2>而去使用字体大小较小的标号较高的标题标签.

然而,有个重点值得强调,我们可以根据自己的喜好通过定义css轻易的改变这些标题标签的样式 — 举例来说,<h1>未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对<h1>的恐惧.

对搜索引擎的友好

这是最大的优点.搜索引擎十分喜欢标题标签,<span>标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的<h1>~<h6>标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.

搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完<title>和<meta>标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.

所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?

附带一提的标签顺序

在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签<h1>,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:

<h1>Super Cool Page Title</h1>

那么下一个标题(如果不是另一个<h1>的话),就应该是<h2>,在接下去则使用<h3>等等,你也许不会跳过某级标题,比如说在<h1>之后直接使用<h3>.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.

如同先前所述,设计者可能会使用<h4>代表页面里最重要的标题,只因为它的预设字体大小不如<h1>那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.

概要

让我们大致上回顾一下,为什么使用标题标签(<h1>到<h6>)来标记页面内的标题会比较好.

方法A:

可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别.

搜索引擎不会特别重视以<span>标记的标题

我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.

方法B:

可视化浏览器只会用粗体显示内容,继续使用预设的字体大小.

我们无法为标题加上和内文不同的独特样式

搜索引擎同样不会特别重视以<p><b>创建的标题的内容.

方法C:

传达了标题标签中的文字确切的含义.

不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容

搜索引擎会重视标题标签中的关键字.

技巧延伸

这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)

简单的样式

使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的<h1>标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个<h1>的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?

让我们超级酷的标题来告诉我们自己吧:

<h1>Super Cool Page Title</h1>

让我们用css来改变它的颜色,字体和大小吧:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

}

就像我们刚才所说的,非常简单,整个页面的所有<h1>都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 2-2:



图 2-2: 标题样式示例

接下来我们继续在标题文字下面加上1像素宽的灰色边框(如图 2-3):

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-bottom: 4px;

border-bottom: 1px solid #999;

}



图 2-3:加上灰色底边的标题样式示例

我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.

另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.

加上背景

背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #fff;

padding: 4px;

background-color: #696;

}

我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.



图2-4:设定了内补丁和背景色的标题示例

背景和边框

只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.

这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #666;

padding: 4px;

background-color: #ddd;

border-bottom: 2px solid #ccc;

}

借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:



图2-5:设定背景和底边的标题

平铺背景

用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):



图2-6 用Photoshop创建的小图片

我们可以用css把这个小图片放到我们的<h1>底部去:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-bottom: 14px;

background: url(10x10.gif) repeat-x bottom;

}

设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)



图2-7:设定平铺背景的标题示例

方便替换的图标

我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.

代码和上面的平铺背景大致相同:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-left: 30px;

background: url(icon.gif) no-repeat 0 50%;

}

我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.



图2-8:设定了图标的标题示例

容易更新

让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用<img>标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的<img>标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!

如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.

变色龙效果

下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在2003年4月为Fast Company杂志的网站(http://www.fastcompany.com/)做标准重构时大量使用的技巧.

那时我们在网站里的<h3>标签旁边用了许多13X13的小图标,就像这样:

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>

有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.

为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:



图2-9: 13X13的透明图标(放大后)

为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对<h3>标签内的图片使用这条规则,以便达到我们想要的效果:

h3 img {

background: #696;

}

这段css代码表示<h3>标签内的所有<img>标签都把背景设为绿色,背景色会透过透明像素显示出来,但是白色部分仍然还是白色,如此一来,每个月只需要修改这条css规则,换上不同的颜色,就能瞬间改变网站上每个图标的色彩了,就像变魔术一样.

对齐<img>标签

为了使图标和文字正确的对齐(我们希望垂直居中),因此我们加上了这条css规则:

h3 img {

background: #696;

vertical-align: middle;

}

这条规则会使图标和<h3>文字内容垂直居中,图2-20就是设定玩的标题:



图2-10:以css为图标加上背景色的示例

这个例子还能说明另一个重要的概念—以css指定背景色彩会出现在任何页面内指定的图标或是css图标后面.

举例来说,我们回头看看"方便更新的图标"这个示例,为它加上背景色看看:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #fff;

padding-left: 30px;

background: #696 url(transparent_icon.gif) no-repeat 0 50%;

}

如此以来 transparent_icon.gif 会显示在相同规则中稍早定义的背景色之上(如图2-11) —在这个例子中,背景色是#696,也就是撞球桌的绿色.



图2-11 设定了背景图,背景色的标题示例

当你为了考虑色彩为主的页面上加小圆角,装饰图标时,这个小技巧就十分好用了.这些不重的图片可以完全放进css文件里面,未来打算更新的时候也就可以轻松替换.现在多用点心思.就能节省未来许多的工作.

总结

我希望通过比较集中常用的方法后,你能发觉正确使用标题标签的好处.不管是视觉,非视觉浏览器或者其他设备,都能正确的历届标题的含义,并且以适当的方法展现它们,搜索引擎也会为他们建立索引,你也可以轻松的以css应用和修改需要显示的效果.