什麼是HTML?
HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。
HTML介紹與基本語法整理
不管你是小時候從撰寫無名小站為了要修改你的樣式，而開始瞭解HTML和CSS為何物，或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考！
編寫基本的HTML：
先讓大家看一下一個基本的HTML文件格式為：
<HTML>
<HEAD>
<TITLE>網頁主題</TITLE>
<Meta>
</HEAD>
<BODY>
網頁內容的主要呈現部分
</BODY>
</HTML>
你可以看到網頁就是由一堆標籤(所謂標籤就是指被<>包起來的語法)集合起來的，透過瀏覽器的消化整理，就是我們所看到的網頁了。簡單而言，通常一份完整的網頁包含了二個部份：抬頭(HEAD)、文件本體(BODY)。而打在<TITLE></TITLE>這裡面的文字會出現在瀏覽器視窗最上頭藍色部份，當作一篇網頁的主題。而最上方及下方的HTML標籤，是為了告訴瀏覽器說這是一份HTML，但這個標籤不是必須的，不過通常都包在網頁的最上下兩端，將所有的原始碼都包起來。
看過上述內容你已經瞭解了一個最基本的HTML檔案格式是什麼樣子，接下來為各位整理了HTML基本語法，讓各位在開發時能更快速查詢自己想要的語法。
HTML語法整理：
基本標籤
| 文件格式 <html> </html> | 檔案的開頭與結尾 |
| 網頁主題 <title> </title> | 必須放在抬頭區段 |
| 抬頭區段<head> </head> | 描述文件的資訊，如「網頁主題」 |
| 內文區段<body> </body> | 內容所在 |
一般語法
| 屬性名稱 | 說明 |
| <! – -與 – -> | 註解 |
| <a href target> | 指定超連結的分割視窗 |
| <a href> | 指定超連結 |
| <a name=名稱> | 被連結點的名稱 |
| <b> | 粗體字 |
| <base target> | 指定超連結的分割視窗 |
| <basefont size> | 更改預設字形大小 |
| <bgsound src> | 加入背景音樂 |
| <big> | 顯示大字體 |
| <blink> | 閃爍的文字 |
| <body text link vlink> | 設定文字顏色 |
| <br> | 換行 |
| <caption align> | 設定表格標題位置 |
| <caption>…</caption> | 為表格加上標題 |
| <center> | 向中對齊 |
| <cite>…<cite> | 用於引經據典的文字 |
| <code>…</code> | 用於列出一段程式碼 |
| <comment>…</comment> | 加上註解 |
| <dd> | 設定定義列表的項目解說 |
| <dfn>…</dfn> | 顯示”定義”文字 |
| <dir>…</dir> | 列表文字標籤 |
| <dl>…</dl> | 設定定義列表的標籤 |
| <dt> | 設定定義列表的項目 |
| <em> | 強調之用 |
| <font face> | 任意指定所用的字形 |
| <font size> | 設定字體大小 |
| <form action> | 設定戶動式表單的處理方式 |
| <form method> | 設定戶動式表單之資料傳送方式 |
| <frame marginheight> | 設定視窗的上下邊界 |
| <frame marginwidth> | 設定視窗的左右邊界 |
| <frame name> | 為分割視窗命名 |
| <frame noresize> | 鎖住分割視窗的大小 |
| <frame scrolling> | 設定分割視窗的捲軸 |
| <frame src> | 將HTML檔加入視窗 |
| <frameset cols> | 將視窗分割成左右的子視窗 |
| <frameset rows> | 將視窗分割成上下的子視窗 |
| <frameset>…</frameset> | 劃分分割視窗(不能在body內) |
| <h1>~<h6> | 設定文字大小(H1為最大) |
| <hr> | 加上分格線 |
| <i> | 斜體字 |
| <img align> | 調整圖形影像的位置 |
| <img alt> | 為你的圖形影像加註 |
| <img dynsrc loop> | 加入影片 |
| <img height width> | 插入圖片並預設圖形大小 |
| <img hspace> | 插入圖片並預設圖形的左右邊界 |
| <img lowsrc> | 預載圖片功能 |
| <img src border> | 設定圖片邊界 |
| <img src> | 插入圖片 |
| <img vspace> | 插入圖片並預設圖形的上下邊界 |
| <input type name value> | 在表單中加入輸入欄位 |
| <isindex> | 定義查詢用表單 |
| <kbd>…</kbd> | 表示使用者輸入文字 |
| <li type>…</li> | 列表的項目 ( 可指定符號 ) |
| <marquee> | 跑馬燈效果 |
| <menu>…</menu> | 條列文字標籤 |
| <meta name=”refresh” content url> | 自動更新文件內容 |
| <multiple> | 可同時選擇多項的列表欄 |
| <noframe> | 定義不出現分割視窗的文字 |
| <ol>…</ol> | 有序號的列表 |
| <option> | 定義表單中列表欄的項目 |
| <p align> | 設定對齊方向 |
| <p> | 分段 |
| <person>…</person> | 顯示人名 |
| <pre> | 使用原有排列 |
| <samp>…</samp> | 用於引用字 |
| <select>…</select> | 在表單中定義列表欄 |
| <small> | 顯示小字體 |
| <strike> | 文字加橫線 |
| <strong> | 用於加強語氣 |
| <sub> | 下標字 |
| <sup> | 上標字 |
| <table border=n> | 調整表格的寬線高度 |
| <table cellpadding> | 調整資料欄位之邊界 |
| <table cellspacing> | 調整表格線的寬度 |
| <table height> | 調整表格的高度 |
| <table width> | 調整表格的寬度 |
| <table>…</table> | 產生表格的標籤 |
| <td align> | 調整表格欄位之左右對齊 |
| <td bgcolor> | 設定表格欄位之背景顏色 |
| <td colspan rowspan> | 表格欄位的合併 |
| <td nowrap> | 設定表格欄位不換行 |
| <td valign> | 調整表格欄位之上下對齊 |
| <td width> | 調整表格欄位寬度 |
| <td>…</td> | 定義表格的資料欄位 |
| <textarea name rows cols> | 表單中加入多少列的文字輸入欄 |
| <textarea wrap> | 決定文字輸入欄是自動否換行 |
| <th>…</th> | 定義表格的標頭欄位 |
| <tr>…</tr> | 定義表格每一行 |
| <tt> | 打字機字體 |
| <u> | 文字加底線 |
| <ul type>…</ul> | 無序號的列表 ( 可指定符號 ) |
| <var>…</var> | 用於顯示變數 |
以上就是HTML語法的大總匯，看到這麼多用法的你是否卻步了？別害怕，先試著自己寫寫看。快樂學程式也推出了系統化的網頁前端初學課程，帶你用一天的時間，深入淺出入手網頁世界。
課程上架Udemy !
你可以
- 瞭解網站建置的世界觀與網站版型
- 掌握HTML5的使用方式
- 掌握 CSS3的使用方式
- 使用Bootstrap處理前端UI框架
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
