一些基礎的HTML Tag

HTML裏，比較基礎的Tag主要用於標題，段落和分行。

學習HTML最好的方法，就是跟着示例學。爲了各位學習的方便，我們準備了一個簡單的HTML編輯器，你可以在左邊寫HTML代碼，然後點擊上面的按鈕，查看HTML的顯示結果。

試試看吧！

示例：一個非常簡單的HTML文件

這個示例算是一個最簡單的HTML文件，只包含了最基本的能構成一個HTML文件的Tag。通過這個例子，你可以看到瀏覽器是如何顯示這個文件的，以此對HTML文件有個最初的認識。

示例：簡單的段落

這個示例顯示在HTML文件裏如何分段。

正文標題

這個示例告訴你如何在HTML文件裏定義正文標題。

HTML用<h1>到<h6>這幾個Tag來定義正文標題，從大到小。每個正文標題自成一段。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

段落劃分

在HTML裏用<p>和</p>劃分段落。

<p>This is a paragraph</p>

<p>This is another paragraph</p>

換行

通過使用<br>這個Tag，可以在不新建段落的情況下換行。<br>沒有Closing Tag。

用<p>換行是個壞習慣，正確的是使用<br>。

<p>This <br> is a para<br>graph with line breaks</p>

HTML註釋

在HTML文件裏，你可以寫代碼註釋，解釋說明你的代碼，這樣有助於你和他人日後能夠更好地理解你的代碼。

註釋可以寫在之間。瀏覽器是忽略註釋的，你不會在HTML正文中看到你的註釋。

一些小建議

HTML文件會自動截去多餘的空格。不管你加多少空格，都被看做一個空格。一個空行也被看做一個空格。

有些Tag能夠將文本自成一段，而不需要使用<p></p>來分段。比如<h1></h1>之類的標題Tag。

更多示例

更多段落

這個示例顯示了段落的特性。

換行

這個示例告訴你如何在HTML文件裏換行。

正文標題

這個示例教會你如何在HTML文件裏顯示正文標題。

居中的正文標題

這個示例告訴你如何將正文標題居中顯示。

加條橫線

這個示例演示瞭如何在HTML文中加條橫線。

代碼註釋

這個示例演示如何在HTML代碼中加上代碼註釋，這些註釋只顯示在HTML源代碼中，而源代碼最終形成的網頁裏是看不到這些註釋的。

背景顏色

這個示例演示如何改變HTML文件的背景色。

HTML常用格式

HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以瞭解各種文本格式Tag如何改變HTML文本的顯示。

常用文本格式Tag

Tag Tag說明

<b> 粗體bold

<i> 斜體italic

<del> 文字當中劃線表示刪除

<ins> 文字下劃線表示插入

<sub> 下標

<sup> 上標

<blockquote> 縮進表示引用

<pre> 保留空格和換行

<code> 表示計算機代碼，等寬字體

示例

HTML常用的格式Tag

這個示例用了上述Tag，你可以對比一下HTML的顯示結果。

--------------------------------------------------------------------------------

如何看HTML的源代碼

在瀏覽器看到的HTML網頁，是瀏覽器解釋HTML源代碼後產生的結果。

要查看這個HTML的源代碼，有兩種方法。一是點擊鼠標右鍵，點擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。

利用View Source得到網頁的源代碼，你可以由此借鑑一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人複雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎再說。

HTML特殊字符顯示

HTML字符實體(Character Entities)

有些字符在HTML裏有特別的含義，比如小於號<就表示HTML Tag的開始，這個小於號是不顯示在我們最終看到的網頁裏的。那如果我們希望在網頁中顯示一個小於號，該怎麼辦呢？

這就要說到HTML字符實體(HTML Character Entities)了。

一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。

比如，要顯示小於號，就可以寫<或者<。

用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是less than的意思，但是其劣勢在於並不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。

注意：Entity是區分大小寫的。

如何顯示空格

通常情況下，HTML會自動截去多餘的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。爲了在網頁中增加空格，你可以使用 表示空格。

最常用的字符實體(Character Entities)

顯示結果說明 Entity Name Entity Number

顯示一個空格    

< 小於 < <

> 大於 > >

& &符號 & &

" 雙引號 " "

其他常用的字符實體(Character Entities)

顯示結果說明 Entity Name Entity Number

® 註冊商標 ® ®

×乘號 × ×

÷除號 ÷ ÷

HTML利用超鏈接打開鏈接文件

先看兩個示例

建立一個超鏈接

這個示例演示瞭如何在HTML文件裏創建超鏈接。

將一個圖片作爲一個超鏈接

這個示例演示瞭如何將一個圖片作爲一個超鏈接，即點擊一個圖片，可以連接到其它文件。

a和href屬性

HTML用<a>來表示超鏈接，英文叫anchor。

<a>可以指向任何一個文件源：一個HTML網頁，一個圖片，一個影視文件等。用法如下：

<a href="url">鏈接的顯示文字</a>

點擊<a></a>當中的內容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。

比如鏈接到admin5.com/html站點首頁，就可以這樣表示：

<a href="http://www.admin5.com/html">站長網站長學院admin5.com/html首頁</a>

target屬性

使用target屬性，可以在一個新窗口裏打開鏈接文件。

<a href="http://www.admin5.com/html" target=_blank>站長網站長學院admin5.com/html首頁</a>

示例

title屬性

使用 title 屬性，可以讓鼠標懸停在超鏈接上的時候，顯示該超鏈接的文字註釋。

<a href="http://www.admin5.com/html" title = "站長網站長學院網頁教程與代碼的中文站點">站長網站長學院網站</a>

如果希望註釋多行顯示，可以使用
作爲換行符。

<a href="http://www.admin5.com/html" title = "站長網站長學院
網頁教程與代碼的中文站點">站長網站長學院網站</a>

示例

name屬性

使用name屬性，可以跳轉到一個文件的指定部位。

使用name屬性，要設置一對。一是設定name的名稱，二是設定一個href指向這個name：

<a href="#C1">參見第一章</a>

示例

name屬性通常用於創建一個大文件的章節目錄(table of contents)。每個章節都建立一個鏈接，放在文件的開始處，每個章節的開頭都設置Name屬性。當用戶點擊某個章節的鏈接時，這個章節的內容就顯示在最上面。

如果瀏覽器不能找到Name指定的部分，則顯示文章開頭，不報錯。

鏈接到email地址

在網站中，你經常會看到“聯繫我們”的鏈接，一點擊這個鏈接，就會觸發你的郵件客戶端，比如Outlook Express，然後顯示一個新建mail的窗口。用<a>可以實現這樣的功能。

HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)

HTML初學者會經常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網頁中引用另外一個HTML網頁作爲超鏈接(hyperlink)？怎樣在一個網頁中插入一張圖片？......(相關教程：HTML超鏈接；HTML圖片)

如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。

爲了避免這些錯誤，正確地引用文件，我們需要學習一下HTML路徑。

HTML有2種路徑的寫法：相對路徑和絕對路徑。

HTML相對路徑(Relative Path)

同一個目錄的文件引用

如果源文件和引用文件在同一個目錄裏，直接寫引用文件名即可。

我們現在建一個源文件info.html，在info.html裏要引用index.html文件作爲超鏈接。