《Web應(yīng)用開(kāi)發(fā)》課件-階段一 我的第一個(gè)網(wǎng)頁(yè)

我的第一個(gè)網(wǎng)頁(yè)項(xiàng)目1任務(wù)目標(biāo)

了解網(wǎng)頁(yè)的基礎(chǔ)知識(shí)

1認(rèn)識(shí)HTML語(yǔ)言2制作一個(gè)網(wǎng)頁(yè)31.1什么是網(wǎng)頁(yè)1.2網(wǎng)頁(yè)類(lèi)型網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)兩種類(lèi)型。1．靜態(tài)網(wǎng)頁(yè)在網(wǎng)站設(shè)計(jì)中，使用純HTML格式的網(wǎng)頁(yè)通常稱(chēng)為靜態(tài)網(wǎng)頁(yè)，它運(yùn)行于客戶(hù)端。2．動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)是指使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁(yè)，動(dòng)態(tài)網(wǎng)頁(yè)會(huì)根據(jù)編寫(xiě)的程序訪問(wèn)連接的數(shù)據(jù)庫(kù)，可以與瀏覽者進(jìn)行交互，也稱(chēng)為交互式網(wǎng)頁(yè)。1.3網(wǎng)頁(yè)基本元素網(wǎng)頁(yè)包括文本、圖像、音頻、視頻、動(dòng)畫(huà)和超鏈接等基本元素。1．文本文本是網(wǎng)頁(yè)傳遞信息的主要載體。文本傳輸速度快，而且網(wǎng)頁(yè)中的文本可以設(shè)置其大小、顏色、段落、樣式等屬性，風(fēng)格獨(dú)特的網(wǎng)頁(yè)文本設(shè)置會(huì)給瀏覽者賞心悅目的感覺(jué)。2．圖像圖像給人的視覺(jué)效果要比文字強(qiáng)烈得多，在網(wǎng)頁(yè)中靈活運(yùn)用圖像可以起到點(diǎn)綴的效果。網(wǎng)頁(yè)上的圖像文件大部分是JPEG格式或GIF格式，因?yàn)樗鼈兂司哂袎嚎s比例高的特點(diǎn)外，還具有跨平臺(tái)特性。1.3網(wǎng)頁(yè)基本元素圖像在網(wǎng)頁(yè)中的應(yīng)用主要有以下幾種形式。圖像標(biāo)題：在網(wǎng)頁(yè)中一般都有標(biāo)題，起到導(dǎo)航的作用，應(yīng)用圖像標(biāo)題可以使網(wǎng)頁(yè)更加美觀。網(wǎng)頁(yè)背景：圖像的另一個(gè)重要應(yīng)用是作為網(wǎng)頁(yè)背景，特別是一些個(gè)人網(wǎng)站，應(yīng)用圖像背景比較多。網(wǎng)頁(yè)主圖：在網(wǎng)頁(yè)上，除了用小的圖片美化網(wǎng)頁(yè)外，有時(shí)還會(huì)用一些大的圖片來(lái)突出網(wǎng)頁(yè)主題，特別是網(wǎng)站主頁(yè)中用主圖的比較多。超鏈接：有時(shí)可以用圖片取代文字作為超鏈接按鈕，使網(wǎng)頁(yè)更加美觀。1.3網(wǎng)頁(yè)基本元素3．動(dòng)畫(huà)動(dòng)畫(huà)是網(wǎng)頁(yè)最活躍的元素，有創(chuàng)意的動(dòng)畫(huà)是吸引瀏覽者的有效方法。網(wǎng)頁(yè)中的動(dòng)畫(huà)不宜太多，否則會(huì)使瀏覽者眼花繚亂。在網(wǎng)頁(yè)中加入的動(dòng)畫(huà)一般是GIF格式或者SWF格式的動(dòng)畫(huà)。4．音頻和視頻通過(guò)音頻進(jìn)行人機(jī)交流逐步成為網(wǎng)頁(yè)交互的重要手段。瀏覽網(wǎng)頁(yè)時(shí)，一些網(wǎng)頁(yè)設(shè)置了背景音樂(lè)，伴隨著優(yōu)美的樂(lè)曲，瀏覽者在網(wǎng)上沖浪會(huì)更加愜意。在網(wǎng)頁(yè)中加入視頻，會(huì)使網(wǎng)頁(yè)具有較強(qiáng)的吸引力。常見(jiàn)的網(wǎng)絡(luò)視頻有視頻短片、遠(yuǎn)程教學(xué)、視頻聊天、視頻點(diǎn)播和DV播放等。1.3網(wǎng)頁(yè)基本元素5．超鏈接超鏈接是最為有趣的網(wǎng)頁(yè)元素。在網(wǎng)頁(yè)中單擊超鏈接對(duì)象，可實(shí)現(xiàn)在不同頁(yè)面之間跳轉(zhuǎn)、訪問(wèn)其他網(wǎng)站、下載文件等操作。當(dāng)鼠標(biāo)移至超鏈接對(duì)象上時(shí)，鼠標(biāo)會(huì)變成小手形狀，單擊即可跳轉(zhuǎn)到相應(yīng)地址（URL）的網(wǎng)頁(yè)。站內(nèi)鏈接：在一個(gè)網(wǎng)站的各個(gè)網(wǎng)頁(yè)之間，或者網(wǎng)站的子網(wǎng)站之間創(chuàng)建的超鏈接，瀏覽者可以迅速找到自己需要的信息。站外鏈接：在制作的網(wǎng)站上放置一些與網(wǎng)站主題有關(guān)的對(duì)外鏈接，不但可以把好的網(wǎng)站介紹給瀏覽者，而且能使瀏覽者樂(lè)意再度光臨該網(wǎng)站。如果對(duì)外鏈接信息很多，可以進(jìn)行分類(lèi)。1.4網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)是由一些基本版塊組成的，主要包括Logo圖標(biāo)、導(dǎo)航條、Banner、內(nèi)容版塊、版尾版塊等，如下圖所示。1.5網(wǎng)站建設(shè)的一般流程1．網(wǎng)站策劃網(wǎng)站策劃是網(wǎng)站建設(shè)的第一階段，總的目的是根據(jù)調(diào)查分析，明確建設(shè)網(wǎng)站的目的與內(nèi)容。網(wǎng)站策劃包含確定要策劃的網(wǎng)站所屬行業(yè)、明確網(wǎng)站的主題、用戶(hù)定位與用戶(hù)需求分析、確定網(wǎng)站的配色方案、規(guī)劃網(wǎng)站結(jié)構(gòu)等。其中，規(guī)劃網(wǎng)站結(jié)構(gòu)可以用樹(shù)狀結(jié)構(gòu)把每個(gè)頁(yè)面的內(nèi)容大綱列出來(lái)，要考慮每個(gè)頁(yè)面之間的鏈接關(guān)系，這是評(píng)價(jià)一個(gè)網(wǎng)站優(yōu)劣的重要標(biāo)志。1.5網(wǎng)站建設(shè)的一般流程2．收集網(wǎng)站的素材和內(nèi)容網(wǎng)站建設(shè)過(guò)程中常常需要大量的素材，包括文字、圖片、音頻、視頻和動(dòng)畫(huà)等。素材可以從圖書(shū)、報(bào)刊、移動(dòng)磁盤(pán)以及多媒體上收集，也可以自己制作或從網(wǎng)上搜集。3．設(shè)計(jì)制作網(wǎng)站網(wǎng)站的主題和風(fēng)格明確后，就應(yīng)該圍繞網(wǎng)站主題制作網(wǎng)頁(yè)內(nèi)容、設(shè)計(jì)題材欄目等。網(wǎng)站是由多個(gè)網(wǎng)頁(yè)組成的，設(shè)計(jì)制作網(wǎng)頁(yè)是一個(gè)復(fù)雜而細(xì)致的過(guò)程，一定要按照先大后小、先簡(jiǎn)單后復(fù)雜的次序來(lái)進(jìn)行制作。1.5網(wǎng)站建設(shè)的一般流程4．網(wǎng)站測(cè)試與發(fā)布在網(wǎng)站發(fā)布之前，通常要檢查網(wǎng)頁(yè)在不同版本瀏覽器中的顯示情況，尤其是制作大型的或訪問(wèn)量高的網(wǎng)站，這個(gè)步驟十分重要。由于各種版本瀏覽器支持HTML語(yǔ)言的版本不同，所以要讓網(wǎng)頁(yè)能夠在大多數(shù)瀏覽器中正常顯示，需要仔細(xì)地檢查，必要時(shí)可以對(duì)網(wǎng)站的特殊效果做舍棄處理。網(wǎng)站的發(fā)布是指將制作的網(wǎng)站上傳到指定的主機(jī)服務(wù)器上。在網(wǎng)站測(cè)試無(wú)誤后，就可以通過(guò)Dreamweaver或FTP軟件發(fā)布網(wǎng)站了。1.5網(wǎng)站建設(shè)的一般流程5．網(wǎng)站推廣與維護(hù)網(wǎng)站推廣的目的在于讓盡可能多的潛在用戶(hù)了解并訪問(wèn)網(wǎng)站。網(wǎng)站推廣需要借助一定的網(wǎng)絡(luò)工具和資源，常用的網(wǎng)站推廣工具和資料包括搜索引擎、分類(lèi)目錄、電子郵件、網(wǎng)站鏈接、分類(lèi)廣告、電子書(shū)、免費(fèi)軟件、網(wǎng)絡(luò)廣告媒體、傳統(tǒng)推廣渠道等。網(wǎng)站發(fā)布完成后，還要進(jìn)行管理和維護(hù)，就像一棟房子或者一部汽車(chē)，如果長(zhǎng)期擱置無(wú)人維護(hù)，必然變成朽木或者廢鐵。網(wǎng)站也是一樣，只有不斷地更新、管理和維護(hù)，才能留住已有的瀏覽者并且吸引新的瀏覽者。補(bǔ)充

