JSP基礎(chǔ)與案例開發(fā)詳解：第2章 網(wǎng)頁(yè)布局與修飾_第1頁(yè)
JSP基礎(chǔ)與案例開發(fā)詳解：第2章 網(wǎng)頁(yè)布局與修飾_第2頁(yè)
JSP基礎(chǔ)與案例開發(fā)詳解：第2章 網(wǎng)頁(yè)布局與修飾_第3頁(yè)
JSP基礎(chǔ)與案例開發(fā)詳解：第2章 網(wǎng)頁(yè)布局與修飾_第4頁(yè)
JSP基礎(chǔ)與案例開發(fā)詳解：第2章 網(wǎng)頁(yè)布局與修飾_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(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)介

1第2章 網(wǎng)頁(yè)布局與修飾學(xué)前提示做Web開發(fā)肯定離不開頁(yè)面設(shè)計(jì)與修飾，可能讀者覺得這只是美工所必備的技術(shù)，其實(shí)作為程序員，也應(yīng)該有所了解。所以本書專門辟出此章來(lái)講解HTML、CSS、JavaScript等技術(shù)，使讀者對(duì)以上內(nèi)容有清晰的認(rèn)識(shí)。知識(shí)要點(diǎn)HTML的開發(fā)應(yīng)用CSS的運(yùn)用JavaScript語(yǔ)言的運(yùn)用div的運(yùn)用22.1HTML的開發(fā)應(yīng)用HTML是HyperTextMarkupLanguage的縮寫，其意思是“超文本標(biāo)簽語(yǔ)言”，HTML語(yǔ)言文件的擴(kuò)展名為.html或.htm，就是網(wǎng)頁(yè)文件。本章介紹的HTML的規(guī)范是HTML4.0.1，是HTML規(guī)范的最終版本。HTML語(yǔ)言中的標(biāo)簽是成對(duì)使用的，它使用一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽來(lái)標(biāo)識(shí)文本，用<標(biāo)簽名>標(biāo)識(shí)標(biāo)簽的開始，用</標(biāo)簽名>標(biāo)識(shí)這個(gè)標(biāo)簽的結(jié)束。一個(gè)網(wǎng)頁(yè)文件中的標(biāo)簽有一定的組成結(jié)構(gòu)，不能隨意打亂這種關(guān)系，下面的代碼展示了最基本的網(wǎng)頁(yè)文件的組成結(jié)構(gòu)：<html><head><title>標(biāo)題部分</title></head><body>主體部分</body></html>32.1HTML的開發(fā)應(yīng)用將上面的代碼保存為*.html或*.htm格式的文件，然后使用瀏覽器打開這個(gè)文件，將顯示如圖2.1所示的效果。42.1.1全局架構(gòu)標(biāo)簽1.<html>標(biāo)簽2.<head>標(biāo)簽3.<title>標(biāo)簽4.<body>標(biāo)簽52.1.2格式標(biāo)簽1.<p>標(biāo)簽2.<br>標(biāo)簽3.<nobr>標(biāo)簽4.<blockquote>標(biāo)簽5.<center>標(biāo)簽6.<marquee>標(biāo)簽7.<dl>標(biāo)簽8.<dt>標(biāo)簽9.<dd>標(biāo)簽10.<ol>標(biāo)簽11.<ul>標(biāo)簽12.<li>標(biāo)簽13.<pre>標(biāo)簽62.1.3文本標(biāo)簽1.<h1>~<h6>標(biāo)簽2.<b>標(biāo)簽3.<i>標(biāo)簽4.<u>標(biāo)簽5.<sub>標(biāo)簽6.<sup>標(biāo)簽7.<tt>標(biāo)簽8.<cite>標(biāo)簽9.<em>標(biāo)簽10.<strong>標(biāo)簽11.<font>標(biāo)簽72.1.4超鏈接標(biāo)簽1.<ahref=“”>標(biāo)簽2.<aname=“”>標(biāo)簽82.1.5圖像標(biāo)簽1.<img>標(biāo)簽2.<hr>標(biāo)簽92.1.6框架標(biāo)簽1.<frameset>標(biāo)簽2.<frame>標(biāo)簽3.<noframes>標(biāo)簽4.<iframe>標(biāo)簽102.1.7表格標(biāo)簽1.<table>標(biāo)簽2.<tr>標(biāo)簽3.<td>標(biāo)簽4.<th>標(biāo)簽5.<caption>標(biāo)簽112.1.8表單標(biāo)簽1.<form>標(biāo)簽2.<input>標(biāo)簽3.<select>標(biāo)簽4.<textarea>標(biāo)簽5.<label>標(biāo)簽122.1.9頭元素標(biāo)簽1.<base>標(biāo)簽2.<link>標(biāo)簽3.<meta>標(biāo)簽132.1.10區(qū)域標(biāo)簽1.<div>標(biāo)簽2.<span>標(biāo)簽3.<p>標(biāo)簽142.2CSS的運(yùn)用1.內(nèi)聯(lián)樣式表2.嵌入樣式表3.外聯(lián)樣式表4.導(dǎo)入樣式表152.2.1樣式規(guī)則選擇器1.HTML標(biāo)簽選擇器2.類選擇器3.ID選擇器4.通用選擇器5.偽類選擇器162.2.2樣式規(guī)則的注釋樣式規(guī)則的注釋是使用/*需要注釋的內(nèi)容*/進(jìn)行的。即在需要注釋的內(nèi)容前使用“/*”標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用“*/”結(jié)束。注釋可以多行內(nèi)容注釋。其注釋范圍在“/*”與“*/”之間。下面通過(guò)一個(gè)示例來(lái)演示注釋的使用：.header{ /*頭部樣式*/ FONT-SIZE:11px; COLOR:black;}172.3JavaScript語(yǔ)言的運(yùn)用腳本程序代碼放在HTML文檔的<script></script>標(biāo)簽對(duì)之間，當(dāng)瀏覽器讀取到網(wǎng)頁(yè)文件的<script>標(biāo)簽后，就會(huì)自動(dòng)地把其中的內(nèi)容作為某種程序語(yǔ)言進(jìn)行解釋和執(zhí)行，而不再把它們看作網(wǎng)頁(yè)中的普通文本。首先來(lái)看一段簡(jiǎn)單的腳本語(yǔ)言的應(yīng)用，編寫一個(gè)網(wǎng)頁(yè)文件(htmldemo2.html)如下：<html> <script>

