HTML基礎

什麼是HTML

HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的標籤語言，這些標籤可以控制我們的瀏覽器要怎樣把文件顯示出來, 它可控制字體的大小，也可以插入圖像或連結。

HTML文件存檔的副檔名為htm或html，編寫的方式有很多種，最原始的方法是用windows內建的記事本或各種純文字編輯軟體。

若是你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇檢視原始檔(view)即可。

HTML文件的結構

HTML文件有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為：







<!DOCTYPE html>
<html>
    <head>    
    </head>
    <body>
    </body>
</html>

大部份的標籤會成對出現，包含開啟碼與關閉碼，每一個開啟碼是由 <> 兩個符號所框住的，而關閉碼是由 </> 所框住的。

`<HTML>` 與 `</HTML>`

表示「文件開始」與「文件結束」

在文件中分為「頭部」與「身體」兩個部份。

頭部元件 <head>…</head>

頭部元件包含檔案相關資訊，例如：網頁的標題 <title>…</title>。

身體元件 <body>…</body>

身體元件顯示網頁的內容，可以在 <body> 標籤中加入網頁相關的屬性設定，例如：背景顏色(bgcolor)、背景圖(background)、文字顏色(text)、超連結文字顏色(atext)等。

靜態網頁通常使用「.html」或「.htm」作為檔案的副檔名。透過瀏覽器 (例如：Internet Explorer、Chrome、Firefox) 閱讀 Hyper-Text Markup Language (簡稱HTML)，形成我們所看到的網頁。

文字的排版

HTML是一種結構性的標籤語言，利用不同的標籤來定義文件的外觀，並完成網頁的排版。

HTML文件是由元件組合而成，包括容器元件和空元件兩種。容器元件使用「起始標籤」與「結束標籤」，在兩個標籤之間，可以加入敘述。

例如：

<font color="blue">歡迎光臨</font>

說明：

<font> 稱為「起始標籤」、</font> 稱為「結束標籤」，這兩者通常會成對出現。
font 稱為「標籤名稱」
color 稱為「屬性名稱」
blue 稱為「屬性值」。

容器元件可以放在另一個容器元件中，就如同把小盒子放在大盒子中。例如：

<font color="blue">歡迎<B>光</B>臨</font>

歡迎光臨

其中第三個字（光）會以粗體呈現。

空元件是用來執行一個特定的動作，例如： <HR> 標籤會在瀏覽器中顯示一條水平線，不需要 </HR> 來表示結束。

段落的排版

用來分隔不同的段落，即除了換行之外﹐還會與上一行間多加一行空白

標籤：<p>...</p>

常用屬性：

屬性	說明
align	對齊方式：left(靠左)，center(置中)，right(靠右)

段落的排版範例：




<p align="left">白日依山盡</p>
<p align="center">黃河入海流</p>
<p align="right">欲窮千里目</p>
<p align="center">更上一層樓</p>

瀏覽器會忽略你在HTML文件中所輸入的空格與換行，文件中若是要換行，須在要換行的位置上必須加上<BR>標籤﹐如此才能達到換行的效果。

標題的排版

HTML 包含不同重要程度的標題標籤，從最重要的標題<h1> 開始到最不重要的 <h6> 標題，在瀏覽器預設情況下，h1 的字體最大，h6 的字體最小。






<h1>這裡是標題一</h1>
<h2>這裡是標題二</h2>
<h3>這裡是標題三</h3>
<h4>這裡是標題四</h4>
<h5>這裡是標題五</h5>
<h6>這裡是標題六</h6>

以下範例輸出結果：

這裡是標題一

這裡是標題二

這裡是標題三

這裡是標題四

這裡是標題五

這裡是標題六

圖片的排版

標籤： <img>

常用屬性：

屬性	說明
src	圖片的資源位址
width	顯示時的圖片寬度
height	顯示時的圖片高度
border	圖片的外框

圖片的排版示範：

<img src="https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png" />

在不指定寬度與高度的情況下，會以圖片的原始尺寸來顯示。

<img src="https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png" width="100" />

在僅指定寬度或僅指定高度的情況下，會等比例進行縮放。

超連結

超連結的標籤語言。

標籤： <a>…</a>

屬性：

屬性	說明
href	超連結的位置
target	開啟的目標視窗

語法示範

以文字做為連結點：

<a href="food.htm">美食</a>

以圖片做為連結點：

<a href="food.htm><img src="food.png"></a>

表格的排版

表格排版的標籤語言。

標籤：<table> <tr> <th> <td>

表格 <table>…</table>
列 <tr>…</tr>
儲存格
- 標題儲存格 <th>…</th>
- 內容儲存格 <td>…</td>

語法示範

範例

地區	溫度
台北	18~20
彰化	20~24

語法














<table>
    <tr>
        <th>地區</th>
        <th>溫度</th>
    </tr>
    <tr>
        <td>台北</td>
        <td>18~20</td>
    </tr>
    <tr>
        <td>彰化</td>
        <td>20~24</td>
    </tr>
</table>

項目符號

在 HTML 文件中，常用的資料列表有下列二種：

1.無序列表 <ul>
2.有序列表 <ol>

無序列表：每一筆資料之前都有個小黑點代表提示符號。

香蕉
蘋果
檸檬





<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ul>