色彩作為視覺(jué)信息，具有強(qiáng)烈的知覺(jué)力、辨別力、象征力和沖擊力。色彩無(wú)時(shí)無(wú)刻不在影響著人們的生活，不同的顏色有著不同的含義，給人各種豐富的感覺(jué)和聯(lián)想，如下所述。紅色：熱情、奔放、喜悅、莊嚴(yán)藍(lán)色：天空、清爽、神秘、知性綠色：植物、生命、生機(jī)紫色：浪漫、富貴黃色：高貴、富有、燦爛、活潑黑色：嚴(yán)肅、夜晚、沉著灰色：莊重、沉穩(wěn)白色：純潔、簡(jiǎn)單、潔凈任務(wù)目標(biāo)

了解網(wǎng)頁(yè)的基礎(chǔ)知識(shí)

1認(rèn)識(shí)HTML語(yǔ)言2制作一個(gè)網(wǎng)頁(yè)32.1網(wǎng)頁(yè)常用程序設(shè)計(jì)語(yǔ)言1．網(wǎng)頁(yè)標(biāo)簽語(yǔ)言HTMLHTML是HyperTextMarkupLanguage的縮寫(xiě)，即超文本標(biāo)簽語(yǔ)言。用HTML編寫(xiě)的超文本文檔稱(chēng)為HTML文檔，該文檔以.html或.htm為文件擴(kuò)展名，它不需要編譯工具，可直接在瀏覽器中執(zhí)行。HTML是網(wǎng)頁(yè)技術(shù)的核心與基礎(chǔ)，不管是制作靜態(tài)網(wǎng)頁(yè)，還是編輯動(dòng)態(tài)交互網(wǎng)頁(yè)，都離不開(kāi)HTML語(yǔ)言。所以，要靈活地實(shí)現(xiàn)想要的網(wǎng)頁(yè)效果，必須了解HTML語(yǔ)言。2.1網(wǎng)頁(yè)常用程序設(shè)計(jì)語(yǔ)言2．層疊樣式表CSSCSS通過(guò)被稱(chēng)為CSS樣式或樣式表，它是CascadingStyleSheets的縮寫(xiě)，即層疊樣式表。CSS樣式主要用于設(shè)置HTML頁(yè)面的外觀，也就是定義網(wǎng)頁(yè)的編排、文本內(nèi)容顯示效果、圖片的外形以及特殊效果等。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)元素進(jìn)行格式化。3．網(wǎng)頁(yè)腳本語(yǔ)言JavaScriptJavaScript是Web頁(yè)面中的一種腳本語(yǔ)言，通過(guò)JavaScript可以將靜態(tài)頁(yè)面轉(zhuǎn)變成支持用戶(hù)交互并響應(yīng)事件的動(dòng)態(tài)頁(yè)面。2.1網(wǎng)頁(yè)常用程序設(shè)計(jì)語(yǔ)言2．層疊樣式表CSSCSS通過(guò)被稱(chēng)為CSS樣式或樣式表，它是CascadingStyleSheets的縮寫(xiě)，即層疊樣式表。CSS樣式主要用于設(shè)置HTML頁(yè)面的外觀，也就是定義網(wǎng)頁(yè)的編排、文本內(nèi)容顯示效果、圖片的外形以及特殊效果等。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)元素進(jìn)行格式化。3．網(wǎng)頁(yè)腳本語(yǔ)言JavaScriptJavaScript是Web頁(yè)面中的一種腳本語(yǔ)言，通過(guò)JavaScript可以將靜態(tài)頁(yè)面轉(zhuǎn)變成支持用戶(hù)交互并響應(yīng)事件的動(dòng)態(tài)頁(yè)面。2.2

