天天看點

HTML語言編寫指南

制作網頁的第一步,就是學會編寫html語言。

html是一種标簽語言,通過在内容上附加各種标簽,達到在浏覽器中正确展示的目的。正确地編寫html,不僅是制作網頁的必要條件,也是對網頁進一步處理、添加css和javascript效果的前提。

編寫html語言的關鍵,就是把标簽用對,使它能夠正确傳達語義資訊,不要使用無含義或錯誤含義的标簽。下面就是一份我整理的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

[參考文獻]

(完)