当前位置:  编程技术>WEB前端

定义标题的最好方法

    来源: 互联网  发布时间:2014-09-06

    本文导语:  作者:阿宏 2005-4-15 20:45:18原文:What is the Best Way to Mark up the Title of a Document? 说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号:ISBN:1590593812。我们会陆续翻译此书中有价值的章节。 原作者:Dan Ced...

作者:阿宏 2005-4-15 20:45:18
原文:What is the Best Way to Mark up the Title of a Document?
说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号:ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
原作者:Dan Cederholm
翻译:阿宏
一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

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

.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok,现在所有的标题都用heading class标记成了大号的粗体字体,并且为蓝色。太棒了!但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会怎样呢?

举个例子,如果我们设置的这个外部样式表的规则不被老版本的浏览器支持,会怎样?又或者有视觉障碍的人用屏幕阅读器来阅读这个页面,又会怎样?一个访问者通过这些途径所看到(或听到)的应该和这个页面上正常的文本没有任何区别。

尽管class="heading"为这个标签增加了一点意义,但仍然只是一个普通的标签,可以被大多数浏览器的缺省样式所修改掉。

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

最后,由于标签是一个内嵌元素,我们可能需要把它嵌套在一个额外的块级元素中,比如

标签或

标签,为的是使它能够形成单独的行,这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。

方法二:

和组合

文章标题


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

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

难以设计样式

用普通的

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

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

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

一直到,代表了标题的六个级别,从最重要的()到最次要的()。他们本身就是块级的,不需要增加其它元素来使其单独成行。简单,有效——就是好工具。

轻松定制样式

因为我们使用标签是唯一的,而或

标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来样式化。

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

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

讨厌的默认样式

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

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

对搜索引擎友好的

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

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

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

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

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

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


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间java.awt类radialgradientpaint的类成员方法: getradius定义及介绍
  • 请问可以用宏定义定义一个二维数组吗?
  • java命名空间javax.xml.stream类xmlinputfactory成员方法: seteventallocator定义参考
  • 想修改路径定义,想找到在哪里定义的,应该怎么办?
  • java命名空间java.text接口attributedcharacteriterator的类成员方法: getallattributekeys定义及介绍
  • php定义数组和使用示例(php数组的定义方法)
  • java命名空间java.beans接口propertyeditor的类成员方法: supportscustomeditor定义及介绍
  • 上次问题解决了,原来是extern被重定义了。。。天阿,关键字也可以被重定义。。。。。欢迎接分
  • java命名空间javax.swing类jtextarea的类成员方法: getcolumnwidth定义及介绍
  • 如何定义一个可变参数的自定义函数
  • java命名空间javax.swing类jtextfield的类成员方法: getcolumnwidth定义及介绍
  • 下面的变量我都下了定义,为什么还出现没定义的信息
  • java命名空间javax.swing类actionmap的类成员方法: allkeys定义及介绍
  • oracle异常(预定义异常,自定义异常)应用介绍
  • java命名空间javax.swing类inputmap的类成员方法: allkeys定义及介绍
  • 为什么我在头文件time.h里找不到time_t的定义呢?只有这个定义typedef __time_t time_t;
  • java命名空间javax.rmi.corba接口valuehandler的类成员方法: iscustommarshaled定义及介绍
  • 函数有定义怎么提示没有低能定义的错误呢?
  • java命名空间javax.swing类jcomponent的类成员方法: resetkeyboardactions定义及介绍
  • android自定义控件和自定义回调函数步骤示例
  • java命名空间java.beans接口customizer的类成员方法: setobject定义及介绍
  • 自定义公共类的装载,包的定义


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3