網(wǎng)頁設(shè)計第二講_第1頁
網(wǎng)頁設(shè)計第二講_第2頁
網(wǎng)頁設(shè)計第二講_第3頁
網(wǎng)頁設(shè)計第二講_第4頁
網(wǎng)頁設(shè)計第二講_第5頁
已閱讀5頁，還剩54頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第二章HTML基礎(chǔ)內(nèi)容回顧WWW具有三個統(tǒng)一：

1.統(tǒng)一的資源命名方式：URL（統(tǒng)一資源定位符，即網(wǎng)址）。

2.統(tǒng)一的資源訪問方式：HTTP（超文本傳輸協(xié)議）。

3.統(tǒng)一的信息組織方式：HTML（超文本標(biāo)記語言）。WWW是成千上萬個網(wǎng)站連結(jié)而成的頁面式網(wǎng)絡(luò)信息系統(tǒng)。WWW采用“客戶機(jī)/服務(wù)器”結(jié)構(gòu)。HTTP（超文本傳輸協(xié)議）Protocol，一組在網(wǎng)絡(luò)上發(fā)送信息的規(guī)則和約定。這些規(guī)則控制在網(wǎng)絡(luò)設(shè)備間交換消息的內(nèi)容、格式、定時、順序和錯誤控制。通俗的說就是不同的網(wǎng)絡(luò)程序的交流語言，我們常見的OICQ使用UDP協(xié)議、ICQ使用TCP協(xié)議、E-mail程序使用POP3和SMTP協(xié)議，正像我們國人使用漢語一樣......

HTTP（超文本傳輸協(xié)議）超文本傳輸協(xié)議(HyperTextTransferProtocol,簡稱HTTP)是WWW瀏覽器和WWW服務(wù)器之間的應(yīng)用層通訊協(xié)議。HTTP協(xié)議是用于分布式協(xié)作超文本信息系統(tǒng)的、通用的、面向?qū)ο蟮膮f(xié)議。HTTP會話過程包括四個步驟:

(1)

連接(Connection);

(2)

請求(Request);

(3)

應(yīng)答(Response);

(4)

關(guān)閉(Close)。HTTP協(xié)議是基于TCP/IP之上的協(xié)議,它不僅保證正確傳輸超文本文檔,還確定傳輸文檔中的哪一部分,以及哪部分內(nèi)容首先顯示(如文本先于圖形)等等。HTTP（超文本傳輸協(xié)議）HTTP是一種請求/響應(yīng)式的協(xié)議。一個客戶機(jī)與服務(wù)器建立連接后，發(fā)送一個請求給服務(wù)器，請求的格式是：統(tǒng)一資源標(biāo)識符（URL）、協(xié)議版本號，后面是類似MIME的信息，包括請求修飾符、客戶機(jī)信息和可能的內(nèi)容。服務(wù)器接到請求后，給予相應(yīng)的響應(yīng)信息，其格式是：一個狀態(tài)行包括信息的協(xié)議版本號、一個成功或錯誤的代碼，后面也是類似MIME的信息，包括服務(wù)器信息、實體信息和可能的內(nèi)容。

HTTP（超文本傳輸協(xié)議）協(xié)議結(jié)構(gòu)HTTP報文由從客戶機(jī)到服務(wù)器的請求和從服務(wù)器到客戶機(jī)的響應(yīng)構(gòu)成。請求報文格式如下：請求行以方法字段開始，后面分別是URL字段和HTTP協(xié)議版本字段，并以CRLF結(jié)尾。SP是分隔符。除了在最后的CRLF序列中CF和LF是必需的之外，其他都可以不要。請求行通用信息頭請求頭實體頭報文主體HTTP（超文本傳輸協(xié)議）協(xié)議結(jié)構(gòu)HTTP報文由從客戶機(jī)到服務(wù)器的請求和從服務(wù)器到客戶機(jī)的響應(yīng)構(gòu)成。響應(yīng)報文格式如下：狀態(tài)碼元由3位數(shù)字組成，表示請求是否被理解或被滿足。原因分析是對原文的狀態(tài)碼作簡短的描述，狀態(tài)碼用來支持自動操作，而原因分析用來供用戶使用。客戶機(jī)無需用來檢查或顯示語法。狀態(tài)行通用信息頭響應(yīng)頭實體頭報文主體HTML基礎(chǔ)

