迪蘭帝的聊天室

HTML被發明出來的時候，主要是為了傳輸文件，而為了表現這些文件，所以在早期發明出來的HTML 標籤有許多類似個功能，像是標題、內文、圖片、連結、表格、列表...都可以透過 HTML 標籤輕易的完成一份文件，以下我會先透過這些部份來創討論各種不同標籤的使用時機。

在創建一份文件的時候，我們要先了解到，HTML 他到底是怎麼去組成的，一份 HTML 文件可以分成兩個部份：

1. 頭（head）
2. 身體(body)

讓我們從「頭」開始討論吧，在瀏覽器開始載入一份文件之前，我們可以在文件的內容之前先宣告一些這份文件的初始資料，例如：

• 文件編碼
• 網頁資訊
• 網頁標題
• 層疊樣式表（CSS）
• 網頁程式（script）

首先我們先列出比較常出現在 head 裏面的標籤，在逐一了解他們的使用方法：

• < title >
• < meta >
• < style >
• < script >

我們先從 title 標籤來看看，title 是讓我們可以自由的建立文件標題的標籤，在這個標籤內所輸入的內容會被顯示在瀏覽器分頁上方，類似 Email 裏面的主旨，用法很簡單直接輸入：

<title> 標題內容 </title>

看完了比較簡單的 title 標籤以後，讓我們來看看比較複雜的幾個標籤吧。

首先從 meta 標籤開始，meta 在英文裏面的意思即為「原」的意思，所以 meta-data 即為原資料，或者初始資料，而在 html 裏面，我們也會需要一些這樣的資料，來幫助我們建立一份網頁，好的初始資料可以讓使用者在閱讀這份文件的時候較為輕鬆，不容易出現問題（如編碼不同產生亂碼），甚至，我們可以透過 meta 標籤的撰寫，讓使用者在搜尋引擎尋找資料的時候，更容易找到我們的網頁，因為我們已經先把網頁的內容告訴搜尋引擎，跟他說我們的網頁有什麼樣的東西，這樣提供資訊會更為方便及語意化。

<meta>

在 meta 資訊裏面，有以下幾項參數可以做設定，我們可以透過這些參數來增加文件的內容、作者姓名、文字編碼...的設定：

• keywords    // 用來定義搜尋引擎的關鍵字：讓使用者在搜尋引擎上輸入這個關鍵字的時候，可以找到這個文件。
• description    // 描述這份文件包含了什麼樣的東西，可以讓程式設計師快速的有整體的概念。
• author    // 宣告這份文件的作者名字
• charset    // 設定文件的文字編碼
• http-equiv    // 每幾秒鐘重新更新文件一次

使用 meta 的時候，要將上述的引數存放在 name 參數內，而設定值，需放在 content 裏面，例如：
<meta name="keywords" content = "slide" />

因為瀏覽這個文件的使用者可能使用各種不同的作業系統，而不同的作業系統對於預設的文字編碼略有不同，例如：微軟的 Windows 使用 Big5 為中文做編碼，但是 Linux 系統則是使用 UTF-8 來作為預設的字形編碼，若是我們沒有設定字形編碼的話，那麼可能我們使用 Windows 編輯的文件在 Linux 上會呈現亂碼的現象，而在 Linux 上編輯的文件到了 Windows 上也會呈現亂碼的現象，這樣的狀況是我們不樂見的，所以設定文件編碼，讓瀏覽器可以正常的將文件顯示出來就變得很重要了，而預設文件編碼的方式也是在 meta 裏面進行設定，請特別注意，他的使用方法和其他的參數不同，直接給值，不需使用 name 、 content 來處理：

<meta charset="utf-8" />

※一般而言我們使用 utf-8 來作為預設編碼，因為 Big5 編碼因為字數限制的關係，有些較為罕見的字並不能顯示。

在載入文件的時候我們也會先把這份文件的樣式表（CSS）一起載入，這樣在後面建立 HTML 文件的時候就有樣式可以依尋，我們使用 style 標籤來載入 CSS 的程式碼，透過 CSS 我們可以賦與個別 HTML 元素做排版、變色、變形，甚至是動畫之類的功能，使用方法如下：

<style>
    div{
      color:red;
      font-size:20px;
     }
</style>

在網頁裏面我們常常會需要用到一些本機端的程式碼，這些程式碼可以幫助我們做出許多的功能，如將右鍵上鎖，讓使用者不能對網頁進行存取，或是讓網頁有漂亮的動畫，抑或是使用程式，讓網頁和使用者互動，而這些程式碼一般我們會在網頁本體載入之前先將他載入進來，而載入的方法，即是透過 script 標籤：

<script>
    var input = Javascript 範例;
    document.write(input);
</script>

上面我們把一些 Heading 的部份做簡單的說明，到這裡，大家已經可以寫出類似下面這樣的程式碼了。
接下來我們要繼續進入 body 的部份，將基本的 HTML 元素及文件的建立方式進行說明。

從觀察一份文件我們可以發現幾件事情：

1. 文件是有標題的
2. 文件的標題有分層級，是巢狀的結構
3. 文件裏面的文字有分粗體、斜體，甚至有些有刪除線
4. 文件裏面有圖片
5. 文件裏面有時候還有表格
6. 有時候在撰寫文件的時候會需要條列式的舉例

