web bjsp19周周五-jsp課件第2章Web編程基礎HTML語言_第1頁
web bjsp19周周五-jsp課件第2章Web編程基礎HTML語言_第2頁
web bjsp19周周五-jsp課件第2章Web編程基礎HTML語言_第3頁
web bjsp19周周五-jsp課件第2章Web編程基礎HTML語言_第4頁
web bjsp19周周五-jsp課件第2章Web編程基礎HTML語言_第5頁
已閱讀5頁，還剩164頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章Web編程基礎——HTML語2.1HTML2.22.32.4 標2.5

2.62.72.8CSS習題HTML 網(wǎng)頁與HTML(HyperTextMarkupLanguage)，它的中文譯名 HTML的產(chǎn)生和發(fā)HTML語言最早是由TimBernersLee等人于 HTM語言是一種文本型標記語言，每個標記都有其特定的含義。我們可以把HTM語言是一種文本型標記語言，每個標記都有其特定的含義。我們可以把L文檔中的每個標記理解為一個<H2>、</HTML>等 <1=屬性值1屬性2=屬性值2色，超文本呈現(xiàn)藍色等。如果希望使瀏覽器窗口背景<BODY><BODYBGCOLOR=blackTEXT=whiteLINK="#000066"TOPMARGIN=0>HTML文檔結(jié)(BodyText)兩部分構(gòu)成的，這兩個部分共同構(gòu)成一個Web圖2.1HTML使用的語言等進行說明和設置。這些設置是通過在頭<META>，<LINK，<OBJEC。頭部的內(nèi)容一般在網(wǎng)頁上是不顯示的，但位于<TITL>和</ITE間的內(nèi)容是窗當省略頭部時，瀏覽器仍會將頁面內(nèi)容正常顯示出來，但 圖2.2執(zhí)行CH2-1.html定為.HTM或.HTML。通常我們直接使用Windows操作系指定存放，并將其命名為CH2-1.html。觀察您剛才指定 <HEAD></HEAD>和<BODY></BODY>就嵌套在</BODY>HTML<HEAD>標的字符集、語言、頁面的標題、背景音樂、樣式表單<BODY>標容包括文字、圖形、圖像、超等各種HTML對象。每景色、前景色以及超對象的顏色等進行設置。關(guān)于屬性的用法在學習了有關(guān)字體顏色的設置方法之后再<FRAMESET>標 HTML文檔的注標記格式例如<!--下面一段代碼是有關(guān)本頁面樣式的定義見的釋標記應放在<BODY>區(qū)中，而不能放在<HEAD>JSP中，還有[<%=字體標標記格式<FONTFACE=字體SIZE=字號COLOR=顏色體、楷體_GB2312、隸書等中文字體或TimesNewRoman、ArialUnicodeMS等西文字體。系統(tǒng)默認的字體為宋體。表2.1HTML預定義的16種標準色彩名及其RGB色彩十六RGB色彩十六進制RGBAqua(水藍色Navy(藏青色Black(黑色Oliver(橄欖色Blue(藍色Purple(紫色Fuchsia(櫻桃色Red(紅色Gray(灰色Silver(銀色Green(綠色Lime(石灰色White(白色Maroon(褐紅色 和COLOR屬性時<FONTSIZE=1COLOR=red>1<FONTFACE=SIZE=2COLOR=#00ff00>2綠色隸書字<FONTFACE=楷體_GB2312COLOR=#0000ff>3號藍色楷體字<FONTFACE=SIZE=+1COLOR=#ffff00>4黃色黑體字<FONTFACE=SIZE=+2>5<FONTFACE=SIZE=6<FONTFACE=SIZE=7COLOR=gray>7幼圓字圖2.3CH2-2.html<HiALIGN=對齊方式H1H2號字H3H4H5號H6例為了節(jié)省篇幅而排在了一行中；②該標記與<FONT>標記的SIZE屬性所標示的字號相反；③該標記中的文字都是表2.2字體輔助標標符含文字粗文傾字加加刪下錯行上半劃線標標記格式<HRSIZE=WIDTH=COLOR=線條<HRSIZE=2WIDTH=140[例2.3]文字樣式的變化標記示例，文件名CH2-3.html<HTML><HEAD><TITLE><H2ALIGN=center><HRSIZE=2WIDTH=140<FONT<U>U標記在字下加線圖2.4執(zhí)行CH2-3.html表2.3常用特殊字符與HTMLHTML<>&;"&<MARQUEEDIRECTION=移動方向BGCOLOR=背景標記格式<MARQUEEBEHAVIOR=移動方式BGCOLOR=背景標記的功能：<MARQ>標記的作用是讓文字在頁面上指定的區(qū)域內(nèi)來回移動，從而出現(xiàn)動態(tài)的效果。其中，left(動；移動方式的取值可為(、(從右邊移動到左邊后即停止不動)、alternte先從右移動到左，再從左移動到右，如此反復地來回移動。BGCOLOR用于設置文字移動區(qū)域的背景顏色。此外，該標記中也可以加入和WIDT屬性，用來指定文字量的單行文字，所以屬性一般不用。[例2.4]文字移動標記示例，文件名CH2-4.html<MARQUEEDIRECTION=left認真學習，天天進步<MARQUEEDIRECTION=right<MARQUEEBEHAVIOR=alternateBGCOLOR=yellow> L中有一些標記隱含帶有換行的作用，如上節(jié)講述的標題字標記<H>、劃線標記<HR>和后面將要講到的<P前 一個空行，實際上等于換了兩行。而<BR>標記僅僅完成換行，行與行之間是沒有空行的。這個雙邊標記的作用是 自動換行和結(jié)束 自動換行。一個M頁面中的內(nèi)容在默認情況下會隨瀏覽器窗口的寬度自動調(diào)整內(nèi)容的寬度而換行。如果使用禁行標記<NOBR>……</NOBR>，則在該標記中的內(nèi)容將不會隨瀏覽器窗口寬度自動換行。如果我們在L文檔中書寫標記<NOBR，則在瀏覽器窗口上下邊會出現(xiàn)水平滾動條瀏覽者可通過滾動條來移動瀏覽內(nèi)容。段落標標記格式<PALIGN=對齊方式段落標記<P>的作用是另起一段，它不僅具有換行的作用，而且還要在新行前面 一個空行。在例2.1中我們分別使用了段落標記<P>和換行標記<BR>，仔細觀察圖2.2和圖2.5的顯示效果，不難看出二者的差異。該標記的一個常用屬性GN用來設置該段文字的對齊方式。對齊方式可以是left)、center)right(齊)justfy(對齊)四種中的某一種。省略該屬性時取系統(tǒng)默認的左對齊該標記常被嵌套在表格標記<TABLE>中，可使表格更整齊、美觀[例2.5]段落標記及其對齊屬性示例，文件名CH2-5.html<TITLE>段落標記與屬性<PALIGN=center>床前明月光<PALIGN=center>疑是地上霜<PALIGN=center>舉頭望明月<PALIGN=center>低頭思故鄉(xiāng)這個文件在瀏覽器中的顯示效果如圖2.5所示圖2.5CH2-5.html通常，我們在編輯文本文件時上按段換行，且每文件時，卻不能理解我們的這種。為此，HTML中設置了預排版標記<PRE>來照顧我們的這種。如果您的網(wǎng)頁是一篇，而且希望瀏覽者看到的格式與您的輸入[例2.6]預排版標記示例，文件名CH2-6.html這個文件在瀏覽器中的顯示效果如圖2.6圖2.6CH2-6.html列表標 > <UL>例如<UL><UL <UL<LI><LI><LI>例如<LITYPE=square><LITYPE=circle><LITYPE=disc>標記格式<OLTYPE=非數(shù) 標記格式<OLSTART=起 數(shù)字 <OL<OL<LI><LI><LI>1.a.5.2.b.6.說明列說明列表是指在每一行的前面不出現(xiàn)符號或，而例如<DT>列表標記<DD>符號列表<DD>[例2.7]列表標記及其嵌套示例，文件名CH2-7.html<HEAD><TITLE>列表標記示例<UL><LITYPE=square>Web與<LI>什么是<LI>HTML文檔的結(jié)圖2.7CH2-7.html<DIR><LI>HTML<OL<LI><LI>塊標<DIV>標<DIVALIGN=STYLE=CSS樣式ALIGN屬性可選，確定<DIV>標記塊中文字對齊方<SPAN>標<SPANSTYLE=CSS樣式<SPAN>與<DIV><SPAN中的樣式只作用到有文字的部分；<DIV>中的樣式的作用范圍是文字所在行。[例2.8]<DIV>和<SPAN>標記示例，文件名CH2-<spanstyle="BACKGROUND:#f0f000"><DIVstyle="BACKGROUND:red">學有所成圖2.8CH2-8.html 標 來實現(xiàn)超 <A>標<AHREF=“文件名或URL” HREF：指 文件的路徑、名稱或網(wǎng)絡地址 打開 網(wǎng)頁的窗口，<AHREF="CH2- ="_blank"窗口<AHREF="CH2-6.html">下一頁</A> <AHREF="..\clock.avi">看影像</A> <AHREF="..\picture\鸛雀樓.jpg">看 <AHREF="music\望江南.mid">聽音樂</A> <AHREF=" <A>標記的NAME屬性設一個頁面內(nèi)不同位置之間的多 關(guān)系<AHREF="#錨名<ANAME="錨名2) <AHREF="URL#錨名<ANAME="錨名[例2.9]超 示例<P><AHREF="#產(chǎn)品">點擊這里瀏覽 的產(chǎn)<!--以下是用<A>標記 頻、音樂的語句--><P><AHREF="ch2-5.html">點擊這里在當前窗口打<AHREF=" <P><AHREF="..\picture\約塞米蒂山谷.jpg">點擊這 <A 點擊這里在另一窗口顯 <P><AHREF="..\music\csc40gz.avi"點擊這里看視頻</A></P><P><AHREF="..\music\美人魚.mp3">點擊這里在當<AHREF="..\music\天使心.mp3" <!--以下是 <ANAME="產(chǎn)品"><H2> <DIVALIGN=center>電視機<BR>電冰箱<BR>手 許多</DIV></A>嵌入圖像 標 <IMG>標記嵌入圖像 剪輯，則在打開網(wǎng)頁的同時 格式1：<IMGSRC=“URLALIGN=WIDTH=xHEIGHT=yALT=“信息”>格式2：<IMGDYNSRC=“URL”ALIGN=對齊方式 時WIDTH=xSRC屬性或DYNSRC：資源文件路徑和名稱或URL，與<A>的屬性相同：緊接在圖像后面文字的排列方式，top、middle、botto，表示文字與圖像呈頂部對齊、中部對齊或底部對齊，適于單行文本；WIDT、HEIGHT：指定圖像的寬度和高度。格式1中的ALT：當鼠標 上停留時顯示的文字信息格式2中的START： 見[例 <BGSOUNDSRC="文件名或URL"LOOP=次數(shù)<BGSOUNDSRC="bg.mid"則當瀏覽者打開網(wǎng)頁時會自 嵌入<EMBEDSRC=“URL”AUTOSTART=*WIDTH=xURL：聲音文件的URL；*為true或false，分別表示自 和 ；x和y 器在頁面中的寬和高，單位為像素的時機，也可以通過WIDTH和HEIGHT來控 區(qū)域的大小 單圖多向 的設 <IMGSRC="圖像的URL"USEMAP="#圖像地圖名<MAPNAME圖像地圖名<AREASHAPE="熱區(qū)塊形狀 COORDS=坐標 HREF=<AREASHAPE="熱區(qū)塊形狀2"COORDS=坐標 HREF=USEMAP：圖像地圖 <AREA>標記用于定義熱區(qū)及 表2.4形狀與坐標定義方形狀及取坐標 x1，y1代表矩形的左上角坐標；x2，y2表矩形的右下角坐COORDS="x,y,x,y代表圓心坐標；r代表圓的每一對(x,y)代表多邊形的一個頂點坐 #USEMAP屬性的圖像地圖名和NAME屬性的[例2.11]圖像地圖標記使用示例，文件名CH2-11.html <IMGSRC="..\picture\chinamap.gif"HEIGHT=895WIDTH=752BORDER=0ALT=USEMAP=#MyMap<MAP<AREASHAPE=rect

的一磚一瓦無不折射 文化的博 <AREASHAPE=polyHREF=..\picture\陜西.gif "<AREAALT=HREF="..\picture\九寨溝,417,375,370,363<!-- "--<AREAALT=桂林山水甲天下SHAPE=poly 圖2.11單圖多向 圖2.12在圖2.11<BODY>BGCOLOR屬性為瀏覽器窗口設置背景顏色，也可通 問的超設置為fuchsia櫻桃色，已被的超設置為yellow(黃色)，活動的超設置為green(綠色)。<BODYBGCOLOR=blackTEXT=whiINK=fuchsiaVLINK=yellowALINK=green><BODY>標記的常用屬性及含義見表2.5表2.5<BODY>標記的常用屬性（有錯誤屬性 頁面的背景頁面的背景頁面中正文的顏頁面中活動的(正被選中)超文本的顏頁面中已經(jīng)過的超文本的顏頁面中未被的超文本的顏表格由行和列交叉形成的單元格構(gòu)成的<TABLE>開始，</TABLE>結(jié)束表格中每一行由<TR>開始，</TR>結(jié)束<TH>與<TD>的作用基本相同，<TH單元格中的文字居中加粗注意：這種嵌套格式必須是完整的嵌套，絕對不能交叉。[例2.12]表格設計示例，文件名CH2-12.html<TR><TH>序號</TH><TH>產(chǎn)品名稱</TH><TH>產(chǎn)廠</TH><TH>單價</TD><TD>3600元顯示結(jié)果見圖2.13就需要使用<TABLE>的屬性表格的屬 取值表格的邊框取數(shù)字值，省略及默認值為0(無邊框表格的寬取數(shù)字值或百分比，默認值為自動匹表格的高取數(shù)字值或百分比，默認值為自動匹表格的背景取值與<FONT>標記相同，默認為白表線取值與<FONT>標記相同，默認為黑單元格之間的距取數(shù)字值，默認值為數(shù)據(jù)與表線的距取數(shù)字值，默認值為表格在頁面中的布可取left、center、right三者之如 例2.12中不帶屬性的<TABLE>一句改<TABLEBORDER=1BORDERCOLOR=“Red”則顯示結(jié)果如圖2.14 取值單元格中數(shù)據(jù)的 取值單元格中數(shù)據(jù)的水平對齊Left、center、right之單元格中數(shù)據(jù)的垂直對齊top、middle、bottom、baseline之單元格中的內(nèi)容不自動換單元格的寬取數(shù)字值或百分比，默認值為自動匹單元格的高取數(shù)字值或百分比，默認值為自動匹單元格的背取值與<FONT>標記相同，默認為白向右延伸占據(jù)n個水平單n的最大取值是一行中單元格的最大數(shù)向下延伸占據(jù)n個垂直單n的最大取值是表格中行的最大<CAPTIONALIGN=對齊方式[例2.13]復雜的跨行跨列表格設計示例，文件名CH2-<TABLEBorder=1WIDTH=100%><CAPTION>和跨列表格設計<TDCOLSPAN=3ALIGN=center>各類產(chǎn)品<TR><TDROWSPAN=2>家用電氣類<TR><TDCOLSPAN=2ALIGN=center>蒸汽噴霧電<TDROWSPAN=2><TD計算 和光盤 <TD>字典手冊這個文件在瀏覽器中看到的顯示效果如圖2.15圖2.15[例2.14]在表格中嵌 <H2><PALIGN=center>藝術(shù)欣賞<HRSIZE=3pxWIDTH=260ptCOLOR=#80f000></P></H2><TABLEBORDER=1BORDERCOLOR=#ff00ffWIDTH=100%><TDCOLSPAN=3表格)--><TABLE<TR><TD <TD<IMGSRC="../picture/monalisa.jpg"WIDTH=76pxHEIGHT=110pxSTART=fileopen><TR><TD <TR><TDALIGN=center>類型</TD><TD <TR><TDALIGN=center>作者</TD><TD<TR><TDALIGN=center>收藏</TD><TD<TDCOLSPAN=3<TABLE<TR><TD <TDROWSPAN=5><IMGSRC="../picture/mickey.gif"START=mouseover></IMG></TD><TR><TD <TR><TDALIGN=center>類型</TD><TD<TR><TDALIGN=center>作者</TD><TD<TR><TDALIGN=center>收藏</TD><TD以上三行分別是第三個表格結(jié)束，第一個表格的-->圖2.16表單<FORMACTION=“數(shù)據(jù)送往的地址”METHOD=數(shù)據(jù)傳送方式表單輸入元表<FORMACTION=“數(shù)據(jù)送往的地址”METHOD=數(shù)據(jù)傳送方式表單輸入元表單輸入元素主要有下述幾類<INPUT>標入各種不同信息的標記。<INPUT>標記的一般格入各種不同信息的標記。<INPUT>標記的一般格式如下<INPUTTYPE=控件類NAME=數(shù)據(jù)對象名[例2.15]表單中<INPUT>標記的使用示例，文件名15.html<HEAD><TITLE>表單設計示例為了讓我們更好地為您服務，請?zhí)顚懴旅娴谋韱?lt;FORMACTION="serverx2.jsp" ：<INPUTTYPE=textNAME="請輸入您 ：<INPUTTYPE=passwordNAME="碼<P>您 男<INPUTTYPE=radio 女<INPUTTYPE=radio <INPUTTYPE=radio <P><INPUTTYPE=checkboxNAME="水果"checked>蘋 <INPUTTYPE=checkboxNAME="水果">橘子 <INPUTTYPE=checkboxNAME="水果">香蕉<INPUTTYPE=checkboxNAME="水果"checked>桃子 <INPUTTYPE=checkboxNAME="水果">李子 <INPUTTYPE=checkboxNAME="水果">杏子</P><P<INPUTTYPE=submitVALUE=提交<INPUTTYPE=resetVALUE=重填這個HTML文件在瀏覽器中的顯示效果如圖示2.17所示圖2.17<INPUT>標記的應用(CH2-15.html的執(zhí)行效果在表單FORM中通過<SELECT>……</SELECT><SELECTNAME="名稱"SIZE=個新文件或到一個新文件時，原來的窗口和文件將被在一般的HTML文件中，頁面內(nèi)容的主體部分放分框頁面中，沒有<BODY>標記<FRAMESET>與</FRAMESET><FRAME>，它的基本格式為<FRAMESRC=URL>，用來指<FRAMESETROWS或COLS="值<FRAME<FRAME<FRAMESET>的常用屬架要顯示的頁面由<FRAMESRC=URL>標記中的URLROWS屬<FRAMESET表示剩余值表示剩余值COLS屬<FRAMESETBORDER屬[例2.17]使用百分比值建立縱向和橫向分框的例子，<FRAMESETROWS="20%,<FRAMESETCOLS="50%,<FRAME<FRAME<FRAMESETCOLS="25%,50%,<FRAME<FRAME<FRAME</FRAMESET<FRAME>的屬屬性 指定框架邊界與文本之間的縱向距離(高度)，取值以像素點為指定框架邊界與文本之間的橫向距離(寬度)，取值以像素點為為<FRAME>命名，以方便從其它文檔中進確定框架是否具有滾動條，可取yes、no、auto三者之一，默認為不能改變框架大框架之間可以有特定的超關(guān)系，比如將某一個框架的內(nèi)容輸出到另一個框架中，這樣就可以把前者作實現(xiàn)這種超的步驟可分兩步： 標記框<FRAMESET<FRAMENAME=select<FRAMENAME=display必要的說明，其頁面中的超對象在哪個目標框架<BASE>標記進行說明，或者在<A> <P>1.<AHREF="WEB.HTML">Web簡介<P>2.<AHREF="HTML0.HTML">HTML中的超(例如，“1.Web簡介”)時，其輸出就會顯示[例2.18]框架之間的超 <HTML><HEAD><TITLE>框架間的超 關(guān)<FRAMESET<FRAME<FRAMESET<FRAMENAME=select<FRAMENAME=displaySRC="right.html"這段代碼首先用<FRAMESETROWS="18%,82%">對這兩個子窗口分別用<FRAMENAME=selectSRC="left.html">和<FRAMENAME=displaySRC="right.html"MARGINWIDTH=20>兩句指定了窗口的<BODY<FONTCOLOR=WHITE<P>1.<AHREF="web.html">Web簡介<P>2.<AHREF="html0.html">HTML概述<P>3.<AHREF="CH2-1.html">HTML語法<P>4.<AHREF="CH2-2.html">可以看出，這段代碼的關(guān)鍵一句是 示。在這個界面上點擊“1.Web簡介”后的情況如圖2.21圖2.20框架間 圖2.21框架間 關(guān)系(在上述窗口中點擊“1.Web簡介”后的情況<NOFRAMES>標CSSCSS(CascadingStyleSheets)：層疊樣式表單，簡稱樣定義CSS樣式的方定義CSS樣式的方法主要有三種：一種是選擇符；第二種是定義ID選擇符；第三種則是選擇符{屬性1：值1；屬性2：值HTML由于CSS是HTML標記的一種擴展，所以，任何一<STYLETYPE="TEXT/CSS">H1{COLOR:GREEN;FONT-SIZE:36PX}一個超有幾種不同的狀態(tài)：未被的(Link)，已 <STYLETYPE="TEXT/CSS">A:LINK{COLOR:RED;FONT-SIZE:9PT;TEXT-DECORATION:UNDERLINE}A:VISITED{COLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:HOVER{COLOR:GREEN;FONT-SIZE

溫馨提示

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

評論

0/150

提交評論