一、HTML的概念1.什么是HTML？超文本標(biāo)記語言（HTML——HyperTextMarkupLanguage）是用于設(shè)計網(wǎng)頁源文件（網(wǎng)頁文檔）的語言。每一個頁面的代碼保存為一個網(wǎng)頁源文件(.htm文件)。八十年代初，HTML由萬維網(wǎng)聯(lián)盟（W3C：WorldWideWebConsortium）制訂。HTML包括一些定義頁面內(nèi)容和格式的符號，稱為標(biāo)記。它能夠?qū)⑽谋?、圖像、聲音和動畫結(jié)合在一個網(wǎng)頁文檔中。這些文檔可以通過Web瀏覽器顯示，還可以通過超鏈接以訪問其它的信息資源。后來，進(jìn)一步推出了XML（擴(kuò)展標(biāo)記語言），該語言可以由程序員自己定義標(biāo)記。HTML基礎(chǔ)2.什么是標(biāo)記？標(biāo)記是網(wǎng)頁文檔中的一些有特定意義的符號。這些符號指明如何顯示文檔中的內(nèi)容。標(biāo)記總是放在三角括號中，大多數(shù)標(biāo)記都成對出現(xiàn)（有開始標(biāo)記和結(jié)束標(biāo)記）。結(jié)束標(biāo)記和開始標(biāo)記所用的字符相同，只是前面加一個斜杠。例如：<p>…</p>用于標(biāo)記一個自然段。標(biāo)記可以具有相應(yīng)屬性即各種參數(shù)，如size、color、text、width和noshade等。例如：<p><fontsize="+1"color="red"></font></p>

HTML基礎(chǔ)

標(biāo)記通?？梢苑殖蓛煞N：第一種用來指定網(wǎng)頁上的元素或元素的樣式。例如，指定一個自然段及其字體和顏色：

<p><fontsize="+1"color="red">自然段內(nèi)容。</font></p>第二種用來指向其它的資源。例如，指定一個鏈接地址：

<ahref=“”>武漢大學(xué)</a>

指定一個圖片文件：

<imgsrc=“圖片路徑”>

HTML基礎(chǔ)3.什么是超文本、超媒體和超鏈接？超文本是網(wǎng)頁上具有鏈接功能的文字。例如，娛樂

新聞

電影。超媒體是網(wǎng)頁上具有鏈接功能的多媒體。超鏈接是網(wǎng)頁上連接其它網(wǎng)頁或網(wǎng)頁上指定位置的超文本和超媒體。超鏈接分為文字和圖像（包括動畫）兩種，網(wǎng)頁中的一段文字、一副圖像或圖像的某一個部分等都可以定義為超鏈接。

HTML基礎(chǔ)

二、如何編寫和瀏覽HTML網(wǎng)頁文檔啟動IE，然后使用“查看”菜單中的“源文件”菜單項，進(jìn)入記事本，就可以輸入網(wǎng)頁源文件了。在輸入完之后，另存為.htm文件?；蛘咧苯舆M(jìn)入記事本，輸入網(wǎng)頁源文件。在輸入完之后，另存為.htm文件（選擇保存類型為“所有文件”）。在瀏覽器中輸入該文件名，就能瀏覽HTML源文件的網(wǎng)頁效果。

HTML基礎(chǔ)例如：

<HTML><HEAD><TITLE>學(xué)生選課系統(tǒng)</TITLE></HEAD><BODY>網(wǎng)頁制作練習(xí)</BODY></HTML>演示網(wǎng)頁美的標(biāo)準(zhǔn)簡潔實用使用方便整體性好網(wǎng)站形象突出頁面用色協(xié)調(diào)交互性強(qiáng)HTML基礎(chǔ)

三、HTML的常用標(biāo)記

1.HTML文檔的結(jié)構(gòu)標(biāo)記

用來指明一個HTML文檔的基本結(jié)構(gòu)。

（1）文件標(biāo)記：<HTML>…</HTML>

整個HTML文檔內(nèi)容均在<HTML>…</HTML>標(biāo)記之中。（2）頭部標(biāo)記：<HEAD>…</HEAD>

整個HTML文檔分頭部和主體部分。頭部使用<HEAD>…</HEAD>標(biāo)記標(biāo)識，凡是在此標(biāo)記之內(nèi)的內(nèi)容，例如標(biāo)題等，均屬于頭部信息。頭部信息不顯示在Web頁中。HTML基礎(chǔ)