HTML5開(kāi)發(fā)工具及原理HTML5是超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改，并制定了規(guī)范的標(biāo)準(zhǔn)，具有很好的兼容性。Web瀏覽器用來(lái)瀏覽HTML5文檔，HTML5文檔顯示原理可概括為：HTML5使用一組約定的標(biāo)簽符號(hào)，對(duì)Web上的各種信息進(jìn)行標(biāo)記，瀏覽器會(huì)解釋這些標(biāo)記符號(hào)并以它們指定的格式把相應(yīng)的內(nèi)容顯示在屏幕上，而標(biāo)記符號(hào)本身不會(huì)在屏幕上顯示出來(lái)。2.3網(wǎng)頁(yè)的HTML結(jié)構(gòu)下面是一個(gè)典型的HTML文檔結(jié)構(gòu)。<html>表示HTML文檔的開(kāi)始

<head>

網(wǎng)頁(yè)的頭部信息，這部分主要定義了一些瀏覽器用于顯示文檔的參數(shù)，如<title>、<meta>等

</head>

<body>

文檔主體

</body></html>表示HTML文檔的結(jié)束2.3網(wǎng)頁(yè)的HTML結(jié)構(gòu)2.3網(wǎng)頁(yè)的HTML結(jié)構(gòu)書(shū)寫(xiě)HTML代碼時(shí)應(yīng)注意以下幾點(diǎn)：HTML標(biāo)簽及屬性中字母不區(qū)分大小寫(xiě)，如<html>與<HTML>對(duì)瀏覽器來(lái)說(shuō)是完全相同的。標(biāo)簽名與左尖括號(hào)之間不能留有空格，如<body>是錯(cuò)誤的。屬性要寫(xiě)在開(kāi)始標(biāo)簽的尖括號(hào)中，放在標(biāo)簽名之后，并且與標(biāo)簽名之間要有空格；多個(gè)屬性之間也要有空格；屬性值最好用單引號(hào)或雙引號(hào)括起來(lái)，且引號(hào)一定要是英文的引號(hào)，不能是中文的引號(hào)。結(jié)束標(biāo)簽要書(shū)寫(xiě)正確，不能忘掉斜杠。任務(wù)目標(biāo)

