html 紀錄 « 失落的紀錄

2011-05-25

html 紀錄

分類: 一般紀事 — 番茄 @ 18:30

html 相關技術

<body>
vincent
efbtfc
</body>
</html>

=================================

../ = 上一層

<BASE>標記，<BASE>只能用在<HEAD>標記之間

你可以在每個網頁內加上

如果一來，瀏覽器就會在伺服器的主目錄下

找尋 index.htm 而不管目前文件是存在那個目錄下了。

=================================

縮小字體

<small></small> 直接將要縮小的字放在<small>與</small>之間即

可縮小一倍，加兩次的<small></small>即縮小兩倍，

依此類推。

<small><small>dd</small></small> dd即縮小兩倍

=================================

放大字體

<big></big> 直接將要放大的字放在<big>與</big>之間即可放大一倍，

加兩次的<big></big>即放大兩倍，依此類推。

<big><big>dd</big></big> dd即放大兩倍

=================================

<samp></samp> 範例之意，好像沒什麼作用

<code></code> 原始碼之意。

<var></var> 變數之意。

<dfn></dfn> 定義之意。

<cite></cite> 引用之意。

<address></address> 所在位址之意。

=================================

註解

<!–註解文字–> 於<!–與–>之間的所有文字皆不會出現。

=================================

標題文字

瀏覽器可分出六種大小的標題文字,原始碼如下 :

***********************

文字設定

<strong></strong> 用以加強文字的效果，有點像粗體文字。

<em></em> 用以強調文字的效果，有點像斜體文字。

<b></b>文字變成粗體

<i></i>文字變成斜體

<u></u>文字加上底線

<tt></tt> 文字改為電報體

<s></s> 文字加上刪除線

<KBO></KBO>鍵盤字

<sub></sub> 於標籤內的文字變為下標

<sup></sup> 於標籤內的文字變為上標

<blink></blink> 於標籤內的文字會閃爍

此標籤只有使用NC才能看到。

***********************

文字的控制

文字的控制要加上<font>的碼，它可以控制文字的大小，

顏色，字型，在<font>裡加上一些屬性就可以控制

<font face="Arial" color="#cc33ff" size="7">Good morning</font>

face=控制文字字體，填入字體名稱

color=控制文字顏色

size=控制文字大小，數字1～7

=================================

強迫換行

斷行1<br>

斷行2<p>

上面的碼會顯現強迫換行效果 :

而<p>是比<br>多跳一行的。

在<p>align=left靠左／right靠右／center置中

如果在<p>內有加入align的屬性，記得加上</p>的關閉碼

=================================

文字格式化

<pre>的碼可以將你所要顯示的文字格式

一模一樣的顯示在瀏覽器上，再用</pre>來關閉

<pre>

格式會跟你打的一樣唷

看到了嗎

會一模一樣唷！！

</pre>

=================================

網頁顏色設定

<body bgcolor="#xxxxxx"

text="#xxxxxx"

link="#xxxxxx"

vlink="#xxxxxx"

alink="#xxxxxx">

bgproperties = fixed 浮水印特效

background = 設定背景圖片，用法background="圖片所在網址"。

bgcolor = 控制背景顏色

text = 控制文字顏色

link = 控制連結顏色

vlink = 控制已閱讀過的顏色

alink = 控制正在連結的顏色

但xxxxxx之前的#要去掉，

如text="#000000"可換成 text="BLACK"

***********************

加入背景圖像

若您覺得背景顏色太單調，

想要換成背景圖像的話，就得要在<body>內加入background的屬性了。

如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 :

<body background="back.gif"

text="#000000"

link="#0066cc"

topmargin="0"

leftmargin="0">

bgproperties = "fixed"(使背景圖像固定不動，不過只有IE有效果)

TOPMARGIN = 可以設定元件跟瀏覽器的上邊界

LEFTMARGIN = 可以設定元件跟瀏覽器的左邊界

=================================

置中標籤

將所要置中的文字或圖片置於<center>與</center>之間即可，

而放在<center>與</center>之間的所有物件，

不論是文字還是圖案，不論中間有多少東西，

系統會自動找到中心點放置，就算突然的縮小視窗或放大視窗，

它都會馬上自動找到中心點顯出來，

這個功能在網頁上算是很普及使用到的。

=================================

加入水平分線

如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。

size=控制線的寬度

align=控制線是靠左(left)／靠右(right)／中間(center)

width=控制線的長度，可用數字或百分比

noshade=控制線沒有陰影

color=控制線的顏色

=================================

項目清單設定方式

