gx1腳本語言
① HTML語言的格式
一、基本標志
1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
Html是英文 HyperText Markup Language 的縮寫,中文意思是「超文本標志語言」,用它編寫的文件(文檔)的擴展名是.html或.htm,它們是可供瀏覽器解釋瀏覽的文件格式。
您可以使用記事本、寫字板或 FrontPage Editor等編輯工具來編寫Html文件。Html語言使用標志對的方法編寫文件,既簡單又方便,它通常使用<標志名></標志名>來表示標志的
開始和結束(例如<html></html>標志對),因此在Html文檔中這樣的標志對都必須是成對使用的。在此教程中,我先講一下Html的基本標志:
1.<html></html>
<html>標志用於Html文檔的最前邊,用來標識Html文檔的開始。而</html>標志恰恰相反,它放在Html文檔的最後邊,用來標識Html文檔的結束,兩個標志必須一塊使用。
2.<head></head>
<head>和</head>構成Html文檔的開頭部分,在此標志對之間可以使用<title></title>、<script></script>等等標志對,這些標志對都是描述Html文檔相關信息的標志對,
<head></head>標志對之間的內容是不會在瀏覽器的框內顯示出來的。兩個標志必須一塊使用。
3.<body></body>
<body></body>是Html文檔的主體部分,在此標志對之間可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等眾多的標志,它們所定義的文本、圖像等將會在瀏覽器的框
內顯示出來。兩個標志必須一塊使用。<body>標志中還可以有以下屬性:
屬性
用途
示例
<body bgcolor="#rrggbb">
設置背散兄早景顏色。
<body bgcolor="red">紅色背景
<body text="#rrggbb">
設置文本顏色。
<body text="#0000ff">藍色文本
<body link="#rrggbb">
設置鏈接顏色。
<body link="blue">鏈接為藍色
<body vlink="#rrggbb">
設置已使用的鏈接的顏色。
<body vlink="#ff0000">
<body alink="#rrggbb">
設置正在被擊中的鏈塵桐接的顏色。
<body alink="yellow">
說明:以上各個屬性可以結合使用,如<body bgcolor="red"text="#0000ff">。引號內的rrggbb是用六個十六進制數表示的RGB(即紅、綠、藍三色的組合)顏色,如#ff0000對
應的是紅色。此外,還可以使用Html語言所給定的常量名來表示顏色:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、
Red、Blue和Teal,如<bodytext="Blue">表示<body></body>標志對中的文本使用藍色顯示在瀏覽器的框內。
4.<title></title>
使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息,那些信息一般是網頁的「主題」,要將您的網頁的主題顯示到瀏覽器的頂部其實很簡單,
只要在<title></title>標志對之間加入您要顯示的文本即可。注意:<title></title>標志對只能放在<head></head>標志對之間。
下面是一個綜合的例子,仔細閱讀,您便可以了解以上各個標志對在一個Html文檔中的布局或所使用的位置。
例1 Html文檔中基本標志的使用
<html>
<head>
<title>顯示在瀏覽器最上邊藍色條中的文本</title>
</head>
<body bgcolor="red" text="blue">
<p>紅色背景、藍色文本</p>
</body>
</html>
二、格式標志
1.<p></p>
2.<br>
3.<blockquote></blockquote>
4.<dl></dl><dt></dt><dd></dd>
5.<ol></ol><ul></ul><li></li>
6.<div></div>
上一個教程中我們講了Html文檔的基本標志,但我們還不知道怎樣在瀏覽器中顯示文本之類的東西,這正是我們在教程二中將要談到的。在學習之前,
必須強調一下,我們這個教程中所講的格式標志統統都是用於<body></body>標志對之間的。
1.<p></p>
<p></p>標志對是用來創建一個段落,在此標志對之間加入的文本將按照段落的格式顯示在沖雀瀏覽器上。另外,<p>標志還可以使用align屬性,它用
來說明對齊方式,語法是:<p align=""></p>。Align可以是Left(左對齊)、Center(居中)和Right(右對齊)三個值中的任何一個。如<palign="Center"></p>表
示標志對中的文本使用居中的對齊方式。
2.<br>
<br>是一個很簡單的標志,它沒有結束標志,因為它用來創建一個回車換行,這么一說我想您該會使用了吧。在<br>的使用上還有一定的技巧,如果您
把<br>加在<p></p>標志對的外邊,將創建一個大的回車換行,即<br>前邊和後邊的文本的行與行之間的距離比較大,若放在<p></p>的里邊則<br>前邊和後
邊的文本的行與行之間的距離將比較小,您不妨試試看。
3.<blockquote></blockquote>
在<blockquote></blockquote>標志對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。
4.<dl></dl><dt></dt><dd></dd>
<dl></dl>用來創建一個普通的列表,<dt></dt>用來創建列表中的上層項目,<dd></dd>用來創建列表中最下層項目,<dt></dt>和<dd></dd>都必須放在<dl></dl>標志對之間。看一下下邊的例子您就會明白了:
例2 創建一個普通列表
<html>
<head>
<title>一個普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中國城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國城市
北京
上海
廣州
美國城市
華盛頓
芝加哥
紐約
5.<ol></ol><ul></ul><li></li>
<ol></ol>標志對用來創建一個標有數字的列表;<ul></ul>標志對用來創建一個標有圓點的列表;<li></li>標志對只能在<ol></ol>或<ul></ul>標志對之間使
用,此標志對用來創建一個列表項,若<li></li>放在<ol></ol>之間則每個列表項加上一個數字,若在<ul></ul>之間則每個列表項加上一個圓點。請看下邊的例子:
例3 標有數字或圓點的列表
<html>
<head>
<title></title>
</head>
<body text="blue">
<ol>
<p>中國城市 </p>
<li>北京 </li>
<li>上海 </li>
<li>廣州 </li>
</ol>
<ul>
<p>美國城市 </p>
<li>華盛頓 </li>
<li>芝加哥 </li>
<li>紐約 </li>
</ul>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國城市
北京
上海
廣州
美國城市
華盛頓
芝加哥
紐約
6.<div></div>
<div></div>標志對用來排版大塊Html段落,也用於格式化表,此標志對的用法與<p></p>標志對非常相似,同樣有align對齊方式屬性,讀者可以自己試試看。
三、文本標志
1.<pre></pre>
2.<h1></h1>……<h6></h6>
3.<b></b><i></i><u></u>
4.<tt></tt><cite></cite><em></em><strong></strong>
5.<font></font>
上一個教程中我們已經講了如何在瀏覽器中輸出文本,以及文本輸出的格式,這個教程中我們將談一談文本輸出的字體,如斜體、黑體字、下加一劃線
等等。在本教程的最後給出了一個文本標志的綜合示例,希望讀者能認真閱讀。
1.<pre></pre>
<pre></pre>標志對用來對文本進行預處理操作。
2.<h1></h1>……<h6></h6>
Html語言提供了一系列對文本中的標題進行操作的標志對:<h1></h1>……<h6></h6>,即一共有六對標題的標志對。<h1></h1>是最大的標題,而<h6></h6>則是最小的標題,也即是標志中
h
後面的數字越大標題文本就越小。如果您的Html文檔中需要輸出標題文本的話,便可以使用這六對標題標志對中的任何一對。
3.<b></b><i></i><u></u>
經常使用 WORD 的人對這三對標志對一定很快就能掌握。<b></b>用來使文本以黑體字的形式輸出;<i></i>用來使文本以斜體字的形式輸出;<u></u>用來使文本以下加一劃線的形式輸出。後邊將會有一個綜合的例子,所以此處就不再作詳細講解了。
4.<tt></tt><cite></cite><em></em><strong></strong>
這些標志對的用法和上邊的一樣,差別只是在於輸出的文本字體不太一樣而已。<tt></tt>用來輸出打字機風格字體的文本;<cite></cite>用來輸出引用方式的字體,通常是斜體;<em></em>用來輸出需要強調的文本(通常是斜體加黑體);<strong></strong>則用來輸出加重文本(通常也是斜體加黑體)。這些標志對的示例也將在後邊綜合的例子中出現。
5.<font></font>
<font></font>是一對很有用的標志對,它可以對輸出文本的字體大小、顏色進行隨意地改變,這些改變主要是通過對它的兩個屬性
size 和 color 的控制來實現的。size屬性用來改變字體的大小,它可以取值:-1、1和+1;而color屬性則用來改變文本的顏色,顏色的取值是我們在教程一中講過的十六進制RGB顏色碼或Html語言給定的顏色常量名。具體用法請看下邊綜合的例子。
例4 文本標志的綜合示例
<html>
<head>
<title>文本標志的綜合示例</title>
</head>
<body text="blue">
<h1>最大的標題</h1>
<h3>使用h3的標題</h3>
<h6>最大的標題</h6>
<p><b>黑體字文本</b> </p>
<p><i>斜體字文本</i> </p>
<p><u>下加一劃線文本</u> </p>
<p><tt>打字機風格的文本</tt></p>
<p><cite>引用方式的文本</cite></p>
<p><em>強調的文本</em></p>
<p><strong>加重的文本</strong></p>
<p><font size="+1"
color="red">size取值「+1」、color取值「red」時的文本</font></p>
</body>
</html>
本例在瀏覽器中顯示的結果如下:
最大的標題
使用h3的標題
最大的標題
黑體字文本
斜體字文本
下加一劃線文本
打字機風格的文本
引用方式的文本
強調的文本
加重的文本
size取值「+1」、color取值「red」時的文本
四、圖像標志
1.<img>
2.<hr>
再簡單樸素的網頁如果只有文字而沒有圖像的話將失去許多活力,圖像在網頁製作中是非常重要的一個方面,Html語言也專門提供了<img>標志來處理圖像的輸出。
1.<img>
<img>標志並不是真正地把圖像給加入到Html文檔中,而是將標志對的src屬性賦值,這個值是圖形文件的文件名,當然包括路徑,這個路徑可以是相對路徑,也可
以是網址。實際上就是通過路徑將圖形文件嵌入到您的文檔中。您可能並不知道什麼是相對路徑,我現在就來講一講相對路徑。所謂相對路徑是指您所要鏈接或嵌入到
當前Html文檔的文件與當前文件的相對位置所形成的路徑。假如您的Html文件與圖形文件(文件名假設是logo.gif)在同一個目錄下,則可以將代碼寫成<img
src="logo.gif">;假如您的圖形文件放在當前的Html文檔所在目錄的一個子目錄(子目錄名假設是images)下,則代碼應為<img
src="images/logo.gif">;假如您的圖形文件放在當前的Html文檔所在目錄的上層目錄(目錄名假設是home)下,則相對路徑就必須是准網址了,即用「../」表示您的網
站,然後在後邊緊跟文件在您的網站中的路徑,假設home是您的網站下的一個目錄,則代碼應為<img
src="../home/logo.gif">,若home是您的網站下的目錄king下邊的一個子目錄,則代碼應該變為<img src="../king/home/logo.gif">了。現在您對相對路徑應該有所了解了吧!
必須強調一下,src屬性在<img>標志中是必須賦值的,是標志中不可缺少的一部分。除此之外,<img>標志還有alt、align、border、width和height屬性。align是
圖像的對齊方式,在前邊的教程中已經講了很多了,這里就不再提了。border屬性是圖像的邊框,可以取大於或者等於0的整數,默認單位是像素。width和Height屬性是
圖像的寬和高,默認單位也是象素。alt屬性是當滑鼠移動到圖像上時顯示的文本。
2.<hr>
<hr>標志是在Html文檔中加入一條水平線,它可以直接使用,具有size、color、width和noshade屬性。size是設置水平線的厚度,而width是設定水平線的寬度,默
認單位是像素。想必大家對color屬性已經很熟悉了,在此就不再用多講。noshade屬性不用賦值,而是直接加入標志即可使用,它是用來加入一條沒有陰影的水平線(不加
入此屬性水平線將有陰影)。
下面是本教程的一個綜合例子。
例5 圖像標志舉例
<html>
<head>
<title>圖像標志的綜合示例</title>
</head>
<body>
<p align="center"><a href="http://www.ad8.com.cn"
target="_blank"><img src="http://free.2259.com/468_60.gif"
alt="網頁製作" WIDTH="468" HEIGHT="60"
border="0"></a></p>
<hr width="600" size="1" color="#0000FF">
</body>
</html>
本例在瀏覽其中的顯示結果如下:
七、幀標志
1.<frameset></frameset>
2.<frame>
3.<noframes></noframes>
幀是由英文Frame翻譯過來的,它可以用來向瀏覽器窗口中裝載多個Html文件。即每個Html文件占據一個幀,而多個幀可以同時顯示在同一個瀏覽器窗口中,它
們組成了一個最大的幀,也即是一個包含多個Html文檔的Html文件(我稱它為主文檔)。幀通常的使用方法是在一個幀中放置目錄(即可供選擇的鏈接),然後將Html
文件顯示在另一個幀中。
1.<frameset></frameset>
<frameset></frameset>標志對放在幀的主文檔的<body></body>標志對的外邊,也可以嵌在其他幀文檔中,並且可以嵌套使用。此標志對用來定義主文檔中有
幾個幀並且各個幀是如何排列的。它具有rows和cols屬性,使用<frameset>標志時這兩個屬性至少必須選擇一個,否則瀏覽器只顯示第一個定義的幀,剩下的一概
不管,<frameset></frameset>標志對也就沒有起到任何作用了。rows用來規定主文檔中各個幀的行定位,而cols用來規定主文檔中各個幀的列定位。這兩個屬性的
取值可以是百分數、絕對像素值或星號(「*」),其中星號代表那些未被說明的空間,如果同一個屬性中出現多個星號則將剩下的未被說明的空間平均分配。同時,
所有的幀按照rows和cols的值從左到右,然後從上到下排列。示例如下:
<frameset rows="*,*,*">
總共有三個按列排列的幀,每個幀占整個瀏覽器窗口的1/3
<frameset cols="40%,*,*">
總共有三個按行排列的幀,第一個幀占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個幀
<frameset rows="40%,*" cols="50%,*,200">
總共有六個幀,先是在第一行中從左到右排列三個幀,然後在第二行中從左到右再排列三個幀,即兩行三列,所佔空間依據rows和cols屬性的值,其中200的單位是像素
2.<frame>
<frame>標志放在<frameset></frameset>之間,用來定義某一個具體的幀。<frame>標志具有src和name屬性,這兩個屬性都是必須賦值的。src是此幀的源Html
文件名(包括網路路徑,即相對路徑或網址),瀏覽器將會在此幀中顯示src指定的Html文件;name是此幀的名字,這個名字是用來供超文本鏈接標志<a
href=""
target="">中的target屬性用來指定鏈接的Html文件將顯示在哪一個幀中。例如定義了一個幀,名字是main,在幀中顯示的Html文件名是jc.htm,則代碼是<frame
src="jc.htm" name="main">,當您有一個鏈接,在點擊了這個鏈接後,文件new.htm將要顯示在名為main的幀中,則代碼為<a
href="new.htm"
target="main">需要鏈接的文本</a>。這樣一來,就可以在一個幀中建立網站的目錄,加入一系列鏈接,當點擊鏈接以後在另一個幀中顯示被鏈接的Html文件。
此外,<frame>標志還有scrolling和noresize屬性,scrolling用來指定是否顯示滾動軸,取值可以是「yes」(顯示)、「no」(不顯示)或「auto」(若需要則會自動
顯示,不需要則自動不顯示)。noresize屬性直接加入標志中即可使用,不需賦值,它用來禁止用戶調整一個幀的大小。
3.<noframes></noframes>
<noframes></noframes>標志對也是放在<frameset></frameset>標志對之間,用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。在此標志對之間先緊跟
<body></body>標志對,然後才可以使用我們在教程七以前講過的任何標志。
下邊是一個綜合示例:
例8 幀標志的綜合示例
主文檔:
<html>
<head>
<title>幀標志的綜合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>對不起,您的瀏覽器不支持「幀」!</p>
</body>
</noframes>
</frameset>
</html>
menu.htm
<html>
<head>
<title>目錄</title>
</head>
<body>
<p><font color="#FF0000">目錄</font></p>
<p><a href="page1.htm" target="Main">鏈接到第一頁</a></p>
<p><a href="page2.htm" target="Main">鏈接到第二頁</a></p>
</body>
</html>
page1.htm
<html>
<head>
<title>第一頁</title>
</head>
<body>
<p align="center"><font color="#8000FF">這是第一頁!</font></p>
</body>
</html>
page2.htm
<html>
<head>
<title>第二頁</title>
</head>
<body>
<p align="center"><font color="#FF0080">這是第二頁!</font></p>
</body>
</html>
若想看此例在瀏覽器中顯示的結果請自己動手試試吧。
八、表單標志
1.<form></form>
2.<input type="">
3.<select></select><option>
4.<textarea></textarea>
表單在Web網頁中用來給訪問者填寫信息,從而能獲得用戶信息,使網頁具有交互的功能。一般是將表單設計在一個Html文檔中,當用戶填寫完信息後做
提交(submit)操作,於是表單的內容就從客戶端的瀏覽器傳送到伺服器上,經過伺服器上的
ASP 或 CGI 等處理程序處理後,再將用戶所需信息傳送回客戶端的瀏覽器上,這樣網頁就具有了交互性。這里我們只講怎樣使用Html標志來設計表單。
1.<form></form>
<form></form>標志對用來創建一個表單,也即定義表單的開始和結束位置,在標志對之間的一切都屬於表單的內容。<form>標志具有action、method和target
屬性。action的值是處理程序的程序名(包括網路路徑:網址或相對路徑),如:<form
action="http://free.2259.com/search.asp">,當用戶提交表單時,伺服器將執行網址http://free.2259.com/上的名為search.asp的ASP程序。method屬性用
來定義處理程序從表單中獲得信息的方式,可取值為
GET 和 POST
的其中一個。GET方式是處理程序從當前Html文檔中獲取數據,然而這種方式傳送的數據量是有所限制的,一般限制在1KB以下。POST方式與GET方式相反,它是
當前的Html文檔把數據傳送給處理程序,傳送的數據量要比使用GET方式的大的多。target屬性用來指定目標窗口或目標幀。
2.<input type="">
<input
type="">標志用來定義一個用戶輸入區,用戶可在其中輸入信息。此標志必須放在<form></form>標志對之間。<input
type="">標志中共提供了八種類型的輸入區域,具體是哪一種類型由type屬性來決定。請看下邊列表:
type屬性取值
輸入區域類型
輸入區域示例
<input type="TEXT"
size="" maxlength="">
單行的文本輸入區域,size與maxlength屬性用來定義此種輸入區域顯示的尺寸大小與輸入的最大字元數
<input type="SUBMIT">
將表單內容提交給伺服器的按鈕
<input type="RESET">
將表單內容全部清除,重新填寫的按鈕
<input type="CHECKBOX"
checked>
一個復選框,checked屬性用來設置該復選框預設時是否被選中,右邊示例中使用了三個復選框
你喜歡哪些教程:
Html入門動態HtmlASP
<input type="HIDDEN">
隱藏區域,用戶不能在其中輸入,用來預設某些要傳送的信息
<input type="IMAGE"
src="URL">
使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定,用戶點擊後,表單中的信息和點擊位置的X、Y坐標一起傳送給伺服器
<input type="PASSWARD">
輸入密碼的區域,當用戶輸入密碼時,區域內將會顯示"*"號
請輸入您的密碼:
<input type="RADIO">
單選按鈕類型,checked屬性用來設置該單選框預設時是否被選中,右邊示例中使用了三個單選框
10月3日中韓國奧隊比賽結果會是:
中國勝平局韓國勝
此外,八種類型的輸入區域有一個公共的屬性name,此屬性給每一個輸入區域一個名字。這個名字與輸入區域是一一對應的,即一個輸入區域對應一個名字。服
務器就是通過調用某一輸入區域的名字的value屬性來獲得該區域的數據的。而value屬性是另一個公共屬性,它可用來指定輸入區域的預設值。
3.<select></select><option>
<select></select>標志對用來創建一個下拉列表框或可以復選的列表框。此標志對用於<form></form>標志對之間。<select>具有multiple、name和size屬
性。multiple屬性不用賦值,直接加入標志中即可使用,加入了此屬性後列表框就成了可多選的了;name是此列表框的名字,它與上邊講的name屬性作用是一樣
的;size屬性用來設置列表的高度,預設時值為1,若沒有設置(加入)multiple屬性,顯示的將是一個彈出式的列表框。
<option>標志用來指定列表框中的一個選項,它放在<select></select>標志對之間。此標志具有selected和value屬性,selected用來指定默認的選項,value
屬性用來給<option>指定的那一個選項賦值,這個值是要傳送到伺服器上的,伺服器正是通過調用<select>區域的名字的value屬性來獲得該區域選中的數據項的。請看下例:
Html代碼
瀏覽器顯示的結果
<form action="http://free.2259.com"
method="post">
<p>請選擇最喜歡的男歌星:
<select name="gx1" size="1">
<option value="ldh">劉德華
<option value="zhxy" selected>張學友
<option value="gfch">郭富城
<option value="lm">黎明
</select>
</form>
請選擇最喜歡的男歌星:
劉德華 張學友 郭富城 黎明
<form action="http://free.2259.com"
method="post">
<p>請選擇最喜歡的女歌星:
<select name="gx2" multiple size="4">
<option value="zhmy">張曼玉
<option value="wf" selected>王菲
<option value="tzh">田震
<option value="ny">那英
</select>
</form>
請選擇最喜歡的女歌星:
張曼玉 王菲 田震 那英
4.<textarea></textarea>
<textarea></textarea>用來創建一個可以輸入多行的文本框,此標志對用於<form></form>標志對之間。<textarea>具有name、cols和rows屬性。cols和rows屬性
分別用來設置文本框的列數和行數,這里列與行是以字元數為單位的。請看下邊的例子:
Html代碼
瀏覽器顯示的結果
<form
action="http://free.2259.com" method="post">
<p>您的意見對我很重要:
<textarea name="yj" clos="20" rows="5">
請將意見輸入此區域
</textarea>
</form>
您的意見對我很重要:
請將意見輸入此區域