默識| 玩博客的基礎(chǔ)：HTML 語言

抽屜 2007-05-26

展開全文

玩博客的基礎(chǔ)：HTML 語言

Published on 08/27,2006

博客南開更換服務(wù)器著實忙活了一陣子，現(xiàn)在終于可以喘口氣寫點東西了，然而寫作的沖動好像總是在比較忙的時候出現(xiàn)，空閑時反到?jīng)]多少感覺，很是矛盾。

言歸正傳，最近常有網(wǎng)友詢問如何修改博客模板的問題，從提問方式上看明顯是習(xí)慣了傻瓜型博客服務(wù)的操作方式，拖拽，選顏色，選樣式等等，以至于完全忽略了 HTML 語言的存在，即使模板代碼完全可編輯，他們都不知該從何入手。有些人或許認(rèn)為博客本來就該弄得越簡單越好，用戶所要做的只是每天寫寫文章，貼貼圖片。如果真的變成那樣子，博客就成不了一種文化了：飯煮熟了就可以吃，但還是有人研究烹飪；水燒開了就能喝，但還有人會學(xué)習(xí)茶道…… 玩博客也是一樣的，您可以僅僅把它當(dāng)作個人日記，也可以玩出各種花樣，前提是必須用心學(xué)習(xí)一些基礎(chǔ)的東西，比如 HTML 語言。

那么 HTML 究竟是什么鬼東西呢？按照老規(guī)矩，我不會去解釋它的英文含義的(因為早就忘記了)，只要將其理解為網(wǎng)頁描述語言就好。網(wǎng)頁描述語言是玩博客的最基礎(chǔ)知識，其作用是通過既定的語法告訴瀏覽器如何顯示您的博客頁面。瀏覽器能夠識別的語言一定很怪異吧？雖然樣子上的確有點怪，但實際使用起來并不困難。為了幫您快速進(jìn)入思考狀態(tài)，請先看下面的示例：

<html> <head><title>這里的內(nèi)容會顯示在瀏覽器的標(biāo)題欄(title bar)上</title></head> <body> <h1>大家好，我是一坨 HTML 網(wǎng)頁</h1> <h2>這是 2 號標(biāo)題(header)</h2> <h3>這是 3 號標(biāo)題</h3> <p>這是一個段落(paragraph)，同一個段落里面可以用<br>換行(break line)</p> <p>又一個段落的第一行<br>第二行了<br>第三行了<br>其實 HTML 很容易理解的。</p> <ol> <li>這是有序列表(ordered list)中的第 1 項</li> <li>有序列表的左側(cè)會有數(shù)字序號</li> <li>這些數(shù)字序號是自動遞增的，不用我們操心</li> </ol> <p>下面我要畫一條橫線(horizontal rule)</p> <hr> <ul> <li>這是無序列表(unordered list)中的第 1 項</li> <li>無序列表的左側(cè)沒有數(shù)字序號，可能會有一個小圓點</li> <li>除了把 ol 換成了 ul，兩者沒啥區(qū)別</li> </ul> </body> </html>
查看實際顯示效果

看過了上面的 HTML 網(wǎng)頁代碼和實際顯示效果后您是不是發(fā)現(xiàn)了很多規(guī)律呢？是的，HTML 中很多東西都是用一前一后兩個標(biāo)簽包裹起來的，后面的標(biāo)簽通過一個反斜杠表示它是個結(jié)束標(biāo)簽，某些標(biāo)簽里面還可以再套標(biāo)簽。瀏覽器從上到下讀取 HTML 代碼，并把它們解釋成實際的顯示格式呈現(xiàn)給讀者，一張網(wǎng)頁就這樣完成了使命。從英文單詞的開頭字母您也能猜到這些標(biāo)簽是如何命名的，因此將它們記住也就不難了。

HTML 的標(biāo)簽并不止這些，您還可以在文章中插入圖片，超鏈接和其它一些更有意思的東西，下面又是一例：

<html> <head><title>網(wǎng)頁里還可以插入更有意思的東西</title></head> <body> <p>我希望插入一幅圖片(image)：<img src="http://www./imgs/header_img.gif"/></p> <p>我還要一個超鏈接(anchor)：<a href="http://www./">超鏈接文字</a></p> <p>還有音樂??！<embed src="http://www./test.mp3" autostart=true/></p> </body> </html>
查看實際顯示效果

看了這些簡單的代碼之后您是不是已經(jīng)打算自己試試看了呢？非常樂意滿足您的愿望，這里有一個同步預(yù)覽的 HTML 編輯器，您可以在上面隨意練習(xí)一下。為了讓您將精力在主要的標(biāo)簽上，這個編輯器不需要您去書寫 <html> <head> <title> <body> 那樣的標(biāo)簽，直接拿 <h1> <p> <br> <hr> <ul> <ol> <li> <img> <a> 這類標(biāo)簽進(jìn)行練習(xí)就是了。

您也許會問，這些網(wǎng)頁怎么會這么丑呢，一點也不像我正在使用的博客首頁?。烤W(wǎng)頁里面一定有一些有魔力的東西在起作用吧？當(dāng)您不了解網(wǎng)頁背后的基礎(chǔ)知識時，那些絢麗多彩的網(wǎng)頁永遠(yuǎn)像魔術(shù)師從帽子里掏出的東西一樣，不過看過本文之后，您已經(jīng)有機(jī)會到幕后去看個究竟了，千萬不要錯過哦。