我們上網使用的那個軟體叫做 Web Browser,中文的譯名就叫做「網路瀏覽器」。現今,市面上的網路瀏覽器產品雖然不一而足,但是,無論哪一種產品,它起碼必須具備的基本功能就是:
「一定要能夠解讀、執行、呈現DHTML(Dynamic HyperText Markup Language)網頁!」
2005年各常見廠牌瀏覽器的市場佔有率參考圖
換個角度說:只要是瀏覽器軟體視窗中所顯示的內容,無論是文字、圖片、影音、動畫,都一定是DHTML網頁經過瀏覽器解讀執行之後的結果呈現... ...包括「無法顯示網頁」在內。
其實,在網路上呈現資料,HTML就夠了;可是啊,有些人認為一成不變的網頁的畫面不夠炫,所以,又再加入了一些可以命令瀏覽器做些事的瀏覽器端程式語言... Javascript 或 vbscript,讓網頁中加入了一些動態的效果... ...這,就是DHTML這個代名詞中Dynamic(動態)的由來!
瀏覽器視窗會顯示什麼畫面,完全取決於DHTML網頁原始碼的文字內容。網頁原始碼的文字分為:
標籤指令文字、CSS樣式表文字、Javascript程式碼文字 以及 一般內容文字 等等!
在任何時刻,只要你看到 IE 瀏覽器軟視窗...譬如說,現在...,就可以點選該視窗「檢視」功能表的「原始碼」選項來看看... ...看看瀏覽器軟視窗中的精采畫面是由哪些DHTML的文字所形成!
當我們選按上述選項後,電腦會將網頁原始碼的文字,一五一十地顯示在「記事本」軟體的視窗中。「記事本」是一個只能純粹輸入文字的軟體!它不會理會任何格式化(美化)的效果,它只會... ...記錄下這個字(這些文字)是使用何種輸入法輸入,以及,它是代表哪一個文字符號!
一般而言,內容為繁體中文的DHTML網頁的正常文字內容應該包含以下的「基本結構」:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<title> </title>
</head>
<body>
</body>
</html>
其中,第一行的 <!DOCTYPE ... ... > 是在指示瀏覽器以哪一種HTML的標準來解讀所有文字,一般而言,這行的文字大都是由網頁製作軟體自動產生... ...如果記得住的話,自己打當然可以!較簡單的方式,當然,就是找個地方「複製」、然後進行「貼上」
(HTML 4.01是HTML標準的最後版本,於1999年12月由W3C組織所頒定)
第二行的<html>和最後一行的</html>合稱一組標籤組(a set of Tag)。一組HTML的標籤組由一個「起始標籤」和一個「結束標籤」所構成,形成一個對瀏覽器的命令指令... 它的意思,白話是說:
「聽好!瀏覽器... 從起始標籤到結束標籤之間的所有文字,你必須用 html 的語法翻譯它!」
一般而言,一組標籤組是由一個「起始標籤」和一個「結束標籤」所構成。之所以需要成對出現,是因為,需要把相關的「資料框在一對起始標籤和結束標籤組之間」
不過,在HTML語法的標籤中,有極少數的標籤組是沒有結束標籤的,常見的包括:
1. 指示網頁設定的 <meta ... ... > 標籤
2. 指示瀏覽器在同一段落上強迫換行的 <br> 標籤
3. 指示瀏覽器在網頁中顯示一張圖片的 <img ... ... > 標籤
4. 指示瀏覽器引用網頁外部的 CSS 或 Javascript 文字檔的 <link ... ... > 標籤
(在HTML 4.01 中建議 ...非硬性規定...,沒有結束標籤組的起始標籤最後,應以 /> 做結束)
前述範例中第四行的<meta http-equiv="Content-Type" content="text/html; charset=big5">就是一例。此標籤是在指示瀏覽器要用何種文字編碼方式來解讀、呈現此DHTML網頁中「一般文字」的指令。在我們這個範例原始碼中的 Big5 是繁體中文編碼方式的代號
其中,meta 是命令標籤的關鍵文字,大小寫都可以(建議都用小寫),但字母的順序一定不可以錯置,而且,一定要緊接在 < 符號之後,其間不可以有任何空白(請務必記住...空白也是一個字);最後,再用一個 > 符號做為標籤的結束
ㄚ問題來啦!... 那,在<meta 命令標籤起始符號以及標籤終止符號 > 之間的那些文字是啥東西?
答案,依照專業的術語回答的話,就叫做命令標籤的「屬性設定」;如果用白話一點的方式說,就是給予這個HTML命令標籤的一些專屬的特性
以範例中的 <meta ... ...> 命令標籤中的 http-equiv="Content-Type"與 content="text/html; charset=big5" 為例,它們都是這個HTML命令標籤的「屬性設定」:
(特別聲明一下,在大多數的電腦相關語言的語法中, = 符號的意思是「設定為 ... is set to」)
http-equiv="Content-Type"屬性設定的意思是說:
這個 meta 標籤的作用視同取代 http 通訊協定表頭檔的 Content-Type (資料內容型態)設定
content="text/html; charset=big5"屬性設定的意思是說:
這個資料請用 html 格式的純文字資料方式解讀;文字編碼指定為繁體中文的 Big5 碼
其中,屬性設定的文字,= 左邊的稱為「屬性名稱」;= 右邊的稱為「屬性值」
整串屬性設定的意思(唸法)應該是:「將此標籤的 xxxx 屬性的屬性值設定為 yyyy」
在一個HTML「命令起始標籤」中加入「屬性設定」後,將影響瀏覽器解讀這個標籤時的呈現效果。
至於說某一個HTML「命令起始標籤」中能夠加入何種「屬性設定」;以及某一種「屬性名稱」能夠設定何種「屬性值」,那就決定在所使用之HTML版本的相關規定。以本例而言,就必須尊循 HTML 4.01 所訂定的規則。
說了半天,那... ...某個HTML「命令起始標籤」到底能夠加入哪些「屬性設定」呢?
抱歉!這就是我們需要認識、學習的部份!... ...我們將在日後逐一加以討論
=======================================================================
文中我們有提到「文字的編碼方式」,我們在此稍加解釋一下:
我們在鍵盤中所輸入的文字,其實,在螢幕上所看到的只是一個「圖形」;真正存入電腦檔案中的,只是一堆可以換算成數值的資料!電腦讀到這些文字所代表的數值時,就會根據編碼的方式到該編碼方式的字表中找出對應的圖形,然後將該圖形顯示在螢幕的相關位置上
因為網路上的網頁幾乎包含了所有人類目前使用中的文字符號,因為文字符號的不同,每種常用的文字就被編成一種相對應的編碼字表,提供瀏覽器根據網頁的編碼指令加以運用
有時候,多少,我們會在瀏覽器視窗上看到一些所謂的「亂碼」;這,都是因為網頁文字所使用的輸入法和這個標籤指定的文字編碼不一樣所致!... ...這是因為該網頁文件(email也是網頁的一種)的設計者使用了和這一行<meta 指定的文字編碼不同的編碼方式輸入、儲存所致。
遇到這種情形時,如果你猜得出來該文件的可能編碼方式,那,可以透過瀏覽器視窗「檢視」功能表的「編碼」選項來改變瀏覽器的編碼呈現方式... ...一般而言,最有可能的是 UTF-8 通用碼...
留言列表