定义标题的最好方法

2016-01-29 12:08 8 1 收藏

定义标题的最好方法,定义标题的最好方法

【 tulaoshi.com - Html 】

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

方法一: 有意义吗? <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)。他们本身就是块级的,不需要增加其它元素来使其单独成行。简单,有效——就是好工具。

轻松定制样式

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

因为我们使用<h1标签是唯一的,而<b或<p标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来样式化。

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

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

讨厌的默认样式

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

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

对搜索引擎友好的

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 <title和<

来源:http://www.tulaoshi.com/n/20160129/1484769.html

延伸阅读
标签: 电脑入门
经过几次的更新之后,你是否也发现了每次更新之后标题栏的颜色始终没有改变,但实际上我们确实可以自行来改变,换一种颜色换一个心情。 这里我们需要下载一个文件,下载之后解压,然后将其中的文件复制到系统盘中的WindowsResourcesThemes目录下,如下图所示: 操作完成后,双击运行其中的Windows文件,然后你就会发现你的标题栏颜色已...
标签: Web开发
JS中定义类的方式有很多种: 1、工厂方式   function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     doc...
减肥的最好方法:洗热水浴 到了冬季,可以选择洗热水澡来帮助减肥,不仅可以舒缓心情,还可以让全身的毛孔就会自动扩张来,帮助瘦身减肥。 减肥的最好方法:暖手袋 其实我们冬天所用的暖手袋也是可以帮助我们减肥的,另外作用也很大哦。暖手袋的作用相当于贴身的小火炉,不断从手部给身体提供热量,祛除寒冷,自然不用再吃东...
显示图标(Display)、移动图标(Motion)、文本输入与格式化、文字和图像的显示模式 完成后流程图 制作步骤: 1、向设计窗口中依次拖入两个显示图标(Display)和一个移动图标(Motion),并命名如上图所示。 2、双击“背景图”显示图标(Display),打开程序展示窗口(PrTulaoshi.comesentation Window),这个窗口就是最终用户看到的窗口。同时出现...
标签: Web开发
写在前面 标题党是网络上一小撮利用各种颇具创意的标题吸引眼球,以达到各种个人目的网民们的自发性组织。其主要行为简而言之即发帖的标题严重夸张,帖子内容通常与标题完全无关或联系不大。 摘录自《标题党白皮书》 引用以上网友总结,是便于大家对标题党形成普适的认知。本文并无心作弄各位,吸引眼球也只是一种尝试。希望抽空...

经验教程

98

收藏

38
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部