自動加入圓頭清單

只要加入<ul>的碼，便可製出有小圓頭的清單 :

<ul>

<li>物件清單1

<li>物件清單2

<li>物件清單3

</ul>

在<ul>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 :

<ul type=disc>這是一般的小圓點

<ul type=circle>這是空心的小圓點

<ul type=square>這是實心正方黑點

***********************

自動加入數字清單

跟小圓頭的方式很像，只要加入<ol>的碼，便可製出自動有數字的清單 :

<ol>

<li>清單1

<li>清單2

<li>清單3

</ol>

在<ol>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 :

<ol type=A> (控制清單之前數字的參數顯示成A. B. C……)

<ol type=a> (控制清單之前數字的參數顯示成a. b. c……)

<ol type=I> (控制清單之前數字的參數顯示成I. II. III…)

<ol type=i> (控制清單之前數字的參數顯示成i. i. iii….)

<ol start> 數字起始的數值

***********************

定義清單

一般做為解釋一樣動作，加入以下的碼便可做一個定義清單

<dl>

<dt>耗子

<dd>是這裡的站長

<dt>電腦

<dd>已成為人類生活的一部分

</dl>

上面的原始碼會顯示成下面的樣子 :

耗子

是這裡的站長

電腦

已成為人類生活的一部分

<UL></UL> 圓頭性列表

<OL></OL> 數字性列表

<LI> 第一項目

<DT> 主項目

<DD> 次項目

=================================

插入超連結

FTP的連結方式

<A HREF="ftp://ftp.hinet.net">中華電信 HINET FTP</A>

E-MAIL

<A HREF="mailto:service@powmo.com">站長的信箱</A>

而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none"

來消除連結的底線

而在<a href="URL">的標籤中，可插入target="_new／_top／_blank／name"

來改變連結所開啟頁面的狀態!!

在target裡的參數如下 :

_SELF = 使用同一個頁框來顯示超連結所設定的網頁，此為預設值。

_PARENT = 瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁；
如果沒有前一個畫面，則使用整頁顯示內容。

_new = 在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗

_top = 在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗

_blank = 跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟

name = 在frame有介紹，是給frame的name

=================================

文件內的連結

有兩個步驟 :

1.給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 :

2.插入一個連結，而這個連結是當你按下這個連結時便會跳到目標地點 :

<a href="#目標名稱">跳到目標地點</a>

在連結的標籤內，必須加上#在目標名稱前

=================================

插入圖片

圖像是一個美化網頁的重要因素，要插入圖像，

就要加入

其中<img src="圖檔名">內還可加入下列屬性，來變化圖檔 :

alt = 圖片註解

width = 控制圖檔長度

height = 控制圖檔高度

align = 控制圖檔left(靠左)／right(靠右)／center(置中)

top(頂端)／texttop()

border = 控制外框粗細，不外框便設成0

LOWSRC = 顯示低解析度的影像。

如果設定此屬性，瀏覽器會先顯示這個圖檔，

等SRC的檔案下載完成後，再顯示SRC的圖檔

VSPACE = 指定影像與前後文字之間的距離。

設定的單位以像素為主。

HSPACE = 指定影像與左右文字之間的距離。

設定的單位以像素為主。

=================================

表格製作

width = 控制表格長度，可用數字或百分比

cellspaing = 控制儲存格的分隔距離，內定為2

background = 背景圖檔

border = 控制外框粗細，不外框便設成0

***********************

</table>

***********************

若想跳到下一行，加上<tr>即可 :

<tr>

</tr>

<tr>

</tr>

</table>

***********************

當然亦可使用<th>:

<tr>

</tr>

<tr>

</tr>

</table>

***********************

<TR>內的屬性如下 :

align = 控制水平是left(靠左)／right(靠右)／center(置中)

valign = 控制垂直是top(靠上)／middle(置中)／bottom(靠下)

SPAN = 一次設定n欄的水平及垂直對齊方式

***********************

<td><th>內的屬性如下 :

align = 控制水平是left(靠左)／right(靠右)／center(置中)

valign = 控制垂直是top(靠上)／middle(置中)／bottom(靠下)

background = 背景圖檔

colspan = 使一個儲存格橫跨 N 個欄位

rowspan = 使一個儲存格下跨 N 個列

***********************

TH=Table Header TD=Table Data

若想為表格加上標題，來標明整個表格的主題，

可在<table>後加上<caption>的標籤

<tr>

</tr>

<tr>

</tr>

</table>

***********************

colspan的用法 :

<TD COLSPAN=2> 合併 3 個水平儲存格

