【转】HTML全解（1）
Html簡介
全寫： HyperText Mark-up Language
譯名： 超文件注標式語言（譯名之一）
簡釋：一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。
HTML 是在 SGML 定義下的一個描述性語言，或可說 HTML 是 SGML 的一個應用程式，HTML 不是程式語言，如 C++ 和 Java 之類，它只是標示語言，基本上你只要明白了各種標記的用法便算學懂了 HTML，HTML 的格式非常簡單，只是由文字及標記組合而成，于編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可，當然以專業的網頁編輯軟件為佳。
■ 閱讀須知：
這一篇【HTML剖析】偏重于標記的介紹，考慮到易懂及每節的篇幅問題，我并不按 W3C 的 HTML 分類，這可令你更易選擇有興趣的標記，其中只有【文件標記】是必讀的，其余可任意選擇。這一篇不會提及任何網頁編輯軟件，只要掌握了 HTML ，任何網頁編輯工具都可以變成一把利器。
■ 標記寫法：
任何標記皆由"<"及">"所圍住，如 <P>
標記名與小于號之間不能留有空白字符。
某些標記 要加上參數，某些則不必。如 <font size="+2">Hello</font>
參數只可加于起始標記中。
在起始標記之標記名前加上符號"/"便是其終結標記，如 </font>
標記字母大小寫皆可。
■ 圍堵標記與空標記：
標記按型態分為圍堵標記與空標記
圍堵標記
顧名思義，它以起始標記及終結標記將文字圍住，令其達到預期顯示效果。
例如 HTML Source ： <b>Creation of Webpage</b> is my favourite.
顯示成： Creation of Webpage is my favourite.
其中 <b></b> 便稱為圍堵標記。
它以起始標記<b>及終結標記</b>標示文字 Creation of webpage ，令它顯示成粗體，兩者失其一都會發生錯誤顯示。
空標記
是指標記單獨出現，只有起始標記沒有終結標記。
例如 HTML Source：
I love Creation of Webpage.<br>It's a wonderful place.
顯示成：
I love Creation of Webpage.
It's a wonderful place.
其中換行標記<br>便屬空標記。
它的作用便是將標記后所有東西顯示于下一行，可見終結標記于它是沒意義的，但有些人會為空標記加上終結標記，這是為方便記認而己，對 HTML 沒有影響
HTML 標記一覽
標記 類型 譯名或意義 作用 備注
文件標記
<HTML> ● 文件聲明 讓瀏覽器知道這是 HTML 文件
<HEAD> ● 開頭 提供文件整體資訊
<TITLE> ● 標題 定義文件標題，將顯示于瀏覽頂端
<BODY> ● 本文 設計文件格式及內文所在
排版標記
<!--注解--> ○ 說明標記 為文件加上說明，但不被顯示
<P> ○ 段落標記 為字、畫、表格等之間留一空白行
<BR> ○ 換行標記 令字、畫、表格等顯示于下一行
<HR> ○ 水平線 插入一條水平線
<CENTER> ● 居中 令字、畫、表格等顯示于中間 反對
<PRE> ● 預設格式 令文件按照原始碼的排列方式顯示
<DIV> ● 區隔標記 設定字、畫、表格等的擺放位置
<NOBR> ● 不折行 令文字不因太長而繞行
<WBR> ● 建議折行 預設折行部位
字體標記
<STRONG> ● 加重語氣 產生字體加粗 Bold 的效果
<B> ● 粗體標記 產生字體加粗的效果
<EM> ● 強調標記 字體出現斜體效果
<I> ● 斜體標記 字體出現斜體效果
<TT> ● 打字字體 Courier字體，字母寬度相同
<U> ● 加上底線 加上底線 反對
<H1> ● 一級標題標記 變粗變大加寬，程度與級數反比
<H2> ● 二級標題標記 將字體變粗變大加寬
<H3> ● 三級標題標記 將字體變粗變大加寬
<H4> ● 四級標題標記 將字體變粗變大加寬
<H5> ● 五級標題標記 將字體變粗變大加寬
<H6> ● 六級標題標記 將字體變粗變大加寬
<FONT> ● 字形標記 設定字形、大小、顏色 反對
<BASEFONT> ○ 基準字形標記 設定所有字形、大小、顏色 反對
<BIG> ● 字體加大 令字體稍為加大
<SMALL> ● 字體縮細 令字體稍為縮細
<STRIKE> ● 畫線刪除 為字體加一刪除線 反對
<CODE> ● 程式碼 字體稍為加寬如<TT>
<KBD> ● 鍵盤字 字體稍為加寬，單一空白
<SAMP> ● 范例 字體稍為加寬如<TT>
<VAR> ● 變數 斜體效果
<CITE> ● 傳記引述 斜體效果
<BLOCKQUOTE> ● 引述文字區塊 縮排字體
<DFN> ● 述語定義 斜體效果
<ADDRESS> ● 地址標記 斜體效果
<SUB> ● 下標字 指數
<SUP> ● 下標字 下標字
清單標記
<OL> ● 順序清單 清單項目將以數字、字母順序排列
<UL> ● 無序清單 清單項目將以圓點排列
<LI> ○ 清單項目 每一標記標示一項清單項目
<MENU> ● 選單清單 清單項目將以圓點排列，如<UL> 反對
<DIR> ● 目錄清單 清單項目將以圓點排列，如<UL> 反對
<DL> ● 定義清單 清單分兩層出現
<DT> ○ 定義條目 標示該項定義的標題
<DD> ○ 定義內容 標示定義內容
表格標記
<TABLE> ● 表格標記 設定該表格的各項參數
<CAPTION> ● 表格標題 做成一打通列以填入表格標題
<TR> ● 表格列 設定該表格的列
<TD> ● 表格欄 設定該表格的欄
<TH> ● 表格標頭 相等于<TD>，但其內之字體會變粗
表單標記
<FORM> ● 表單標記 決定單一表單的運作模式
<TEXTAREA> ● 文字區塊 提供文字方盒以輸入較大量文字
<INPUT> ○ 輸入標記 決定輸入形式
<SELECT> ● 選擇標記 建立 pop-up 卷動清單
<OPTION> ○ 選項 每一標記標示一個選項
圖形標記
<IMG> ○ 圖形標記 用以插入圖形及設定圖形屬性
連結標記
<A> ● 連結標記 加入連結
<BASE> ○ 基準標記 可將相對 URL 轉絕對及指定連結目標
框架標記
<FRAMESET> ● 框架設定 設定框架
<FRAME> ○ 框窗設定 設定框窗
<IFRAME> ○ 頁內框架 于網頁中間插入框架 IE
<NOFRAMES> ● 不支援框架 設定當瀏覽器不支援框架時的提示
影像地圖
<MAP> ● 影像地圖名稱 設定影像地圖名稱
<AREA> ○ 連結區域 設定各連結區域
多媒體
<BGSOUND> ○ 背景聲音 于背景播放聲音或音樂 IE
<EMBED> ○ 多媒體 加入聲音、音樂或影像
其他標記
<MARQUEE> ● 走動文字 令文字左右走動 IE
<BLINK> ● 閃爍文字 閃爍文字 NC
<ISINDEX> ○ 頁內尋找器 可輸入關鍵字尋找于該一頁反對
<META> ○ 開頭定義 讓瀏覽器知道這是 HTML 文件
<LINK> ○ 關系定義 定義該文件與其他 URL 的關系
StyleSheet
<STYLE> ● 樣式表 控制網頁版面
<span> ● 自訂標記 獨立使用或與樣式表同用
注：
● 表示該標記屬圍堵標記，即需要關閉標記如 </標記>。
○ 表示該標記屬空標記，即不需要關閉標記。
IE 表示該標記只適用于 Internet Explorer。
NC 表示該標記只適用于 Netscape Communicator。
反對 表示該標記不為 W3C 所贊同，通常這標記是 IE 或 NC 自訂，且己為眾所支 持，只是 HTML 標準中有其它同功能或更好的選擇。
棄用 表示該標記己為 W3C 所棄用，是過時的標記，但 HTML 具向下兼容的特性，不用擔心新瀏覽器不支援舊標記。
新 表示該標記是 HTML 4.0 中新增的
<HTML> ； <HEAD> ； <TITLE> ； <BODY>
■ HTML 基本架構：
以下 HTML Source Code 便是一份 HTML 文件的基本架構：
<HTML>
<HEAD>
<TITLE> 網頁的標題 </TITLE>
</HEAD>
<BODY>
網頁的內容，很多標記都作用于此
</BODY>
</HTML>
特點解說：
整份文件處于標記<HTML>與</HTML>之間。
<HTML>用以聲明這是 HTML 文件，讓瀏覽器認出并正確處理此 HTML 文件。
文件分兩部分，由<HEAD>至</HEAD>稱為開頭，<BODY>至</BODY>稱本文。
基本上兩者各有適用的標記，如<TITLE>只可出現于開頭部分。
開頭部分用以存載重要資訊，而只有本文部分會被顯示。
所以大部分標記會運用于本文部分。
<TITLE>所標示的是文件的標題。
會出現于瀏覽器頂部及為別人 Bookmark 時的名稱，所以每頁有不同而明確的標題是需要的。
上述標記中只有<BODY>具參數設定。
■ <BODY> 之參數設定：
例子：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
text="#000000"
用以設定文字顏色。 #000000 代表黑色，亦可以采用顏色的名稱，即 text="black" 。各種顏色的值及名稱可參考【調色原理】一節。
link="#0000FF"
設定一般文字連結顏色。
alink="#FF0000"
設定剛按下時文字連結顏色。
vlink="#0000FF"
設定連結后的顏色。（被按過）。
background="bg1.gif"
設定背景墻紙。GIF 或 JPEG 皆可，可以是絕對途徑或相對途徑。
bgcolor="#FFFFFF"
設定背景顏色。當己設定背景墻紙時會失去作用，除非墻紙有透明部分。
leftmargin=2
設定整份文件顯示畫面的左方邊沿空間，單位為像素。『只適用于IE』
topmargin=2
設定整份文件顯示畫面的上方邊沿空間。『只適用于IE』
bgproperties="fixed"
固定背景墻紙，當卷動文字時墻紙不會跟著卷動。『只適用于IE』 排版標記
排版標記
<!--注解--> ； <P> ； <BR> ； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ；
■ <P> ：
<P>稱為段落標記。作用：為字、畫、表格等之間留一空白行。
本來<P>是一圍堵標記，標于一段落的頭尾，但從 HTML 2.0 開始己不需要</P>作結尾。
<P> 的常用參數： 如：<p align="center">
align="center"
可選值：right, left, center。
內定值： align="left"
■ <BR> ：
<BR>稱為換行標記。作用：令字、畫、表格等顯示于下一行。
由于瀏覽器會自動忽略原始碼中空白和換行的部分，這令到<BR>成為最常用的標記之一。因為無論你在原始碼中編好了多漂亮的文章，若不適當地加上換行標記或段落標記，瀏覽器只會將它顯示成一大段。
■ <HR> ：
<HR>稱為水平線。作用：插入一條水平線。
<HR> 之參數修改：
以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 為例。
align="LEFT"
設定線條置放位置，可選擇：left；right；center 三種設定值。
size="2"
設定線條厚度，以像素作單位，內定為 2。
width="70%"
設定線條長度，可以是絕對值（以像素作單位）或相對值，內定為 100%。
color="#0000FF" 『只適用于IE』
設定線條顏色，內定為黑色。 #0000FF 代表藍色，亦可以采用顏色的名稱，即 text="blue" 。
noshade
設定線條為平面顯示，若刪去則具陰影或立體，這是內定值。
總結
以上是生活随笔為你收集整理的【转】HTML全解（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用 Eclipse + PyDev 开
- 下一篇： 2017年html5行业报告,云适配发布