網頁的骨架-html

這是劍俠鼻唄個人方便查閱之用.
撰寫網頁及程式的工具愈來愈多,現在巳經很少看到有人用筆記本在寫東西了,
網上的教學文章也巳有一大票了,這只是布魯克個人的足跡記錄.

第0章

零.<!--這是註解-->
如<!--ho....ho....google and blogspot.com ...you are so wise ,but do not change my contents ,please.I beg you!-->

一.跳脫字元(escape)---「&」(ampersand;and符號.)。

有些巳經拿來作為特殊用途的符號、這些符號巳經被定義了(保留字)。所以就要找一些比較用不到的東西、或者另外定義一些符號來定義、取代原先巳經被定義的符號。
與其他語言的跳脫字元有點像。但html 並無跳脫字元、而是用一些更泠門的字或符號來定義原先已經有特殊定義的符號。
只要記幾個常用的就可以了、其他的用的到再去查吧。

1.&符號：「&amp;」 。顯示「&」。(--一般文章裡,要用到&時,直接打「&」就可以了.)
2.小箭號：「&lt;」和「&gt;」。顯示小箭號「<>」。(--less than和greater than.一般文章裡,要用到<>時,直接打「<」或「>」就可以了.)

3.空格：「 &nbsp;」。顯示一個空白「  」。
4.引號：「&quot;」。顯示「"」。(--quote引號.一般文章裡,要用到時,直接打「"」就可以了.)

♨喔，小括號有用。小括號若單獨存在、則直接打就看得見了。
而且左右兩個都打,也不會有事,就像這樣<看得到嗎,雙邊的小括號,應該可以>。若小括號只有一個而且又連結著文字就毀了。因為系統遇到小括號就會以為吾人要設定標籤、碰到左小括號以後,就會以為左小括號後面的文字是標籤內容、而且嘗試著去尋找下一個右小括號。 不過通常情況是不會有事(網頁嘛,還能有什麼事,最多就是顯示不出來而巳)。
真想要跳脫時寫:「&lt」或「&lt;」。一般都會加分號;,瀏灠器比較容易分辨。


第1章 段落控制


１.段行標籤<br>。可以段行。就是按enter的效果。

２.段落標籤<p>。可以段落。段落除了換行之外還會多一個空白行，就是切換成另一個段落。

(1)<p>原本是成對的標籤，如此系統才知道段落從哪裏開始到哪裏結束，但由於其本身原本的功能就是段落，所以只要再打一個<p>標籤，就又開啟另一個段落了。所以常個別出現。

(2)段落的格式對齊。
<1><p align=right>,置右。
<2><p align=center>,置中。
<3><p aling=left>,置左。

3.置中標籤<center></center>。

4.呈現記事本原有格式的標籤<pre></pre>。一切的格式都會比照記事本格式。


第2章 文字效果


1.文章標題標籤<h1></h1>…<h6></h6>。為1到6級，級數愈小的、字型愈大。

2.文字標籤 <font></font>。

(1)屬性:

<1>尺寸size。屬性值為數字,數字由1到7；數字愈大字型就愈大。字型大小預設是3。

＃字型大小的相對指定方法:size ="+數值-數值"。因為預設的字型是3、所以只要把font size設成+或-1，意思就是字型大小是預設字型3的+1或-1的意思。

<2>字型face。
<3>顏色color。

3.預設文字標籤<basefont size="數值"> </basefont>。
只要設定在文章的一開頭，則往後只要用相對指定法，就能管理整文章的相對比例。
♨但用處不大、真得用處不大，你苦心積慮整個設完後、又不一定如自己原先所想的那樣，結果仍是要個別更改。 況且使用者在瀏覽時若覺得太大或太小可以自行在瀏覽器中更改字型大小。

4.粗體字標籤 <b> </b>。

5.斜體字標籤 <i></i>。

6.底線標籤 <u></u>。

7.刪除線標籤 <strike></strike>。

8.上標字標籤 。

9.下標字標籤 。

10.注音標籤 <ruby>要注音的正文<tr>注音本文 </ruby>。注音本文處的字會變得和註解一樣,若是橫式,會在上標。

※外國人常用的特殊文字定義標籤 (--這就是常常在原文書看到的東西(字型樣式) 、不過很多效果,在中文看起來是差不多的。)
<dfn >。 --> 表示定義
<samp>。 --> 表示引用
<cite>。 --> 表示引經據典
<person>。 --> 表示人名
<em> 。--> 表示強調
<strong>。 --> 表示加強語氣
<address>。 --> 表示

e-mail地址(會出現在這裡,單獨列出來)

　　　　　
<abbrev>。 --> 表示縮寫字
<acronym>。 --> 表示縮頭字
<code>。 --> 是指程式碼
<var>。 --> 是指變數


第3章 表格


1.表格標籤 <table></table>。
<table border="邊框(外框)厚度" bordercolor="邊框顏色"height="高度" width="寬度" bgcolor="背景顏色" background="背景圖路徑"　cellspacing="空格的間隔距(設定格線厚度)" cellpaddig="空格的填充距(資料和格線的距離)" >

(1)表格的標題標籤<caption></caption>。
<caption align="對齊(上,下)">
會顯示在表格的最上方(在表格外面)。就是每張表的名稱table name。可以設align,是因為表格的標題名稱也能放在下方。

(2)列標籤<tr></tr>。
<tr align="對齊(左,中,右)"valign="垂直對齊(上,中,下) bgcolor="背景顏色" ">
有幾個<tr></tr>就表示該列有幾個列row。設align所影響的是整個列。

(3)欄位標題標籤<th><th>。
用來定義欄位的標題名稱、每一欄的標題、就是每一欄的開頭的置頂欄位名稱。就是field。屬性和列標籤完全一樣。

