- JSP通用范例開發金典
- 趙麗 王樹森編著
- 2498字
- 2018-12-29 19:17:12
1.1 HTML基礎
范例1-1 創建一個HTML頁面
實例位置：光盤\ch01\1-1
范例說明 About the Example
本范例將新建一個基本的HTML頁面，給大家一個感性的認識。程序運行效果如圖1-1所示。
圖1-1 新建一個基本的HTML頁面運行效果圖
語法說明 About the Expression
<html></html>標記對，<head></head>標記對，<body></body>標記對，語言字符集信息<meta >標記，HTML的注釋語法標記<!--注釋內容-->。
標記及功能說明：
<html></html>標記對：代表整個HTML頁面，中間就是HTML頁面的內容。
<head></head>標記對：代表整個HTML頭。
<title></title>標記對：代表這個文件的標題。可以在瀏覽器最頂端的標題欄看到這個標題。
<body></body>標記對：代表整個HTML頁面體，主要的HTML代碼都在這個標記里面。
語言字符集信息<meta>標記：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">中的charset屬性指定了字符集為“UTF-8”，content屬性指定了這個頁面是“text/html”類型。
HTML的注釋語法標記<!--注釋內容-->中的內容都是注釋內容（如：<!--DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
關鍵步驟 Key Steps 1.打開Eclipse，新建一個工程，選擇【Web】下的【Dynamic Web Project】，輸入工程名——ch01，單擊【Finish】按鈕即可。 2.切換到Resource視圖，右擊Webcontent目錄下新建一個EX001目錄，然后在此目錄下新建一個HTML頁面，輸入文件名EX1-1.html，然后單擊【Finish】按鈕即可。 3.在body標記之間填上“Hello World！”。 4.打開瀏覽器，輸入http://127.0.0.1:8080/ch01/EX001/EX1-1.html，即可顯示如圖1-1所示的內容。 程序代碼 Codes 范例說明 About the Example 本范例介紹HTML網頁的背景色彩的設置和全局文字色彩的設置方法。程序運行效果如圖1-2所示。 圖1-2 設置HTML網頁的背景色彩的和全局文字色彩運行效果圖 語法說明 About the Expression <body></body>標記及其屬性說明： 語法形式：<body bgcolor = "#" text = "#" link = "#" alink = "#" vlink = "#"> ● bgcolor屬性——背景色彩。 ● text屬性——非可鏈接文字的色彩。 ● link屬性——可鏈接文字的色彩。 ● alink屬性——正被單擊的可鏈接文字的色彩。 ● vlink屬性——已經單擊（訪問）過的可鏈接文字的色彩。 # = rrggbb。 色彩是用16進制的紅-綠-藍（red-green-blue，RGB）值來表示。 16進制數有：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f。 關鍵步驟 Key Steps 1.打開Eclipse。 2.在ch01工程中的Webcontent目錄下新建一個EX002目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-2.html。 3.對body標記中的bgcolor和text屬性進行設置。 4.打開瀏覽器，輸入http://127.0.0.1:8080/ch01/EX002/EX1-2.html，即可顯示如圖1-2所示的內容。 程序代碼 Codes 范例說明 About the Example 本范例介紹在HTML里實現分段、換行和標尺線的功能。程序運行效果如圖1-3所示。 圖1-3 設置HTML網頁的背景色彩的和全局文字色彩運行效果圖 語法說明 About the Expression 1.<br>標記——換行 語法形式：<br> 通過使用<br>這個標記，可以在不新建段落的情況下換行。<br>沒有結束標記。用<p>換行是個壞習慣，正確的是使用<br>來換行。 2.<p></p>標記——劃分段落 語法形式：<p align = #>顯示內容</p> align屬性——設置水平對齊方式。 # = left（左對齊）、center（居中）、right（右對齊）。 由<p></p>標簽所標識的文字，代表同一個段落的文字。不同段落間的間距等于連續加了兩個<br>換行符，也就是要隔一行空白行，用以區別文字的不同段落。 3.<hr>標記——標尺線 ● size屬性——設置標尺線厚度，以像素為單位。 ● width屬性——設置標尺線長度。 ● align屬性——設置標尺線對齊方式。 ● color屬性——設置標尺線顏色。 ● noshade屬性——設定標尺線條為平面顯示，刪去則具有陰影或立體效果。 語法形式：<hr size = #1 width = #2 height = #2 align = #3 color = #4 noshade> #1 = 數字（默認為2px）。 #2 = 可用數字（絕對像素值）或百分比表示（為上一標記容器總寬度的百分比）;默認值為100%。 #3 = left（左對齊）、center（居中）、right（右對齊）。 #4 = rrggbb。 將標尺線用于段落與段落之間的分隔，使文檔結構清晰明了，使文字的編排更整齊。 關鍵步驟 Key Steps 1.打開Eclipse。 2.在ch01工程中的Webcontent目錄下新建一個EX003目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-3.html，輸入代碼。 3.打開瀏覽器，輸入http://127.0.0.1:8080/ch01/EX003/EX1-3.html，即可顯示如圖1-3所示的內容。 程序代碼 Codes 范例說明 About the Example 本范例介紹鏈接標記，通過它可以在Internet上的資源之間方便地跳轉。程序運行效果如圖1-4所示。 圖1-4 鏈接標記運行效果圖 (a) 帶鏈接的界面 (b) 帶注釋的鏈接 (c) 在父窗口打開 (d) 在新窗口打開。 語法說明 About the Expression <a></a>標記——表示鏈接可以指向任何一個文件源。 ● href屬性——定義這個鏈接所指的目標地址。 語法形式：<a href = "URL">鏈接顯示的內容</a> 單擊<a></a>當中的內容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。 ● title屬性——當鼠標懸停在鏈接上的時候，顯示該鏈接的文字注釋。 語法形式：<a href = "URL" title = "注釋內容">鏈接的顯示內容</a> ● target屬性——可以在一個新窗口里打開鏈接文件。 語法形式：<a href = "URL" target = "目標窗口的打開方式">鏈接的顯示內容</a> target = _parent在上一級窗口中打開，一般框架頁會經常使用；_blank在新窗口打開；_self在同一個窗口中打開，這項一般不用設置；_top在瀏覽器的整個窗口中打開，忽略任何框架；還可以為框架頁面中框架name所設定的字符。 關鍵步驟 Key Steps 1.打開Eclipse。 2.在ch01工程中的Webcontent目錄下新建一個EX004目錄，然后在此目錄下新建兩個HTML頁面，命名其文件名為EX1-4.html和EX1-4-example.html，輸入代碼。 3.打開瀏覽器，輸入http://127.0.0.1:8080/ch01/EX004/EX1-4.html，即可顯示如圖1-4所示的內容。 程序代碼 Codes 技巧： 在網站中，你經常會看到“聯系我們”的鏈接，點擊這個鏈接，就會觸發你的郵件客戶端；比如Out look Express，然后顯示一個新建E-mail的窗口。用<a>可以實現這樣的功能，例如<a href-"mailto:你的E-mail地址">聯系我們</a>。 范例說明 About the Example 本范例介紹網頁中鏈接標記的用法，跳轉到另一個文件的指定部位。程序運行效果如圖1-5所示。 圖1-5 跳轉到一個文件的指定部位運行效果圖 語法說明 About the Expression <a></a>標記——表示鏈接可以指向任何一個文件源。 name屬性——可以跳轉到一個文件的指定部位。 語法形式：<a href = "#name">鏈接的顯示內容</a> <a name = "name">鏈接的顯示內容</a> 使用name屬性，要設置一對。一是設定name的名稱；二是設定一個href指向這個name屬性。 關鍵步驟 Key Steps 1.打開Eclipse。 2.在ch01工程中的Webcontent目錄下新建一個EX005目錄，然后在此目錄下新建一個HTML頁面，命名其文件名為EX1-5.html，輸入代碼。 3.打開瀏覽器，輸入http://127.0.0.1:8080/ch01/EX005/EX1-5.html，即可顯示如圖1-5所示的內容。 程序代碼 Codes 拋磚引玉 About the Guidance 技巧： name屬性通常用于創建一個大章節的目錄。每個章節都會建立一個鏈接，放在章節的開始處，每個章節的開頭都設置name屬性。當用戶點擊某個章節的鏈接時，這個章節的內容就會顯示在文章內容的上面。如果瀏覽器不能找到name指定的部分，則跳到文章開頭，不會報錯。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
Hello World!
</body>
</html>
范例1-2 背景色彩和文字色彩
實例位置：光盤\ch01\1-2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body bgcolor="123456" text="ffffff">
Hello World!
</body>
</html>
范例1-3 換行、段落和標尺線
實例位置：光盤\ch01\1-3
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<p>JSP通用范例大全</p>
<p align=center>JSP通用范例大全</p>
<p align=right>JSP通用范例大全</p>
<hr size=6 width=50% align=left noshade> <!-- 標尺線大小為6，
寬度為瀏覽器長度的50%，左對齊，無陰影效果 -->
JSP通用范例大全
<hr color=ffaabb> <!-- 設置標尺線顏色 -->
第一行
<br><!-- 換行 -->
第二行
</body>
</html>
范例1-4 鏈接
實例位置：光盤\ch01\1-4
EX1-4.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<a href="EX1-4-sample.html">鏈接例子</a>
<br>
<a href="EX1-4-sample.html" title="Hello World!">鏈接例子帶注釋</a>
<br>
<a href="EX1-4-sample.html" target="_blank">新窗口</a>
</body>
</html>
EX1-4-example.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>鏈接范例</title>
</head>
<body>
新窗口!
</body>
</html>
范例1-5 跳轉到另一個文件的指定部位
實例位置：光盤\ch01\1-5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>JSP通用范例大全</title>
</head>
<body>
<a href="#fifth">見第五章</a>
<br><br>
<a name="first">第一章</a>
<p>JSP與HTML</p>
<a name="second">第二章</a>
<p>JSP與JavaScript</p>
<a name="third">第三章</a>
<p>JSP指令與動作</p>
<a name="fouth">第四章</a>
<p>JSP內部對象</p>
<a name="fifth">第五章</a>
<p>JSP表單處理</p>
</body>
</html>