jsp第一章web網(wǎng)頁設(shè)計基礎(chǔ)_第1頁
jsp第一章web網(wǎng)頁設(shè)計基礎(chǔ)_第2頁
jsp第一章web網(wǎng)頁設(shè)計基礎(chǔ)_第3頁
jsp第一章web網(wǎng)頁設(shè)計基礎(chǔ)_第4頁
jsp第一章web網(wǎng)頁設(shè)計基礎(chǔ)_第5頁
已閱讀5頁，還剩178頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

JSP編程教程授課教師：劉紅梅掌握HTML語言；掌握Servlet和會話技術(shù)掌握基于Servlet的MVC模式掌握在JSP數(shù)據(jù)庫中使用數(shù)據(jù)庫的技術(shù)運用JSP技術(shù)開發(fā)一個應(yīng)用網(wǎng)站課程目標(biāo)第一章緒論兩種WEB開發(fā)模式介紹網(wǎng)站相關(guān)概念網(wǎng)站開發(fā)相關(guān)技術(shù)JSP網(wǎng)頁HTML語言C/S（Client/Server）：客戶/服務(wù)器模式。客戶端需要安裝專用的客戶端軟件與服務(wù)器進(jìn)行數(shù)據(jù)交互。B/S（Brower/Server）：瀏覽器服務(wù)器模式?？蛻舳松现恍璋惭b一個瀏覽器（Browser），瀏覽器通過WebServer同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互。1、WEB開發(fā)模式QQ客戶端WEBQQWebQQ為大家提供了聊天記錄的全漫游，不論你走到哪里，都替你保存7天的WebQQ聊天消息，方便你隨時查閱，局域網(wǎng)特定用戶群中資源共享B/S即Browser/Server數(shù)據(jù)庫服務(wù)器學(xué)生機1學(xué)生機2學(xué)生機n需要安裝客戶端軟件服務(wù)器Internet全球用戶群中資源共享美國用戶中國用戶數(shù)據(jù)庫服務(wù)器無需安裝客戶端軟件C/S即Client/Server可維護性響應(yīng)速度界面設(shè)計服務(wù)器負(fù)載C/S需要對每個客戶端升級客戶端與數(shù)據(jù)庫直連，響應(yīng)速度快界面設(shè)計滿足用戶的個性化需求客戶端與服務(wù)器都能處理任務(wù)，對客戶機要求高B/S幾種在總服務(wù)器上進(jìn)行升級Web應(yīng)用程序動態(tài)刷新，響應(yīng)速度慢個性化特點低大部分工作由服務(wù)器完成，客戶端僅使用瀏覽器。C/S與B/S對比表數(shù)據(jù)安全性數(shù)據(jù)一致性數(shù)據(jù)實時性C/S每個數(shù)據(jù)點上數(shù)據(jù)的安全將影響整個應(yīng)用系統(tǒng)的數(shù)據(jù)安全同步各客戶端的數(shù)據(jù)后，服務(wù)器才能得到最終數(shù)據(jù)不能實時看到當(dāng)前業(yè)務(wù)情況B/S數(shù)據(jù)直接保存在總的數(shù)據(jù)庫中數(shù)據(jù)集中存放，不存在數(shù)據(jù)一致性問題可以實時看到當(dāng)前業(yè)務(wù)情況C/S與B/S對比表（續(xù)）以校園一卡通數(shù)據(jù)為例，了解兩種模式關(guān)于數(shù)據(jù)的安全性、一致性和實時性的不同。Web服務(wù)器：Web服務(wù)器，在網(wǎng)絡(luò)中為實現(xiàn)信息發(fā)布、資料查詢、數(shù)據(jù)處理等諸多應(yīng)用而搭建基本平臺的服務(wù)器。有時，我們也常常稱Web服務(wù)器叫Web容器。常用的服務(wù)器有：Tomcat、IIS，Apach，GFEGoogle，Zeus等）2、網(wǎng)站相關(guān)概念網(wǎng)站指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（超文本標(biāo)記語言）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。我們可以利用網(wǎng)站來發(fā)布資訊，或者提供相關(guān)的網(wǎng)絡(luò)服務(wù)。（百度百科）網(wǎng)站與服務(wù)器的關(guān)系網(wǎng)站必須放在服務(wù)器上才能訪問一個服務(wù)器上可以放多個網(wǎng)站網(wǎng)站可以通過服務(wù)器的地址訪問網(wǎng)頁網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺，一般使用HTML/XHTML,php,asp,jsp等語言編寫，可以嵌入文本、圖形、音視頻等信息。主頁主頁可以認(rèn)為是一組網(wǎng)頁中最主要的網(wǎng)頁，是進(jìn)入其他網(wǎng)頁的起始網(wǎng)頁，主頁通過超鏈接鏈接到其他網(wǎng)頁。超鏈接Web上的信息是由彼此關(guān)聯(lián)的文檔組成的，而使其連接在一起的是超鏈接。超鏈接是HTML語言中的一個標(biāo)記，標(biāo)記中顯示的內(nèi)容較之其他內(nèi)容有明顯特征，如顏色不同、帶有下畫線等。B/S中瀏覽器端與服務(wù)器端采用請求/響應(yīng)模式進(jìn)行交互應(yīng)用服務(wù)器數(shù)據(jù)庫服務(wù)器IEIE解釋執(zhí)行HTML文件從服務(wù)器端檢索到的信息返回響應(yīng)客戶端的請求信息發(fā)送請求訪問數(shù)據(jù)庫返回結(jié)果運行服務(wù)器端腳本程序1用戶輸入234網(wǎng)頁設(shè)計：即網(wǎng)站美工，如圖像處理PhotoShop，色彩搭配，網(wǎng)頁布局等。頁面制作：即web前端架構(gòu)，由于網(wǎng)頁效果越來越豐富，瀏覽器增多，對頁面要求也越來越高，需要精通html/css,了解html/css,熟悉js等腳本語言。程序開發(fā)：現(xiàn)在主流的有，php，jsp，根據(jù)項目需求實現(xiàn)相應(yīng)的Web功能。3、網(wǎng)站開發(fā)相關(guān)技術(shù)在傳統(tǒng)的HTML頁面文件中加入Java程序片和JSP標(biāo)簽，就構(gòu)成了一個JSP頁面。JSP頁面可由5種元素組合而成：①普通的HTML標(biāo)記符；②JSP標(biāo)記，如指令標(biāo)記、動作標(biāo)記；③變量和方法的聲明；④Java程序片；⑤Java表達(dá)式。4、JSP網(wǎng)頁的組成HTML即超文本標(biāo)記語言，是全球廣域網(wǎng)上描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML包含了一對打開和關(guān)閉的標(biāo)記，其中有屬性和值。標(biāo)記描述了每個網(wǎng)頁上的組件，如文本格式、段落、表格、圖像等。5、HTML語言一、標(biāo)記語法1.什么是標(biāo)記語法HTML是用于描述功能的符號稱為“標(biāo)記”。比如<html>、<head>、<body>等，都是標(biāo)記，<html>標(biāo)記表示HTML文檔的開始。標(biāo)記在使用時必須用尖括號“<>”括起來。2.單標(biāo)記之所以稱為“單標(biāo)記”，是因為它只需單獨使用就能完整地表達(dá)意思，這類標(biāo)記語法是：<標(biāo)記名稱>最常用的單標(biāo)記<br>,它表示換行。5.1HTML基本語法3.雙標(biāo)記“雙標(biāo)記”由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對使用。始標(biāo)記告訴WEB瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，尾標(biāo)記告訴WEB瀏覽器在這里結(jié)束該功能。始標(biāo)記前加一個正斜杠（/）即為尾標(biāo)記。<標(biāo)記>內(nèi)容</標(biāo)記>其中"內(nèi)容"部分就是要被這對標(biāo)記施加作用的部分。<html></html><body></body><head></head>這三個標(biāo)記是html頁面最基本的標(biāo)記，4.注釋對代碼功能進(jìn)行說明或注釋無效代碼<!—注釋內(nèi)容-->二、屬性語法1.什么是屬性這里的屬性指的是標(biāo)記的屬性2.屬性語法<標(biāo)記名字屬性1屬性2屬性3><hrsize=3align=leftwidth="75%">三、HTML文件的命名1.文件的擴展名要以.htm或.html結(jié)束2.文件名中只可由英文字母、數(shù)字或下劃線組成3.文件名中不要包含特殊字符，比如空格、$4.網(wǎng)站首頁文件名默認(rèn)是index.htm或index.html四、編寫HTML文件的注意事項1.所有標(biāo)記都要有尖括號括起來，瀏覽器就可以知道尖括號內(nèi)的標(biāo)記語言是HTML命令2.對于成對出來的標(biāo)記，最好同時輸入起始標(biāo)記或結(jié)束標(biāo)記，以免忘記3.采用標(biāo)記嵌套的方式可以為同一個信息應(yīng)用多個標(biāo)記，如下<tag1><tag2>同一信息</tag2></tag1>4.在代碼中，不區(qū)分大小寫5.任何空格或回車在代碼中都無效6.標(biāo)記中不要有空格，否則瀏覽器可能無法識別

