網頁設計　html教程　欄目．

上文：chapter 1 清單

原文出處

標準化設計解決方案 - 標記語言和樣式手冊
web standards solutions the markup and style handbook

part 1: get down with markup  從標記語法談起

chapter 2 標題

總覽:

不但所有網頁都需要有標題,而且如果標記正確的話,他們能為網頁設計和易用性增色不少.

從外觀來說,網頁的標題通常是使用較大的字號,或許會用和主體文字不同的顏色或者字體.標題的作用是"簡要的描述往后章節所討論的主題",w3c這樣描述 — 顯示網頁內各個段落的概要.

怎樣來創建一個頁面標題來使得我們要展現的信息得到最有效的利用?在這個章節中,我們將研究幾種常用的處理標題的方法,試著從中找出其中一種對我們最有幫助的方式,然后,我們將使用一些css的技巧和竅門來為最棒的方法裝飾一番.

創建文檔標題的最好方法是什么?

在回答這個問題之前,讓我們假設現在正要把標題放置在文檔的頁首,我們來看看能夠達成類似效果的三種方式.

方法a:有意義嗎?

<span class="heading">super cool page title</span>

雖然<span>標簽在某些場合會是個方便的標簽,但是對于頁面標題來說,它的意義并不大,使用這個方法的唯一好處是我們可以為 heading 類指定一個css樣式,以便讓文字看起來像是個標題.

.heading {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  }

現在,所有標記了heading類的標題都會變大,變粗,變藍,很棒對吧?但是,如果有人使用一個不支持css的瀏覽器訪問這個頁面會怎么樣呢?

舉例來說,如果我們把css樣式放在舊瀏覽器不支持的外部樣式表文件里 — 或者屏幕閱讀器為有障礙的用戶朗讀頁面時會怎么樣呢?通過這些途徑訪問這個頁面的使用者將看不到(聽不到)標題和正文文字的差異.

class="heading"這樣的標注方法稍~~微的描述了標簽內容的意義,但是<span>只是個一般用途的容器,只是讓大部分瀏覽器改變默認顯示樣式而已.

搜索引擎在抓取到這個頁面時,會跳過<span>標簽就像它不曾在那邊一樣,不會為里面可能包含的關鍵字提升權重,稍后在本章節內會提到更多搜索引擎和頁面標題的關系.

最后,由于<span>標簽是一個行內元素,我們大多需要把方法a的內容在放置到另一個塊級容器中,比方說<p>或者<div>,以便讓它獨占一行.這樣會生成許多不必要的代碼,就算你加上需要的容器,不支持css的瀏覽器仍然會以他本來的方式顯示文字,讓用戶看不出標題和正文的任何區別.