type=“disc” （預設值）代表實心圓點所產生的列表。
type=“circle” 代表空心圓點所產生的列表。
type=“square” 代表實心正方形所產生的列表。

有序列表：使用序號來代表提示符號。

香蕉
蘋果
檸檬





<ol>
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ol>

type=“1”：這是預設值，代表用阿拉伯數目（1, 2 ,3 …）字編號。
type=“A”：代表用大寫英文字母（A-Z）來編號。
type=“a”：代表用小寫英文字母（a-z）來編號。
type=“I”：代表用大寫羅馬數字（I, II, III, …）來編號。
type=“i”：代表用小寫羅馬數字（i, ii, iii, …）來編號。

表單

HTML form 表單結構

<form action="送出目的地" method="資料傳送方式">
<!-- ... 表單內容... -->
</form>

action 屬性用來指定送出表單的資料要由哪個網址來處理
method 屬性用來指定資料傳送的方式，最常見的值有2種：
- GET ：將欄位資料當成網址列的參數來傳遞，較簡單，但僅適合傳送少量資料使用
- POST ：將欄位資料當成HTTP請求檔頭的一部份，資料內容不會出現在網址列上，適合用來傳送大量資料，例如：上傳檔案

常見的表單元素

單行文字輸入
```
<input type="text" name="欄位名稱">
```
- 輸入單行文字時使用
- 若有預設內容，可加上 value="預設內容" 屬性
密碼輸入
```
<input type="password" name="欄位名稱">
```
- 外觀似單行文字欄位，但在輸入時的內容會以 * 來呈現，以保護資料不被他人窺伺
多行文字輸入
```
<textarea name="欄位名稱"></textarea>
```
- 輸入多行文字時使用
- 若要指定外觀的寬與高，可加上 cols="行數" 或 rows="列數" 屬性
- 若要預先指定預設內容，可將其置於 <textarea> 與 </textarea> 標籤之間
```
<textarea name="comment" cols="60" rows="10">
這是預設內容的第1行
這是預設內容的第2行
這是預設內容的第3行
</textarea>
```

下拉選單

<select name="欄位名稱">
  <option value="選項值1">選項文字1</option>
  <option value="選項值2">選項文字2</option>
  <!--...餘類推...-->
</select>

下拉選項的每一個選項都要指定一個對應的選項值

若要預設某個選項已被選定，則在該選項 <option> 標籤加上 selected 屬性，例：

<select name="gender">
  <option value="1">女</option>
  <option value="2">男</option>
  <option value="3" selected>不告訴你</option>
</select>

單選按鈕
```
<input type="radio" name="欄位名稱" value="選項值">
```
- 適用於某個欄位僅能由幾個選項中選一個的情況，類似前述下拉選單的預設情況
- 這些選項需共用同一個欄位名稱，但其選項值不同
- 若要設定預設選項，則在該選項的 <input> 標籤加上 checked 屬性，例：
```
性別：
<input type="radio" name="gender" value="1">女 
<input type="radio" name="gender" value="2">男 
<input type="radio" name="gender" value="3" checked>不告訴你 
```

核取方塊

<input type="checkbox" name="欄位名稱" value="選項值">

可用來當作複選欄位的輸入方式

預先要被核取的欄位，可加上 checked 屬性，例：

<div>您的興趣</div>
<div>
  <input type="checkbox" name="interest" value="coding" checked>寫程式
</div>
<div>
  <input type="checkbox" name="interest" value="music">聽音樂
</div>
<div>
  <input type="checkbox" name="interest" value="singing" checked>唱歌
</div>

按鈕

<input type="按鈕類型" value="按鈕標籤">

按鈕類型	說明
submit	送出表單
reset	重設表單，將此表單的所有欄位恢復成預設值
button	顯示為一般按鈕，通常需搭配 javascript 來控制頁面上的元件

按鈕通常不需要特別指定 name 屬性
按鈕上顯示的標籤文字，由 value 屬性指定
- submit 或 reset 這兩類按鈕若省略 value 屬性，則其標籤文字由瀏覽器決定
- button 類型的按鈕若省略 value 屬性，則不顯示標籤文字

例:

<form action="/comment/add" method="post">
  <!-- ... 略 ... -->
  <input type="submit" value="發表意見">
  <input type="reset" value="清空重填">
</form>

隱藏欄位

<input type="hidden" name="欄位名稱" value="欄位值">

隱藏欄位在頁面上不可見
通常在頁面間傳遞資料或狀態時使用，因此通常會指定其 value 屬性，例：

<input type="hidden" name="secret_token" value="AIzaSyCjSrqWHhmWJnoI7JlD8">

檔案欄位
```
<input type="file" name="欄位名稱" accept="檔案類型篩選規則">
```
- 會顯示一個按鈕，按下後可選擇欲上傳的檔案
- accept 屬性可用來限制欲上傳的檔案類型，可以使用 MIME 的格式，也可以使用副檔名限定，例：
```
<div>
  <label>大頭照</label>
  <input type="file" name="mypic" accept="image/jpeg, .png">
</div>
```
  若省略 accept 屬性，則不限制上傳檔案的類型。

表單範例





<form action="submit.php" method="post">
姓名：<input type="text" name="username"><BR>
內容：<textarea name="content"></textarea><BR>
<input type="submit" value="送出">
</form>

呈現結果