一個HTML文檔包含頭文件（head）和文件體（body）兩個主要的部分構(gòu)成，基本的文檔結(jié)構(gòu)如下：5.2HTML基本結(jié)構(gòu)<html> <head> <title>標(biāo)題<title> </head>

<body>

</body></html>一、文件頭部內(nèi)容設(shè)置頁面標(biāo)題<title>HTML文件標(biāo)題在瀏覽器的標(biāo)題欄中顯示。每個HTML文件都有一個標(biāo)題，用于說明文檔的屬性?；菊Z法：<html><head><title>test</title></head><body></body></html>定義元信息<meta>在HTML文件中，<meta>標(biāo)記通過一些屬性來定義文件的信息，比如文件的關(guān)鍵字、作者信息、網(wǎng)頁過期時間等。HTML文件的頭部文件可以有多個<meta>標(biāo)記，<meta>不是成對標(biāo)記。基本語法<metahttp-equiv=""name=""content="">語法說明<meta>標(biāo)記中的http-equiv屬性用于設(shè)置一個http的標(biāo)題域，但確定值由content屬性決定，name屬性用于設(shè)置元信息出現(xiàn)形式，conent屬性用于設(shè)置元信息出現(xiàn)的內(nèi)容實例代碼：<html><head>

<title>testkeywords</title><metaname="keywords"content="計算機、英語、經(jīng)管、財會、職場"></head><body>計算機、英語、經(jīng)管、財會、職場</body></html>二、主體內(nèi)容<body>在HTML文件中，主體內(nèi)容被包含在成對的<body></body>標(biāo)記之間，同時<body>標(biāo)記也有很多本身的屬性，例如設(shè)置頁面背景、設(shè)置頁面邊距等。相關(guān)屬性：設(shè)置頁面背景顏色：bgcolor=“”設(shè)置背景圖片：background=“”設(shè)置網(wǎng)頁邊距：topmargin、leftmargin、rightmargin、bottommargin設(shè)置正文顏色：text=“”16種標(biāo)準(zhǔn)顏色的名稱及其十六進(jìn)制數(shù)值。顏

