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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

3.統(tǒng)一的信息組織方式：HTML（超文本標(biāo)記語(yǔ)言）。WWW是成千上萬(wàn)個(gè)網(wǎng)站連結(jié)而成的頁(yè)面式網(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)容、格式、定時(shí)、順序和錯(cuò)誤控制。通俗的說(shuō)就是不同的網(wǎng)絡(luò)程序的交流語(yǔ)言，我們常見(jiàn)的OICQ使用UDP協(xié)議、ICQ使用TCP協(xié)議、E-mail程序使用POP3和SMTP協(xié)議，正像我們國(guó)人使用漢語(yǔ)一樣......

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

(1)

連接(Connection);

(2)

請(qǐng)求(Request);

(3)

應(yīng)答(Response);

(4)

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

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

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

HTML基礎(chǔ)

標(biāo)記通常可以分成兩種：第一種用來(lái)指定網(wǎng)頁(yè)上的元素或元素的樣式。例如，指定一個(gè)自然段及其字體和顏色：

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

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

指定一個(gè)圖片文件：

<imgsrc=“圖片路徑”>

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

新聞

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

HTML基礎(chǔ)

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

HTML基礎(chǔ)例如：

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

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

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

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

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

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

整個(gè)HTML文檔分頭部和主體部分。頭部使用<HEAD>…</HEAD>標(biāo)記標(biāo)識(shí)，凡是在此標(biāo)記之內(nèi)的內(nèi)容，例如標(biāo)題等，均屬于頭部信息。頭部信息不顯示在Web頁(yè)中。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頁(yè)的主要部分，用<BODY>…</BODY>標(biāo)記定義的信息將顯示在Web頁(yè)中。例如：（見(jiàn)下頁(yè)）HTML基礎(chǔ)<html><head><title>結(jié)構(gòu)標(biāo)記示例</title></head><bodytext="blue"><p><i>斜體字文本</i></p></body></html>可以建立該網(wǎng)頁(yè)源文件test2-1.htm演示HTML基礎(chǔ)

2.格式標(biāo)記

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

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

<br>是一個(gè)很簡(jiǎn)單的標(biāo)記，它沒(méi)有結(jié)束標(biāo)記，用來(lái)創(chuàng)建一個(gè)換行。（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>用來(lái)創(chuàng)建一個(gè)列表;②<dt></dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目;③<dd></dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目;<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)記之間。

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

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

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

</dd><dd>上海

</dd><dd>廣州

</dd><dt>美國(guó)城市</dt><dd>華盛頓

</dd><dd>芝加哥

</dd><dd>紐約

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

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

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

<ul></ul>標(biāo)記用來(lái)創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表；③

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

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

（6）<div></div>（分段標(biāo)記）①<div></div>標(biāo)記對(duì)用來(lái)排版大塊HTML段落，也用于格式化表，此標(biāo)記的用法與<p></p>標(biāo)記非常相似，同樣有align對(duì)齊方式屬性。②align屬性，它用來(lái)說(shuō)明對(duì)齊方式，語(yǔ)法是：<palign=""></p>。③align可以是Left(左對(duì)齊)、Center(居中)和Right(右對(duì)齊)三個(gè)值中的任何一個(gè)。例如：<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>（六級(jí)標(biāo)題標(biāo)記）

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

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

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

簡(jiǎn)單的說(shuō)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)”可以用加粗來(lái)強(qiáng)調(diào)，也可以用其它方式來(lái)強(qiáng)調(diào)，比如下劃線，比如字體加大，比如紅色，等等，可以通過(guò)css來(lái)改變strong的具體表現(xiàn)。

并不是說(shuō)有了strong，就淘汰了b，只是這個(gè)b很無(wú)辜，就因?yàn)樽约罕硎镜氖亲煮w加粗，恰巧跟strong默認(rèn)情況下強(qiáng)調(diào)的效果一致，其實(shí)這個(gè)strong完全可以定義成別的樣式的強(qiáng)調(diào)效果

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

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

①

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

②