(4)欄標籤<td></td>。
<td align="對齊(左,中,右)" bgcolor="背景顏色" >
有幾個<td></td>就表示該列有幾個欄column。設align影響的只有單一儲存格


2.格式:

<table>表格開始

<caption > 表格的標題 </caption>

<tr>第一列
<th>欄位標題一</th> <th>欄位標題二</th> <th>欄位標題三</th>....
</tr>

<tr>第二列
<td>第一欄</td> <td>第二欄</td> <td>第三欄</td>...
</tr>

<tr>第三列
<td>第一欄</td> <td>第二欄</td> <td>第三欄</td>...
</tr>

</table>

＃精簡表(省略列和欄的結束標籤)
正常人,為免過勞死,通常都會用這個,如果是用筆記本寫的話.

<table>
<caption> </caption>
<tr>
<th> <th>.....<th>
<tr>
<td> <td>.....<td>
<tr>
<td> <td>.....<td>
<tr>
<td> <td>.....<td>
</table>

表格的標題

欄位標題一	欄位標題二	欄位標題三
第一欄	第二欄	第三欄
第一欄	第二欄	第三欄

3.屬性:

<table border="n/n%" bordercolor="#rgb" height="n/n%" width="n/n%" bgcolor="#rgb" background="url" cellspacing="n/n%" cellpaddig="n/n%" >

<caption align="topbottom">
<tr align="leftcenterright" valign="topbottommiddle">
<td align="leftcenterright" valign="topbottommiddle" width="nn%">
<th align="leftcenterright" valign="topbottommiddle" width="nn%">


第4章 列表


1.排序列表標籤(ordered lists):<ol><li>。

<ol>
<li>酒<li>白酒<li>紅酒<li>黃酒<li>竹葉青<li>賓克斯的酒
</ol>

＃預設是阿拉伯數字.

1. 酒
2. 白酒
3. 紅酒
4. 黃酒
5. 竹葉青
6. 賓克斯的酒
   

(1)大寫英文字母風格:<ol type="A">。

1. 酒
2. 白酒
3. 紅酒
4. 黃酒
5. 竹葉青
6. 賓克斯的酒
   

(2)小寫英文字母風格:<ol type="a">。

1. 酒
2. 白酒
3. 紅酒
4. 黃酒
5. 竹葉青
6. 賓克斯的酒
   

(3)大寫希臘數字風格:<ol type="I">。

1. 酒
2. 白酒
3. 紅酒
4. 黃酒
5. 竹葉青
6. 賓克斯的酒
   

(4)小寫希臘數字風格:<ol type="i">。

1. 酒
2. 白酒
3. 紅酒
4. 黃酒
5. 竹葉青
6. 賓克斯的酒
   

♨呃...可以試試,日文五十音,注音ㄅㄆㄇ,中國數字一二三,或書式的中國數字壹貳叁。
不過好像没什麼作用。


2.無序列表標籤:<ul><li>。

<ul>
<li>酒<li>白酒<li>紅酒<li>黃酒<li>竹葉青<li>賓克斯的酒
</ul>

＃預設是圓點(type="disc").

• 酒
• 白酒
• 紅酒
• 黃酒
• 竹葉青
• 賓克斯的酒
  

(1)空心圓風格:<ul type="circle">。

• 酒
• 白酒
• 紅酒
• 黃酒
• 竹葉青
• 賓克斯的酒
  

(2)方塊風格:<ul type="square">。

• 酒
• 白酒
• 紅酒
• 黃酒
• 竹葉青
• 賓克斯的酒
  

♨呃...至於有没有這個...梅花(club),黑桃(spade),紅心(heart)...?
各位觀眾...五支煙！！！
不是,是試出來的人,請告知布魯克一下,尤其是能排出同花大順,一條龍的...XD


3.無記號列表標籤:<dl><dd>。

<dl>
<dd>酒<dd>白酒<dd>紅酒<dd>黃酒<dd>竹葉青<dd>賓克斯的酒
</dl>

酒

白酒

紅酒

黃酒

竹葉青

賓克斯的酒

第五章 超連結

1.超連結標籤<a></a>

格式:<a href="url">連結顯示的文字</a>

a就是錨(anchor)的意思。在標籤a中的href屬性指明明確的位置就可以了(在某個明確位置的某個檔案下個錨),如指定明確的ip位址或域名(Domain Name)。路徑格式一定要打，路徑格式像是web server的「http://」、file server的「ftp：//」、news server的「news：」、mail server的「mailto：」 BBS的「telnet://」。或指明要進入某主機「gopher//」或本機(的某檔案)「file:///」 。
否則它就會以為是目前這個目錄中的哪個檔案。路徑要不要加引號都可以。單引號、雙引號都行，不用引號也行。(屬性值都是這樣的,但一般都會加上引號.)

在超連結標籤中間，是用來設定要顯示來的文字，而且一定要打。
href是用來指明路徑，固然要打，但標籤的內容也一定要打，否則就顯示不出任何文字。一個超連結標籤只能設定一個超連結。如下.
<a href="http://beba-brook.blogspot.com/">布魯克的首頁</a>
布魯克的首頁
<a href="http://beba-brook.blogspot.com/2006/06/html.html">網頁的骨架-html</a>
網頁的骨架-html

2.連結本機檔案
只要在超連結標籤中的href屬性指定明確的路徑就可以了。效果如同在瀏覽器按檔案>>開啓。預設會去找同一個目錄下的檔案，所以凡是同一個目錄下的檔案，只要打檔名和副檔名就可以了。要不就指定全名"file:///C:/d/e/f.html" 。如下.
<a href="html.html">網頁的骨架-html</a>
網頁的骨架-html

