製作網頁的第一步,就是學會編寫HTML語言。
HTML是一種標籤語言,透過在內容上附加各種標籤,達到在瀏覽器中正確展示的目的。正確地編寫HTML,不僅是製作網頁的必要條件,也是對網頁進一步處理、新增CSS和Javascript效果的前提。
編寫HTML語言的關鍵,就是把標籤用對,使它能夠正確傳達語義資訊,不要使用無含義或錯誤含義的標籤。下面就是一份我整理的HTML語言的編寫指南。
一、塊級元素
div
含義:頁面內容的一個獨立組成部分。
常見的用途有三種:1)劃分頁首、頁尾、頁邊欄或導航欄等等;2)表示頁面的分欄;3)將文章進一步分成幾個部分,比如正文、評論、文章的後設資料等等。
示例:
<div id="header">頁面的頭部</div>
h1, h2, h3, h4, h5, h6
含義:內容的標題。
h1是最高一級的標題,下一層標題使用h2,依次類推。除了h1以外,其他5個級別標題在一個頁面中都可以出現多次,h1只能出現一次。
示例:
<h1>一級標題</h1>
<h2>二級標題</h2>
p
含義:表示段落。
它是文章內容的基本組成部分,也可以用來表示詩歌中的一節。p與div的主要區別是,前者表示文字段落,後者表示更廣義的段落。
在P標籤中,不應該再包含其他塊級元素。此外,也不應該使用空的p標籤。
示例:
<p>這是一個段落。</p>
blockquote
含義:表示一段引用自其他來源的獨立文字。
它引用的文字通常有一定的長度,以塊級元素的形式出現。
blockquote應該總是與cite標籤配合使用,cite用來指明引用材料的來源。
示例:
<blockquote>
不是在沉默中爆發,就是在沉默中滅亡。
<cite>魯迅《為了忘卻的紀念》</cite>
</blockquote>
在瀏覽器的預設樣式中,blockquote有文字縮排的效果,但是不要單單因為這個原因,而使用它。
blockquote有兩個屬性,第一個是cite屬性,用來指明引用材料的URI地址;第二個是title屬性,用於提供引用材料的相關資訊。
示例:
<blockquote cite="http://w3c.org/" title="文章的標題,作者,發表日期">"我正在此處引用W3C的標準。"</blockquote>
二、行內元素
a
含義:與href屬性搭配使用時,連結至外部連結,或者同一頁的某個錨點。
示例:
<a href="chapter2.html">第二章</a>
abbr
含義:表示內容是某個術語或短語的縮寫形式,它有一個title屬性,用來指明縮寫所代表的原始片語。
示例:
<abbr title="Europe">Eur</abbr>
acronym
含義:表示內容是一個片語的首字母簡稱,比如BBC、WTO。
它有一個title屬性,用來指明屬性所代表的原始片語。
acronym與abbr的主要區別是,前者往往是一個可以獨立使用的詞,而後者不是。這意味著acronym肯定是abbr,但是abbr不一定是acronym。
示例:
<acronym title="World Wide Web">WWW</acronym>
em
含義:表示強調。
em所指明的內容,應該比其周圍的內容更重要。
注意,如果你只是想表示斜體或者引用書名,那就不要使用em標籤,而是用CSS命令(font-style:italic)。
示例:
<em>我正在強調這句話。</em>
strong
含義:表示比em更強的強調。
示例:
<strong>我正在以更大的強度,強調這句話。</strong>
address
含義:表示某個特定文件或文件的某個部分的聯絡資訊或聯絡方式。
注意:1)所有的聯絡方式都可以用這個標籤表示,而不僅僅是地址。2)它是一個塊級元素,不要用它來單獨標識某個Email地址或電話號碼。
示例:
<address>
<a href="../People/張三/">張三</a>,
<a href="../People/李四/">李四</a>,
$ 日期:1999/12/24 23:37:50 $
</address>
cite
含義:表示引述的來源。
它用來指明書目資訊、個人引語、或者參考文獻中的外部資源。
示例:
<cite>《哈利波特系列小說》</cite>的作者是J.K.羅琳。
dfn
含義:用來表示一個定義。
示例:
<dfn>Internet Explorer</dfn>是最常見的瀏覽器。
del
含義:表示該資訊已被刪除。
通常用於日期和時間,表示文件已經發生了變化。
ins
含義:與del的作用正好相反,表示修訂後插入的內容。
code
含義:表示程式程式碼。
samp
含義:表示程式程式碼的輸出結果。
kbd
含義:表示由使用者鍵入的文字。
它很少使用,但是在某些場合,你想演示如何使用一個程式,它就會有用。它通常與code和samp結合使用。
var
含義:表示程式中的變數或引數,與code, samp, kbd結合使用。
q
含義:表示一個較短的引語。
注意:瀏覽器對這個標籤的支援很不好,因此不推薦使用。
sub/sup
含義:表示下標/上標。
span
含義:用來標識其他標籤不適合表示的內容,是一個通用型的行內標籤。
三、列表元素
ul, ol, li
含義:表示一組相同格式的資訊。
當你有一張清單的時候,就應該使用列表元素。ul是無序列表,通常前面有一個強調符號;ol是有序列表,前面通常採用數字編號。
dl, dd, dt
含義:表示一個術語列表。
dt表示術語,dd表示該術語的定義,可以為單個術語提供多個定義。
示例:
<dl>
<dt>虛懷</dt>
<dd>胸襟寬大,虛心謙退</dd>
<dt>虛榮</dt>
<dd>表面上的榮耀;虛假的榮名</dd>
<dt>虛構</dt>
<dd>憑想像編造出來</dd>
</dl>
四、表格元素
參見我整理的《精通HTML表格的使用》一文。
五、分割元素
br
含義:表示換行。
注意,除了少數場合(比如詩歌中的分行),應該儘量避免使用這個標籤,因為它並沒有特別的語義含義,而且分行的視覺效果完全可以透過p標籤、列表標籤和CSS命令達到。
hr
含義:表示兩個部分之間用一根水平直線分割。
事實上,不用這個標籤,也有辦法顯示水平直線。這個標籤的唯一優勢,也許就是在沒有CSS的場合,它可以產生視覺分割的效果。
六、不建議使用的元素
以下的標籤都沒有明確的語義,只涉及到視覺效果,很可能在以後版本的HTML語言中被廢除。建議不要使用。
* big
* small
* b
* i
* tt
* pre
七、已經被廢除的標籤
下面的標籤已經被廢除,不應該繼續使用了。
* applet
* center
* font
* dir
* isindex
* menu
* s
* strike
* u
[參考文獻]
* Semantics, HTML, XHTML, and Structure
* Guide to Semantic Use of HTML Elements
* mozilla.org Markup Reference
(完)