鱼丸捕鱼大作战9周年

書名： Java Web程序設計（慕課版）
作者名：梁永先李樹強朱林
本章字數： 5229字
更新時間： 2020-06-12 15:31:17

2.1 HTML

在瀏覽器的地址欄中輸入一個網址，就會展示出相應的網頁內容。在網頁中包含有很多內容，例如，文字、圖片、動畫，以及聲音和視頻等。網頁的最終目的是為訪問者提供有價值的信息。提到網頁設計不得不提到超文本標記語言（Hypertext Markup Language，HTML）。HTML用于描述超文本中內容的顯示方式。使用HTML可以實現在網頁中定義一個標題、文本或者表格等。本節將為大家詳細介紹HTML標記語言。

什么是HTML？

HTML是一種超文本語言，在因特網上常見的網頁制作標注性語言。HTML是通過瀏覽器的翻譯，將網頁中內容呈現給用戶。

2.1.1 創建第一個HTML文件

編寫HTML文件可以通過兩種方式，一種是手工編寫HTML代碼，另一種是借助一些開發軟件，如Adobe公司的Dreamweaver或者微軟公司的Expression Web這樣的網頁制作軟件。在Windows操作系統中，最簡單的文本編輯軟件就是記事本。

下面為大家介紹應用記事本編寫第一個HTML文件。HTML文件的創建方法非常簡單，具體步驟如下。

（1）單擊“開始”菜單，依次選擇“程序/附件/記事本”命令。

（2）在打開的記事本窗體中編寫代碼，如圖2-1所示。

圖2-1　在記事本中輸入HTML文件內容

（3）編寫完成之后，需要將其保存為HTML格式文件，具體步驟為：選擇記事本菜單欄中的“文件/ 另存為”命令，在彈出的另存為對話框中，首先在“保存類型”下拉列表中選擇“所有文件”選項，然后在“文件名”文本框中輸入一個文件名，需要注意的是，文件名的后綴應該是“.htm”或者“.html”，如圖2-2所示。

圖2-2　保存HTML文件

說明

如果沒有修改記事本的“保存類型”，那么記事本會自動將文件保存為“.txt”文件，即普通的文本文件，而不是網頁類型的文件。

（4）設置完成后，單擊“保存”按鈕，則成功保存了HTML文件。此時，雙擊該HTML文件，就會顯示頁面內容，效果如圖2-3所示。

圖2-3　運行HTML文件

這樣就完成了第一個HTML文件的編寫。盡管該文件內容非常簡單，但是卻體現了HTML文件的特點。

說明

在瀏覽器的顯示頁面中，單擊鼠標右鍵選擇“查看源代碼”命令，這時會自動打開記事本程序，里面顯示的則為HTML源文件。

2.1.2 HTML文檔結構

HTML文檔結構

HTML文檔由4個主要標記組成，這4個標記主要有<html>、<head>、<title>、<body>。上節中為大家介紹的實例中，就包含了這4個標記，這4個標記構成了HTML頁面最基本的元素。

1. <html>標記

<html>標記是HTML文件的開頭。所有HTML文件都是以<html>標記開頭，以</html>標記結束。HTML頁面的所有標記都要放置在<html>與</html>標記中，<html>標記并沒有實質性的功能。但卻是HTML文件不可缺少的內容。

說明

HTML標記是不區分大小寫的。

2. <head>標記

<head>標記是HTML文件的頭標記，作用是放置HTML文件的信息。如定義CSS樣式代碼可放置在<head>與</head>標記之中。

3. <title>標記

<title>標記為標題標記。可將網頁的標題定義在<title>與</title>標記之中。例如，在2.1.1小節中定義的網頁標題為“HTML頁面”，如圖2-4所示。<title>標記被定義在<head>標記中。

圖2-4　<title>標記定義頁面標題

4. <body>標記

<body>是HTML頁面的主體標記。頁面中的所有內容都定義在<body>標記中。<body>標記也是成對使用的。以<body>標記開頭，</body>標記結束。<body>標記本身也具有控制頁面的一些特性，如控制頁面的背景圖片和顏色等。