♨但一定是要瀏覽器能打得開的才行，如網頁(因為瀏覽器就是用來看網頁的嘛),記事本啦,圖片,flash等等文件。若不是網頁等瀏覽器能打開的檔案，用瀏覽器打開，它就會問你要不要下載那個檔案。就變成下載了。要指定不同目錄的檔案，就要打明路徑。正斜線／，有「到」或「下」的意思，是用來指明目錄的。如href=/a/b/c/d.html。就是說到目前這個目錄下的ａ目錄下的ｂ目錄下的ｃ目錄下的d.html這個檔案。如上例的連結就是指明,本目錄下的html.html這個檔案.剛好它又是個網頁,所以瀏覽器就把它打開了.(續看下例.)
由此可知超連結的應用十分廣泛、因為只要文字能出現的地方就可以是超連結。所以不管是文字、表格、圖片、等等甚至跑馬燈啦。反正想得到的地方都可以出現超連結。

3.相對路徑VS絕對路徑

前已述及,路徑要指明"明確"位置,如本篇文章的完整路徑是「http://beba-brook.blogspot.com/2006/10/html.html」位置很"明確" ,且可知本頁是在首頁這個目錄下的2006這個目錄下的10這個目錄中.

假設此時我要連到「特殊字元一覽表」,它的完整路徑是「http://beba-brook.blogspot.com/2006/10/blog-post.html」.若要用絕對路徑,指定路徑時就寫完整路徑就可以了,但若要寫相對路徑,由於它與本篇位處同一個目錄(10),故如上所述,路徑的位置只要寫檔名和副檔名就可以了.如下
<a href="blog-post.html">特殊字元一覽表</a>
特殊字元一覽表
或
<a href="./blog-post.html">特殊字元一覽表</a>
特殊字元一覽表

假設此時我想連到「福爾摩沙の航海日誌」一文,它的完整路徑是「http://beba-brook.blogspot.com/2006/09/blog-post.html」.它的位置在首目錄下的2006目錄下的09目錄中.則相對路徑就是在本頁的目錄的上個目錄(2006)下的09目錄中.則路徑就可寫成:
<a href="../09/blog-post.html">「福爾摩沙の航海日誌」</a>
「福爾摩沙の航海日誌」

♨"點點"『..』這個符號代表的是『上一層』的目錄。而"點"『.』代表『本目錄』。「本目錄下的某檔案」就是『./』。「上一層目錄下的某檔案」就是『../』。「上上層目錄下的某檔案」就是『../../』...依此類推。相對路徑指的是我所要連結的檔案和目前所在的檔案在同一主機(網站)之間的相對位置.這個用法只用在同一個網站內的檔案之間.好處是很簡便.不必每個路徑都打絕對位置,會瘋掉.而且換網站時整個網站(目錄)帶著跑,搬過去就行了.若全都用絕對位置.搬家或改名時,所有的路徑都要改(因為原來路徑所指向的位置已不存在),就真的會瘋掉.

4.超連結常見的屬性

格式:<a href="url" name="目標錨" target="目標頁框">連結顯示的文字</a>

(1)超連結的name屬性---更精確的連結,指明連到某檔案的某處.

<1>檔案內的精確連結
只要在任網頁中任何一個地方定一個錨,並命名(當然要取名),則我們在使用超連超時,就能指定要連結到某個檔案中的某個錨。第一要先拋錨。如,現在布魯克在本章超連結介紹的前5章標題,各定了一個錨。

在第0章的標題處定下個錨,並命名為brook_htm_c0。
如<a name="brook_htm_c0">第0章</a>
在第1章的標題處定下個錨,並命名為brook_htm_c1。
如<a name="brook_htm_c1">第1章</a>
...等等等,依次訂到第4章的標題。

拋完錨後,我們在寫超連結時,只要在路徑指明要連結到哪個錨,該超連結就會連到目標錨.如下
<a href="#brook_htm_c0">到第0章</a>
到第0章
<a href="#brook_htm_c1">到第1章</a>
到第1章

♨依此類推...但要注意,在超連結的路徑指明要連結目標錨時,名稱前要有「#」號。#號就象徵"錨"。就想象成是錨的具體符號就行了,錨a,錨b,錨c..等。但在拋錨時，為錨命名是不須有＃號的。


<2>檔案外的精確連結
有時我們在這個檔案,但想要連結到別的檔案,這超連結本身就做得到了,設定路徑就可以了(連結到指定整個檔案)。但如果想連到別的檔案中的某一處,超連結的name屬性也能達成。(自身檔案的某部位能連到,別的檔案的某個部位當然也可以。)只要在超連結路徑指明檔案路徑後,再指定要連到哪個錨就行了。
如,布魯克在「福爾摩沙の航海日誌」一文的1970年的地方拋了一個錨,名為brook_formosa_1970。如下
<a name="brook_formosa_1970"></a>

在指定超連結路徑後,再指定目標錨的名稱就可以了,如下
<a href="http://beba-brook.blogspot.com/2006/09/blog-post.html#brook_formosa_1970">


福爾摩沙史上的1970年代---1970 in formosa


♨點入後,看瀏覽器的網址處,此時所顯示的位址,就發現不只是檔案的路徑了,路徑後還會出現#brook_formosa_1970。就是定錨點的緣故。



(2)超連結的target屬性
target屬性用來指定網頁的開啟位置,指明頁框(Frames)的名稱就行了.
有没有用就看人啦,像布魯克就不太喜歡用框架.
以下記錄幾個常見的屬性值.

<1>_self:超連結點入後,網頁顯示在自身的框架中,這是預設值.－＞布魯克的首頁
<2>_blank:超連結點入後,網頁顯示在新視窗中.－＞布魯克的首頁
<3>_top:超連結點入後,網頁在整個目前視窗中(會拆掉所有框架).－＞布魯克的首頁
<4>_parent:超連結點入後,網頁顯示在上一層的框架中.－＞布魯克的首頁

