作者joehuang92 (++紅色世界++)
看板b95902HW
標題HTML的一些小講解(網頁結構、頁框)
時間Tue Dec 26 19:41:17 2006
<網頁結構>
<html></html>宣告html語言
網頁的最基底，宣告整個原始碼是以html撰寫。這個標籤裡面則是兩個主要子標籤<head>
和<body>。
<html>屬性：
class:CSS類別選取器定義樣式用
id:元素名稱
scroll:是否顯示捲軸，可用值有三種：
true:顯示(預設值)
no:不顯示
auto:頁面內容超過可視範圍就顯示
version:表示此頁面的html版本
<head></head>檔頭
這個標籤內可以擺放html的各種檔頭，包括css樣式表連結、網頁標題、javascript程
式碼...等等。
<body></body>內容
這個標籤內擺放網頁的實際內容，也就是會顯示在視窗裡的東西。
<body>屬性：
alink:滑鼠經過連結時，文字顯示顏色
link:連結的初始顏色
vlink:使用過的連結文字顏色
background:背景圖片
bgcolor:背景顏色
bgproperties:設定背景圖片是否可以隨捲軸捲動，可用值若設定成"fixed"則不能。
bottommargin:設定網頁下方邊界的高度，預設值是15像素
leftmargin:設定網頁左方邊界的位置，預設為10像素
rightmargin:設定網頁右方邊界的位置，預設值也是10像素
topmargin:設定網頁上方邊界的位置，預設值15像素
class:CSS類別選取器定義樣式用
dir:文字方向
id:元素名稱
scroll:設定捲軸是否出現，值是布林值
style:CSS樣式定義規則
text:設定網頁的文字初始顏色
<title></title>網頁標題列
標籤內的文字會成為瀏覽器標題列文字，必須要放在<head>標籤之中。
<style></style>CSS樣式表
裡面可以擺放一份針對此網頁的CSS樣式表，一樣必須放在<head>之中。
<link>連結外部文件
單獨使用，用來把外部的文字檔連結進網頁，從外部連結進網頁的文件就等於是html
的一部份，最常用的方式是連結css樣式表。這個標籤必須放在<head>中。
<meta>檔頭資訊
單獨使用，可以允許添加額外的http檔頭資訊，也必須放在<head>中。這些資訊可能對
伺服器端的處理工作會很有幫助。
<meta>屬性：(較龐雜，會講的比較仔細)
content:與http-equiv或name共用。
http-equiv:給予伺服器端額外指示，可用值有下列幾種，分述如下：
content-language:指定文件語系
ex:<meta http-equiv="content-language" content="en-US">
content-script-type:指定預設程式語言
ex:<meta http-equiv="content-script-type" content="text/javascript">
content-style-type:指定預設樣式表語言
ex:<meta http-equiv="content-style-type" content="text/css">
content-type:指定瀏覽器與伺服器間的媒體類型
ex:<meta http-equiv="content-type" content="text/html">
default-style:指定預設的樣式表
ex:<meta http-equiv="default-style" content="stylesheet">
expires:設定文件的保存日期或時間
ex:<meta http-equiv="expires" content="WED, 20 Jan 1999 15:20:30 GMT">
refresh:指定網頁重新整理的頻率(重新整理的時候可以使用另一個URL)
ex:<meta http-equiv="refresh" content="3;http://tw.yahoo.com">
window-target:指定視窗或頁框作為連結目標(content可用值請參考前面發的文)
ex:<meta http-equiv="window-target" content="_top">
name:加入其他類型的非檔頭資訊，通常會是搜尋引擎找網頁的關鍵。可用值如下：
author:標明文件作者
copyright:非正式的版權宣告
description:文件描述，有些搜尋引擎可能會搜尋這個值
generator:此文件的開發工具及其版本
keywords:以逗點分開的文件關鍵字，有些搜尋引擎也使用這個值
......
<script></script>程式指令
包含要在頁面上執行的指令，通常必須加上language屬性標明語言。
<script>屬性：
defer:程式是否在頁面載入時執行，值是布林值
event:指定一個事件，事件發生時觸動程式
id:元素名稱
language:指定程式語言，可以是javascript,vbs,xml...等等的語言
src:從外部連結程式碼，值是程式碼檔案路徑
<!DOCTYPE>指定文件類型定義
出現在html標籤之外，指定套用於文件的文件類型定義(DTD)。(好好我也不太懂)
ex:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- ->註解
這個就是html文件中的注解，在這個標籤內的文字將不會被顯示。
<頁框>
<frameset></frameset>頁框組
頁框簡單說就是將一個網頁分割成幾個部份，並在每個部份自成一網頁，有很多網站都是
用這樣的技術的。我們先看看這樣的一個網頁：
╔═╦═════════╗
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
╚═╩═════════╝
這樣的網頁由幾個網頁構成？兩個？
不對，是三個。
我們假設左方的頁框連結到A.htm，右邊的頁框則連結到B.htm。那麼第三個網頁就是將他
們串在一起的網頁mother.htm，圖示就像這樣
╔═╦═════════╗
║ ║ ║←mother.htm
║ ║ ║
║ ║ ←──B.htm
║ ║ ║
║←──A.htm ║
║ ║ ║
╚═╩═════════╝
其中A和B是之前討論的網頁，所以原始碼沒有什麼特別的，重點是mother.htm的原始碼。
一般，我們把mother.htm叫做頁框組，它的原始碼只定義了頁框的結構，並連結兩個網頁
最後形成一個頁框的形式。
這裡給出這個mother.htm原始碼：
<html>
<head></head>
<frameset cols="20%,*">
<frame name="frameA" src="A.htm">
<frame name="frameB" src="B.htm">
</frameset>
</html>
首先我們注意到這個網頁的<body>標籤被<frameset>標籤取代了，也就是說，頁框組所
在的網頁中不存在body標籤。
然後我們注意到標籤的內部，<frameset>標籤中給定了兩個子標籤<frame>，分別連結到
兩個不同的網頁。
分割的方式動用到frameset標籤的cols屬性，也就是水平分割。
接下來先講解一下frameset標籤的屬性：
<frameset>屬性：
border:框線粗細(分開網頁的框線)
bordercolor:框線顏色
class:CSS類別選取器定義樣式用
cols:水平分割頁框
rows:垂直分割頁框
frameborder:是否顯示邊框，值為0或no，表示不顯示，或是1或yes，表示顯示邊框(預設)
framespacing:在頁框間增加額外空間，單位為像素
id:元素名稱
style:CSS樣式定義規則
其中特別把cols跟rows這兩個屬性拿出來解釋：
頁框的分割像是切東西，對一張紙，在中間劃一刀，再橫著劃一刀，就得到四張紙了。
cols跟rols的值就是在何處切割，譬如：
<frameset cols="50%,50%">
就等於是從50%寬度的地方直切一刀，於是網頁就會是水平兩個一樣寬的頁框。又或是
<frameset cols="100,20%,*">
就是從左邊開始100像素位置切一刀，然後總網頁再數20%寬度切一刀，剩餘的部份自成一
網頁(*表示剩餘空間)。這樣會有三個頁框。
切割的動作可以是橫直一起完成：
<frameset cols="50%,*" rows="50%,*">
這樣，就會是四個由中間分開的頁框。
那如果做成這樣的網頁呢？
╔═╦═════════╗
║ ╠═════════╣
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
║ ║ ║
╚═╩═════════╝
這時候則可以把右邊視為一個框架組，原始碼如下：
<html>
<head></head>
<frameset cols="100,*">
<frame name="frameleft" src="left.htm">
<frameset rows="20,*">
<frame name="framerighttop" src="righttop.htm">
<frame name="framerightbot" src="rightbot.htm">
</frameset>
</frameset>
</html>
即在右邊的框架內建立子框架組再對其切割。
框架的第二個重要議題是連結，常常可以看到某些框架網頁，開了連結出現在其他的框架
(預設是在自己的框架內，因為框架內的網頁是獨立的)。如果設定錯誤，連結不但不會
出現在想要的地方，更可能出現多重框架(試想在框架裡面另外在開一次框架)。
回想之前的<a>連結標籤，有一個屬性是target，就是用來指定連結的頁框所用。
那時候的可用值有這些：
_blank:新網頁載入到新視窗
_media:新網頁載入到媒體工具列的html內容區域
_parent:文件載入到母框架組
_search:文件載入到瀏覽器搜尋頁
_self:文件載入到自己的框架
_top:文件載入到最上層的框架組視窗
現在可以在增加一個值，拿上面的例子來說，假設我想在左方框架頁的選單點選連結，
出現在右下角的框架中。指令碼就是這樣：
(left.htm內容)
...
<a href="xxx" target="framerightbot">
framerightbot就是當時指定給右下角框架的name屬性值，所以說，target的值也可以是
該網頁中任意一個框架的name值。
現在再來探討<frame>標籤的屬性：
<frame>屬性：
allowtransparency:指定是否顯示頁框的透明層次，值是布林值
bordercolor:外框顏色
class:CSS類別選取器定義樣式用
frameborder:是否顯示外框框線，用法同frameset的frameborder屬性
height width:框架的寬高(不建議使用)
id:元素名稱
marginheight marginwidth:建立頁框上下/左右寬度，單位是像素
name:該框架頁的名稱，對連結來說很重要
noresize:沒有指定值，這個屬性讓指定頁框頁無法改變大小
scrolling:設定是否顯示捲軸，可用值同html的scroll屬性
src:該框架頁連結的網頁
style:CSS樣式定義規則
<noframes></noframes>無框架提示文字
如果使用者的瀏覽器不支援框架，會顯示這個標籤內的文字。當然，裡面也可以是一段
指向無框架的網頁的連結。這個標籤可以放在html標籤下的任何位置。
<結語>
這些大約就是html中比較常見的觀念跟標籤用法了，不過這些東西只能寫出一個給人看的
網頁，並不能與使用者互動或傳輸資訊。
就一個網頁來說，html只是其中的內容，CSS則是網頁的樣式，Javascript則是網頁的
互動，php等語言則是作者跟使用者的資料傳輸橋樑。一個最完整的網頁，撇開php不談
，通常都會有其他的三項東西。
之後，應該還會對這些其他的內容做一些解說...盡快囉XD
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.121.11.252
※ 編輯: joehuang92 來自: 59.121.11.252 (12/26 19:46)
1F：推 waterwinds:網頁的互動= =? 12/26 23:14