标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook

Part 1: Get Down With Markup  从标记语法谈起

Chapter 2 标题

总览:
不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性增色不少.
从外观来说,网页的标题通常是使用较大的字号,或许会用和主体文字不同的颜色或者字体.标题的作用是"简要的描述往后章节所讨论的主题",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:设定了图标的标题示例

美特斯邦威：不顶寻常帖???

顶贴嘛，没有最好，只有更好！！！