♨因為布魯克没有用框架(Frames),所以只有在新視窗開啟的_blank屬性值效果能顯現出來,其他三個效果都是一樣的,都顯示在目前的視窗.像布魯克,會用到的也就_blank這個屬性值而已.
2.target標的設定預設就是target=_self。
也就是說設不設都一樣。但,如果在框架的開頭有設定base target。但其中某個連結又想要連到自身所在的框架中、此時就需硬性指定target=_self。



(3)其他與超連結有關的東東

#超連結的敍述.

只要在超連結標籤<a>中,指定以下的敍述,
<a href="url"
onmouseover="window.status='超連結的敍述,在這裡的文字,超連結的敍述會出現在狀態列';return true;"
onmouseout="window.status=' ';">

則在window.status中輸入的文字,會出現瀏覽器下方的狀態列中.否則預設情況下,狀態列所出現的是連結的路徑。onmouseover是個事件處理器,指定滑鼠經過時,所要做的動作.onmouseout也是同樣。window.status指狀態列要顯示的訊息。單引號,雙引號都没差別,比較好分辨而已,屬性與屬性之間要隔開就好.

布魯克的首頁(滑鼠移過這個超連結,看看狀態列.)

第六章　圖片

1.圖片標籤<img>

格式:<img src ="圖片檔路徑">
如
<img src="href="http://2.bp.blogspot.com/....../red_alive.gif">





♨sorry,路徑的點點點是因為路徑這裡實在是太長了.故省略...google的路徑有多長？對著圖片按右鍵看內容,就能看到.

2.圖片的屬性
<img src ="圖片檔路徑" border="邊框厚度" height="高度"　width="寬度" align=對齊(置左,置中,置右) vspace="圖和文字的垂直距離" hspace="圖和文字的水平距離" alt="圖片敍述的字串" dynsrc="多媒體檔案路徑(見第七章)" loop="多媒體檔播放次數">

(1)邊框厚度:border="n"。數字愈大邊框就愈厚,單位是pix(像素) 、邊框預設是黑色。要設多厚就多厚。能設多大？可以自行試看看。這裡將邊框設為1,因布魯克的本子是黑色,故顏色以CSS突顯為紅色.如下

<img src="http://2.bp.blogspot.com/.../red_alive.gif" border="1">



♨邊框預設是黑色,能不能改其他顏色？這...布魯克也不知道.table有border和bordercolor屬性,但圖片呢？這就要有待知道的善心人士告知布魯克一下^^

(2)寬度；高度--設定圖片大小
設圖片寬度和高度指的是用來放圖片的空間大小。設定寬度和高度最大的用意是事先為圖片準備一塊空間。
因為圖片所佔的記憶體較大、傳送時耗用的資源也較大。所以可能文字過去了圖片還未傳過去。因為要等到圖片傳到了之後系統才能夠知道圖片有多大，所以要等到圖片傳到了系統才能配置文字和圖片的格式。若圖片很大或傳輸速度很慢，則網頁就開不出來了。
若我們有指定高度和寬度，則系統就會事先空出吾人指定的空間、就算圖未傳到、文字也能先顯示出來、如此一來網頁還是開得出來。

設定高度和寬度的大小、主要是設定了用來放圖片這塊空間的大小、但也間接影響了圖片的大小。所以也可以擁有把圖片拉寬或拉高的效果。 不過對方下載的時侯、下載到的圖和來源的圖檔的像素大小是一樣的。
若圖片傳送失敗，則網頁會留下一塊空格、空格大小就是吾人所設的圖片大小，但是没有圖片的空格。
若圖片因其他原因傳送失敗，如該參考的圖檔不存在。此時會出現一塊一平方公分左右没有圖片的小空格。

(3)alt是附註說明,alt所設定的字串,在滑鼠輕過圖片時就會顯示出來。如此圖的寬高約為180*260，現在布魯克將它設為100*200。如下

<img src="http://2.bp.blogspot.com/.../red_alive.gif" width="100" height="200" alt="縮小後的紅髮通輯令">


(4)文繞圖-- 圖片標籤的align屬性

圖片可以想成是一個大的文字。如果没有加上段行或段落的標籤，則文字就會緊接著圖片開始接下去跑。所以插入了圖片標籤、又不段行或段落。就可以造成文繞圖的效果。但是必須設定align。文繞圖是藉由align屬性來達成。現加入了align屬性,如下<src="http://2.bp.blogspot.com/.../red_alive.gif" width="100" height="200" align="left" alt="縮小後的紅髮通輯令,置左">
若align屬性未設定的話，預設就是靠左。不過未設定align的靠左和設定align的置左，出現的效果不會一樣。
<１>未設定align，則圖片預設會置左，文字會接著圖片的右下角開始跑。
<２>設定align=left、則圖片會置左。文字會從圖片的頂部開始跑。就會造成文繞圖的效果。
<３>設定align=right、則圖片會置右。文字會從圖片的頂部開始跑。此時仍有文繞圖的效果。

<４>這裡我們將圖片置中，設定align=center、這個時侯圖片就不會置中了。仍然是靠左。而且也不會有文繞圖的效果。效果是圖片在左，文字從圖片的中間開始跑、但只有一行。事實証明和圖片大小無關。圖片再小也是祗有一行。這裡的效果是置中<img src="http://2.bp.blogspot.com/.../red_alive.gif" width="100" height="200" align="center" alt="縮小後的紅髮通輯令,置中">