了解網(wǎng)頁(yè)的基礎(chǔ)知識(shí)

1認(rèn)識(shí)HTML語(yǔ)言2制作一個(gè)網(wǎng)頁(yè)33使用HTML制作網(wǎng)頁(yè)1．文本與段落標(biāo)簽（1）標(biāo)題標(biāo)簽<hn>…</hn>。用于設(shè)置網(wǎng)頁(yè)中各個(gè)層次的標(biāo)題文字，被設(shè)置的文字將以黑體顯示，并自成段落。共分為6級(jí)，n取1～6之間的正整數(shù)。其中<h1>…</h1>表示最大的標(biāo)題，<h6>…</h6>表示最小的標(biāo)題。align屬性用于設(shè)置標(biāo)題的對(duì)齊方式，其參數(shù)為left、center、right。語(yǔ)法格式舉例：<h3align="center">標(biāo)題部分</h3>（2）段落標(biāo)簽<p>…</p>?？蓪?shí)現(xiàn)分段，即在段落開(kāi)始時(shí)用<p>，在段落結(jié)束時(shí)用</p>。align屬性用于設(shè)置段落對(duì)齊方式，其參數(shù)為left（默認(rèn)）、center、right。語(yǔ)法格式舉例：<palign="center">段落內(nèi)容</p>3使用HTML制作網(wǎng)頁(yè)（3）換行標(biāo)簽<br>?？墒刮臋n在該標(biāo)簽處強(qiáng)制換行，這一點(diǎn)與<p>相同。但與<p>不同的是，換行后行與行之間不留空白行，頁(yè)面看起來(lái)比較緊湊。<br>屬于單標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。（4）水平線(xiàn)標(biāo)簽<hr>?？梢栽陧?yè)面中生成一條水平線(xiàn)，用于分隔文檔或者修飾網(wǎng)頁(yè)。<hr>屬于單標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。語(yǔ)法格式舉例：<hralign="center"size="4"width="80%"color="red">3使用HTML制作網(wǎng)頁(yè)屬