色名

稱十六進(jìn)制數(shù)值顏

色名

稱十六進(jìn)制數(shù)值淡藍(lán)aqua(cyan)#00FFFF海藍(lán)navy#000080黑black#000000橄欖色olive#808000藍(lán)blue#0000FF紫purple#800080紫紅fuchsia(magenta)#FF00FF紅red#FF0000灰gray#808080銀色silver#C0綠green#008000淡青teal#008080淺綠lime#00FF00白white#FFFFFF褐紅maroon#800000黃yellow#FFFF00文字編輯段落編輯列表標(biāo)記圖像標(biāo)記5.3HTML語言的基本元素字幕標(biāo)記表格制作表單制作框架設(shè)計文字編輯一、編輯內(nèi)容1.添加文字基本語法<body>請在此處添加文字</body>語法說明在網(wǎng)頁中添加文字等其他內(nèi)容，都要在<body></body>之間，需要插入文字的地方輸入文字就可以實現(xiàn)。文字編輯2.添加空格在HTML文件中，添加空格的方式與其他文檔添加空格的方式不同，網(wǎng)頁中添加空格是通過代碼控制，在Word、記事本、寫字板中輸入空格可以直接通過鍵盤空格鍵輸入。基本語法<body>

</body>語法說明在HTML文件中，添加空格需要使用代碼" "控制，需要多少個空格就需要添加多少個" "。文字編輯3.添加刪除線在HTML文件中，給需要添加刪除線的文字使用成對的<strike></strike>標(biāo)記，就可以添加刪除線?；菊Z法<body><strike>請在此輸入需要添加刪除線的文字</strike></body>語法說明在成對的<strike></strike>標(biāo)記之間輸入文字，在網(wǎng)頁中顯示改標(biāo)記之間的文字就是被添加了刪除線后的顯示效果。文字編輯二、文字效果1.標(biāo)題文字標(biāo)簽<hn><hn>標(biāo)簽一共為6級基本語法：<hnalign=參數(shù)值>標(biāo)題文字</hn>align屬性值為right，left（默認(rèn)），center文字編輯2.編輯網(wǎng)頁文字樣式基本語法<body><fontface=""size=""color=""></font><body>語法說明在HTML文件中，利用成對標(biāo)記就可以將網(wǎng)頁中的文字根據(jù)需要，對其進(jìn)行樣式的編輯。文字編輯實例代碼：<html><head><title>編輯網(wǎng)頁文字樣式</title></head><body>