<5>結論：要文繞圖就把圖片的align屬性設成 left或right。就是置左或置右。但是一定要有文字才行，否則後面的內容就會被抓上來，從圖片的左邊或右邊的頂部開始接著下去。
如果下面還有另一張圖。就會造成兩張圖並列的情況。 造成無法區隔的情形，此時段行或段落通通無效。因為段行或段落是針對文字的。
由此可知雙圖並列的效果就是把其中一張圖置左或置右。如下。
則，若要將圖並排的話只要第一張置左或置右就行了其他都不必設了。要不每張都置左或置右也行。而其中若有一張置中，則該張排列的位置會明顯和其他的不一樣。會下降一些。不過若align只設第一張置左是由左到右依序排,若置右則第一張置右,第二張依序由同一列的左邊開始排。
排列的情況會一直接下去,直到没有空間為止,圖就會由下方再開始出現。下列的情況是只有第一張置左,第三張置中(位置下降),其餘都不設align。



＃align的進階設定
align的其他屬性值:top,texttop,bottom,absbottom,middle,absmiddle

align=top，圖片會對齊該行的頂端。

align=texttop,圖片會對齊該行文字的頂端。因為一行中可能還有別的圖片、但會選擇文字的頂端對齊。

align=bottom,圖片會對齊該行文字的底端。

align=absbottom,圖片會對齊該行的底端。

align=middle,圖片的中間,會對齊該行的底端。

align=absmiddle,圖片的中間,會對齊該行的中間。

(5)是圖片和文字的排版--hspace和vspace
hspace和vspace必需使用文繞圖,則設定間距才有點意義。hspace和vspace用以調整圖片和文字的間距,例如此處不設文繞圖,則再怎麼設間距效果也不大。因為預設圖片就是靠左,若有文字就會再接著圖的底部(腳邊)開始跑,所以不論水平或垂直間距再怎麼設,都不會有很大的效果。因為文字又没圍繞著圖,文字跑了一行就遠離圖片而去了,所以設了距離也没什麼用。如這張圖水平和垂直間距都設為1。(可以想像一下,若間距再設大一點,則圖和文字就愈離愈遠...那...還有什麼意義嗎?段個行不就好了.)

♨囉哩叭嗦，總之哩！
第一、圖片要很小才有這種效果、且它的效果僅限於一行。若是大圖片，則祗會影響到該行後面的文字。
第二、祗要記得、top就是文字從圖片的頂端開始走,bottom是文字從圖片的底端開始走,middle是文字從圖片的中間開始走。
第三、align設成middle和設成center的效果是一樣的。都是文字從中間開始走。
乃至其他的細微設定就不必理了、設計者會如此設計應是有其用意。但應該只是是我們没用到這種效果而巳。


4.超連結圖片
就是在超連結標籤<a></a>中，將原本是要顯示文字的地方用圖片標籤取代，則本來顯示出來的文字就變成圖片。按下圖片就連結到目的網頁。也就是原本超連結的載體由文字變成圖片而已。

原本是這樣<a href="../../" target="_blank">原本按這裡的文字會打開首頁</a>
顯示原本按這裡的文字會打開首頁

改成<a href="../../" target="_blank">
<img src="http://2.bp.blogspot.com/.../red_alive.gif" alt="按本圖開啟首頁">
</a>





♨超連結圖片預設有藍色的邊框，厚度是2,很好認。就像超連結的顯示文字會出現藍色加底線的字一樣。也可以把邊框設定為0，則邊框就會取消。(若有看不到藍色邊框的人,其實布魯克也不知道這是怎麼回事.不過在第5點的影像地圖卻可以顯現出藍色邊框,可以參考.)
若圖片傳送失敗，但因為我們有設定圖片大小，所以方框還是在。按下方框還是可以連結出去。若圖檔被移動、造成參考路徑下的圖檔不存在，但還是有個一平方公分左右的空格存在。還是可以連結的出去。 若圖片傳送失敗、不過我們有設定附註(alt)、則附註的內容就會出現在方框內。但游標移動到該空格時附註的資訊還是會在游標附近顯示出來。
前面已說過,任何東西只要能夠顯示來,幾乎都能作成超連結。如表格等也能作成超連結。圖片也不一定要使用圖片標籤<img>,用表格標籤<table></table>也可以載入圖片,會變成背景圖,因為文字在前,所以會有類似浮水印的效果。


5.影像地圖(Image Map)
其實就是一張具有多個超連結的圖片，只不過超連結圖片是用超連結標籤去包裹圖標籤，影像地圖是用圖片標籤去包裹超連結。而超連結的指定是使用圖片標籤<img>搭配地圖標籤<map>和區域標籤<area>而成。

格式：
<img src="圖檔路徑" usemap="#地圖名稱">
<map name="命名地圖名稱">

<area shape="形狀(矩形rect/rectangle,圓形circ/circle,多邊形poly/polygon)" coords="x,y,x,y" href="連結路徑" target="_blank" >
<area shape="形狀(矩形rect/rectangle,圓形circ/circle,多邊形poly/polygon)" coords="x,y,x,y" href="連結路徑" target="_blank" >
...
</map>
</img>

＃在圖片標籤中指定地圖名稱時要有#號，為地圖命名時卻不用，和拋錨的用法一樣。
♨座標從圖片的左上角開始算，圖片的左上角座標是(0.0)，第一組xy座標是x軸距離，第二組xy座標是y軸距離。若形狀設成圓形，coords的屬性值就只有3個(x,y,n)前面xy是圓心座標，n是半徑距離。若形狀設成多邊形，coords的屬性值就有多個，但至少要設三點(三組座標，代表三角形)也就是6個數字。單位都是像素。
2.若設定area時有區域重疊,重疊的部分會以第一個設定area為準。
3.没想到在地區標籤area裡也能用target="_blank" 。