（3）頭部標(biāo)題標(biāo)記：<TITLE>…</TITLE>

在此標(biāo)記之間的內(nèi)容將作為標(biāo)題顯示在瀏覽器的標(biāo)題欄。注意：<TITLE>…</TITLE>標(biāo)記只能放在<HEAD>…</HEAD>標(biāo)記之間。（4）主體標(biāo)記：<BODY>…</BODY>

主體是Web頁的主要部分，用<BODY>…</BODY>標(biāo)記定義的信息將顯示在Web頁中。例如：（見下頁）HTML基礎(chǔ)<html><head><title>結(jié)構(gòu)標(biāo)記示例</title></head><bodytext="blue"><p><i>斜體字文本</i></p></body></html>可以建立該網(wǎng)頁源文件test2-1.htm演示HTML基礎(chǔ)

2.格式標(biāo)記

（1）<p>…</p>（段落標(biāo)記）

<p>…</p>標(biāo)記用來創(chuàng)建一個段落，在此標(biāo)記之間的文本將按照段落的格式顯示。（2）<br>（換行標(biāo)記）

<br>是一個很簡單的標(biāo)記，它沒有結(jié)束標(biāo)記，用來創(chuàng)建一個換行。（3）<blockquote>…</blockquote>（兩邊縮進(jìn)標(biāo)記）在<blockquote>…</blockquote>標(biāo)記之間的文本將按照兩邊縮進(jìn)的方式顯示。

下面一一介紹在<body>…</body>標(biāo)記之間常用的各種標(biāo)記。HTML基礎(chǔ)

（4）<dl></dl><dt></dt><dd></dd>（列表標(biāo)記）①

<dl></dl>用來創(chuàng)建一個列表;②<dt></dt>用來創(chuàng)建列表中的上層項目;③<dd></dd>用來創(chuàng)建列表中最下層項目;<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)記之間。

[例2-2]創(chuàng)建一個普通列表：HTML基礎(chǔ)

該網(wǎng)頁的HTML源文件test2-2.htm如下：

<html><head><title>一個普通列表</title></head><bodytext="blue"><dl><dt>中國城市</dt><dd>北京

</dd><dd>上海

</dd><dd>廣州

</dd><dt>美國城市</dt><dd>華盛頓

</dd><dd>芝加哥

</dd><dd>紐約

</dd></dl></body></html>演示HTML基礎(chǔ)

（5）<ol></ol><ul></ul><li></li>（標(biāo)有數(shù)字或圓點的列表標(biāo)記）①

<ol></ol>標(biāo)記用來創(chuàng)建一個標(biāo)有數(shù)字的列表；②

<ul></ul>標(biāo)記用來創(chuàng)建一個標(biāo)有圓點的列表；③

<li></li>標(biāo)記只能在<ol></ol>或<ul></ul>標(biāo)記之間使用，此標(biāo)記對用來創(chuàng)建一個列表項。若<li></li>放在<ol></ol>之間,則每個列表項加上一個數(shù)字，若在<ul></ul>之間,則每個列表項加上一個圓點。HTML基礎(chǔ)[例2-3]標(biāo)有數(shù)字的列表與標(biāo)有圓點的列表：

HTML基礎(chǔ)該網(wǎng)頁的HTML源文件test2-3.htm如下：<html><head><title>標(biāo)有數(shù)字與圓點的列表</title></head><bodytext="blue"><ol><p>中國城市</p><li>北京</li><li>上海</li><li>廣州</li></ol><ul><p>美國城市</p><li>華盛頓</li><li>芝加哥</li><li>紐約</li></ul></body></html>演示HTML基礎(chǔ)

（6）<div></div>（分段標(biāo)記）①<div></div>標(biāo)記對用來排版大塊HTML段落，也用于格式化表，此標(biāo)記的用法與<p></p>標(biāo)記非常相似，同樣有align對齊方式屬性。②align屬性，它用來說明對齊方式，語法是：<palign=""></p>。③align可以是Left(左對齊)、Center(居中)和Right(右對齊)三個值中的任何一個。例如：<palign=“Center”></p>表示標(biāo)記中的文本居中顯示。HTML基礎(chǔ)3.文本標(biāo)記

（1）<pre></pre>(預(yù)處理標(biāo)記)