性

名功

能size設(shè)置水平線(xiàn)的粗細(xì)，屬性值為整數(shù)，單位為像素width設(shè)置水平線(xiàn)的寬度，屬性值單位為像素或%，如width="300"align設(shè)置水平線(xiàn)的對(duì)齊方式，取值left、center、rightcolor設(shè)置水平線(xiàn)的顏色，默認(rèn)值black3使用HTML制作網(wǎng)頁(yè)（5）文本的格式化標(biāo)簽在HTML網(wǎng)頁(yè)中，為了讓文字富有變化，如粗體、下畫(huà)線(xiàn)效果等，HTML準(zhǔn)備了專(zhuān)門(mén)的文本格式化標(biāo)簽。標(biāo)

簽功

能示

例<b>…</b>加粗文字HTML文本示例<i>…</i>斜體文字

HTML文本示例<strong>…</strong>用于強(qiáng)調(diào)，效果和<b>標(biāo)簽相同HTML文本示例<em>…</em>用于強(qiáng)調(diào)，效果和<i>標(biāo)簽相同

HTML文本示例<del>…</del>刪除線(xiàn)

HTML文本示例<ins>…</ins>增加下畫(huà)線(xiàn)

HTML文本示例_…下標(biāo)X2^…上標(biāo)X23使用HTML制作網(wǎng)頁(yè)（6）特殊字符。由于HTML文檔是ASCII文本，只支持ASCII字符。但是，還有一些有特殊用途的字符在HTML中無(wú)法直接顯示成原來(lái)的樣式，若要在瀏覽器中顯示這些字符就必須輸入特殊字符來(lái)代替。HTML5常見(jiàn)特殊字符實(shí)體代碼如下表所示。3使用HTML制作網(wǎng)頁(yè)2．列表標(biāo)簽可以將網(wǎng)頁(yè)中相關(guān)的信息有條不紊地組織起來(lái)。列表標(biāo)簽可分為：無(wú)序列表、有序列表、嵌套列表和自定義列表，下面介紹前兩種常用的列表。（1）無(wú)序列表標(biāo)簽<ul>…</ul>。每一項(xiàng)需要用<li>標(biāo)簽結(jié)合使用。<ul>的常用屬性只有一個(gè)type，用來(lái)設(shè)定列表項(xiàng)前面出現(xiàn)的符號(hào)，disc：列表項(xiàng)前面加上符號(hào)●。circle：列表項(xiàng)前面加上符號(hào)○。square：列表項(xiàng)前面加上符號(hào)■。3使用HTML制作網(wǎng)頁(yè)（2）有序列表標(biāo)簽<ol>…</ol>。列表中每一項(xiàng)的前面會(huì)加上編號(hào)，編號(hào)會(huì)根據(jù)列表項(xiàng)的增刪自動(dòng)調(diào)整。每一項(xiàng)需要與<li>標(biāo)簽結(jié)合使用。start屬性用于設(shè)置編號(hào)的起始值，如start="3"，則列表編號(hào)從3開(kāi)始。type屬性用來(lái)設(shè)定列表的編號(hào)形式,如：