如下，在紅髮通輯令中，按shanks的頭部會連到挑戰黑名單第一人的陳文成，按shanks在圖片中的左膝蓋(面對圖片時的左方)會連到楊逵的和平宣言，按shanks在圖片中的右膝蓋會連到彭明敏的台灣自救宣言。





＃外部map檔
如果影像地圖設定的很大，很複雜，也可以獨立出來，作成一個單獨的html檔。使用時要指定是html檔中的哪個地圖。指定的方法跟指定錨的名稱一樣用#號

指定格式：<img src="圖檔路徑" usemap="地圖所在的html路徑#地圖名稱">

第七章 音樂與視訊

(1)多媒體標籤<embed>
格式:
<embed src="檔案路徑" width="寬度" heigh="高度" align="對齊" loop="重覆播放(true)與否(false)或設n,指定重播次數" autostart="自動播放(true)與否(false預設)" hidden="隱藏版面(true)與否(false預設)" starttime="開始播放時間"(nn分:nn秒)>

<noembed>
<a href="檔案路徑">請按此處</a>下載(抱歉您的瀏覽器不支援embed.)
</noembed>

#若不用hidden屬性隱藏面版,也可將寬高都設成1,把版面藏起來,這樣就變成背景音樂了.
其他還有一些亂七八糟的屬性,如:controls控制面版屬性.
controls="控制面版"(
|console...控制。顯示正常面版;大小自行以寬高控制(預設)
|smallconsole ...小面版。
|playbutton...只顯示播放鈕。
|pausecutton...只顯示暫停鈕。
|stopbutton ...只顯示停止鈕。
|volumelever... 只顯示音量調節鈕。
)
♨<embed>可適用於音樂檔和視訊檔。<noembed>標籤是用來防止某些不支援<embed>>標籤的瀏覽器的，就算不支援的瀏覽者仍可以看到說明文字,和檔案連結,自行下載回去。支援embed的,noembed中的內容就不會顯示出來。有些部落格如google用embed,是不會放行的,會發不出去。因為它會自動檢查有没有結束標籤,所以加個結束標籤就可以了,就是多加個</embed>,它就會讓你發布.
如：


<br /><a href="http://www.g-film.com/midi/real/thebigblue/01.rm">請按此處</a><br />

