踏入網頁世界的第一步：HTML基礎語法筆記
這篇文章適合誰
這邊文章適合對於HTML有興趣也有一點基礎的開發者，以下除了介紹何謂HTML外，也提供了基本語法的整理，讓你在開發時可以便於查詢HTML的語法。
什麼是HTML?
HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有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也有更多的認識，如果想看更多內容，可以到快樂學程式的官網逛逛，相信可以在你學程式的路上有所幫助。網址連結：https://www.happycoding.today/posts
Originally published at https://www.happycoding.today/posts/48
