定义标题的最好方法

作者：阿宏 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
翻译：阿宏
一个文档标题，最好的定义方法是什么？要回答这个问题，先设想我们要在一个页面上定义文章的标题，通常我们有三个方法来实现这个简单目的：

方法一： 有意义吗？
<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来把标题样式化成任何我们喜欢的文字尺寸。

赞 (0)

相关推荐

  • Linux下设置防火墙白名单(RHEL 6和CentOS 7)的步骤

    进入Linux 命令行,编辑防火墙规则配置文件 iptables vi /etc/sysconfig/iptables 下面是一个白名单设置的例子: # Firewall configuration written by system-config-securitylevel # Manual customization of this file is not recommended. *filter :INPUT ACCEPT [0:0] :FORWARD ACCEPT [0:0] :OUTP

  • ASP.NET通过Remoting service上传文件

    最近在因为在学习Remoting,纯粹只是了解一下,发现Remoting确实是好东西. 我们通常有三种方式来使用remoting,一种是 第一种:Publishing a public object公开的对象创建在本地第二种:Remote creation of a public object (SAO)对象创建在客户端请求中第三种:Remote creation of a private object (CAO)对象创建在HOST上,客户端引用服务器上的对象 目次我也没有很好理解这三种的本质区

  • 详解MYSQL中重命名procedure的一种方法

    最近有用到对存储过程(procedure)重命名的功能,在网上找了一下资料都没有讲到在mysql中是如何实现的,当然可以删掉再重建,但是应该有别的方法,在"mysql"这个数据库(自带)中找了一下,发现两张表:func.proc,发现func表是空的,proc表记录了有关procedure和function有关的信息. 尝试对proc表进行更新,重命名成功了! 总结 以上所述是小编给大家介绍的MYSQL中重命名procedure的一种方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • centos7中firewall防火墙命令详解

    centos7中firewall防火墙命令详解

    为了架设ss在vultr上买了一个日本的vps 用的是centos7的系统 防火墙是 firewall 捣鼓了两天 在这里总结一下. 如果小伙伴也准备在vultr上买vps  在注册是 可以使用这个优惠连接http://www.vultr.com/?ref=6972993-3B 会的到 20$ 的优惠  也就可以免费使用4个月 如果你的系统上没有安装使用命令安装 #yum install firewalld //安装firewalld 防火墙 开启服务 # systemctl start fir

  • 定义标题的最好方法

    作者:阿宏 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 翻译:阿宏 一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一

  • php计算title标题相似比的方法

    本文实例讲述了php计算title标题相似比的方法.分享给大家供大家参考.具体如下: <?php /* * * @param string $title_1 题目1 * @param string $title_2 题目2 * @return float $percent 相似百分比 */ function title_similar($title_1,$title_2) { $title_1 = get_real_title($title_1); $title_2 = get_real_tit

  • Python基于numpy灵活定义神经网络结构的方法

    本文实例讲述了Python基于numpy灵活定义神经网络结构的方法.分享给大家供大家参考,具体如下: 用numpy可以灵活定义神经网络结构,还可以应用numpy强大的矩阵运算功能! 一.用法 1). 定义一个三层神经网络: '''示例一''' nn = NeuralNetworks([3,4,2]) # 定义神经网络 nn.fit(X,y) # 拟合 print(nn.predict(X)) #预测 说明: 输入层节点数目:3 隐藏层节点数目:4 输出层节点数目:2 2).定义一个五层神经网络:

  • Asp.net MVC定义短网址的方法

    在MVC的逻辑代码里,Controller和Action是必须的,但是在网址里,并不需要完全体现Controller和Action.比如我们经常希望看到http://localhost/About而不是http://localhost/Home/About. 默认的路由规则 新建MVC应用程序后,Global.asax里默认注册的路由规则是: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRout

  • Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法

    本文实例讲述了Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法.分享给大家供大家参考,具体如下: Zend Framework 里Zend_Mail这个组件用起来还是很方便的..它提供了通用化的编写与发送文本内容的邮件,当然它也兼容MIME标准的多个多个段的邮件消息的功能.Zend_Mail里通过默认的Zend_Mail_Transport_SendMail传输或能过Zend_Mail_Transport_Smtp来发送我们的电子邮件. Ze

  • Yii列表定义与使用分页方法小结(3种方法)

    本文实例讲述了Yii列表定义与使用分页方法.分享给大家供大家参考,具体如下: 方法一:控制器定义 function actionIndex(){ $criteria = new CDbCriteria(); $count=Article::model()->count($criteria); $pages=new CPagination($count); // 返回前一页 $pages->pageSize=10; $pages->applyLimit($criteria); $model

  • python中定义结构体的方法

    Python中没有专门定义结构体的方法,但可以使用class标记定义类来代替结构体,其成员可以在构造函数__init__中定义,具体方法如下. 复制代码 代码如下: class item:    def __init__(self):        self.name = ''     # 名称        self.size = 10     # 尺寸        self.list = []     # 列表 a = item() # 定义结构对象a.name = 'cup'a.size

  • JavaScript定义全局对象的方法示例

    本文实例讲述了JavaScript定义全局对象的方法.分享给大家供大家参考,具体如下: !function (factory) { factory(window['Hi'] = { __a: function () { console.log('Hi.__a'); }, __b: function () { console.log('Hi.__b'); }, __c: function () { console.log('Hi.__c'); } }); }(function (Hi) { if

  • jQuery实现新消息闪烁标题提示的方法

    本文实例讲述了jQuery实现新消息闪烁标题提示的方法.分享给大家供大家参考.具体如下: 该代码可实现在标题栏部位闪烁地显示提示信息. 1. jQuery插件风格代码 ;(function($) { $.extend({ /** * 调用方法: var timerArr = $.blinkTitle.show(); * $.blinkTitle.clear(timerArr); */ blinkTitle : { show : function() { //有新消息时在title处闪烁提示 va

  • 获取SqlServer存储过程定义的三种方法

    存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行. 存储过程中可以包含逻辑控制语句和数据操纵语句,它可以接受参数.输出参数.返回单个或多个结果集以及返回值. 由于存储过程在创建时即在数据库服务器上进行了编译并存储在数据库中,所以存储过程运行要比单个的SQL语句块要快.同时由于在调用时只需用提供存储过程名和必要的参数信息,所以在一定程度上也可以减少网络流量.简单网络负担. 存储过程的优点 A. 存储

随机推荐