size屬性用來(lái)指定字體的大小，可以取值：

-1、1和+1；

③

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

④Html語(yǔ)言所給定的顏色名稱有：

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”時(shí)的文本</font></p>

表示<p></p>標(biāo)記之間的文本按大小為+1，顏色為紅色顯示。HTML基礎(chǔ)[例2-4]文本標(biāo)記的綜合示例HTML基礎(chǔ)該網(wǎng)頁(yè)的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”時(shí)的文本</font></p></body></html>演示HTML基礎(chǔ)4.鏈接標(biāo)記

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

①在標(biāo)記對(duì)之間可指定作為超鏈接的文本或圖像，使用<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——縮寫(xiě)：httpreference含義為http引用。）HTML基礎(chǔ)

②

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

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

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

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

<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)記用來(lái)在同一網(wǎng)頁(yè)中創(chuàng)建一個(gè)標(biāo)簽(即做一個(gè)記號(hào)),

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

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

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

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

注意：href屬性的值若是標(biāo)簽名，必須在標(biāo)簽名前頭加一個(gè)“#”號(hà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)頁(yè)制作的同學(xué)訪問(wèn)網(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>歡迎給我來(lái)信，我的E-Mail是：<ahref="mailto:abc@263.net"><fontcolor="lime">abc@263.net</font></a><br><br><ahref=“#Top”><fontcolor=“l(fā)ime”>點(diǎn)擊此處回到標(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)頁(yè)文檔中的當(dāng)前位置。例如，網(wǎng)頁(yè)文檔與圖形文件logo.gif在同一個(gè)目錄下，則可以將代碼寫(xiě)成<imgsrc="logo.gif">。假如圖形文件放在網(wǎng)頁(yè)文檔所在目錄的一個(gè)子目錄(images)下，則代碼應(yīng)為：

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

HTML基礎(chǔ)演示

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

<imgsrc="../home/logo.gif">。例如，home是網(wǎng)站下的目錄king下邊的一個(gè)子目錄，則代碼應(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)頁(yè)制作"width="640"height="480"></p></body></html>

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

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

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

<AHREF="sweet.wav">甜美音樂(lè)</A>

B.設(shè)置影像播放的鏈接常見(jiàn)的影像文件有mov、mpg和avi?？山⒊溄拥接跋裎募?。當(dāng)瀏覽者單擊超鏈接時(shí)，將會(huì)調(diào)用WindowsMediaPlayer，進(jìn)行影像文件播放。例如：<AHREF="traffic.avi">本市交通</A>

HTML基礎(chǔ)

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

WIDTH=寬度

HEIGHT=高度

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

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

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

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

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

HTML基礎(chǔ)

6.表格標(biāo)記（用于制作表格或網(wǎng)頁(yè)結(jié)構(gòu)）（1）<table></table>（創(chuàng)建一個(gè)表格）（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是垂直對(duì)齊方式；colspan設(shè)置一個(gè)格子跨占的列數(shù)；rowspan設(shè)置一個(gè)格子跨占的行數(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">皇家社會(huì)</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">國(guó)際米蘭</td><tdwidth="17%"align="center">切爾西</td><tdwidth="17%"align="center">米德?tīng)査贡?lt;/td><tdwidth="17%"align="center">馬德里競(jìng)技</td><tdwidth="17%"align="center">……</td></tr></table></body></html>HTML基礎(chǔ)演示

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

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

HTML基礎(chǔ)

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

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

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

GET或

POST。

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

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

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

HTML基礎(chǔ)

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

HTML基礎(chǔ)

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

<formaction="cgi-bin/#cgi"method="post"><p>請(qǐng)選擇最喜歡的男歌星:<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)記指定列表框中的一個(gè)選項(xiàng)，此標(biāo)記具有selected和value屬性。value指定選項(xiàng)值，這個(gè)值要傳送到服務(wù)器上。服務(wù)器正是通過(guò)調(diào)用<select>區(qū)域的名字的value屬性來(lái)獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)的。

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

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

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

HTML基礎(chǔ)

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

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論