<tr>

</tr>

<tr>

</tr>

</table>

***********************

rowspan的用法 :

<TD ROWSPAN=2> 合併4個垂直儲存格

<tr>

</tr>

</table>

=================================

進階表格

這三個標記一定要放在表格<TABLE>這個標記中才會有作用，

你可以用這三個標記分別來指明表格的

標頭(THEAD)、主體區域(TBODY)、與註腳(TFOOT)。

整個完整的順序，你可以這樣表示：

<THEAD>

<TR><TD COLSPAN=5 ALIGN=CENTER>我們班的月考成續單

</THEAD>

<TBODY>

<TR><TH ROWSPAN=2>姓名<TH COLSPAN=3>各科成績<TH ROWSPAN=2>名次

<TR><TH>國文<TH>英文<TH>數學

<TR align="center"><TD>趙一<TD>86 <TD>88 <TD>90 <TD>1

<TR align="center"><TD>錢二<TD>84 <TD>85 <TD>92 <TD>2

<TR align="center"><TD>孫三<TD>66 <TD>89 <TD>94 <TD>3

</TBODY>

<TFOOT>

<TR><TD COLSPAN=5>導師：Alex

</TFOOT>

</TABLE>

=================================

分割視窗

首先要加入

<frameset cols=數字或比例,數字或比例>(左右分割畫面)

或

<frameset rows=數字或比例,數字或比例>(上下分割畫面)

也可以寫成這樣 :

用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用

在<frameset>之後便要加上<frame>的碼，

如果左邊頁面的顯示檔案為left.htm，

而右邊的頁面顯示的檔案為right.htm，如下所示 :

</frameset>

在<frameset>內的控制屬性如下 :

framespacing = 控制兩個frame之間的距離

frameborder = 控制frame外框的粗細

border = 控制外框粗細，不外框便設成0

要分割頁面的原始碼如下，不須加上<body>碼 :

<html>

<head>

<title>

</title>

</head>

</frameset>

</html>

frame內的特性

在<frame>內的特性 :

noresize = 讓瀏覽者不可改變frame的size，就加上這行

scrolling = auto/no控制frame是可以/不可以捲動

name = 給frame的名字，下面有介紹如何應用

看到這整個頁面了沒，按下左邊．

右邊的主選單，是不是會在中間的視窗顯示內容，

而主選單都不會變呢，這就是利用了上面所說的name的屬性 :

而我們想要在按下左邊頁面裡的連結時，

只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上

target="center002"

=================================

安裝音樂

加入背景音樂只要在<head>跟</head>

之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 :

src=設定你想要撥放的midi音樂檔名

loop=音樂重撥次數，如想不斷撥放便設成infinite

***********************

Netscape

經過本身的測試，bgsound的語法在netscape並無法出現背景音樂，

而支援netcape的語法則可在兩大M牌與N牌的瀏覽器都可出現背景音樂，

下面就是介紹netspace的背景音樂語法:

src = 設定你想要撥放的midi音樂檔名

loop = 音樂重撥次數，如想不斷撥放便設成true

autostart = 是否要在音樂檔傳完之後，就自動播放音樂。

true是要，flace是不要。內定值是不要。

width = 控制面版寬度

high = 控制面版高度

align = 控制面版與旁邊文字的對齊方式，跟<img>的語法一樣

hidden = true(如果寫上這個屬性的話，就會完全隱藏控制面板，

但無法設定控制面板的寬和高。)

controls = 控制面版樣式為console(正常面版)／

smallconsole(較小面版)／

playbutton(只顯示撥放按鈕)／

pausebutton(只顯示暫停按鈕)／

stopbutton(只顯示停止按鈕)／

volumelever(只顯示音量調整)

可以放在<body>跟</body>之間做網頁物件使用，

也可以加入hidden=true的屬性使面版隱藏做為背景音樂使用

=================================

表單

文字欄位

在此輸入文字<br>

size = 字元寬度

密碼欄位

在此輸入文字<br>

size = 字元寬度

文字輸入方塊

在此輸入文字 :<br>

cols = 字元寬度

rows = 行數

wrap = 換行 off(關閉)/physical(實體)/virtual(虛擬)

下拉式選單

<OPTION VALUE="Benz" SELECTED>賓士

<OPTION VALUE="Ford">福特

<OPTION VALUE="Civic">喜美

</SELECT>

列表選單

您的學歷 :

<option>初中

<option>高中

<option>高職

<option>專科

<option>大學

<option>研究所

</select>

多選核取

<INPUT type="checkbox" name="interst" value="商業顧問">商業顧問