本節中介紹的是HTML頁面的最基本的結構。要深入學習HTML語言，創建更加完美的網頁，必須學習HTML語言的其他標記。

2.1.3 HTML文本標記

HTML文本標記

HTML中提供了很多標記，可以用來設計頁面中的文字、圖片，定義超鏈接等。這些標記的使用可以使頁面更加生動。下面為大家介紹HTML中的文本標記。

1. 換行標記

要讓網頁中的文字實現換行，在HTML文件中輸入換行符（Enter鍵）是沒有用的，如果要讓頁面中的文字實現換行，就必須用一個標記告訴瀏覽器在哪里要實現換行操作。在HTML語言中，換行標記為“<br>”。

與前面為大家介紹的HTML標記不同，換行標記是一個單獨標記，不是成對出現的。下面通過實例為大家介紹換行標記的使用。

【例2-1】創建HTML頁面，實現在頁面中輸出一首古詩。

　　<html>
　　<head>
　　     <title>應用換行標記實現頁面文字換行</title>
　　  </head>
　　  <body>
　　     <b>
　　       黃鶴樓送孟浩然之廣陵
　　     </b><br>
　　       故人西辭黃鶴樓，煙花三月下揚州。<br>
　　       孤帆遠影碧空盡，唯見長江天際流
　　  </body>
　　</html>

運行本實例，效果如圖2-5所示。

圖2-5　在頁面中輸出古詩

2. 段落標記

HTML中的段落標記也是一個很重要的標記，段落標記以<p>標記開頭，以</p>標記結束。段落標記在段前和段后各添加一個空行，而定義在段落標記中的內容不受該標記的影響。

3. 標題標記

在Word文檔中，可以很輕松地實現不同級別的標題。如果要在HTML頁面中創建不同級別的標題，可以使用HTML語言中的標題標記。在HTML標記中，設定了6個標題標記，分別為<h1>至<h6>，其中<h1>代表1級標題，<h2>代表2級標題，<h6>代表6級標題等。數字越小，表示級別越高，文字的字體也就越大。

【例2-2】在HTML頁面中定義文字，并通過標題標記和段落標記設置頁面布局。

　　<html>
　　    <head>
　　  <title>設置標題標記</title>
　　    </head>
　　    <body>
　　     <h1>java開發的3個方向</h1>
　　      <h2>Java SE</h2>
　　      <p>主要用于桌面程序的開發。它是學習Java EE和Java ME的基礎，也是本書的重點內容。</p>
　　      <h2>Java EE</h2>
　　      <p>主要用于網頁程序的開發。隨著互聯網的發展，越來越多的企業使用Java語言來開發自己的官方網站，
其中不乏世界500強企業。</p>
　　      <h2>Java ME</h2>
　　      <p>主要用于嵌入式系統程序的開發。</p>
　　   </body>
　　</html>

運行本實例，結果如圖2-6所示。

圖2-6　使用標題標記和段落標記設計頁面

4. 居中標記

HTML頁面中的內容有一定的布局方式，默認的布局方式是從左到右依次排序。如果要想讓頁面中的內容在頁面的居中位置顯示，可以使用HTML中的<center>標記。<center>居中標記以<center>標記開頭，以</center>標記結尾。標記之中的內容為居中顯示。

將例2-2中的代碼進行修改，使用居中標記，將頁面內容居中。

【例2-3】使用居中標記對頁面中的內容進行居中處理。

　　<html>
　　    <head>
　　  <title>設置標題標記</title>
　　    </head>
　　    <body>
　　      <center>
　　      <h1>java開發的3個方向</h1>
　　      <h2>Java SE</h2>
　　      <p>主要用于桌面程序的開發。它是學習Java EE和Java ME的基礎，也是本書的重點內容。</p>
　　      <h2>Java EE</h2>
　　      <center>
　　      <p>主要用于網頁程序的開發。隨著互聯網的發展，越來越多的企業使用Java語言來開發自己的官方網站，
其中不乏世界500強企業。</p>
　　      </center>
　　      <h2>Java ME</h2>
　　      <center>
　　      <p>主要用于嵌入式系統程序的開發。</p>
　　      </center>
　　   </body>
　　</html>

