title_CSS/HTML を定義する最良の方法-CSSチュートリアル-php.cn

title_CSS/HTML を定義する最良の方法

WBOY

リリース： 2016-05-16 12:10:54

オリジナル

2114 人が閲覧しました

作者：阿宏 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來改變這些標題標籤－舉個例子，一個並非一定是佔滿大半螢幕的巨大標版。在後面，我將證明用CSS來樣式化標題標籤是多麼的簡單，希望可以幫助你減輕巨大的恐懼。

對搜尋引擎友善的

這是一個巨大的優點。搜尋引擎喜歡標題標籤。另一方面，一個標籤或普通的加粗的段落標籤卻在意味著次要一點。適當的用
到
標記你的標題，只需要你的一點點努力，然而卻讓搜尋引擎更容易的檢索到你的頁面，讓人們最終能找到它們。

搜尋引擎機器人會給予標題標籤特別的關注——這是你可能放置一些關鍵字的地方。就像檢索到
和<meta>，它們會順著標題標籤往頁面下方找。如果你不使用這些標籤，那麼包含在裡面的關鍵字將不會被認為是有價值的，從而被忽略掉。 <p>所以只要付出一點點的努力，你就能增加人們基於頁面的內容找到你的網站的可能性。聽起來不錯，不是嗎？ </p> <p>關於標題的次序<br>在範例中，這個特別的標題是頁面中最重要的，因為它是文件的標題。因此，我們使用最重要的標題標籤，</p> <h1>。順應W3C的規範，有些人認為跳過數個標題級是個不好的使用。舉個例子，想像我們在下面的頁面： </h1> <p></p> <h1>文章標題</h1> <br>我們接下去的標題（如果不是用另一個<h1>重複的話）應該是<h2>，然後是<h3>，等等。你也許不應該在<h1>後面跳過一級，直接跟上<h3>。我傾向於同意以上的觀點，順著行文保持層級的連續性，來建構一個排版結構。這樣的話，為一個已經存在的頁面添加標題和樣式就更容易了，你會減少因使用超出的數字而導致的錯誤。 </h3> </h1> </h3> </h2> </h1> <p>前面提到的，設計者也許會用</p> <h4>來標籤一個頁面上最重要的標題，僅僅是因為它的缺省的字體尺寸不像<h1>那樣令人生厭的巨大。但記住，先結構，後設計。我們總是能用CSS來把標題樣式化成任何我們喜歡的文字尺寸。 <br> </h1> </h4>