制作網頁的第一步,就是學會編寫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>
四、表格元素
五、分割元素
br
含義:表示換行。
注意,除了少數場合(比如詩歌中的分行),應該盡量避免使用這個标簽,因為它并沒有特别的語義含義,而且分行的視覺效果完全可以通過p标簽、清單标簽和css指令達到。
hr
含義:表示兩個部分之間用一根水準直線分割。
事實上,不用這個标簽,也有辦法顯示水準直線。這個标簽的唯一優勢,也許就是在沒有css的場合,它可以産生視覺分割的效果。
六、不建議使用的元素
以下的标簽都沒有明确的語義,隻涉及到視覺效果,很可能在以後版本的html語言中被廢除。建議不要使用。
* big * small * b * i * tt * pre
七、已經被廢除的标簽
下面的标簽已經被廢除,不應該繼續使用了。
* applet * center * font * dir * isindex * menu * s * strike * u
[參考文獻]
(完)