细说HTML标签.doc

Hyper Text Markup Language■ 細說HTML標籤 在HTML語法中，大致上可以分為： ( 節錄自『網站建置百寶箱』) 網頁架構：主要網頁主架構的介紹 分隔標籤：也就是所謂的水平線 排版標籤：針對標籤的屬性，可做適當的版面編排 字體標籤：教導您設定文字的字體。 文字標籤：教導您設定文字的顏色、行距、變化等等。 影像標籤：教導您如何在網頁中，植入圖像。 背景標籤：教導您如何設定背景顏色或是背景圖像。 連結標籤：教導您如何設定超連結，以及開視窗的條件。 表格標籤：教導您如何在網頁中運用表格。 序列標籤：教導您如何設定文字序列或圖形序列。 表單標籤：教導您如何製作可填寫用的表單。 框架標籤：可讓同一個視窗由多個網頁一起組成。 其他技巧：讓您的整個網頁背景可以讓您設定為圖片或是聲音。 ※由於此份講義是取自.tw/html/，而且網頁效果是無法完全呈現於文件檔案，所以對文件效果有疑問者可以上網至該網站參考。 1.1 網頁架構 HTML　HEAD　　TITLE網頁製作教學/TITLE　　Meta　/HEAD　BODY　　BODY之間則為主要語法所在，也是網頁的主要呈現部分。　/BODY/HTML 【標籤解說】 以上看到的就是一篇最簡單架構的網頁。沒錯，網頁其實就是一堆標籤（所謂標籤就是指被包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。 簡單而言，通常一份完整的網頁包含了二個部份：抬頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的HEAD/HEAD以及BODY/BODY。 在抬頭的部份HEAD/HEAD中，有另一組標籤TITLE/TITLE。打在TITLE/TITLE這裡面的文字會出現在瀏覽器視窗最上頭藍色部份裡，當作一篇網頁的主題。 您可能會發現，為什麼我一直沒提到HTML/HTML這一組標籤，嗯！因為它可有可無。這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。 1.2 分隔標籤 【文字上的分隔標籤】 或許你已經發現這個問題了：天啊！我不是在記事本裡排版排得很漂亮，為何透過瀏覽器看起來一切都走了樣？對啊！別太訝異，在網頁的編排裡，並不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因為，HTML語言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當作沒看見啦！ 使用方法：強制斷行標籤br、強制分段標籤p 標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（br），或是在寫完某一段的時候便會分段（p），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。 使用範例： 原始碼 呈現結果 這是一個斷行的範例br看出來了嗎？ 這是一個斷行的範例看出來了嗎？ 這是一個分段的範例p基本上他會比斷行還多空出一行 這是一個分段的範例 基本上分段會比斷行還多空出一行 【分隔線標籤】 使用方法：上一段文字內容hr下一段文字內容 標籤解說：利用hr這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下： 使用範例： 一般用法 尚未加任何屬性。 原始碼 普通分隔線hr 呈現結果 普通分隔線 顏色屬性 用法：hr color=顏色碼或顏色名稱 原始碼 橘色分隔線hr color=#ff8000 呈現結果 橘色分隔線 寬度屬性 用法：hr width=寬度，其單位為px（像素），寬度亦可用百分比來作設定，如50%即意為寬度佔螢幕50%。 原始碼 寬度為240px的分隔線hr width=240 呈現結果 寬度為240px分隔線 厚度屬性 用法：hr size=厚度 原始碼 厚度為5的分隔線hr size=5 呈現結果 厚度為5分隔線 位置屬性 用法：hr align=水平對齊位置，其設定值有三個，也就是置左align=left、置中align=center、置右align=right 原始碼 靠右的分隔線hr align=right 呈現結果 靠右的分隔線 陰影屬性 用法：hr noshade，無設定值，只要將 noshade 加入即可，通常會配合顏色設定，效果較佳。 原始碼 實心分隔線（無陰影）hr noshade 呈現結果 實心分隔線（無陰影） 1.3 排版標籤 【文字置左、置中、置右】 使用方法：老實說，剛剛我們學過的分段標籤p再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示： 原始碼 呈現結果 p align=left文字靠左/p 文字靠左 p align=center文字置中/