將頁面中的內容進行居中后的效果如圖2-7所示。

5. 文字列表標記

HTML語言中提供了文字列表標記，文字列表標記可以將文字以列表的形式依次排列。通過這種形式可以更加方便網頁的訪問者。HTML中的列表標記主要有無序的列表和有序的列表兩種。

圖2-7　將頁面中的內容進行居中處理

（1）無序列表

無序列表是在每個列表項的前面添加一個圓點符號。通過符號<ul>可以創建一組無序列表，其中每一個列表項以<li>表示。下面的實例為大家演示了無序列表的應用。

【例2-4】使用無序列表對頁面中的文字進行排序。

　　<html>
　　    <head>
　　  <title>無序列表標記</title>
　　    </head>
　　    <body>
　　      編程詞典有以下幾個品種
　　      <p>
　　      <ul>
　　       <li>Java編程詞典
　　       <li>VB編程詞典
　　       <li>VC編程詞典
　　       <li>.net編程詞典
　　       <li>C#編程詞典
　　      </ul>
　　   </body>
　　</html>

本實例的運行結果如圖2-8所示。

圖2-8　在頁面中使用無序列表

（2）有序列表

有序列表和無序列表的區別是，使用有序列表標記可以將列表項進行排號。有序列表的標記為<ol>，每一個列表項前使用<li>。有序列表中項目項是有一定的順序的。下面將例2-4進行修改，使用有序列表進行排序。

【例2-5】使用有序列表對頁面中的文字進行排序。

　　<html>
　　    <head>
　　  <title>無序列表標記</title>
　　    </head>
　　    <body>
　　 編程詞典有以下幾個品種
　　 <p>
　　 <ol>
　　   <li>Java編程詞典
　　   <li>VB編程詞典
　　   <li>VC編程詞典
　　   <li>.net編程詞典
　　   <li>C#編程詞典
　　 </ol>
　　   </body>
　　</html>

運行本實例，結果如圖2-9所示。

圖2-9　在頁面中插入有序列的列表

6. 區域標記

<span>標簽是用來組合文檔中的行內元素。它本身是沒有固定的格式的，對它應用樣式時，它將會對劃好的區域進行渲染。

<div>標簽與<span>標簽類似，但兩者的區別是：<span>標簽是行內元素，而<div>則是塊元素，<div>的作用范圍比<span>更大。

【例2-6】使用<span>和<div>標簽為指定區域添加樣式。

　　<html>
　　<head>
　　</head>
　　<style>
　　#right {
　　     float: right;
　　        color: blue;
　　}
　　#center {
　　     font-family: 宋體;
　　     font-size: 24px;
　　     color: red;
　　}
　　</style>
　　<body>
　　     <a><span id="right">span效果</span></a>
　　     <div id="center">
　　     <a>div效果1</a><br /> <a>div效果2</a>
　　     </div>
　　</body>
　　</html>

運行本實例，結果如圖2-10所示。

圖2-10　<span>標簽和<div>標簽的使用效果

2.1.4 表格標記

表格標記

表格是網頁中十分重要的組成元素。表格用來存儲數據。表格包含標題、表頭、行和單元格。在HTML中，表格標記使用符號<table>表示。定義表格只使用<table>是不夠的，還需要定義表格中的行、列、標題等內容。在HTML頁面中定義表格，需要學會以下幾個標記。

□ 表格標記<table>

<table>…</table>標記表示整個表格。<table>標記中有很多屬性，例如，width屬性用來設置表格的寬度，border屬性用來設置表格的邊框，align屬性用來設置表格的對齊方式，bgcolor屬性用來設置表格的背景色等。

□ 標題標記<caption>

標題標記以<caption>開頭，以</caption>結束。標題標記也有一些屬性，例如，align、valign等。

□ 表頭標記<th>

