默識| 玩博客的基礎：HTML 語言

抽屜 2007-05-26

展開全文

玩博客的基礎：HTML 語言

Published on 08/27,2006

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

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

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

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

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

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

<html> <head><title>網頁里還可以插入更有意思的東西</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>
查看實際顯示效果

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

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