定义网页标题的最好方法
发布时间:2008-05-07 13:29:00
一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:
方法一: 有意义吗?
<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来样式化标题标签是多么的简单,希望可以帮助你减轻巨大的恐惧。
猜你喜欢
- 我的Godaddy主机的主域名已经过期一年多了,因为这个并不影响空间的正常使用,也就没有续费。昨晚想看看最近网站蜘蛛爬行情况,却发现Goda
- 一.分析选择关键词了解客户目标受众人群、受众率,推测有效的行业买家年龄段常用搜索习惯及搜索行为;选择精准产品关键词并骤一剖析筛选,确定最终预
- 站长朋友们在使用CMS建站的过程中有时候少不了要做一些供用户填写信息的表单,如果是单独去写程序去实现又显得小提大作,或者也显得麻烦,需要创建
- 打开:require/postreply.php查找:$old_content = stripslashes($atca
- 说明:满分50分,时间8分钟。请把答案写在纸上。一、单项选择题(2分×15=30分)1.搜索引擎搜索结果页面,简称什么?
- 据国外媒体报道,微软最新版本的IE浏览器存在一个安全漏洞,能够对安全的网站实施严重的安全攻击。据Register网站的两个消息来源称,IE
- 很多人说SEO就是作弊,也有很多把SEO当做一个无所不能的工具来看,其实SEO的工作到底如何定性,确实很难说,但网站SEO的最大的作用还是整
- Apache服务器已经内置用户验证机制,大家只要适当的加以设置,便可以控制网站的某些部分要用户验证。大家只要跟着我一步步做下来就应该能轻松实
- <?php $db_server = "localhost";$db_user = "TPAR
- 站点运营推广类的文章百度下可以搜索到36万条之多。站长对此类话题的关注程度可见一斑。许多中小站长面对一个新上线的站点并不知如何良好的运营和广
- 了解网赚,有一年整了。注册,点击,投票。都做过。首先说注册,注册是一个简单,但麻烦的任务,有些地方是限制地区的,有些地方是限制时间的。很多广
- 11月13日消息,10月底,土豆网与正式成为中国移动手机视频原创频道的独家运营合作伙伴和内容提供商。昨天,土豆网和中影集团宣布联合制作第一部
- InfoWorld举办的签名挽留Windows XP活动得到的支持数已经超过75000人,微软的生命周期表显示Windows XP将在6月底
- 网络上曾经有过关于跨站脚本攻击与防御的文章,但是随着攻击技术的进步,以前的关于跨站脚本攻击的看法与理论已经不能满足现在的攻击与防御的需要了,
- 8.使用安全密码一个好的密码对于一个网络是非常重要的,但是它是最容易被忽略的。前面的所说的也许已经可以说明这一点了。一些公司的管理员创建帐号
- 10月16日消息,对于大多数企业来说,升级到微软公司即将推出的操作系统Windows 7是不可避免的趋势。全球技术研究和咨询公司Gartne
- 要做竞争对手分析,首先就是要确定竞争对手,已经存在的和潜在的竞争对手也许都盯着你。互联网上的竞争点很多体现在网站上,这里为大家整理了竞争对手
- 什么是网站设计中最重要的一个环节?很多人会回答是网站的可读性,怎么样才能使你的内容更容易阅读。读者来到你的网站是在阅读他们关心的内容,如果文
- 首先这三家公司都是很有实力、很有信誉的公司,属于技术性比较好的公司。但是三家各有优缺点:parked.com是一家伟大的公司,做得早,资源多
- 应用程序事件为:HTTP 筛选器 DLL ISAPI_Rewrite.dll 加载失败。数据是错误。解决方法:第一步 为ISAP