表頭標記以<th>開頭，以</th>結束，也可以通過align、background、colspan、valign等屬性來設置表頭。

□ 表格行標記<tr>

表格行標記以<tr>開頭，以</tr>結束，一組<tr>標記表示表格中的一行。<tr>標記要嵌套在<table>標記中使用，該標記也具有align、background等屬性。

□ 單元格標記<td>

單元格標記<td>又稱為列標記，一個<tr>標記中可以嵌套若干個<td>標記。該標記也具有align、background、valign等屬性。

【例2-7】在頁面中定義學生成績表。

　　<body>
　　<table width="318" height="167" border="1" align="center">
　　  <caption>學生考試成績單</caption>
　　  <tr>
　　    <td align="center" valign="middle">姓名</td>
　　    <td align="center" valign="middle">語文</td>
　　    <td align="center" valign="middle">數學</td>
　　    <td align="center" valign="middle">英語</td>
　　  </tr>
　　  <tr>
　　    <td align="center" valign="middle">張三</td>
　　    <td align="center" valign="middle">89</td>
　　    <td align="center" valign="middle">92</td>
　　    <td align="center" valign="middle">87</td>
　　  </tr>
　　  <tr>
　　    <td align="center" valign="middle">李四</td>
　　    <td align="center" valign="middle">93</td>
　　    <td align="center" valign="middle">86</td>
　　    <td align="center" valign="middle">80</td>
　　  </tr>
　　  <tr>
　　    <td align="center" valign="middle">王五</td>
　　    <td align="center" valign="middle">85</td>
　　    <td align="center" valign="middle">86</td>
　　    <td align="center" valign="middle">90</td>
　　  </tr>
　　</table>
　　</body>

運行本實例，結果如圖2-11所示。

圖2-11　在頁面中定義學生成績表

說明

表格不僅可以用于顯示數據，在實際開發中，也常常會用于設計頁面。在頁面中創建一個表格，并設置沒有邊框，之后通過該表格將頁面劃分幾個區域，分別對幾個區域進行設計。這是一種非常方便的設計頁面的方式。

2.1.5 HTML表單標記

<form>…<form>表單標記

經常上網的人對網站中的登錄等頁面肯定不會感到陌生。在登錄頁面中，網站會提供給用戶用戶名文本框與密碼文本框以供訪客輸入信息。這里的用戶名文本框與密碼文本框就屬于HTML中的表單元素。表單在HTML頁面中起著非常重要的作用，是用戶與網頁交互信息的重要手段。

1. <form>…</form>表單標記

表單標記以<form>標記開頭，以</form>標記結尾。在表單標記中，可以定義處理表單數據程序的URL地址等信息。<form>標記的基本語法如下：

　　<form action = "url" method = "get'|"post" name = "name" onSubmit = "" target ="">
　　</form>

<form>標記的各屬性說明如下。

□ action屬性：用來指定處理表單數據程序的URL地址。

□ method屬性：用來指定數據傳送到服務器的方式。該屬性有兩種屬性值，分別為get與post。get屬性值表示將輸入的數據追加在action指定的地址后面，并傳送到服務器。當屬性值為post時，會將輸入的數據按照HTTP協議中post傳輸方式傳送到服務器。

□ name屬性：指定表單的名稱，該屬性值程序員可以自定義。

□ onSubmit屬性：onSubmit屬性用于指定當用戶單擊提交按鈕時觸發的事件。

□ target屬性：target屬性指定輸入數據結果顯示在哪個窗口中，該屬性的屬性值可以設置為“_blank”“_self”“_parent”“_top”。其中“_blank”表示在新窗口中打開目標文件，“_self”表示在同一個窗口中打開，這項一般不用設置，“_parent”表示在上一級窗口中打開。一般使用框架頁時經常使用，“_top”表示在瀏覽器的整個窗口中打開，忽略任何框架。

下面的例子為創建表單，設置表單名稱為form，當用戶提交表單時，提交至action.html頁面進行處理，代碼如下。

【例2-8】定義表單元素，代碼如下：