讓我們一步一步的走下去，首先，我們在看一個文件的時候，我們會發現，每一份文件都是有標題的，大標題、小標題，各種不同的標題，而標題又有分層級，根據不同的層級有不同的大小和格式需要去遵守，所以，我們要怎麼建立標題呢？從英文裏面我們可以知道，標題稱為 Heading 所以，在 Html 裏面如果要使用標題的話，只要用 h 以及他的層數組合的標籤即可。

<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>

接下來我們進入正文的部份，在正文的部份，有些格式是我們常用到的，像是對文字加粗體、對文字設定斜體、想藏些奇奇怪怪的梗，這些東西要怎麼做呢？首先我們要先了解到，HTML 其實是可以直接輸入文字，不需要透過任何標籤都可以輸入文字的，而這些文字就會被當作內文來處理，在 HTML 剛創造出來時常常會使用這樣的方式來進行文件的編輯，但是隨著網頁技術的進步，這樣的方式已經不被推荐，因為我們並不能對他進行許多不同的格式設定，直接寫在 HTML 上的文字是死的，我們不能移動他，這樣會讓網頁變得相當靜態，所以一般我們會將內文寫在一些容器之中，這些容器，我們可以對這些容器進行格式的設定，如此一來，網站才容易動態排版。

一般我們在裝文字的時候會使用的容器有以下幾種，分別有 div 、span 及 p 這三種不同的標籤，這3個標籤的皆為一個區塊容器，他可以讓我們在這個區塊內使用任何的東西，而區別在於 div 的範圍為和內容物一樣高，寬度和頁面一樣寬、 span 的範圍為高度和內容物一樣高，寬度也和內容物一樣寬，與前後元素間的距離為一行的距離、而 p 元素的範圍和 span 相同，但是 p 元素和前後元素間的距離為兩行的距離，這是需要特別注意到的地方，如果使用不當的話，在排版上、在編輯 CSS 上，會造成蠻大的困擾。

確定文件內文的撰寫方式以後，我們開始會注意到文件內的文字格式要做設定，如何做設定呢？首先是粗體，在英文裡，粗體為 bold ，所以在 HTML 裡使用 b 作為對文字加粗的標籤，再來是斜體，英文中斜體的英文為 italic ，故在 HTML 內用 i 當作斜體的方法，而為了藏梗或是一些金融的修改紀錄常常需要用到刪除線，來讓文字若隱若現來表示這些文字被刪除過了的時候，我們可以使用 del 標籤來增加刪除線。

除了這些之外，我們也常常在文件裏面看到表格，表格是一個很方便的東西，我們可以拿來整理許多的數據，或是作為一個整理的空間，將文字轉換成圖像化的呈現，讓觀眾更容易接收到我們所要傳達的資訊，而在網頁的應用上，過去曾經流行過使用表格來進行排版，我們只要在表格的格子裏面填上我們所需要的圖形或文字，就可以很輕鬆的對網頁進行排版，這樣的想法看似很不錯，實際上這樣的作法會讓網頁的彈性變得很差，我們不能任意的對網頁的元素進行更動，不能動態的依據使用者的需求呈現出最適合使用者的網頁內容，除了不人性化的影響之外，若是一個公司的網站不能貼近使用者的使用習慣，那麼可能對公司來說是非常的賠錢，少去許多因為體貼的客製化所增加的收入。

表格的使用方法：
先在要使用表格的地方使用 table 標籤宣告表格，表格內容的每一個格子則是用 td 標籤，而要換行進行下一行的編輯時要在這一列的末端加上 tr 標籤，使得我們可以從表格的下一行開頭進行編輯。

最後我們要看到的是，在敘述我們的想法、觀念的時候，常常需要條列式的把我們的想法寫出來，條列式分為兩種：

• 有順序性的條列
• 沒有順序性的條列

首先我們先從有順序性的條列開始，在英文中有順序性的條列稱為 order list ，故在 HTML 中被簡稱為 ol ，每個被條列的子項目被稱為 list ，需要用 li 這個標籤作為開頭，注意！不論是有序列表或是無序列表都提供巢狀結構功能，可以在一個 ol 裏面套用多個、多層的 ol 。

<ol>
   <li>第1項
   <li>第2項
   <li>第3項
</ol>

1. 第一項
2. 第二項
3. 第三項

同樣的沒有順序的性的條列式，在英文中稱為 unordered list ，簡稱為 ul ，使用方法與 ol 相同，需要在每個子項目的前面加上 li 標籤，序列可以交叉混用，這是比較方便的功能。

<ul>
   <li>第一項
   <li>第二項
   <ol>
      <li>巢狀小項1
      <li>巢狀小項2
   </ol>
</ul>

• 第一項
• 第二項
  1. 巢狀小項1
  2. 巢狀小項2

學完這些基本的 HTML 標籤還有配置，我們已經可以撰寫簡單的 HTML 網頁了，甚至我們可以自行 Hack 別人做好的網頁，從 Hack 別人往頁的過程中學習別人在撰寫網頁的方法、技巧，及熟練自己對於 HTML 的熟悉度，下面有一個很方便的 HTML 5 簡報程式，我們可以使用簡單的 HTML 就進行修改成為自己的簡報，大家可以下載下來自行玩玩，自己撰寫 HTML 簡報，相信會非常有成就感的。

DZSlide -by Paul Rouget