Embed Size (px)
Citation preview
第 2 章 HTML、 XML和 CSS的基礎
• 2-1 HTML 的基礎• 2-2 HTML 標籤• 2-3 XML 文件的基礎• 2-4 Cascading Style Sheets
• 2-5 局部套用的 CSS
• 2-6 內建網頁的 CSS
• 2-7 使用 CSS 進行絕對位置的編排
2-1 HTML 的基礎• 2-1-1 第一份 HTML 文件• 2-1-2 HTML 文件的基本架構• 2-1-3 Meta 標籤的使用
2-1-1 第一份 HTML 文件 -1
• 「HTML」（HyperText Markup Language ）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯示漂亮的文件內容。
• Tim Berners-Lee 在 1991 年建立 HTML ，在 1993年HTML1.0 版由 Berners-Lee和 Connolly 完成， HTML 只是使用 SGML 的慣用語法，也就是標籤和屬性，如下所示：– 「標籤」（ Tag）： HTML 標籤是一個字串符號，主要是標示需要
套用編排格式的文字內容，在標籤內的文字是使用預設格式編排。– 「屬性」（ Attribute）：每一個標籤可以擁有一些屬性來定義文字
內容的細部編排。
2-1-1 第一份 HTML 文件 -2
01: <html>02: <head>03: <title>Ch2-1-1.htm</title>04: </head>05: <body>06: <b>From: </b>[email protected]<br>07: <b>To: </b>[email protected]<br>08: <b>Subject: </b> 測試郵件功能 <br>09: <p> 這是第一封郵件 </p>10: </body>11: </html>
2-1-2 HTML 文件的基本架構• HTML 文件標籤的基本架構，如下所示：
<html> 標示著一份 HTML 網頁 <head> HTML 網頁的基本定義 </head> <body> HTML 網頁的內容 </body></html>
• HTML 文件是包含於 <html> 和 </html> 標籤間的內容和定義，其中 <head> 和 </head> 標籤包圍的區塊定義 HTML 網頁的本身，網頁內容是定義在<body> 和 </body> 標籤間。
2-1-3 Meta 標籤的使用• <meta> 標籤是位在 <head> 區塊，可以用來定義
HTML 標籤所沒有定義的相關資訊，常用的應用如下所示：– 設定使用的編輯工具<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
– 設定網頁使用的語系<meta http-equiv="Content-Type" content="text/html; charset=big5">
– 自動更新網頁內容<meta http-equiv="refresh" content="10,url=UsersList.aspx">
2-2 HTML 標籤• 2-2-1 HTML 的標頭標籤• 2-2-2 文字格式標籤• 2-2-3 清單項目標籤• 2-2-4 圖片和超連結標籤• 2-2-5 網頁表格標籤• 2-2-6 網頁表單標籤• 2-2-7 框架頁標籤
2-2-1 HTML的標頭標籤
標籤 說明
<title>…</title> 網頁標題，顯示在瀏覽程式的標題列
<base> 指定基底的 URL網址
<meta> 設定伺服端或客戶端所需的識別資訊
<link> 連結其它網頁，例如：CSS外部樣式表檔案
2-2-2 文字格式標籤 -1標籤 說明
<hn>…</hn> 顯示粗體的標題文字，n 的值是 1~6，表示不同
的尺寸，愈小愈大
<b>…</b> 粗體字
<i>…</i> 斜體字
<u>…</u> 底線字
<s>…</s> 刪除線，在文字中間有一條線
<strike>…</strike> 刪除線，另一種刪除線
2-2-2 文字格式標籤 -2
<sub>…</sub> 下標字
<sup>…</sup> 上標字
<tt>…</tt> 打字機字體
<big>…</big> 放大字體的字型
<address>…</address> 使用地址的字體
<small>…</small> 縮小字體的字型
<center>…</center> 文字內容是置中對齊
2-2-2 文字格式標籤 -3
<blink>…</blink> 閃爍字
<font>…</font> 使用 face、size 和 color 屬性設定編排使用的字
體、尺寸和色彩
<basefont> 指定網頁的基本字型
<br> 強迫文字換行
<hr> 插入一條水平線
<p>…</p> 使用文字段落編排
2-2-3 清單項目標籤標籤 說明
<ul>…</ul> 項目符號
<ol>…</ol> 項目編號
<dl>…</dl> 定義式清單
<menu>…</menu> 選單式清單
<dir>…</dir> 目錄式清單
<lh> 清單標題
<li> 清單項目
<dt> 定義式的項目名稱
<dd> 定義式的項目說明
2-2-4 圖片和超連結標籤
標籤 說明
<a>…</a> 在網頁插入超連結
<img> 在網頁插入圖片
<bgsound> 在網頁插入背景音樂
<embed> 在網頁插入MIDI音樂檔
<marquee>…</marquee> 跑馬燈文字
2-2-5 網頁表格標籤
標籤 說明
<table>…</table> 網頁表格
<tr>…</tr> 表格中的一列
<td>…</td> 表格中的一個儲存格
<caption>…</caption> 表格標題
2-2-6 網頁表單標籤標籤 說明
<form>…</form> 建立表單
<input type=…> 表單輸入或選擇資料的表單欄位，包含按鈕、
文字方塊、選擇鈕和核取方塊欄位，不同 type
屬性表示不同的欄位
<select>…</select> 清單方塊或下拉式清單方塊
<option>…</option> 清單方塊的選項
<textarea>…</textarea> 文字區域
2-2-7 框架頁標籤標籤 說明
<frameset>…</frameset> 設定網頁是一頁框架頁
<frame> 框架頁的框架分割，可分為上下或左右分割
<iframe> 網頁的內置框架，可以直接在網頁插入所需
的框架
<noframes>…</noframes> 不支援框架的瀏覽程式顯示的網頁內容
2-3 XML 文件的基礎• 2-3-1 什麼是 XML
• 2-3-2 XML 文件的組成
2-3-1 什麼是 XML-1
• 「 XML」（ eXtensible Markup Language ）可擴展標示語言屬於一種標籤語言， XML 1.0 版規格在 1998 年 2 月正式推出， XML 的寫法十分類似 HTML ，繼承 SGML 自定標籤的優點，並且刪除一些 SGML 複雜的部分，在功能上能夠補足 HTML 標籤的不足，而擁有更多的擴充性。
• XML 並不是用來編排內容，而是用來描述資料，它並沒有如同 HTML 一般的預設標籤，使用者需要自己定義描述資料所需的各種標籤。
2-3-1 什麼是 XML-201: <?xml version="1.0" encoding="Big5"?>02: <!--網頁製作徹底研究系列 -->03: <booklist>04: <book>05: <code>F8915</code>06: <title>ASP網頁製作徹底研究 </title>07: <authorlist>08: <author>陳會安 </author>09: </authorlist>10: <price>580</price>11: </book>12: <book>13: <code>F8916</code>14: <title>ASP與 IIS 4/5網站架設徹底研究 </title>15: <authorlist>16: <author>陳會安 </author>17: </authorlist>18: <price>550</price>19: </book>20: </booklist>
2-3-2 XML 文件的組成• XML 文件基本上是由標籤和內容組成，一
共七種組成的元素可以出現在 XML 文件中。– 元素（ Element）– 屬性（ Attribute）– 實體參考（ Entity Reference）– 註解（ Comment）– CDATA 區塊（ CDATA Section ）與 PCDATA– PI（ Processing Instructions）– DTD（ Document Type Declarations）
2-4 Cascading Style Sheets
• 2-4-1 CSS 的基礎• 2-4-2 CSS 的基本語法• 2-4-3 常用的 CSS 樣式屬性
2-4-1 CSS 的基礎 -1
• 「 Cascading Style Sheets 」簡稱 CSS ，中文稱為層級式樣式表， CSS 層級式樣式表是一種樣式語言，能夠定義 HTML標籤的顯示效果。
• 瀏覽程式在解譯 HTML 標籤時是使用預設顯示樣式，例如： <p> 標籤是段落、<ul> 為清單項目， CSS 能夠重新定義標籤的顯示樣式。
2-4-1 CSS 的基礎 -2
• 如果想在網頁上使用 CSS 編排網頁內容，一共有三種方式，如下所示：
– 局部套用的 CSS（ In-Line Style Sheets ）。– 內建網頁的 CSS（ Embedded Style
Sheet）。– 外部連結的 CSS（ External Style Sheet ）。
2-4-2 CSS 的基本語法• CSS 能夠針對指定標籤定義全新的樣式，
其基本語法如下所示：Selector {property1: value1; property2: value2 }
• 選擇器 Selector 選擇樣式套用的標籤，大括號括起的樣式組，就是重新定義的標籤樣式，例如：前面的 <p> 標籤，如下所示：p { font-size: 10pt;
color: red; }
2-4-3 常用的 CSS 樣式屬性• 在選擇好定義的標籤後，可以定義 CSS， CSS 常用
的樣式屬性分類成幾大類。– 字型的樣式屬性
• 文字內容顯示的字型效果屬性– 色彩和背景樣式屬性
• 標籤內容的顯示和背景色彩屬性– 文字樣式屬性
• 文字內容的顯示屬性包含對齊、字距的屬性– 區塊樣式屬性
• 文字內容顯示的區塊，這也包含外框顯示的屬性– 絕對位置的樣式屬性
• 絕對位置編排，也就是可以顯示在指定的位置
2-5 局部套用的 CSS
• 局部套用的 CSS 是直接在標籤使用 style屬性定義樣式，常用的 HTML 標籤有<div>、 <a>、 <span> 和 <p>。
<div style="color: green; font-size: 24pt; margin-left: 5px">
<div style="position:absolute; top:40px; width:130px; height:130px">
2-6 內建網頁的 CSS
• 2-6-1 重設 HTML 標籤樣式• 2-6-2 重新設定超連結標籤的樣式• 2-6-3 自訂樣式名稱
2-6-1 重設 HTML 標籤樣式• CSS 能夠重新定義 HTML 標籤顯示的編排樣式，內建網頁的
CSS 是將樣式定義在 <body> 標籤前的 <style> 標籤，如下所示：<style type="text/css">body { font-size: 9pt; font-family: 標楷體 ; line-height: 120%; } span {text-transform: uppercase}p { font-size: 12pt; color: yellow; background-color: blue; line-height: 20px; }</style>
2-6-2 重新設定超連結標籤的樣式
• 網頁超連結的顯示狀態分為多種情況，不同狀態的超連結樣式需要分別定義，如下所示：<style type="text/css">
a:link {font-size: 9pt; text-decoration: none}
a:active {font-size: 9pt; text-decoration: none}
a:visited {font-size: 9pt; text-decoration: none}
a:hover {font-size: 15pt; text-decoration: underline}
</style>
2-6-3 自訂樣式名稱• CSS 允許使用者在網頁定義個人風格的樣式
名稱，樣式名稱是一個 Class ，以「 . 」句點開始的名稱定義在 <style> 標籤，如下所示：
.littlered {color: red; font-size: 9pt}
.littlegreen {color: green; font-size: 9pt}
• HTML 標籤使用 class 屬性指定樣式名稱，在標籤套用定義的樣式，如下所示：<font class="littlered">Style</font>
2-7 使用 CSS 進行絕對位置的編排
• CSS 擁有絕對位置的定位能力，能夠讓您隨心所欲的編排網頁元素，如下所示：.titlered { position: absolute; top: 100pt; left: 50pt; visibility: visible; z-index: 1; background-color: blue; color: yellow; font-size: 19pt;}
• 樣式使用絕對位置顯示元素，即 absolute ，其位置是離上方邊界 100像素，左邊 50像素的位置。
