HTML 備忘錄

一、What Is XHTML?
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

二、表格觀念
1、表格設計

• Row -> tr
• Header -> th
• Column /data /cell -> td

2、表格合併用：

• 表格行(column)→ colspan
• 表格列(row)→rowspan

	行 / col /橫	行 / col /橫
列 / row / 欄
列 / row / 欄

3、設定表格間距觀念

備忘語法

三種列表

1、無序列表（Unordered list），

• 是用<ul>表示
• 利用 type屬性指定符號：disk (預設值)、circle'、square

例：

桔茶材料：
<ul>
<li>桔子34顆
<li>香吉士罐頭少許
<li>檸檬半個
<li>梅子12顆（可放可不放）
</ul>

2、有序列表（Ordered list）

• 是用<ol>表示
• TYPE屬性指定編碼方式
• VALUE屬性指定起始值

例：

冰桔茶作法:
<ol>
<li>桔子4顆(超市有賣的小顆桔子)
<li>切半擠汁到雪克杯中
<li>加入
<ol type="a">
<li>柳橙濃縮汁
<li>百香果濃縮汁
<li type="a" value="d">蜂蜜
</ol>
<li>加入立頓紅茶包泡的一小杯茶
<li>在酌量加入冰塊雪克好就OK!
</ol>

3、定義列表（Definition list）

• 是用<dl>表示
• 就是定義列表（Definition Lists），其功能就像是在定義一堆特殊名詞
• 其中，<dt> 代表「被定義的名詞」（Definition Term），<dd> 代表「說明的文字（Definition Data），這兩者必須成對出現

例：

明膠的成份分為兩種：
<dl>
<dt>動物膠 (Gelatin)
<dd>由動物骨骼關節以酸萃取之，故酸性頗高，不適合用於紅茶凍。但常用於慕司、起士蛋糕之類。市售有粉狀、片狀。
<dt>海草膠 (Jelly T)
<dd>石花菜 (Agar) 的精煉物，植物性，可用在素食的材料上。適合紅茶、咖啡、水果凍。
</dl>

4、圖片載入語法

• img是內聯置換元素
• 語法：<img src="" alt="" title="">
• src資源：本地檔案路徑或絕對網址路徑
• alt：圖片丟失時的顯示文字或SEO
• title：鼠標放上去時顯示提示文字

5、超鏈結與錨點

• 超鏈結語法：< a href="" target="" title="">
• href資源：本地檔案路徑或絕對網址路徑
• target：指定顯示位置，例如_blank、parent
• title：鼠標放上去時顯示提示文字
• a標韱狀態：
• 執行CSS順序：l v h a
• link 表示正常的a 標韱狀態
• visited  表示選中的是鼠標點擊後 a標韱時的狀態
• hover    表示選中的是鼠標經過 a標韱時的狀態
• active   表示選中的是鼠標點擊瞬間 a標韱時的狀態
• 錨點：
• 先下錨點(語法：id)
• 再使用< a > href=#指定ID

標籤縮寫

<ul> unordered list

<li>  list item

6、HTML特殊字元表示方式

Character	codes	Entity
quotation mark = APL quote	"	"
ampersand	&	&
less-than sign	&lt;	<
greater-than sign	&gt;	>
blank	&nbsp;
modifier letter circumflex accent	&circ;	ˆ
small tilde	&tilde;	˜
en dash	&ndash;	–
em dash	&mdash;	—
left single quotation mark	&lsquo;	‘
right single quotation mark	&rsquo;	’
single low-9 quotation mark	&sbquo;	‚
left double quotation mark	&ldquo;	“
right double quotation mark	&rdquo;	”
per mille sign	&permil;	‰
euro sign	&euro;	€