沒有使用效果后的文字!<br><fontface="楷體"size="6"color="#00ffff">

使用效果后的文字</font></body></html>文字編輯文字編輯3.設(shè)置文字標(biāo)注標(biāo)記<ruby>在HTML文件中，有時需要對某個字、詞或者某個段進(jìn)行說明，可以通過添加文字的標(biāo)注標(biāo)記來完成對網(wǎng)頁中文字的說明?；菊Z法：<ruby>被說明的文字<rt>文字的標(biāo)注</rt></ruby>語法說明：利用成對的<ruby><rt>標(biāo)記，可以對網(wǎng)頁中的文字進(jìn)行標(biāo)注。(html5支持的標(biāo)記，IE8.0以上版本的瀏覽器才支持。文字編輯<html><head><title>設(shè)置文字標(biāo)注標(biāo)記</title></head><body><ruby>

當(dāng)代最可愛的人

<rt>

志愿軍

</rt></ruby></body></html>文字編輯文字編輯三、文字修飾1.簡單修飾文字基本語法<body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體的文字</i><br><u>添加下劃線的文字</u><br><big>放大</big><br><small>縮小</small><br></body>文字編輯實例代碼：<html><head><title>簡單修飾文字</title></head><body>普通文字的顯示<br><b>加粗的文字</b><br><i>斜體文字</i><br><u>添加下劃線文字</u><br><big>放大</big><br><small>縮小</small><br></body></html>文字編輯文字編輯2.確定文字上下標(biāo)基本語法：<body><sup>上標(biāo)內(nèi)容</sup><br><sub>下標(biāo)內(nèi)容</sub><br></body>語法說明：在HTML文件中，成對的<sup></sup>標(biāo)記可以表示上標(biāo)，利用成對的標(biāo)記<sub></sub>表示下標(biāo)。文字編輯實例代碼：<html><head><title>確定文字上下標(biāo)</title></head><body>

解下面方程：<br>x<sup>2</sup>-3x+2=0<br>

解：x<sub>1</sub>=1;x<sub>2</sub>=2<br></body></html>文字編輯文字編輯3.設(shè)置地址文字在網(wǎng)頁中添加地址文字，是為了更方便地突出顯示聯(lián)系方式，將聯(lián)系人的地址信息突出顯示?；菊Z法：<body><address>請在此添加地址信息</address></body>語法說明：在HTML文件中，利用成對<address></address>標(biāo)記就可以將網(wǎng)頁需要顯示的地址文件突出顯示，其中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會在該元素的前后添加換行。文字編輯實例代碼：<html><head><title>設(shè)置地址文字</title></head><body>

書中有不恰當(dāng)?shù)牡胤?，請您及時與我們聯(lián)系：<br><address>清華大學(xué)出版社</address><br><address>mailto:market@1.</address><br></body></html>文字編輯段落編輯一、段落1.回車<br>2.分段控制標(biāo)簽<P>基本語法<palign="參數(shù)值">段落文字</p>,</p>可以省略參數(shù)值：right，left(默認(rèn))，center段落編輯3.居中顯示文字<center>基本語法：<center>文字內(nèi)容</center>4.預(yù)格式<pre>被包圍在pre元素中的文本通常會保留空格和換行符基本語法：<pre>文字內(nèi)容</pre>5.插入并設(shè)置水平線<hr>基本語法：<hralign="參數(shù)值"size="參數(shù)值"width="參數(shù)值"color="參數(shù)值"noshade>align:水平擺放位置，可選right,left,center（默認(rèn)）size:水平線的粗細(xì)，或線的寬度，以像素為單位width:水平線的長度，以像素或百分比為單位color:水平線的顏色noshade：設(shè)定水平線是否顯示3D陰影段落編輯實例代碼：<html><head><title>預(yù)格式化</title></head><body><pre>

