当前位置:园子博客 » Xhtml » 页面标题设计

页面标题设计

1月 13th, 2009 | Filed under Xhtml | 共有5,223次浏览

园子认为,在网页中,根据标题的重要程度排序是这样的:TITLE >h1 >h2 >h3 >STRONG。一个页面中h1一般用1次,h2一般2-8次,超过这种使用频率就要考虑一下网页设计规范了。我们可以这样理解,h1是皇帝,h2是丞相,而h3,h4,h5,h6是平民百姓,皇帝只能有一个,而平民百姓可以有成千上万个。

设计网页时我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

  1. 方法一:
    <span class=”heading”>文章标题</span>
    虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个css规则,分配其一个heading class,使其文字象标题一样显示。这也是刚刚开始学习网页设计时常用的一种方法。
    .heading {
    font-size: 24px;
    font-weight: bold;
    color: blue;
    }
    好了,现在所有的标题都用heading class标记成了大号的粗体字体,并且为蓝色。太棒了!但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会怎样呢?
    由于<span>标签是一个内嵌元素,我们可能需要把它嵌套在一个额外的块级元素中,比如<p>标签或<div>标签,为的是使它能够形成单独的行,这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。
  2. 方法二:<p>和<b>组合
    <p><b>文章标题</b></p>
    后来慢慢这样来做了:先使用一个段落标签,将会给我们带来块级的显示,然后通过<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时,我们面对的是同样无意义的结果。通过这种方法定义的标题有个缺点,我们无法把这个标题设计成不同于其他段落的样式。设想一下,我们可能想用一个特别的样式来突出标题,来使页面内容更清晰更具结构,但是用这个方法明显只能使其显示成粗体。
  3. 方法三:样式加实质
    <h1>文章标题</h1>
    后来接触到了网页标准,慢慢的学习了这种做法,<hn> 能为页面内容提供灵活的、可索引的、以及可样式化的结构。从<h1>一直到<h6>,代表了标题的六个级别,从最重要的<h1>到最次要的<h6>,因为它们本身就是块级的,也就不需要增加其它元素来使其单独成行。通过这样的设计,合理的分配使用<h1>-<h6>标签,然后再通过CSS强大的控制能力,我们就可以轻松驾驭自己的思想,把<h1>-<h6>发挥到极致,同时搜索引擎也更容易的检索到你的页面。

最后园子再总结一下个人观点:

  • <h1>在一个页面最好使用一次;
  • <h1>-<h6>都是块给标签,相互之间不能嵌套;
  • <h5>,<h6>一般都用在网页底部版权信息里面;
  • <h1>-<h6>最好只做标题来使用,那些类似于以图换字的技术个人建议最好少用。
目前还没有任何评论.
您必须在 登录 后才能发布评论.