HTML 基本語法 (總整理)
感謝這位 vincentlai blog 大大 的詳細資料喔~!
HTML基本語法
我們就拿剛剛儲存的檔案來做說明吧！
1. 先用Winsyntax將該檔案開啟
2. 從我的文件->HTML中雙擊這個檔案開啟，應該會出現一個瀏覽器視窗喔！
3. 下面是一個簡單的關聯表喔，圖片上的號碼對應到下面的說明喔！
4.
這一組標籤標示了我們在這個網頁使用的是HTML，我們所有的HTML語法理論上都要用這兩個標籤"包住"喔！
5.
這一組標籤所包起來的資料都被稱為"表頭"，網頁的各種格式與許多作者的說明都會出現在這之中
6. <title></< font>title>
看了關聯表應該很容易能夠看出來，這組標籤所標示的就是網頁的標題
7.
而在這組標籤之中的就是我們網頁最主要的內容了，課程中大部分的重點也在這兒
8. 關於檔名
一般而言，網站的首頁都命名為"index.htm", "index.html"，但是這個並不是絕對的，如果你自己會架設網站伺服器，這個慣例要不要遵守就隨你囉！
9. 什麼是首頁
首頁就是一個網站的第一頁，解釋的複雜一點就是說如果你給的網址中不包含特定的網頁檔案名稱，像是這樣：http://tw.news.yahoo.com/ ，這時候系統就會自動尋找這個網址底下有沒有首頁檔案，如果沒有就會出現錯誤訊息喔！從這兒延伸出一個問題，如果我們的網站中存在著多個不同的目錄，每個目錄底下該有一個首頁檔案，像是這樣：http://tw.news.yahoo.com/fc/ ，否則將會讓來訪的朋友看到網站的錯誤訊息喔！
10. 我們為這個檔案插入簡單的表頭與註解：
11. http-equiv="Content-Type" content="text/html; charset=big5">
這一行意思是告訴瀏覽器這個網頁使用的文字字元編碼，你不需要知道為什麼，只是不管你的網站有著多少個網頁，這個表頭資訊都最好一一加入，以避免因為瀏覽器的判斷錯誤而讓來訪的朋友看到一堆亂碼。
12.
這一組標籤所包住的文字並不會呈現在網頁的任何地方，大部分是給自己或是同一個網站維護團隊看的；但是切記，這兒的資訊來訪的朋友也可以透過瀏覽原始碼的方式看到，別放入太過於敏感的資訊，像是帳號、密碼等等
後記：上面這些只要清楚了，HTML課程就已經學好一半了，接下來的東西靠的不是理解，而是熟悉；你不見得需要將自己網站的每個網頁都這樣子用一堆文字拼拼湊湊出來，但在學習的過程中請千萬不要捨棄了我所提到的任何一個步驟，這些硬功夫能夠幫助你將自己想要的資訊與其他內容分離與重複運用，甚至往後如果有機會碰觸到動態網頁語言，這是不可或缺的技術！
段落標籤的使用
1. 斷行
與段落
這是一個錯誤的示範，雖然HTML會忽略原始碼中的文字排版方式，過於隨興的編輯習慣會讓網頁變的難以維護；可以仔細對照一下兩個標籤在結果的呈現上有何差別。
段落
標籤有一個對齊的屬性align，它的參數與之前提到的對齊屬性一樣，
'left'、'center'、'right'
2. 呈現原始排版方式
使用這個標籤時字體會比預設字體小一級，也就是2號字(預設是3號字)，但是可以搭配標籤的屬性設定自己需要的大小。
3. 置中標籤
這個標籤其實跟很多標籤的屬性都有重疊的情形，只是因為將物件置中的屬性太常見了，所以集合成一個標籤就可以少打許多字吧
4. 縮排
一般自己慢慢打出來的網頁不太會用到這個標籤，因為打的字比較多一些，也沒有太大效果；但是如果使用在動態語言中卻可以很容易去區別回覆文章與原始文章，利於閱讀喔！
5. 水平分隔線
這個標籤有三個常用到的屬性size(高<厚>度)、width(寬度)、align(對齊)
6. 呈現原始碼最方便的方式
比起透過內碼呈現原始碼的方式，這個標籤解決了許多人的困擾；但是卻也衍生出一些問題，因為在這兩個標籤中狾釭獐陓珜ㄦ|呈現並且失去效果，這會使得一些系統自動加上的文字也被呈現出來，大家可以在進修館的討論區試試看！基於這個理由，這個標籤一般是會被留言板或討論區禁用的。
7. 新段落標籤
<span></< font>span>
這兩個標籤與前面提到的段落標籤
沒有太大差別，會出現的原因好像是因為CSS在程式設計上出現了一些瓶頸，需要透過新的標籤來將效果完整呈現；因此這兩個標籤我就留到後面的課程講解吧！不過這兩個標籤都與段落有關，所以先提一下！
清單與連結標籤
1. 有順序清單
透過這個標籤可以很容易表現出項目間的層次感，它有兩個比較重要的屬性start與type
，分別代表清單開始的數字以及清單顯示的類型，從圖片中應該可以知道有哪些類型吧！
2. 無順序清單
跟有順序清單的使用方式相同，屬性中有沒有start好像本來就不影響結果，
而另外一個屬性type則有circle(空心圓)、disc(實心圓)與square(實心方形)三個參數。
這裡發現一個有趣的狀況，如果混用了兩個清單的參數，效果會直接改變成參數所對應的標籤，可以試試看在有順序清單是不是一樣的情形。
3. 連結標籤
圖中的HTML代表了下面幾個事件：
(1. 當滑鼠游標點選了"資研夜貓"四個字，瀏覽器就會開啟網址"http://kiang.twbbs.org/xoops2/"
(2. 當有人連結到這個網頁並且指定網頁位置為"info"時，網頁的焦點就會自動移到"資研夜貓"這四個字
(3. 當滑鼠游標在"資研夜貓"四個字上面徘徊時，會出現文字提示"這郭是偶架設ㄉ網站啦！"
(4. 當瀏覽器要開啟網址"http://kiang.twbbs.org/xoops2/"時，會選擇另外開啟一個新的視窗
上面這四個動作分別描述了連結標籤的四個屬性href(連結網址)、name(錨點)、title(說明文字)、target(目標視窗)，其中比較特別的就是錨點與目標視窗了，目標視窗這個屬性會在講框架頁的時候詳述，而錨點就用下面幾i圖說明：
這個網頁內容很長，延伸到需要拉動捲軸才看的到全部
點了一下"到最下面"，畫面就會往下移到另一個連結；同樣的，如果點一下"到最上面"，畫面就會往上移到另一個連結標籤處。這時候我們就稱這兩個連結為這個網頁的錨點，只要打上網址+"#"+錨點名稱(name的參數)，畫面就會移到我們指定的地方囉！
框架的使用
1. 何謂框架
框架的意思就是將網頁版面分割成幾個區域，每個區域都必須引用已經完成的網頁內容才能夠正常顯示，這樣子部份重複性相當高的內容就可以獨立成為一個網頁並且重複引用喔！但是使用框架將造成一些版面配置上的問題，特別是在不同的螢幕解析度上的差別，長遠的看來還是別太依賴比較好喔！
2. 簡單的框架
圖片的最上方是框架頁的原始碼，接著的是輸出結果與包含的兩個網頁以及兩個網頁的原始碼，從圖中可以大概看出，框架頁面一般不會單獨存在，而內容大多是引用其他已經存在的網頁。
3.
這個標籤宣告了框架頁的使用，特別注意這些內容必須放在網頁的標籤中。第一個屬性cols='100,*'設定了框架切割成左右兩塊，左邊框架寬度為100 pixels(畫素)，其餘的讓右邊的框架使用。第二個屬性border='5'設定了框架之間使用了5 pixels的框線隔開，第三個屬性bordercolor='blue'則指定了框線的顏色為藍色。另外有一個相對於cols的屬性rows，使用的方式跟cols相同，但是切割畫面的方式與它相反，會將畫面分割成上下的視窗，有興趣的人可以試試。
4. <frame></< font>frame>
這兩個標籤指定了框架頁內容的來源，src='left.html' 指定了框架中的第一個內容來源，配置方式是從左而右、從上而下，所以第一個內容來源|出現在左邊。name='left' 則指定了該頁面的名稱，這是為了搭配連結標籤使用，還記得之前提到的錨點嗎？只要將連結標籤的目標改成target='main'，我們就可以指定連結的網頁要顯示在名稱為main的框架頁中，如果沒有指定的話，連結的頁面會取代原本的頁面，可以試試看它的差別。marginwidth='5'與marginheight='5' 則分別指定了內容距離邊緣的寬度與高度，我刻意將兩個框架頁的數值差異拉大，讓各位看看它的差別。scrolling則是設定要不要出現捲軸，參數也可以設定成為auto來讓瀏覽器自己判斷內容是否需要捲軸，frameborder的設定可有可無，因為在中已經有同樣的屬性來設定框線；最後，noresize則是不讓使用者調整框架，如果都沒有加上這個屬性，中間那條框線可以左右移動喔！
5.
(圖中的範例少了一個s)這兩個標籤之間是設定如果瀏覽器不支援框架時顯示的內容，雖然大部分的瀏覽器都支援了，保守的做法還是加上這樣的內容喔！
原本還有打算介紹 這個標籤，但是擔心各位無法如期完成進度，這個部分我就等到講義都完成了之後再來補充吧！
基本表格
1. 基本的表格
上面的圖中是很單純的一個表格，除了框線的設定border之外沒有其他屬性，所有關於表格的內容都必須放在
2. 合併儲存格
在這張圖中多了一個屬性colspan='2'意思是這一格橫向的佔用兩格的空間，也可以說是合併了兩個格子。而下圖意義差不多，只是rowspan='2'變成合併了垂直的兩個格子：
3. 高度height與寬度width
這兩個屬性可以同時使用在表格與儲存格的標籤中，參數可以是數字或百分比；但是當內容超過設定值時，大部分瀏覽器會視內容重新調整而破壞原本的設計，因此要特別注意使用的單位。額外一提，使用數字就是所謂的絕對單位，百分比就是所謂的相對單位，絕對單位可以容納的內容固定，但是當使用者螢幕解析度較大時，版面會有很多留白的情形；而相對單位雖然會視使用者的螢幕解析度調整大小，過度依賴反而會使得版面變的不易瀏覽，如何搭配就看各位的熟練度囉！
4. 對齊
這個部分有垂直對齊valign與平行對齊align兩種屬性，垂直對齊的參數有靠上top、置中middle、靠下bottom，平行對齊的參數有靠左left、靠右right與置中center。這些都只能使用在 與 標籤中。
5. 標題儲存格
這一組標籤與 雷同，不過它的效果等於align='center'> ，可能因為表格標題經常使用到所以才有這樣的標籤吧。
基本的表格先介紹到這邊，如果把所有的屬性加上去可能看到就會頭昏吧
其他表格相關屬性
1. 框線色彩
框線色彩可以作用在之前介紹過的所有表格標籤，圖中顯示了相同屬性在不同的標籤之間會有階層的效果，意思就是說，被
2. 單純的背景
(圖片上的red請自行改成yellow~^^||)bgcolor='blue'意思是表格或儲存格的背景顏色為blue，從這兒簡單提一下什麼是【RGB色碼】。RGB分別代表著光的三原色紅色(Red)、綠色(Green)與藍色 (Blue)，因此RGB色碼透過這三種顏色的強弱度組合來呈現高達一千六百萬種的變化(256的三次方)。在HTML中使用典型的RGB色碼像這樣 #0000FF，井字號是辨識用，而後面的六個數字或英文字兩個成為一組十六進位數字，分別對應到Red=00, Green=00, Blue=FF三個顏色的強度，實際測試後我們可以從螢幕上得知這個色碼會等於我們之前提到的"blue"這個顏色，因此可以用這個色碼與"blue"做替換。使用RGB色碼最主要是可以自己調配顏色的細微變化，但是需要一點經驗與光學的概念喔！
3. 背景圖片
若是想要背景有更豐富的變化，使用圖片當然還是不可少的，只是使用時要多注意檔案的大小與存放的位置喔！background='hill.jpg'意思是使用存放在同一個資料夾中的圖片"hill.jpg"來當做表格或儲存格的背景，圖中的範例為了減少圖檔的大小而感受不到什麼豐富的變化，可以試著找些圖來實際操作看看。我想這個部分最讓人頭疼的就是檔案存放的位置，一般我們會將它區分為相對位置與絕對位置，絕對位置就是帶有完整網址的路徑，像我網站的logo就是"http://kiang.twbbs.org/xoops2/themes/kiang/images/logo.gif"，如果我的 網頁放在"http://kiang.twbbs.org/xoops2/test/index.html"，那麼相對位置就是".. /themes/kiang/images/logo.gif"，如果像我在圖片中的範例一樣將圖片與網頁都放在同一個資料夾中，那麼相對位置只要打上檔案名稱就可以了。這個部分後面會陸續提到，請千萬要搞懂喔，否則會很痛苦的~^^~。
4. 文字與框線的距離
這裡談到的是文字與框線之間的距離cellpadding以及儲存格之間或儲存格與框線之間的距離cellspacing，從圖中應該可以清楚看到如何使用這兩個屬性。
透過目前為止講的這些標籤、屬性與參數等資料其實已經可以完成一個基本的網站囉，還是老話一句，熟練就記起來了，別花太多時間去背。
表單與表格結合
1. 震撼教育
這個範例結合了前面課程所提到的一些標籤與屬性，順便讓大家做個複習囉！
2.
下面所介紹的所有標籤都應該要包含在這組標籤之中，三個屬性分別說明如下：
action指的是表單送出的資料應該給誰處理，因為我們沒有任何伺服器程式可以接收這些資料，所以選擇透過郵件方式傳送。
method說明表單遞送資料的方式，一般會有post, get兩種，這個部分也是在探討網頁程式設計時才會區分，大多使用post方式
enctype是編碼方式，因為我們希望能夠直接看到資料，所以用純文字的方式(text/plain)，至於其他編碼方式我就不提了。
3. 隱藏欄位type="hidden" >
幾個屬性會一直重複出現，所以我只介紹一次：
type說明資料輸入的方式，每種方式都有自己的特色與適用的地方；而隱藏的欄位大多放置一些固定的或是不希望使用者直接看到的資訊。
name欄位的名稱，資料送出之後總是希望能夠一眼就看出資料如何區分，所以欄位的名稱記得一定要加上。
value指的是這個欄位的預設值，因為隱藏欄位不會出現在使用者的畫面，所以我們必須事先指定這個欄位的數值或資料。
4. 一般文字type="text" >
這個應該很單純囉：
size的數值是這個欄位的外觀看來可以容納的字元數。
maxlength限定了這個欄位所能夠輸入的字元數，如果沒有這個屬性，預設值會接受無限多的資料寣C
5. 單選項目type="radio" >
這個欄位的特色是只要具有同樣的name屬性，再多的項目都只能夠有一個被選中；而checked則是代表預設值。
6. 複選項目type="checkbox" >
與單選項目一樣可以用滑鼠選取資料，只是沒有了單選項目的限制。
7. 下拉式選單
這組標籤必須搭配另外一組標籤 提供資料，再多的資料也會被放在同一個選單中喔。
8. 多行文字
兩個屬性分別代表行cols、列rows所能夠容納的字元數，畫面大小就是這兩個數字的乘積。
9. 送出type="submit" >與重填type="reset" >
按下送出就會將表單的資料送出去做處理(相當於按下Enter效果)，而重填則會將整個表單的資料恢復到一開始讀取的樣子(相當於按下Esc效果)。
插入各種物件到網頁中
1. 背景音樂
example:
src="http://kiang.twbbs.org/adeline/data/1.mid" loop="infinite">
因為這個標籤的效果"看"不出來，所以我只有放上使用語法；可以在網頁的任何地方放上這麼一段程式碼，透過src屬性指定音樂檔案的來源(格式可以是mid或wav)，loop屬性則是指定音樂重複撥放幾次，參數infinite的意思就是重複撥放。如果重複使用到這個標籤，理論上會依照順序從第一個指定的音樂檔案開始撥放，不過這個情形會因為瀏覽器的版本不一而有可能不一樣，建議同一個網頁不要同時使用一個以上的背景音樂！
2. 撥放歌曲
只要為網頁加上這麼一行指令，瀏覽的時候就會自動出現一個撥放工具列在網頁上，src屬性指定檔案的來源，autostart屬性則決定要不要自動撥放；這個標籤並沒有引用來源的格式限制，只要使用者的電腦中有安裝適當的撥放軟體就可以正常運作，因此包括上面提到的mid與wav 檔案，或接下來提到的動畫與影片都可以透過這個標籤放入網頁中。詳細的屬性設定會隨著檔案的格式而各有不同，這篇文章不打算詳盡，只讓大家知道比較普遍的用法。
3. 插入圖片
網頁圖片應該是最常出現的物件，在使用上特別要注意寬度width與高度height的設定，因為不當的設定會使得圖片走樣。而alt屬性就是圖片說明文字，當滑鼠游標移到圖片上方就會出現像圖片中的文字框，這與我們之前提到的標籤有同樣的作用；border屬性則是設定圖片的外框大小。
4. 插入各種動畫與影片
FLASH：
ps. 本圖所提及動畫內容為原網站所有！
src:指定檔案來源
width:設定動畫寬度
height:設定動畫高度
ASF影片：
ps. 本圖所提及動畫內容為原網站所有！
src:指定檔案來源
width:設定影片寬度
height:設定影片高度
autostart="true":自動撥放影片
RealMedia影片：
ps. 本圖所提及動畫內容為原網站所有！
src:指定檔案來源
width:設定動畫寬度
height:設定動畫高度
autostart="true":自動撥放影片
controls="imagewindow":設定realplayer撥放時只顯示撥放視窗
從這裡可以看到這個標籤的多種用途，因為我的電腦沒有安裝quick time player，所以沒辦法示範；不過一般會使用到的外掛影片與動畫軟體就是這些了，詳細的屬性與參數設定其實還很多，可以到各個外掛軟體的官方網站找找相關的技術資料喔！另外，使用版本不一定也可能造成不一樣的結果。
6. JavaScript
要在網頁中放進javascript效果有兩種方式，一種是直接將程式碼跟HTML放在一起：
一種是把大部分的程式碼另外存成一個副檔名為js的檔案，使用方式像這樣：
Javascript已經算是一個相當陽春的程式語言，因此使用方式並沒有太多規則可循，大部分必須靠使用說明或是自己的經驗來讓它的效果呈現，已經偏離了課程的主題，所以並不多做介紹，有興趣的人可以買本書來瞧瞧喔！
7. 跑馬燈
屬性scrollAmount設定每次移動的間距；scrollDelay設定隔多久時間執行一次變化，其中數字代表千分之一秒(也就是500=0.5秒執行一次)。direction是跑馬燈變化的方向，有上up、下down、左left、右right四種參數可以選擇，width、bgColor與height則分別為一直出現的寬度、背景顏色與高度的設定。behavior設定了跑馬燈運作的方式，參數有重複捲動scroll(預設)、來回移動alternate與捲動一次slide三種，各種搭配組合可以自行嘗試看看喔！
這個標籤除了我所提及的變化外，透過各種巧思會有著意想不到的效果，剛剛發現一個網站"碧華易學網"，裡面就有一篇教學展現了作者的創意喔！
這個標籤與上面提到的背景音樂標籤 都只能夠在Internet Explorer(我們大部分人使用的網頁瀏覽器)上面運作，雖然使用上比較方便，如果您的網站希望一些使用非微軟作業系統的朋友也能夠正常瀏覽您的網站，這些標籤還是要避免比較好喔！
這篇文章介紹到的效果都比較容易影響到系統效能，使用上記得多注意檔案大小以及複雜程度，以免造成瀏覽網站上的困擾！
CSS淺談
1. 工具書(最新HTML語法參考辭典||博碩出版)
這本書是我翻到快要爛掉的好工具，許多HTML與CSS語法都能夠隨翻即得，相當適合具有基本概念的朋友使用；透過網頁要一次將CSS完整說明不是那麼容易，有興趣的人可以把這本書找出來翻翻喔！
2. CSS是什麼？
階層式樣式表（Cascading Style Sheets, CSS）除了增加原本HTML所無法做到的版面效果，重要的是它能夠讓多個標籤或是多個網頁共用同樣一個版面的設定，除了大量減少了編寫與維護網頁的工作，更讓網站能夠輕易的提供一致的版面，讓HTML與程式語言拉近了一些，又不至於太過複雜而讓人卻步。
3. 專題作業所需要的使用方式
這個課題的範圍不小，為了避免大家抓不著重點，我就先以作業範圍來侷限這個講義的內容，往後有機會再做深究；在開始之前我先建立下面這樣一個檔案，檔名為"myweb.css"：
我將這個檔案內容的意義逐一解釋
1~4行：body、td、th、p、div標籤預設的文字大小都是10，使用新細明體或細明體。
5~7行：body標籤預設的背景圖片為同一個目錄下的圖片"image003.gif"
8~11行：a(連結)標籤預設字體顏色為"9999ff"，不使用任何文字修飾線條(預設為加上一條底線)
12~15行：參觀過的連結預設字體顏色為"99cc99"，不使用任何文字修飾線條(預設為加上一條底線)
16~21行：當滑鼠游標移到連結文字或圖片的上方時，字體顏色改變為"ffff00"，字型改為"標楷體"，同時使用文字上下兩條直線修飾，文字變成最粗等級
這一個檔案的內容就是我們即將拿來統一整個網站格式的設定，我們統一將它集中在這個檔案中，這樣一來所有的網頁都可以透過它完成基本的設定喔！
4. 使用CSS檔案
下面這是修改之前的網頁與原始檔(部分)：
我在標籤之間加上一行：
<link rel="stylesheet" type="text/css" href="myweb.css">
接著直接看到它的變化：
從圖中可以明顯的看出舊有的網頁會立刻套用我在myweb.css這個檔案中的描述，也立刻出現的需要改正的問題，我的部分文字會被背景遮蔽而不容易辨識，後續的調整動作可以分別在該網頁上進行或是改變我在myweb.css中所設定的背景圖片。
5. 新增一個網頁
只要CSS檔案準備好了，往後無論新增多少個網頁都可以很輕易的套用同樣的效果；甚至希望改變整個網站的風格，只要完成CSS檔案的修正，整個網站的風格就立刻煥然一新。善用這樣的模式，無論使用HTML原始碼編修網頁或是透過圖形化介面，工作量都會明顯減少，也有助於避免在統一網站風格時所遇到的一個個小問題喔！
6. 後記
在過去全民學校類似的課程中，我曾企圖要在更短的時間內讓參與課程的朋友同時學會HTML與CSS，不過後來這樣的想法似乎因為大家都跟不上進度而束之高閣，因此這裡我並不打算針對這個新東西詳加解釋，一方面也是因為時間緊迫，希望大家能夠見諒。如果有興趣的人可以上我在全民學校的舊講義看看：
http://home.educities.edu.tw/finjonkiang/
或是透過網路去找尋相關資訊，這一個部分我就透過討論區與線上會議的互動來幫助各位了解吧
全站熱搜
留言列表
{{ article.title }}