登鸛鵲樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。

</pre></body></html>段落編輯段落編輯實例代碼：<html><head><title>設(shè)置水平線</title></head><body>

<center>添加水平線后的效果</center>

<hrwidth=“70%"size="1"color="#00ffee">財政部有關(guān)負(fù)責(zé)人說，所謂"首購"，是指對于國內(nèi)企業(yè)或科研機構(gòu)生產(chǎn)或開發(fā)的，暫不具有市場競爭力，但符合國民經(jīng)濟發(fā)展要求、代表先進(jìn)技術(shù)發(fā)展方向的首次投向市場的產(chǎn)品，通過政府采購方式由采購人或政府首先采購的行為。<hrwidth="400"size="3"noshade=""color="#00ee99"align="left">版權(quán)©:清華大學(xué)出版社</body></html>段落編輯段落編輯6.插入特殊符號基本語法&&?©?&trade?®￥¥§§段落編輯實例代碼<html> <head> <title>插入特殊符號</title> </head> <body>

下面這段文字是插入版權(quán)符號后顯示的效果：<br>

版權(quán)所有©：清華大學(xué)出版社 </body></html>段落編輯列表和使用列表一、列表類型定義列表:dl無序列表:ul有序列表:ol列表和使用列表二、插入定義列表<dl>基本語法<dl><dt>名稱<dd>說明</dl><dt>定義組成列表項名稱部分<dd>解釋說明定義的項目名稱列表和使用列表<html><head>

<metacharset=utf-8><title>插入定義列表</title></head><body><dl><dt>聯(lián)系人<dd>XXX<dt>聯(lián)系地址<dd>北京市豐臺區(qū)

<dt>郵政編碼<dd>100036</dl></body></html>列表和使用列表列表和使用列表三、插入無序列表<ul>基本語法:<ul><li>項目名稱</li></ul>列表和使用列表<html><head><metacharset=utf-8>

<title>無序列表</title></head><body><ul><li>聯(lián)系人：</li>xxx<li>聯(lián)系地址：</li>北京市豐臺區(qū)

<li>郵政編碼：</li>100036</ul></body></html>列表和使用列表列表和使用列表四、插入有序列表<ol>基本語法<oltype=""start=""><li>項目名稱</li></ol>Type:設(shè)定符號類型，屬性值有1,A,a,i,IStart:設(shè)定列表的符號從第幾項開始列表和使用列表<html><head><metacharset=utf-8><title>有序列表</title></head><body><olType=“a"start=“1"><li>聯(lián)系人：xxx</li><li>聯(lián)系地址：北京市豐臺區(qū)</li><li>郵政編碼：100036</li></ol></body></html>列表和使用列表插入圖像一、插入圖片<img>基本語法<imgsrc="圖片地址">插入圖像實例代碼<html><head><title>插入圖片</title></head><body><center><h2>網(wǎng)頁中插入圖片</h2><hr><imgsrc=02.jpg></center></body></html>插入圖像插入圖像二、添加圖片提示文字<alt>基本語法<imgsrc="圖片地址"alt="提示文字">Alt提示文字可以是中文也可以是英文插入圖像實例代碼：<html><head><title>添加圖片提示文字</title></head><body><center><h2>添加圖片提示文字</h2><hr><imgsrc=njnu.jpgalt=南京師范大學(xué)></center></body></html>

插入圖像插入圖像三、設(shè)置圖片的寬度和高度基本語法：<imgsrc="圖片地址"width="value"height="value">圖片高度和寬度的單位可以是像素也可以是百分比插入圖像實例代碼：<html><head><title>設(shè)置圖片寬度和高度</title></head><body><center><h2>設(shè)置圖片寬度和高度</h2></center><br>原圖</br><imgsrc="njnu.jpg"><br>寬150像素高80像素</br><imgsrc="njnu.jpg">width=150pxheight=80px>