(2)背景音樂標籤<bgsound>(ie特有)
格式:
<bgsound src="檔案路徑"
loop="播放次數"(n或設為infinite表無限次重播。)(#一般只會設到路徑和loop而已.)
volume="音量"(-1000~0；0表示最大聲,為預設值。)
balance="左右聲道平衝器"(-1000~1000;負值加強左聲道,正值加強右聲道。)
autostart=自動播放(true)與否(false)。(#待驗,就算有預設也不會是false...預設是false布魯克就不曉得還設這個標籤幹嘛?)
>


♨ie3.0以上支援,没有結束標籤,可設在任何位置而不影響本文.但確定不支援rm檔。

(3)圖片標籤<img>的dynsrc屬性
dynsrc是ie獨家支援的屬性(ie自己加的啦),可用以播放影片。
格式：<img src="畫面圖檔路徑" dynsrc="檔案路徑" loop="播放次數" start="開啟時機"(fileopen檔案打開時,mouseover滑鼠經過時) controls(加掛控制條) loopdelay="延播時間"(n秒)>

♨唯一的缺點就是ie特有,為免別家瀏覽器不支援,所以通常都會將畫面截取下來,設個圖片路徑,以免有的人什麼都看不到.其他屬性仍有待驗證

第八章 網頁效果

1.網頁資訊標籤<meta>
<meta>本義是用以提供跟網頁內容相關資訊用的，如網頁類型(content)，使用的字集(charset)等等。

(1)自動更新網頁
格式:<meta http-equiv="重新載入網頁(refresh)" content="重新載入周期(n秒)" >

(2)自動切換網頁
格式:<meta http-equiv="重新載入網頁(refresh)" content="重新載入周期(n秒)" url="要載入的網頁位址">

可設定在N秒後，自動載入要載入的網頁。因為可以自動切換，所以和投影片有同樣的效果。最常見於網站搬家時，讓造訪者從舊網站連到新網址。

(3)背景音樂

格式:<meta http-equiv="重新載入網頁(refresh)" content="重新載入周期(n秒)" url="檔案位址">

#只要將網頁位址改成音樂檔路徑即可，則能在ｎ秒後自動載入音樂檔，就有背景音樂效果。

(4)轉場特效

格式:<meta>
http-equiv="事件種類(進入網頁時Page-Enter|離開網頁時Page-Exit|進入網站時Site-Enter|離開網站時Site-Exit)"

content="RevealTrans(Duration=效果持續時間n秒 Transition=轉場效果的代碼0~23>

2.提示說明屬性title
在html4.0時加入了提示說明屬性title，幾乎任何標籤都可以用。如此不止圖片可以用alt附註，如超連結等等標籤都可以附註說明。

3.網頁中的網頁

(1)置入框架標籤<ifram></ifram>---<body>中的框架。
框架網頁雖然是個網頁、但是其存在的目地及原始設計的功能祗是用來分配瀏覽器的畫面而已。其本身並不是個瀏覽網頁、所以也不會有網頁主體標籤<body>。置入框架標籤可以放在<body>中、造成網頁中又有網頁的現象(一個小瀏覽畫面、一個有左右和垂直捲軸的小畫面在網頁中、是由微軟提出的別的瀏覽器不一定支援)。

<1>格式：<iframe name src=網頁路徑 scrolling align frameborder height width marginheihgt<
屬性和一般框架都相同
<2>Align：可以設定框架和文字的對齊方式，有left,right,center,top,bottom.
<3>height width：可以設定畫面的高度和寬度。

(2)用物件標籤<object>，在data設定網頁路徑即可。再用height,witdth去調大小。

第九章 框架(frames)

在html標籤宣告之後就可以用設定框架標籤<frameset></frameset>來分割畫面。此時的網頁(有設定框架的)祗是一個框架。裏頭的小框架(frame)都可以用來放其他的網頁，就像一個大綱一樣。設定框架標籤<frameset>和<body>具有同等的地位，所以巳經設定框架標籤的網頁裏頭是不會有主體標籤<body>的。<body>和<frameset>兩者不會同時出現。

1.格式
<frameset cols|rols ="n|n%|*,n|n%|*" frameborder="yes|1|no|0" border="n" bordercorlor="#rrbbgg" framspacing="n">

<frame src="網頁路徑" name="框架命名" scrolling="yes|no|auto" frameborder="0|1" framespacing ="內距" marginwidth="邊寬" marginheight="邊高"　noresize>

<frame src="網頁路徑" name="框架命名" scrolling="yes|no|auto" frameborder="0|1" framespacing ="內距" marginwidth="邊寬" marginheight="邊高"　noresize>
.......

<noframes>
<p>This page uses frames, but your browser doesn't support them.<br>
您的瀏覽器並不支援視窗分割技術，請您重新安裝較新版本的瀏覽器。
</noframes>

</frameset>

2.屬性

(1)<frameset>：表示我們要開始設立框架。
屬性:cols(欄)或rols(列)：是告訴瀏覽器到底是要左右分(cols)，還是上下分(rows)。
屬性值用來設定分割畫面的比例，可以指定數值n表示要分割的是大小。亦可用百分比來表示。還能用萬用字元*表示“剩餘”的畫面。如：cols="70%,*"，表示第一個網頁畫面佔70%，剩下的都分給第二個畫面。cols="*,*,*"，表示左右分成三等份，每份都是1/3。所以每個「,」都表示切了一刀之意。

<1>frameborder=0或1：設定框架的邊界，0表示不要邊框、1表示要邊框。預設是有邊框、就是框架和框架之間有一條實線。真不要邊框、兩個框架的frameborder都要設成0、祗取消其中一個的邊框則其中個框架的邊框仍存在祗是細了一點。

<2>framespacing =數字：設定框架和框架之間的間隔。

(2)框架標籤<frame>。畫面分割完後(框架設定完)就可以開始設定每個框架的內容。每個頁框(frame)都代表一個網頁。有幾個<frame>表示有幾個網頁，跟<frameset>設定cols或rols畫面比例時，有幾個「,」切了幾刀配合。

<1>name：為每個框架取名。取或不取都可以，最好是取名，有用處的、自己也比較容易分辨、contents或main都沒關係好記就好。

<2>src：網頁檔名：設定網頁的所在路徑。

<3>scrolling="yes或no或auto" ：設定有沒有捲軸。預設是有自動。沒有捲軸若網頁的畫面大小超過了視窗大小，則超過的部分就會顯示不出來(使用者想看就要自己點滑鼠慢慢拉)。設定自動、若視窗容不下該網頁就會自動加上捲軸。

<4>noresize ：設定不讓使用者改變框框的大小。設定之後邊框或捲軸就固定不能動了。否則使用者是可以移的。

<5>frameborder=0或1：設定框架的邊界，0表示不要邊框、1表示要邊框。
<6>framespacing =數字：設定框架和框架之間的間隔。
<7>marginheight=數字：設定網頁內和上下邊框的距離。
<8>marginwidth=數字：設定網頁內和上下邊框的距離。

(3)非框架標籤<noframes></noframes>

為防有的舊瀏覽器不支援框架、會顯示不出任何東西。則可以在框架設定標籤之間設定非框架標籤。在<noframes></noframes>中間可以先放一些說明文字。則看不到框架的瀏覽器就能看見框架的說明文字、雖然他看不見框內容。而支援框架的瀏覽器就看不見說明文字了。(現在已經沒有這種瀏覽器了。有些網頁在框架分割及內容設定完成後是在尾部嵌入非框架標籤。而且它還在非框架標籤標籤內使用主體標籤<body>。)

3.框架與超連結的關係 –超連結標籤的target屬性。
因為我們分割畫面的原始需求並非單純地分割畫面、把畫面分成二個並沒有很大的實用價值、不會造成瀏覽者瀏覽的便利。因為分割畫面的用意就是要方便瀏覽者瀏覽。

框架要能發揮方便瀏覽的特性，就要借助超連結，也就是上方超連結標籤的target屬性的作用。target屬性能指明連結的網頁要放在哪個框架中。target只要指明框架的名稱就行了。(不指明預設是指自身的框架，參考:target屬性)

♨所以框架常和超連結脫不了關係，框架只提供一個介面而巳。框架中的網頁往往會出現一張網頁用來作大綱。或是說框架是一張菜單，菜單中有很多區、而其中一區就是用來放大綱的(小的菜單menu)。亦即框架網頁呈現在瀏覽者面前可能是作為首頁中的菜單、就叫menu。菜單中可以放一些超連結放便使用者點選。

4.巢狀分割
就是在在設定了框架之後再設定一次框架。
就是設<frameset>後，在這個<frameset>中再設一個<frameset>。
常見的是將畫面分成左右二個框架之後再將右邊的框架分成上下兩個框架，左邊的框架是菜單、右上方的每個菜單項目的選單、右下方就放內容。
此時在畫面上都個個平面的分割區、並無分別、但在設定標籤時標籤的位置是巢狀的。
♨此時target指定為prent就用的到了，如果在右邊的任一框架中把超連結的標的指定為回前一層、則按下超連結該連結網頁就會布滿右邊的框架，如同標的設為top會拆掉原有的框架布滿整個畫面一樣、它會拆去右方上下兩個框架布滿整個右邊的框架

第十章 表單(form) --動態網頁的接口

1.格式:

<form action="url(表單資料處理的動態網頁)" method="get|pose" name="表單名稱">
<input　type=表單的類型 name=欄位名稱 value=欄位值>
<select></select>
</form>

2.屬性:
(1)<form>開啟表單：宣告form開啟表單

<1>action屬性：表單資料處理方式。指定用來處理表單中使用者輸入資料的處理方式。
♨
1.可以指定一個程式的所在路徑，程式可以是CGI或一個動態網頁。如PHP、ASP、JSP。則表單中的資料會被傳到CGI或被動態網頁所接收並處理。
2.也可以是一個e-mail地址。則使用者輸入的資料會被送到指定的信箱。Mail地址要寫出完整的格式，也就是要寫出通訊格式。如：<form action="mailto:xxx@yyy.zzz">
3.如果action没設。表示資料是要傳送到目前表單所在的這個網頁。如果是動態網頁就有這種能力，在秀出表單的網頁上同時處理表單中的資料。

<2>method屬性：用來指定表單資料傳送方式。method=get或pose。
♨
1.method=get。資料會顯示在網址上。會當作url的參數傳出去。處理表單資料的程式再用內建的程式去url上抓。若處理的方式指定由mail接收、則get的傳送方式會秀在信件的主旨。缺點是長度不能超過1024個bit、且隠密性不夠。預設的傳送方式是get。
2.method=pose。傳送方式為pose，表單的資料就不會秀在網址上。直接由表單的處理程式接收。若表單處理方式是mail，則表單資料會以附件的方式寄出。無長度限制、且較有隠密性。

<3>enctype屬性：用以設定表單資料的加密型態encrypt的 type。
♨
1.enctype="application/x-www-form-urlencoded"為預設的加密型態。
對英文是没有影響的。若傳送方式是get就可以在網址上清楚看到英文以外的文字被編成亂碼。
2.enctype="text/plain"。意即加密型態指定為純文字型態。初步實証傳送方式指定為get、在url上顯示出來仍是亂碼。
理諭表單資料的加密型態指定為純文字、而表單資料傳送方式指定為post，且資料的處理處方式以mail來接收，則資料就會以文字型態整齊地出現附件中。

3.<input>置入標籤：type指定表單中要置入的欄位類型、常用的表單如下。

(1)text：文字框。讓使用者輸入文字。
如：<input type="text" name="username" size="n" maxlength="n" value="在這裡輸入文字">


(2)password：密碼框。和文字框一樣，但顯示出來的是星號。
如：<input type="text" name="username" size="n" maxlength="n" value="在這裡輸入文字">


(3)radio：單選鈕。
如：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
男
女

(4)checkbox：核選方塊。
如：
<input type="checkbox" name="leisure" value="move">看電影<br>
<input type="checkbox" name="leisure" value="tv">看電視<br>
<input type="checkbox" name="leisure" value="read">閱讀
看電影
看電視
閱讀

(5)submit：確認鈕。
如：<input type="submit" value="確定送出">


(6)reset：清除鈕。
如：<input type="reset" value="清除重填">


♨文字框和密碼框等，因為輸入的是字串，所以不會有value，使用者輸入的字串就是要送出的value值。單選鈕，核選方塊等，是們早巳設定好讓使用者選的，使用者選到的就是要傳送出去的value值。submit和reset因為是按鈕，所以不會有name(因為name是用來判別的嘛)，而按鈕所設的value值會顯示在按鈕上

4.下拉選單標籤<select><option></select>
格式:
<select name="選單命名" multiple　size="n">
<option value="選項命名">
....
</select>

如:
<select name="constellations">
<option value="ARIES">牡羊座
<option value="TAURUS">金牛座
<option value="GENINI">雙子座
<option value="CANCER">巨蟹座
<option value="LEO">獅子座
<option value="VIRGO">處女座
<option value="LIBRA">天秤座
<option value="SCORPIO">天蠍座
<option value="SAGITTARIUS">射手座
<option value="CAPRICORN">魔羯座
<option value="AQUARIUS">水瓶座
<option value="PISCES">雙魚座
</select>


牡羊座
金牛座
雙子座
巨蟹座
獅子座
處女座
天秤座
天蠍座
射手座
魔羯座
水瓶座
雙魚座

♨注意name屬性是放在選單標籤<select>裡，value屬性是放在選項標籤<option>裡，其實也蠻人性化的。如果是選項是英文，如問學過的程式語言:select裡的命名設為language即。<select name="language">。選項只設java,vb,c等等，value不設也沒關係，使用者選中的值即是送出去的值，若選中java，就是language=java。

(1)設multiple時，表示可以複選，size用來設定複選時所顯現出來的選項數目。此時若項目過多會有滾動條，但不會有下拉效果。

<select name="country" multiple size="3">
<option value="Japan">日本
<option value="Germany">德國
<option value="Britain">英國
<option value="USA">美國
<option value="France">法國

</select>


日本
德國
英國
美國
法國


5.<textarea></textarea>：文字區塊

(1)格式:<textarea　name="文字區命名" rows="n" cols="n" wrap=on|off ></textarea>
(2)屬性:
<1>Rows和cols屬性：用指定幾欄和幾列為單位的方式來決定文字區塊的大小。
<2>Wrap屬性：wrap=on(預設)|off。
<2.1>wrap="on":會出現右方的上下捲軸。若達到右邊界會自動段行。
<2.2>wrap="off":則會出現右方的上下捲軸，及下方的左右捲軸。若達到右邊界會不會自動段行。
如:
<textarea　name=note rows=6 cols=20 wrap="on">請在此輸入意見</textarea>
請在此輸入意見