1：用阿拉伯?dāng)?shù)字1、2、3、…編號(hào)。

a：用小寫(xiě)英文字母a、b、c、…編號(hào)。

A：用大寫(xiě)英文字母A、B、C、…編號(hào)。

i：用小寫(xiě)羅馬字母ⅰ、ⅱ、ⅲ、…編號(hào)。

I：用大寫(xiě)羅馬字母Ⅰ、Ⅱ、Ⅲ、…編號(hào)。3使用HTML制作網(wǎng)頁(yè)（3）<li>…</li>。<li>標(biāo)簽定義列表項(xiàng)，屬性：

type：用來(lái)設(shè)定列表項(xiàng)的符號(hào)，如果<li>用在<ul>里，屬性取值為disc、circle或square；如果<li>用在<ol>里，則屬性取值為1、a、A、i或I。

value：此屬性?xún)H當(dāng)<li>用在<ol>里有效，屬性值為一個(gè)整數(shù)，用來(lái)設(shè)定當(dāng)前項(xiàng)的編號(hào)，其后的項(xiàng)目編號(hào)將以此值為起始數(shù)目遞增，前面各項(xiàng)不受影響。3使用HTML制作網(wǎng)頁(yè)3．超鏈接標(biāo)簽<a>..</a>超鏈接是從一個(gè)網(wǎng)頁(yè)轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)的途徑，它是網(wǎng)頁(yè)的重要組成部分。其最重要的屬性是href屬性，它指定鏈接的目標(biāo)URL。定義的語(yǔ)法：<ahref="資源地址"target="目標(biāo)窗口"title="鏈接提示文字">鏈接對(duì)象</a>其中href屬性定義要鏈接的目標(biāo)地址；target屬性用于指定打開(kāi)鏈接的目標(biāo)窗口；title屬性指定指向鏈接時(shí)所提示的文字。3使用HTML制作網(wǎng)頁(yè)屬

性

功

能href鏈接所指的URL地址，即目標(biāo)地址，屬性值可以使用絕對(duì)路徑或相對(duì)路徑target指定打開(kāi)鏈接的目標(biāo)窗口，取值_parent（在父窗口中打開(kāi)）、_blank（在新窗口打開(kāi)）、_self（在原窗口中打開(kāi)，默認(rèn)值）、_top（在瀏覽器的整個(gè)窗口中打開(kāi)）title指定指向鏈接時(shí)所提示的文字3使用HTML制作網(wǎng)頁(yè)4．絕對(duì)路徑與相對(duì)路徑絕對(duì)路徑：提供文檔完整的URL地址，例如：相對(duì)路徑：以當(dāng)前文件所在路徑為起點(diǎn)，進(jìn)行相對(duì)文件的查找。任務(wù)1.2使用HTML制作簡(jiǎn)單的網(wǎng)頁(yè)相對(duì)路徑名內(nèi)