<br>圖像大小是原圖的30%</br><imgsrc="njnu.jpg">width=30%height=30%></body></html>插入圖像插入圖像四、設(shè)置圖片對齊方式基本語法<imgsrc="圖片地址"align="關(guān)鍵字">關(guān)鍵字：Top，middle，bottom，left，right插入圖像<html><head><title>設(shè)置圖片對齊方式</title></head><body><center><h2>設(shè)置圖片對齊方式</h2></center><hr><p><imgsrc="njnu.jpg"align=top>

圖片頂部與同行的文字頂部對齊

</p><p><imgsrc="njnu.jpg"align=middle>

圖片中部與同行的文字中部對齊

</p><imgsrc="njnu.jpg"align=bottom>

圖片底部與同行的文字底部對齊</body></html>插入圖像超鏈接的使用一、超鏈接的概念

超鏈接就是從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁的途徑。二、路徑概念絕對路徑：主頁上的文件或目錄在硬盤上的真正路徑。相對路徑：以引用文件的網(wǎng)頁所在的位置為參考基礎(chǔ)而建立的目錄路徑。同一目錄下的文件：直接輸入鏈接文件的名稱上一級目錄的文件：在目錄名和文件名之間加“..\”；如果是上兩級目錄，則在目錄名和文件名之間加“..\..\”下一級目錄：直接輸入目錄名和文件名，之間以“\”分割超鏈接的使用例：相對目錄的引用,index.htm如何引用photo.jpg文件c:\website\web\index.htm

c:\website\img\photo.jpg..\img\photo.jpg三、超鏈接的建立基本語法：<ahref=資源地址target=窗口名稱>鏈接文字</a>資源地址可以是文件名或者URL（網(wǎng)址）Target:用于指定打開鏈接的目標(biāo)窗口，默認(rèn)屬性為原窗口，打開一個新窗口，target=_blank在上一級窗口打開，target=_parent在瀏覽器的整個窗口打開,target=_top在同一個窗口打開，target=_self（默認(rèn)）超鏈接的使用<html><head><title>插入外部鏈接</title></head><body><ahref="">新浪網(wǎng)</a><ahref=“test.html”>測試頁面</a></body></html>超鏈接的使用超鏈接的使用插入內(nèi)部鏈接基本語法<ahref=#目標(biāo)名稱

target=窗口名稱>目錄文字</a>在鏈接的目標(biāo)處使用<aname=目標(biāo)名稱>超鏈接目標(biāo)</a>超鏈接的使用<html><head><title>考倒你</title></head><body><h3>考倒你</h3><ahref="#t.1">世界上哪里的海不產(chǎn)魚？</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h3><aname="t.1">第一題答案</a></h3>辭海不產(chǎn)魚</body></html>超鏈接的使用超鏈接的使用超鏈接的使用三、圖像鏈接基本語法<ahref=圖片要鏈接的目標(biāo)地址target=窗口名稱><imgsrc=參數(shù)值alt=參數(shù)值border=參數(shù)值align＝參數(shù)值height=參數(shù)值width=參數(shù)值vspace=參數(shù)值hspace=參數(shù)值></a>超鏈接的使用<html><head><title>圖像鏈接</title></head><body><center><ahref=><imgsrc=njnu.jpg></a></center></body></html>超鏈接的使用超鏈接的使用四、郵箱鏈接基本語法：<ahref=mailto:E-mail地址&cc=抄送人E-mail地址&bcc=密件抄送地址&subject=郵件主題&body=郵件正文>描述文字</a>超鏈接的使用<html><head>

<title>發(fā)送郵件</title></head><body><ahref=mailto:123@163.com&cc=1@&bcc=2@&subject=祝福&body=節(jié)日快樂>給你寫信</a></body></html>超鏈接的使用表格的使用一、插入表格并定義表格結(jié)構(gòu)<table>、<tr>、<td>基本語法：<table><tr><td></td></tr></table>語法說明：<table>:定義表結(jié)構(gòu)<tr>:定義行結(jié)構(gòu)<td>:定義列結(jié)構(gòu)表格的使用<html><head><title>設(shè)置基本表格結(jié)構(gòu)</title></head><body><tablewidth="470"border="1"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用二、設(shè)置表格標(biāo)題<caption><table><captionalign=""valign="">插入表格標(biāo)題</caption><tr><td></td></tr></table>表格的使用<html><head><title>插入表格標(biāo)題</title></head><body><tablewidth="470"border="1"align="center"><captionalign="center">計算機語言<caption><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER2000</td><td>C#</td></tr></table></body></html>表格的使用表格的使用三、設(shè)置表格表頭或標(biāo)題行<th>基本語法：<table><tr><th>…</th><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格表頭</title></head><body><tablewidth="470"border="1"align="center"><tr><th>網(wǎng)頁設(shè)計</th><th>數(shù)據(jù)庫開發(fā)</th><th>程序設(shè)計</th></tr><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用四、設(shè)置表格的寬度和高度基本語法：<tablewidth=""height=""><tr><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格的寬度和高度</title></head><body><tablewidth="470"height="40"border="1"><tr><td> </td><td> </td><td> </td></tr></table>