<INPUT type="checkbox" name="interst" value="經紀業務">經紀業務

單選核取

<INPUT type="radio" name="job" value="資訊">資訊

<INPUT type="radio" name="job" value="金融">金融

按鈕

按鈕分為三類，分別如下

執行

執行由 action 後所指定的 cgi 程式

取消

還原表單內的資料為內定值

一般

使用者自行設計的按鈕

<FORM METHOD="POST" ACTION=" mailto:yourmail?SUBJECT=xxxx"

enctype="text/plain" Name="N4">

action=mailto 之後加上您自己的電子郵件，

再來的 ?SUBJECT= 則是先設定好信件的主旨，

這裡XXXX則請填入英文不含空格，否則傳輸會失敗。

在範例 email.html 中我們的設計則是

action=mailto:webfaq@yahoo.com?SUBJECT=Mail_From_Carousel

enctype="text/plain" 則是指定傳輸為一般文字，

未加此行則信件內容會經過編碼，而看不懂，像是：

username=%A5d%C3%B9%AF%C0&

=================================

影像地圖

如果我們要寫一個 HTML 檔來顯示圖形並定義其映射區域，

我們以 <MAP>這個標記來代表整張圖，

以 <AREA> 代表圖中的連結方塊，我們要這麼寫：

</MAP>

********************************************************

<AREA SHAPE ="rect"

COORDS="X, Y…"

HREF="file_name"

TARGET="name"

NOHREF>

SHAPE = 指定在圖形上可以點取的形狀，

rect是定義為四方形，

circle代表圓形，

poly代表多邊形。

COORDS = 利用這個屬性，我們可以指定連結區域的座標值，

以像素為單位。分別指定區域的左上角及右下角的座標。

HREF = 設定連結的位址。

TARGET = 設定連結檔案出現的位置，可參考『超連結』單元的設定值。

NOHREF = 設定按下某一個區域並沒有任何動作。

=================================

視訊影像

DYNSRC = 指定影片檔的來源

START = 指定何時開始播放。

你可以設定 FILEOPEN 指明開啟文件時立即播放，

或是 MOUSEOVER 來指明滑鼠移到動畫上時播放。

你也可以兩者一起設定。

LOOP = 指定影片循環播放的次數。

若設定為 "-1"，或是 "infinite" 則代表無限播放。

CONTROLS = 顯示影片播放視窗。

範例如下：

<IMG SRC="miche.jpg" DYNSRC="sleep.avi"

START="mouseover, fileopen" LOOP="-1" CONTROLS>

=================================

跑馬燈

在<marquee>內的屬性 :

bgcolor =" #aaff00"這裡加上背景顏色，顏色可以自己改喔

direction = 這是空控制行進的方巷喔right／up／down

scrollamount = 這是空控制行進的步伐喔

behavior = 這是空控制行進的方式喔：

slide文字碰到底邊就會停止／alternate左右碰撞／

SCROLL右方一個接一個字的出現／LOOP捲動的次數

width = 加上這可以設定行進的寬度

height = 加上這可以設定行進的高度

scrollAmount = 321 每次移動的距離-單位是像素

SCROLLDELAY = 每次移動間相隔的時間(單位是千分之一秒)。

=================================

特殊字元

HTML字元實際顯示

& &

" "

< <

> >

  不斷行的空白

&ensp; 半方大的空白

&emsp; 全方大的空白

® 己注冊

™ 商標

=================================

符號特輯

┌ ┬ ┐

├ ┼ ┤

└ ┴ ┘

─ │ ↑ ↓ ←→

§ ∮ 《》〈〉

【】『』〝〞‘’

“ ” ☆ ★ ︵︶ ﹝ ﹞

（） ○ ● ◎ ※

∵ ∴ ： ‧ 。，

° 、；！？＊ ∥

﹋ ╰ ╯ ◣ ◢ ◥ ◤

█ □ ◇ ▼ ∞♂ ♀

=================================

aqua 水藍色 black 黑色 blue 深藍色

yellow 黃色 gray 灰色 green 綠色

lime 萊姆色 maroon 粟色 navy 軍艦藍

olive 橄欖綠 purple 紫色 red 紅色

sliver 銀色 teal 藏青色 white 白色

=================================

網頁換頁效果

<html>

<head>

content="revealTrans(Duration=5.0,Transition=23)">

</head>

<body>

隨機切換

</body>

</html>

其中"Page-Enter"指明我們利用<meta>

這個標籤所產生的是切入網頁並產生切換效果；