表示<pre></pre>標(biāo)記之間的文本原有格式如word格式仍有效。（2）<h1></h1>……<h6></h6>（六級標(biāo)題標(biāo)記）

<h1></h1>是最大的標(biāo)題，<h6></h6>則是最小的標(biāo)題。如果要在HTML文檔中輸出標(biāo)題，那麼可以使用六對標(biāo)題標(biāo)記的任何一對。

HTML基礎(chǔ)

（3）<b></b><i></i><u></u>（字體標(biāo)記）

①<b></b>之間的文本以黑體字的形式輸出；

②<i></i>之間的文本以斜體字的形式輸出；

③<u></u>之間的文本以下加一劃線的形式輸出。（4）<em></em><strong></strong>（強(qiáng)調(diào)加重標(biāo)記）

①

<em></em>用來輸出需要強(qiáng)調(diào)的文本(通常是斜體)；②<strong></strong>則用來輸出加重文本(通常也是黑體)。關(guān)于html標(biāo)簽中b和strong兩個的區(qū)別，

用在網(wǎng)頁上，默認(rèn)情況下它們起的均是加粗字體的作用，二者所不同的是，<b>標(biāo)簽是一個實體標(biāo)簽，它所包圍的字符將被設(shè)為bold（粗體），而<strong>標(biāo)簽是一個邏輯標(biāo)簽，它的作用是加強(qiáng)字符的語氣，一般來說，加強(qiáng)字符的語氣是通過將字符變?yōu)閎old（粗體）來實現(xiàn)的。

簡單的說strong是web標(biāo)準(zhǔn)中xhtml的標(biāo)簽，strong的意思是“強(qiáng)調(diào)”；b是html的，b的意思是bold（粗體）。web標(biāo)準(zhǔn)主張xhtml不涉及具體的表現(xiàn)形式，“強(qiáng)調(diào)”可以用加粗來強(qiáng)調(diào)，也可以用其它方式來強(qiáng)調(diào)，比如下劃線，比如字體加大，比如紅色，等等，可以通過css來改變strong的具體表現(xiàn)。

并不是說有了strong，就淘汰了b，只是這個b很無辜，就因為自己表示的是字體加粗，恰巧跟strong默認(rèn)情況下強(qiáng)調(diào)的效果一致，其實這個strong完全可以定義成別的樣式的強(qiáng)調(diào)效果

但是為了符合現(xiàn)在W3C的標(biāo)準(zhǔn)，還是推薦使用strong標(biāo)簽。HTML基礎(chǔ)

（5）<font></font>（字體的大小顏色標(biāo)記）

①

<font></font>可以指定輸出文本的字體大小、顏色，它主要兩個屬性size和color。

②

size屬性用來指定字體的大小，可以取值：

-1、1和+1；

③

color屬性用來指定文本的顏色，顏色的取值是十六進(jìn)制RGB顏色碼或HTML語言給定的顏色名稱。例如，"#ff0000"，引號內(nèi)的rrggbb是用六位十六進(jìn)制數(shù)字表示的RGB(即紅、綠、藍(lán)三色的組合)顏色，#ff0000對應(yīng)的是紅色。HTML基礎(chǔ)

④Html語言所給定的顏色名稱有：

Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。

例如：

<p><fontsize="+1"color="red">size取值“+1”、color取值“red”時的文本</font></p>

表示<p></p>標(biāo)記之間的文本按大小為+1，顏色為紅色顯示。HTML基礎(chǔ)[例2-4]文本標(biāo)記的綜合示例HTML基礎(chǔ)該網(wǎng)頁的HTML源文件test2-4.htm如下：<html><head><title>文本標(biāo)記的綜合示例</title></head><bodytext="blue"><h1>最大的標(biāo)題</h1><h3>使用h3的標(biāo)題</h3><h6>最大的標(biāo)題</h6><p><b>黑體字文本</b></p><p><i>斜體字文本</i></p><p><u>下加一劃線文本</u></p><p><em>強(qiáng)調(diào)的文本</em></p><p><strong>加重的文本</strong></p><p><fontsize=“+1”color=“red”>size取值“+1”、color取值“red”時的文本</font></p></body></html>演示HTML基礎(chǔ)4.鏈接標(biāo)記

（1）<ahref=“地址">…</a>（超鏈接標(biāo)記）