　　<form id="form1" name="form" method="post" action="action.html" target= "_blank">
　　</form>

2. <input>表單輸入標記

<input type="image" disabled="disabled" checked="checked" width="digit" <input>表單輸入標記

表單輸入標記是使用最頻繁的表單標記，通過這個標記可以向頁面中添加單行文本、多行文本、按鈕等。<input>標記的語法格式如下：

　　<input type="image" disabled="disabled" checked="checked" width="digit"
　　height="digit"  maxlength=  "digit"  readonly=""  size="digit"  src="uri"  usemap="uri"  alt=""  name="checkbox"
　　value="checkbox">

<input>標記的屬性見表2-1。

表2-1　<input>標記的屬性

type屬性是<input>標記中非常重要的內容，決定了輸入數據的類型。該屬性值的可選項見表2-2。

表2-2　type屬性的屬性值

【例2-9】在該文件中首先應用<form>標記添加一個表單，將表單的action屬性設置為register_deal.jsp，method屬性設置為post，然后應用<input>標記添加獲取用戶名和E-mail的文本框、獲取密碼和確認密碼的密碼域、選擇性別的單選按鈕、選擇愛好的復選按鈕、提交按鈕、重置按鈕。關鍵代碼如下：

　　<body><form action="" method="post" name="myform">
　　    用 戶 名：<input name="username" type="text" id="UserName4" maxlength="20">
　　    密碼：<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20">
　　    確認密碼：<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20">
　　    性別：<input name="sex" type="radio" class="noborder" value="男" checked>
　　              男&nbsp;
　　              <input name="sex" type="radio" class="noborder" value="女">
　　              女
　　     愛好：<input name="like" type="checkbox" id="like" value="體育">
　　            體育
　　            <input name="like" type="checkbox" id="like" value="旅游">
　　            旅游
　　            <input name="like" type="checkbox" id="like" value="聽音樂">
　　            聽音樂
　　            <input name="like" type="checkbox" id="like" value="看書">
　　            看書
　　     E-mail：<input name="email" type="text" id="PWD224" size="50">
　　          <input name="Submit" type="submit" class="btn_grey" value="確定保存">
　　          <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填寫">
　　          <input type="image" name="imageField" src="images/btn_bg.jpg">
　　</form>

完成在頁面中添加表單元素后，即形成了網頁的雛形。頁面運行結果如圖2-12所示。

圖2-12　博客網站的注冊頁面

3. <select>…</select>下拉菜單標記

<select>…<select>下拉菜單標記

<select>標記可以在頁面中創建下拉列表，此時的下拉列表是一個空的列表，要使用<option>標記向列表中添加內容。<select>標記的語法格式如下：

　　<select name="name" size="digit" multiple="multiple" disabled="disabled">
　　</select>

<select>標記的屬性說明見表2-3。

表2-3　<select>標記的屬性

【例2-10】在頁面中應用<select>標記和<option>標記添加下拉列表框和多行下拉列表框，關鍵代碼如下：

下拉列表框：

　　<select name="select">
　　  <option>數碼相機區</option>
　　  <option>攝影器材</option>
　　  <option>MP3/MP4/MP5</option>
　　  <option>U盤/移動硬盤</option>
　　</select>
　　 &nbsp;多行列表框（不可多選）：
　　<select name="select2" size="2">
　　  <option>數碼相機區</option>
　　  <option>攝影器材</option>
　　  <option>MP3/MP4/MP5</option>
　　  <option>U盤/移動硬盤</option>
　　</select>
　　 &nbsp;多行列表框（可多選）：
　　<select name="select3" size="3" multiple>
　　  <option>數碼相機區</option>
　　  <option>攝影器材</option>
　　  <option>MP3/MP4/MP5</option>
　　  <option>U盤/移動硬盤</option>
　　</select>

運行本程序，可發現在頁面中添加了下拉列表如圖2-13所示。

圖2-13　在頁面中添加的下拉列表

4. <textarea>多行文本標記

<textarea>多行文本標記