<tablewidth="200"height="80"border="1"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用五、設(shè)置表格的邊框?qū)傩曰菊Z法：<tableborder=""bordercolor=""bordercolorlight=""bordercolordark=""><tr><td></td></tr></table>Border:邊框粗細(xì) Bordercolor:邊框顏色Bordercolorlight:亮邊框顏色Bordercolordark:暗邊框顏色表格的使用<html><head><title>設(shè)置表格的邊框?qū)傩?lt;/title></head><body><tablewidth="470"border="1"bordercolor="#0000FF"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用六、設(shè)置單元格邊距與間距1.單元格之間的間距：<tablecellspacing=數(shù)值>2.文字與邊框之間的間距：<tablecellpadding=數(shù)值>表格的使用<html><head><title>設(shè)置單元格間距</title></head><body><tablewidth="380"border="1"cellspacing="0"><tr><td> </td><td> </td><td> </td></tr></table><tablewidth="380"border="1"cellspacing="5"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>設(shè)置單元格邊距</title></head><body><tablewidth="380"border="1"cellpadding="0">

<tr><td>腳本語言</td><td> </td><td> </td>

</tr></table><tablewidth="380"border="1"cellpadding="5"><tr><td>腳本語言</td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用七、設(shè)置表格背景基本語法：<tablebgcolor=""background=""align=""><tr><td></td></tr></table>表格的使用<html><head><title>設(shè)置表格的背景</title></head><body><tablewidth="470"border="1"bgcolor="red"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用八、設(shè)置行內(nèi)容水平對齊和垂直對齊<table><tralign=“”valign=“”bordercolor=“”bgcolor=“”height=“”></tr><tr><td></td></tr></table>表格的使用<html><head><title>調(diào)整行內(nèi)容水平和垂直對齊</title></head><body><tableborder="1"><tralign="center"height=50valign="bottom"><th>網(wǎng)頁設(shè)計</th><th>數(shù)據(jù)庫開發(fā)</th><th>程序設(shè)計</th></tr>

<tralign="center"bordercolor=redbgcolor=yellow><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><tdnowrap>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用九、設(shè)置跨行跨列<tdcolspan=數(shù)值><thcolspan=數(shù)值><tdrowspan=數(shù)值><throwspan=數(shù)值>Colspan：跨列Rowspan：跨行表格的使用<html><head><title>設(shè)置跨行</title></head><body><tablewidth="380"border="1"><tr><tdrowspan="2"> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>設(shè)置跨列</title></head><body><tablewidth="380"border="1"><tr><tdcolspan="2"> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table></body></html>表格的使用表單的設(shè)計一、表單標(biāo)記基本語法：<formname=""method=""action=""enctype=""target=""></form>Name:設(shè)置表單名稱Method：設(shè)置表單發(fā)送的方法，可以是"post"或者"get"Action：設(shè)置表單處理方式，可指定發(fā)送的頁面Enctype：設(shè)置表單的編碼方式target：設(shè)置表單的顯示目標(biāo)表單的設(shè)計form.html<html> <head>

<metacharset=utf-8>

<title>插入文本框</title> <head> <body>

<formmethod="post"action="sent.html">

請輸入你的姓名：<br>

<inputname="text"type="text"maxlength="8"size="5"value="1">

<inputname="submit"type="submit"value="提交">

</form> </body></html>Sent.html<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body>

提交完成 </body></html>表單的設(shè)計二、插入文本框<text>基本語法<form><inputname="text"type="text"maxlength=""size=""value=""></form>表單的設(shè)計<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body> <form>