涵h(huán)ref="index.html"index.htm是本地當(dāng)前路徑下的文件href="web/index.html"index.htm是本地當(dāng)前路徑下web子目標(biāo)下的文件href="../index.html"index.htm是本地當(dāng)前目錄的上一級(jí)子目錄下的文件href="../../index.html"index.htm是本地當(dāng)前目標(biāo)的上兩級(jí)子目錄下的文件3使用HTML制作網(wǎng)頁(yè)5．圖像標(biāo)簽<img>標(biāo)簽定義HTML頁(yè)面中的圖像，單標(biāo)簽。使用<img>標(biāo)簽在網(wǎng)頁(yè)中加入圖像的語(yǔ)法舉例：<imgsrc="image/tu.jpg"width="300"height="240"/>任務(wù)1.2使用HTML制作簡(jiǎn)單的網(wǎng)頁(yè)3使用HTML制作網(wǎng)頁(yè)6．表格標(biāo)簽表格由一行或多行組成，每行又由一個(gè)或多個(gè)單元格組成。HTML中一個(gè)表格通常是由<table>、<tr>、<td>3個(gè)標(biāo)簽來(lái)定義的，這3個(gè)標(biāo)簽分別表示表格、表格行、單元格。在對(duì)表格進(jìn)行設(shè)置時(shí)，優(yōu)先順序?yàn)椋簡(jiǎn)卧駜?yōu)先于行，行優(yōu)先于表格。表格的基本結(jié)構(gòu)：<table><caption>表格標(biāo)題</caption><tr><td>單元格1</td><td>單元格2</td>

</tr></table>3使用HTML制作網(wǎng)頁(yè)6．表格標(biāo)簽（1）<table>標(biāo)簽。它是一個(gè)容器標(biāo)簽，用于定義一個(gè)表格。<table>常用屬性如下。width：設(shè)定表格的寬度，屬性值可以是相對(duì)的或絕對(duì)的。align：設(shè)定表格水平對(duì)齊方式，屬性值可以是left、center、right三者中之一。border：設(shè)定表格邊框的粗度，屬性值為整數(shù)、像素。cellpadding：設(shè)定邊距的大小，也就是單元格中內(nèi)容與單元格邊框之間留的空白大小，屬性值為整數(shù)，單位是像素。3使用HTML制作網(wǎng)頁(yè)cellspacing：設(shè)定單元格與單元格之間的距離，屬性值為整數(shù)，單位是像素。bgcolor：設(shè)定整個(gè)表格的背景顏色。background：設(shè)定表格的背景圖像，屬性值為圖像文件的相對(duì)路徑或絕對(duì)路徑。3使用HTML制作網(wǎng)頁(yè)（2）<tr>標(biāo)簽。

用來(lái)標(biāo)識(shí)表格行，是單元格（<td>或<th>）的容器，使用時(shí)要放在<table>容器里。<tr>常用的屬性如下。align：設(shè)定這一行單元格中內(nèi)容的水平對(duì)齊方式，屬性值為left、center或right。bgcolor：用來(lái)設(shè)定這一行的背景顏色。valign：設(shè)定這一行單元格中內(nèi)容的垂直對(duì)齊方式，可取屬性值有：top（頂端對(duì)齊）、middle（中間對(duì)齊）、bottom（底端對(duì)齊）。3使用HTML制作網(wǎng)頁(yè)（3）<td>標(biāo)簽。表示一個(gè)單元格。align：設(shè)定單元格中內(nèi)容的水平對(duì)齊方式，屬性值為left、center或right。background：設(shè)定單元格的背景圖像。bgcolor：設(shè)定單元格的背景顏色。colspan：在水平方向向右合并單元格，屬性值為跨列的數(shù)目height：設(shè)定單元格的高度，屬性值可以是像素?cái)?shù)，也可以是占整個(gè)表格高度的百分比。3使用HTML制作網(wǎng)頁(yè)nowrap：加入nowrap一詞可以防止單元格中內(nèi)容寬度大于單元格寬度時(shí)自動(dòng)換行。rowspan：在垂直方向向下合并單元格，屬性值為跨行的數(shù)目。valign：設(shè)定單元格中內(nèi)容的垂直對(duì)齊方式，屬性值為top、middle或bottom。width：設(shè)定單元格的寬度，屬性值可以是像素?cái)?shù)，也可以是占整個(gè)表格寬度的百分比。