Duration是切換持續的時間，而

Transition是切換效果的代號。

以下是一些切換效果的代號表：

0 方形向中央收縮 12 溶解效果

1 方形向四方散開 13 垂直關門效果

2 圓形向中央收縮 14 垂直開門效果

3 圓形向四方散開 15 淡入效果

4 向上方擦去 16 淡出效果

5 向下方擦去 17 往左下擦去

6 向右邊擦去 18 往左上擦去

7 向左邊擦去 19 往右下擦去

8 垂直百葉窗 20 往右上擦去

9 文平百葉窗 21 水平隨機切換

10 水平方格右滑 22 垂直隨機切換

11 垂直方格下落 23 隨機切換

=================================

Meta 功用

這個標記是屬性檔頭宣告 <HEAD> 及 </HEAD> 之間的標記

一、顯示及排列中文

說明：

Content-Type==>文件內容格式

;==>CONTENT內要作的每件事" "，分別以分號區隔

text/html==>純文字/超文字

charset==>字元組為中文繁體大五碼，如用iso-2022-jp是指日文

二、讓搜索引擎容易找到您

<META NAME="KeyWords"

CONTENT="電腦教學'網路教學'Linux教學

'CSS教學'HTML教學'軟體教學'發信教學'SEO教學'交換連結">

說明：網頁內文關鍵字，可使用中、英文均可

三、關於網站的內容描述

<META NAME="Description"

CONTENT="這是一個免費學習網頁製作的好地方，網路研究所">

說明：Description==>內容的主要描述

四、這個網頁的作者是誰

說明：標註本網頁作者姓名等資料

五、這是用何編輯器完成的網頁

說明：

標註本網頁作者姓名等資料

Generator==>編輯器

Mozilla/3.0Gold(Win95)[Netscape]==>編輯器等版本說明

六、這個網頁何時完成

說明：

Creation-Date==>創作日期

01-jan-2003 20:40:01==>詳細日期時間

七、這個網頁有效時期及不被Cache所限制

說明：

Expired==>網頁終止期限

01-jan-2005 00:00:00==>已過去的日期時間，

也可以用Mon,12 Jan 2007 00:00:00 GMT

no_cache==>不被Cache所限制，也就是網頁沒有記憶功能。

八、網頁作者的網址與信箱

說明：網頁作者信箱或網址陳述

rev==>正向關聯

made=>網頁製造者

href==>您的信箱或網址

九、使網頁能自動換頁

說明：

refresh==>更新或重整

15==>15秒後執行下一動作

;==>CONTENT內要作的每件事" "，分別以分號區隔

url=http://www.pcnet.idv.tw/==>指定轉換到此網頁

十、進入或離開的特效(限IE使用)

<META http-equiv="指定要換頁特效發生的狀況"

content="特效模式(Duration=特效持續時間,

Transition=代替的特效)">

說明：

http-equiv="Page-Enter是進入本頁、

Page-Exit是離開本頁、

Site-Enter是進入本站、

Site-Exit是離開本站"。

content="revealTrans(指定換頁特效)、

blendTrans(設定換頁特效為"混合")。

Duration=設定特效持續的時間(秒)，建議在3-5秒之間。

Transition=以0-23代替特效(略)。

註：

它必須放於<HEAD>與</HEAD>之間，主要用於本網頁的內容說明，

以利自己或別人(搜索引擎)使用，

另外也可以製造出一些自動翻頁等特殊效果。

http-equiv或NAME屬性，必須配合content屬性使用，兩者也可互替使用。

後設語法標籤(META description tag)的用法隨各搜索引擎設定有所不同。

有無Meta標籤，並不影響網頁正常顯示，

其最大目的在於提供網頁各種資訊及產生特殊效果。

網頁運用，建議以本頁所述1.2.3.4.8項這些標籤為主，其餘視況自行增減。

您可使用檢視原始碼，來看本例實際安排。

=================================

DIV與SPAN標籤

被<DIV>包住的網頁元件會變成一個【區塊物件】。

也就是會自成一塊，旁邊的東西的會被擠到上一行或下一行去，自己獨立成一行。

<SPAN>：用於一段文章或一小部份物件上。

實例：為同軸物件，會將旁邊圖文放在同一行。

這是<span style="background-color:orange">網頁研習室</span>的家

=================================

DIV與P標籤的差異處：

另外在HTML語法中能讓文字或圖片做指定位置的屬性，就是DIV與P標籤。

四月 2024
一	二	三	四	五	六	日
« 十月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

失落的紀錄

2011-05-25

html 紀錄

無迴響