<textarea>為多行文本標記，與單行文本相比，多行文本可以輸入更多的內容。通常情況下，<textarea>標記出現在<form>標記的標記內容中。<textrare>標記的語法格式如下：

　　<textarea  cols="digit"  rows="digit"  name="name"  disabled="disabled"  readonly
="readonly" wrap="value">默認值</textarea>

<textarea>標記的屬性說明見表2-4。

表2-4　<textarea>標記屬性說明

【例2-11】在頁面中創建表單對象，并在表單中添加一個多行文本框，文本框的名稱為content，文字換行方式為hard，關鍵代碼如下：

　　<form name="form1" method="post" action="">
　　      <textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
　　</form>

運行本實例，在頁面中的多行文本框中可輸入任意內容，運行結果如圖2-14所示。

圖2-14　在頁面的多行文本框中輸入內容

2.1.6 超鏈接與圖片標記

超鏈接與圖片標記

HTML的標記有很多，本書由于篇幅有限不能一一為大家介紹，只能介紹一些文本標記。除了上面介紹的文本標記外，還有兩個標記必須向大家介紹，超鏈接標記與圖片標記。

1. 超鏈接標記<a>

超鏈接標記是頁面中非常重要的元素，在網站中實現從一個頁面跳轉到另一個頁面，這個功能就是通過超鏈接標記來完成。超鏈接標記的語法非常簡單。語法如下：

　　<a href = ""></a>

屬性href用來設定連接到哪個頁面中。

2. 圖像標記

大家在瀏覽網站中通常會看到各式各樣漂亮的圖片，在頁面中添加的圖片是通過<img>標記來實現的。<img>標記的語法格式如下：

　　<img src="url" width="value" height="value" border="value" alt="提示文字" >

這里的url是以當前項目的WebContent目錄作為默認的根目錄，例如，WebContent文件夾下有一個子文件夾images，其中有一個顯示成功的圖片，該圖片訪問路徑就是“images/success.jpg”。

<img>標記的屬性說明見表2-5。

表2-5　<img>標記的常用屬性

下面給出具體實例，為讀者演示超鏈接和圖像標記的使用。

【例2-12】在頁面中添加表格，在表格中插入圖片和超鏈接。

　　<table width="409" height="523" border="1" align="center">
　　  <tr>
　　    <td width="199" height="208">
　　     <img src="images/ASP.NET.jpg" />
　　    </td>
　　    <td width="194">
　　     <img src="images/C#.jpg"/>
　　    </td>
　　  </tr>
　　  <tr>
　　    <td height="35" align="center" valign="middle"><a href="message.html">查看詳情</a></td>
　　    <td align="center" valign="middle"><a href="message.html">查看詳情</a></td>
　　  </tr>
　　  <tr>
　　    <td height="227"><img src="images/Java .jpg"/></td>
　　    <td><img src="images/VB.jpg"/></td>
　　  </tr>
　　  <tr>
　　    <td height="35" align="center" valign="middle"><a href="message.html">查看詳情</a></td>
　　    <td align="center" valign="middle"><a href="message.html">查看詳情</a></td>
　　  </tr>
　　</table>

運行本實例，結果如圖2-15所示。

圖2-15　頁面中添加圖片和超鏈接

頁面中的“查看詳情”為超鏈接，當用戶單擊該超鏈接后，將轉發至message.html頁面，如圖2-16所示。

圖2-16　message.html頁面的運行結果

官术网_书友最值得收藏!

Java Web程序設計（慕課版）

2.1 HTML

2.1.1 創建第一個HTML文件

2.1.2 HTML文檔結構

2.1.3 HTML文本標記

【例2-1】 創建HTML頁面，實現在頁面中輸出一首古詩。

【例2-2】 在HTML頁面中定義文字，并通過標題標記和段落標記設置頁面布局。

【例2-3】 使用居中標記對頁面中的內容進行居中處理。

【例2-4】 使用無序列表對頁面中的文字進行排序。

【例2-5】 使用有序列表對頁面中的文字進行排序。

【例2-6】 使用<span>和<div>標簽為指定區域添加樣式。