①在標(biāo)記對之間可指定作為超鏈接的文本或圖像，使用<imgsrc=“圖像文件名”>標(biāo)記指定圖像。例如，指定超鏈接及其文本“武漢大學(xué)網(wǎng)站”：<ahref=>武漢大學(xué)網(wǎng)站</a>

或者，指定超鏈接及其圖像“d:\pic1.gif”：<ahref=><imgsrc="d:\pic1.gif"></a>

在上例中，href的值是武漢大學(xué)的網(wǎng)址。（href——縮寫：httpreference含義為http引用。）HTML基礎(chǔ)

②

href的值也可以是mailto:形式，即發(fā)送E-Mail形式。語法為：

<ahref="mailto:EMAIL"></a>

這就創(chuàng)建了一個自動發(fā)送電子郵件的鏈接，mailto:后邊緊跟想要自動發(fā)送的電子郵件的地址(即E-Mail地址)。例如，鏈接到我的電子信箱abc@263.net：

<ahref="mailto:abc@263.net">這是我的電子信箱(E-Mail信箱)</a>HTML基礎(chǔ)③<ahref=“”></a>還具有target屬性，此屬性用來指明顯示的目標(biāo)窗口。如果不使用target屬性，當(dāng)瀏覽者點擊了鏈接之后將在原來的瀏覽器窗口中顯示HTML文檔，若target的值等于“_blank”，點擊鏈接后將會打開一個新的瀏覽器窗口顯示HTML文檔。例如，進(jìn)入，并且在新窗口中顯示網(wǎng)頁：

<ahref=“/”target="_blank">在新窗口中顯示</a>

HTML基礎(chǔ)（2）<aname="標(biāo)簽名"></a>（標(biāo)簽標(biāo)記）

①標(biāo)簽標(biāo)記<aname=“”></a>需要結(jié)合<ahref=“”></a>標(biāo)記使用。name屬性不可缺少。

②<aname=“標(biāo)簽名”></a>標(biāo)記用來在同一網(wǎng)頁中創(chuàng)建一個標(biāo)簽(即做一個記號),

即在同一網(wǎng)頁中創(chuàng)建鏈接，以便轉(zhuǎn)到同一網(wǎng)頁中有標(biāo)簽的地方并顯示。例如，在頁頂創(chuàng)建一個標(biāo)簽

<aname="Top">此處創(chuàng)建了一個標(biāo)簽</a>

③要找到標(biāo)簽所在地，就必須使用<ahref=“#標(biāo)簽名"></a>標(biāo)記。例如：

<ahref=“#Top”>點擊此處將轉(zhuǎn)到標(biāo)簽“Top”的地方顯示</a>

注意：href屬性的值若是標(biāo)簽名，必須在標(biāo)簽名前頭加一個“#”號。

HTML基礎(chǔ)[例2-5]鏈接標(biāo)記的綜合示例<html><head><title>鏈接標(biāo)記的綜合示例</title></head><body><palign="center"style="font-size:9pt;color:yellow;background:black"><br><aname="Top"><fontcolor="red">創(chuàng)建標(biāo)簽處</font></a><br><br><br><br><br><br><br><br><br><br><br>歡迎想要學(xué)習(xí)網(wǎng)頁制作的同學(xué)訪問網(wǎng)站<br><ahref=""><fontcolor="lime">武漢大學(xué)網(wǎng)站</font></a><br><br>HTML基礎(chǔ)<ahref=><imgsrc="images/web.gif"></a><br><br><br><br><br>本網(wǎng)站的主要內(nèi)容<br><br><ahref="/"target="_blank">在新窗口中顯示</a><br>歡迎給我來信，我的E-Mail是：<ahref="mailto:abc@263.net"><fontcolor="lime">abc@263.net</font></a><br><br><ahref=“#Top”><fontcolor=“l(fā)ime”>點擊此處回到標(biāo)簽處

</font></a><br><br></p></body></html>可以建立[例2-5]的HTML源文件和作為超鏈的圖像文件d:\Inetpub\wwwroot\web.gif，在瀏覽器中顯示執(zhí)行結(jié)果。

5.圖像標(biāo)記和多媒體標(biāo)記

