CSS技巧:新闻网页标题定义的最好方法

css|技巧|网页

一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

方法一: 有意义吗?
<span class="heading">文章标题</span>

虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个CSS规则,分配其一个heading class,使其文字象标题一样显示。
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}

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

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

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

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

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

方法二:<p>和<b>组合
<p><b>文章标题</b></p>

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

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

难以设计样式

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

方法三:样式加实质
<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来把标题样式化成任何我们喜欢的文字尺寸。

"关于标题的次序"这段其中说到H安顺序排H1H2...理论上应该是这样,但在实际定制样式中,你对整个网站结构只有做到100%的了解你才能够做到这一点,另外在工作中很多也是因为H这个标签有默认的样很多人都不很喜欢应用它,不如DIV,P之类的标签容易控制.但我们应该是用理论指导我们用正确的方法工作.

时间: 2024-08-02 14:18:41

CSS技巧:新闻网页标题定义的最好方法的相关文章

CSS技巧:网页设计关于cellspacing和cellpadding

css|技巧|设计|网页|网页设计 表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式:<table cellspacing="0" cellpadding="0"></table>很多朋友会说表现在结构中,这样不符合标准,那如何将这个表现拿出来,有些朋友或许很迷惑.我们可以用table的border-collapse: collapse;属性 来代替cellspacing="0",用

JS实现消息来时让网页标题闪动效果的方法_javascript技巧

本文实例讲述了JS实现消息来时让网页标题闪动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <script> var g_blinkid = 0; var g_blinkswitch = 0; var g_blinktitle = doc

网站网页标题描写的正确方法

摘要: 一.什么是网页标题 在浏览一个网页时,通过浏览器顶端的蓝色显示条出现的信息就是网页标题. 如下图所示.网页标题就是整个网页的题目,是对其内容的高度概括和总结.网页标 一.什么是网页标题 在浏览一个网页时,通过浏览器顶端的蓝色显示条出现的信息就是"网页标题". 如下图所示.网页标题就是整个网页的题目,是对其内容的高度概括和总结.网页标题作为网友第一眼看到的网页信息传递之所在,应当让用户能在这里找到想要找到的信息,所以接下来我们要来看看网页标题的分类以及它的写法. 二.网页标题应有

CSS技巧汇总:网页制作常用的22个CSS技巧

文章简介:22个必须知道的css技巧. 1.改变选中文字的背景和颜色 <PRE style="LINE-HEIGHT: 24px; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0px; MARGIN: 0px 0px 10px; ORPHANS: 2; LETTER-SPACING: no

学习CSS技巧:DIV下图片自适应解决方法

css|技巧|解决|自适应 我们(特别是像我一样的菜鸟)经常会遇到一个问题--图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码--尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用.下面的

用CSS来改变网页鼠标显示样式的方法

一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型.但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型. 用css控制的语法如下: <span >文本或其它页面元素</span> 把 * 换成如下15个效果的一种: hand.crosshair.text.wait.default.help.e-resize.ne-resize.n-resize.nw-resize.w-resize.sw-resize.s-resize.se-re

CSS技巧学习:像table一样布局div

css|技巧 翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显

电商网站基本模块网页标题描写方法

一.什么是网页标题 在浏览一个网页时,通过浏览器顶端的蓝色显示条出现的信息就是"网页标题". 如下图所示.网页标题就是整个网页的题目,是对其内容的高度概括和总结.网页标题作为网友第一眼看到的网页信息传递之所在,应当让用户能在这里找到想要找到的信息,所以接下来我们要来看看网页标题的分类以及它的写法.   二.网页标题应有的原则 1.网页标题应该符合用户阅读习惯 网页标题应该是符合用户阅读的习惯的,包括词组的顺序,语句的通顺度,不能前后意思颠倒,语无伦次.应当语句简单.易懂. 2.网页标题

网页标题中到底有多少文章可做

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一个网页的标题不管对于排名来说还是对于营销来说都是成败的关键之一,今天主要来给大家介绍一下在SEO关键词排名技巧中网页标题有多少文章可以做? 什么是网页标题< title > 网页标题即就是我们常说的< title >标签,相当于一篇文章的题目,是对网页内容主题的概括.搜索引擎一般都是提取网页标题 < title