請輸入你的姓名：<br> <inputname="text"type="text"maxlength="8"size="10"value="1"> </form> </body></html>表單的設(shè)計表單的設(shè)計三、插入密碼框<password>基本語法<form><inputname="password"type="password"maxlength=""size=""></form>表單的設(shè)計<html> <head>

<metacharset=utf-8>

<title>插入密碼框</title> <head> <body>

<form>

用戶登錄<br>

用戶名：<inputname="text"type="text"maxlength="8"size="10"><br>

密

碼：<inputname="password"type="password"maxlength="8"size="10"><br>

</form> </body></html>表單的設(shè)計四、插入文件域<file>基本語法<form>

<inputname="file"type="file"></form>表單的設(shè)計<html><head><title>插入文件域</title><head><body><form>

請上傳你的照片<inputname="file"type="file"></form>

</body></html>表單的設(shè)計表單的設(shè)計五、插入標(biāo)準(zhǔn)按鈕<button>基本語法<form><inputname="b1"type="button"value="標(biāo)準(zhǔn)按鈕"></form>表單的設(shè)計<html><head><title>插入標(biāo)準(zhǔn)按鈕</title><head><body><form>

<inputname="c1"type="button"value="標(biāo)準(zhǔn)按鈕"></form>

</body></html>表單的設(shè)計表單的設(shè)計六、插入提交按鈕<submit>

基本語法：<form><inputname="submit"type="submit"value="提交"></form>表單的設(shè)計<html><head><title>插入提交按鈕</title><head><body><form><inputname="submit"type="submit"value="提交"></form></body></html>表單的設(shè)計七、插入重置按鈕<reset>基本語法：<form><inputname="reset"type="reset"value="重置"></form>表單的設(shè)計<html><head><title>插入重置按鈕</title><head><body><form><inputname="reset"type="reset"value="重置"></form></body></html>表單的設(shè)計表單的設(shè)計八、插入單選框<radio>基本語法：<form><inputname="r1"type="radio"checkedvalue=""></form>表單的設(shè)計<html><head><title>插入單選按鈕</title><head><body><form>對講機設(shè)置<br><inputname="c1"type="radio"checked>自動接聽呼叫<br><inputname="c2"type="radio">拒絕接聽呼叫<br>

</form></body></html>表單的設(shè)計表單的設(shè)計九、插入復(fù)選框<checkbox>基本語法：<form><inputname="r1"type="checkbox"checkedvalue=""></form>表單的設(shè)計<html><head><title>插入復(fù)選框</title><head><body><form>

QQ系統(tǒng)設(shè)置綜合設(shè)置<br><inputname="c1"type="checkbox"checked>拒絕陌生人消息<br><inputname="c2"type="checkbox"checked>自動播放魔法表情<br><inputname="c3"type="checkbox">禁止所有用戶上線提示<br></form></body></html>表單的設(shè)計表單的設(shè)計十、插入文字域<textarea>基本語法：<form><textareaname="text"rows=""cols=""></textarea></form>Rows:行數(shù)Cols:列數(shù)表單的設(shè)計<html><head><title>插入文字域</title><head><body><form>QQ系統(tǒng)設(shè)置留言設(shè)置<br><inputtype=checkboxchecked>離開時自動回復(fù)(50字以內(nèi))<br><textareaname="text"rows="10"cols="30"></textarea></form></body></html>表單的設(shè)計表單的設(shè)計十一、插入下拉列表<select>和列表項<option>基本語法：<form><selectname=""size=""multiple><optionvalue="">選擇項<optionvalue="">選擇項</form>Size：顯示的選項數(shù)目Multiple：列表中的項目多選表單的設(shè)計<html><head><title>插入下拉菜單和列表</title><head><body><form>請選擇你喜歡的特長<br><selectname="特長"size=10multiple><optionvalue="1">唱歌<optionvalue="2">畫畫<optionvalue="3">長跑<optionvalue="4">游泳<optionvalue="5">體操<optionvalue="6">足球<optionvalue="7">籃球<optionvalue="8">羽毛球<optionvalue="9">棒球</select></form></body></html>

表單的設(shè)計框架的應(yīng)用一、框架分割方式1.左右分割方式<framesetcols="value,value,value"><framesrc="url"><framesrc="url"><framesrc="url"

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論