（1）圖像標(biāo)記：<imgsrc=“圖像文件名”>將圖形文件嵌入到網(wǎng)頁文檔中的當(dāng)前位置。例如，網(wǎng)頁文檔與圖形文件logo.gif在同一個目錄下，則可以將代碼寫成<imgsrc="logo.gif">。假如圖形文件放在網(wǎng)頁文檔所在目錄的一個子目錄(images)下，則代碼應(yīng)為：

<imgsrc="images/logo.gif">。此外，<img>標(biāo)記還有alt（文字代替）、align（對齊）、border（邊框）、width（寬度）和height（高度）屬性。

HTML基礎(chǔ)演示

假如圖形文件放在網(wǎng)頁文檔所在目錄的上層目錄(如home)下，則相對路徑就必須是準(zhǔn)網(wǎng)址，即用“../”表示網(wǎng)站，后邊緊跟文件在網(wǎng)站中的路徑。例如，home是網(wǎng)站下的一個目錄，則代碼應(yīng)為：

<imgsrc="../home/logo.gif">。例如，home是網(wǎng)站下的目錄king下邊的一個子目錄，則代碼應(yīng)為：

<imgsrc="../king/home/logo.gif">。

HTML基礎(chǔ)

[例2-6]圖像標(biāo)記舉例<html><head><title>圖像標(biāo)記示例</title></head><body><palign="center"><imgsrc="images/china.jpg"alt="網(wǎng)頁制作"width="640"height="480"></p></body></html>

HTML基礎(chǔ)演示若事先在網(wǎng)站根目錄中存放一幅圖像logo468_60.gif，則可以在網(wǎng)頁中顯示它。alt="網(wǎng)頁制作"屬性表示在網(wǎng)頁中可以用文字"網(wǎng)頁制作"代替該圖像先行顯示出來。

（2）多媒體標(biāo)記

A.設(shè)置音樂播放的鏈接在Windows中，可播放的音樂文件格式常有au、mid及wav三種。若要提供音樂文件讓瀏覽者播放，則可建立指向音樂文件的超鏈接。例如：

<AHREF="sweet.wav">甜美音樂</A>

B.設(shè)置影像播放的鏈接常見的影像文件有mov、mpg和avi。可建立超鏈接到影像文件。當(dāng)瀏覽者單擊超鏈接時，將會調(diào)用WindowsMediaPlayer，進(jìn)行影像文件播放。例如：<AHREF="traffic.avi">本市交通</A>

HTML基礎(chǔ)

C.直接將音樂或影像嵌入網(wǎng)頁可以用<EMBED>標(biāo)記，即:<EMBEDSRC=“音樂或影像文件名稱”

WIDTH=寬度

HEIGHT=高度

AUTOSTART=TRUELOOP=播放次數(shù)>

若“播放次數(shù)”設(shè)為TRUE，則無限次播放，直到單擊關(guān)閉或停止。若設(shè)為NO（默認(rèn)值），則只播放一次。

D.播放網(wǎng)頁背景音樂可運用<BGSOUND>標(biāo)記，即：

<BGSOUNDSRC="音樂文件名"LOOP=次數(shù)>

若“次數(shù)”設(shè)為Infinite，音樂將循環(huán)播放，直到網(wǎng)頁關(guān)閉為止。

HTML基礎(chǔ)

6.表格標(biāo)記（用于制作表格或網(wǎng)頁結(jié)構(gòu)）（1）<table></table>（創(chuàng)建一個表格）（2）<tr></tr>和<td></td>（創(chuàng)建表格中的每一行和每一格）（3）<th></th>（創(chuàng)建表格頭）。

[例2-7]用表格標(biāo)記創(chuàng)建下列表格。

HTML基礎(chǔ)

<html><head><title>表格標(biāo)記示例</title></head><body><tableborder="1"width="80%"bgcolor="#E8E8E8“cellpadding="2"bordercolor="#0000FF“bordercolorlight="#7D7DFF"bordercolordark="#0000A0"><tr><thwidth="33%"colspan="2"valign="bottom">意大利</th><thwidth="36%"colspan="2"valign="bottom">英格蘭</th><thwidth="36%"colspan="2"valign="bottom">西班牙</th></tr>HTML基礎(chǔ)cellpadding設(shè)置格子邊框與其內(nèi)容之間的大小；valign是垂直對齊方式；colspan設(shè)置一個格子跨占的列數(shù)；rowspan設(shè)置一個格子跨占的行數(shù)。

