12-29-2018
踏入網頁世界的第一步：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