alert("你好，我是秀秀"); </script></html>用瀏覽器打開文件，顯示效果如圖2.6所示。182.3.1應(yīng)該在何處編寫JavaScriptJavaScript腳本代碼的編寫可以在3個(gè)地方，具體如下。(1) 在網(wǎng)頁(yè)文件中的<script></script>標(biāo)簽對(duì)之間直接編寫。這種做法前面已經(jīng)演示過(guò)。(2) 將腳本代碼寫在一個(gè)單獨(dú)的文件中。即把腳本代碼放置在一個(gè)擴(kuò)展名為.js的文件中，然后在網(wǎng)頁(yè)文件中引入腳本文件即可。用瀏覽器打開網(wǎng)頁(yè)文件，會(huì)顯示如圖2.7所示的效果。192.3.1應(yīng)該在何處編寫JavaScript(3) 將腳本代碼作為某個(gè)標(biāo)簽的事件屬性值或超鏈接的href屬性值。例如，以腳本代碼作為超鏈接的href屬性的值，單擊超鏈接，即可執(zhí)行腳本代碼，如下：<html><ahref="javascript:alert("你好，我是秀秀")">javascript</a></html>用瀏覽器打開網(wǎng)頁(yè)文件，單擊超鏈接“javascript”，會(huì)顯示與前面同樣的效果。202.3.2JavaScript中的注釋JavaScript腳本語(yǔ)言與其他語(yǔ)言一樣，都有自己的注釋，在JavaScript中有兩種注釋，一種是單行注釋，另外一種是多行注釋，如下：//單行注釋/*多行注釋...*/212.3.3JavaScript中函數(shù)的使用在JavaScript中定義函數(shù)時(shí)，必須以function關(guān)鍵字開頭。定義一個(gè)函數(shù)的格式如下：function函數(shù)名(參數(shù)列表){

程序代碼

return表達(dá)式;}這里先做一個(gè)簡(jiǎn)單的參數(shù)個(gè)數(shù)固定的應(yīng)用，代碼如下所示：參見教材P60用瀏覽器打開文件，單擊say按鈕，會(huì)顯示如圖2.8所示的效果。222.4DIV的運(yùn)用div元素是用來(lái)為HTML文件的內(nèi)容提供結(jié)構(gòu)和背景的元素。div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。而div能使我們看到希望的曙光。利用div可以精確地設(shè)定要素的位置，還能將定位的要素疊放在彼此之上。下面給出用div設(shè)計(jì)的一個(gè)效果，如圖2.9所示。232.5常見樣式分析CSS+DIV+JavaScript的應(yīng)用，可以制作出絢麗的效果。下面分析一個(gè)求職網(wǎng)站的簡(jiǎn)歷管理頁(yè)面，效果如圖2.10所示。242.5常見樣式分析在簡(jiǎn)歷管理頁(yè)中，開發(fā)人員對(duì)注冊(cè)用戶的注冊(cè)信息用JavaScript進(jìn)行驗(yàn)證，比如用戶的姓名為必須輸入的，E-mail只能為****@**.com格式等。另外開發(fā)人員還對(duì)日期選項(xiàng)和現(xiàn)居住地址進(jìn)行了級(jí)聯(lián)驗(yàn)證。在用戶選擇證件類型的時(shí)候，如果用戶選擇的類型為身份證，那么證件號(hào)碼只能由18位或15位的數(shù)字組成，如果用戶選擇的證件類型為軍人證，那么證件號(hào)碼就必須符合軍人證的證件號(hào)的規(guī)則。簡(jiǎn)歷管理頁(yè)面中簡(jiǎn)歷信息注冊(cè)表單的主要代碼如下：參見教材P6225

溫馨提示

  • 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)論