3使用HTML制作網(wǎng)頁(yè)7．表單標(biāo)簽表單的作用是從訪問(wèn)Web站點(diǎn)的用戶(hù)那里獲取信息。訪問(wèn)者可以使用諸如文本框、列表框、復(fù)選框以及單選按鈕等表單對(duì)象輸入信息，然后單擊某個(gè)按鈕提交這些信息。（1）<form>標(biāo)簽。<form>用來(lái)定義一個(gè)表單區(qū)域，它是一個(gè)容器標(biāo)簽。3使用HTML制作網(wǎng)頁(yè)（2）文本框。文本框允許用戶(hù)輸入單行信息。文本框常用屬性如下：name：設(shè)定文本框的名稱(chēng)，必須唯一標(biāo)識(shí)，名稱(chēng)字符串中不能包含空格或特殊字符，可以使用字母、數(shù)字、字符和下畫(huà)線(xiàn)“_”的任意組合。表單提交到服務(wù)器后需要使用指定的名稱(chēng)來(lái)獲取文本框的值。

value：設(shè)定文本框的默認(rèn)值，即用戶(hù)輸入前文本框里顯示的文本。size：設(shè)定文本框最多可顯示的字符數(shù)，也就是文本框的長(zhǎng)度。maxlength：用來(lái)設(shè)定文本框中最多可輸入的字符數(shù)。通過(guò)此屬性可以將郵政編碼限制為6位數(shù)，將密碼限制為10個(gè)字符等。<inputtype="text"/>3使用HTML制作網(wǎng)頁(yè)（3）密碼框。密碼框用來(lái)輸入密碼，當(dāng)用戶(hù)在密碼框中輸入密碼時(shí)，輸入內(nèi)容顯示為項(xiàng)目符號(hào)或星號(hào)，以保護(hù)它不被其他人看到。定義密碼框的語(yǔ)法為:<inputname="textfield"type="password"id="textfield"size="8"maxlength="8"/>密碼框的屬性設(shè)置與文本框相同。

3使用HTML制作網(wǎng)頁(yè)（4）單選按鈕。使用戶(hù)只能從一組選項(xiàng)中選擇一個(gè)選項(xiàng)，如性別的選擇。定義單選按鈕的語(yǔ)法為：<inputtype="radio"/>name：設(shè)定單選按鈕的名稱(chēng)。同一組中的所有單選按鈕，name屬性必須設(shè)置相同的值。value：設(shè)定在單選按鈕被選中時(shí)發(fā)送給服務(wù)器的值。checked：確定在瀏覽器中載入表單時(shí)，該單選按鈕是否被選中。如果開(kāi)始標(biāo)簽里加入checked一詞，則初始被選中。3使用HTML制作網(wǎng)頁(yè)（5）復(fù)選框。使用戶(hù)從一組選項(xiàng)中選擇多個(gè)選項(xiàng)。定義復(fù)選框的語(yǔ)法為：<inputtype="checkbox">name：設(shè)定復(fù)選框的名稱(chēng)，作用同文本框的name。同一組中的所有復(fù)選框的name屬性必須設(shè)置不同的值。value：設(shè)定在復(fù)選框被選中時(shí)發(fā)送給服務(wù)器的值。checked：確定在瀏覽器中載入表單時(shí)，該復(fù)選框是否被選中。如果開(kāi)始標(biāo)簽里加入checked一詞，初始被選中。3使用HTML制作網(wǎng)頁(yè)（6）下拉菜單?？墒乖L問(wèn)者從一個(gè)列表中選擇一個(gè)項(xiàng)目。下拉列表在瀏覽器中顯示時(shí)僅有一個(gè)選項(xiàng)可見(jiàn)，若要顯示其他選項(xiàng)，須單擊下拉箭頭。定義下拉菜單的語(yǔ)法為：<selectname="from"><optionvalue="shandong">山東省</option><optionselected>濟(jì)南市</option></select>3使用HTML制作網(wǎng)頁(yè)（8）文件域。用戶(hù)可以選擇計(jì)算機(jī)中的文件并將其上傳到服務(wù)器。文件域的外觀與其他文本框類(lèi)似，只是文件域還包含一個(gè)“瀏覽”按鈕。用戶(hù)可以手動(dòng)輸入要上傳的文件的路徑，也可以使用【瀏覽】按鈕定位并選擇文件。若要上傳文件，<form>的method屬性必須設(shè)置為post，<form>必須加上enctype="mu