<tr><tdwidth="16%"align="center">AC米蘭</td><tdwidth="16%"align="center">佛羅倫薩</td><tdwidth="17%"align="center">曼聯(lián)</td><tdwidth="17%"align="center">紐卡斯?fàn)?lt;/td><tdwidth="17%"align="center">巴塞羅那</td><tdwidth="17%"align="center">皇家社會</td></tr>HTML基礎(chǔ)<tr><tdwidth="16%"align="center">尤文圖斯</td><tdwidth="16%"align="center">桑普多利亞</td><tdwidth="17%"align="center">利物浦</td><tdwidth="17%"align="center">阿申納</td><tdwidth="17%"align="center">皇家馬德里</td><tdwidth="17%"align="center">……</td></tr>HTML基礎(chǔ)<tr><tdwidth="16%"align="center">拉齊奧</td><tdwidth="16%"align="center">國際米蘭</td><tdwidth="17%"align="center">切爾西</td><tdwidth="17%"align="center">米德爾斯堡</td><tdwidth="17%"align="center">馬德里競技</td><tdwidth="17%"align="center">……</td></tr></table></body></html>HTML基礎(chǔ)演示

7.表單標(biāo)記（用于制作對話框）

（1）<form></form>（表單開始和結(jié)束標(biāo)記）（2）<inputtype=“”>（輸入?yún)^(qū)標(biāo)記）（3）<select></select><option>（列表框標(biāo)記）（4）<textarea></textarea>（多行文本框標(biāo)記）分別介紹如下：

（1）<form></form>標(biāo)記用來創(chuàng)建一個表單，也即定義表單的開始和結(jié)束位置，在標(biāo)記對之間的一切都屬于表單的內(nèi)容。

HTML基礎(chǔ)

<form>標(biāo)記具有action、method和target屬性。

action的值是處理程序的程序名。例如：<formaction=“/counter.asp”>，當(dāng)用戶提交表單時，服務(wù)器將執(zhí)行網(wǎng)站/上的counter.asp程序。

method用來定義處理程序從表單中獲得信息的方式，可取值為

GET或

POST。

GET方式是程序從當(dāng)前網(wǎng)頁文檔中獲取數(shù)據(jù)，然而這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。

POST方式與GET方式相反，它是當(dāng)前網(wǎng)頁文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式大得多。

target用來指定顯示表單的目標(biāo)窗口。

HTML基礎(chǔ)

（2）<inputtype=“”>標(biāo)記用來定義一個用戶輸入?yún)^(qū)，用戶可在其中輸入信息。此標(biāo)記必須放在<form></form>標(biāo)記對之間。<inputtype=“”>標(biāo)記中共提供文本框、按鈕、復(fù)選框、單選鈕等八種類型的輸入?yún)^(qū)域。例如：

HTML基礎(chǔ)

（3）<select></select>標(biāo)記用來創(chuàng)建一個下拉列表框或可以復(fù)選的列表框。此標(biāo)記對用于<form></form>標(biāo)記之間。<select>具有multiple、name和size屬性。例如：

<formaction="cgi-bin/#cgi"method="post"><p>請選擇最喜歡的男歌星:<selectname="gx1"size="1"><optionvalue=“l(fā)dh”>劉德華

<optionvalue=“zhxy”selected>張學(xué)友

<optionvalue=“gfch”>郭富城

<optionvalue=“l(fā)m”>黎明

</select></form>

HTML基礎(chǔ)<option>標(biāo)記指定列表框中的一個選項，此標(biāo)記具有selected和value屬性。value指定選項值，這個值要傳送到服務(wù)器上。服務(wù)器正是通過調(diào)用<select>區(qū)域的名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項的。

（4）<textarea></textarea>標(biāo)記創(chuàng)建可以輸入多行的文本框，此標(biāo)記對用于<form></form>標(biāo)記對之間。

<textarea>有name、cols和rows屬性。name

、cols和rows屬性分別用來設(shè)置文本框的名稱、列數(shù)和行數(shù)。列與行以字符數(shù)為單位。例如：

HTML基礎(chǔ)

[例2-8]建立一個輸入密碼，以及具有確認(rèn)和重輸按鈕的表單。

<HTML><head><title></title></head><body><p>請輸入密碼：</p><formmethod="POST"><p><inputtype="password"size="20"name="passwd"><inputtype="submit"name="B1"value="確定"><inputtype="reset"name="B2"value="重輸"></p><

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論