电子游戏如何爆分

書名： Java Web從入門到精通（第2版）
作者名：明日科技
本章字數： 4983字
更新時間： 2020-11-28 17:38:14

2.1 HTML標記語言

視頻講解：光盤\TM\lx\2\01 HTML標記語言．mp4

相信所有讀者都有上網沖浪的習慣。在瀏覽器的地址欄中輸入一個網址，就會查閱到相應的網頁內容。在網頁中包含很多內容，如文字、圖片、動畫，以及聲音和視頻等。網頁的最終目的是為訪問者提供有價值的信息。提到網頁設計，不得不提到HTML標記語言，HTML的全稱是Hypertext Markup Language，即超文本標記語言。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所示。

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

圖2.3 運行HTML文件

技巧

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

2.1.2 HTML文檔結構

HTML文檔由4個主要標記組成，這4個標記是<html>、<head>、<title>和<body>。2.1.1節介紹的實例中就包含了這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中的常用標記。

1．換行標記

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

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

【例2.1】創建HTML頁面，實現在頁面中輸出一首古詩。（實例位置：光盤\TM\sl\2\1）

關鍵代碼如下：

        <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頁面中定義文字，并通過標題標記和段落標記設置頁面布局。（實例位置：光盤\TM\sl\2\2）

關鍵代碼如下：

        <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】使用居中標記對頁面中的內容進行居中處理。（實例位置：光盤\TM\sl\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>
            <p>主要用于網頁程序的開發。隨著互聯網的發展，越來越多的企業使用Java語言來開發自己的官方網站，
        其中不乏世界500強企業。</p>
            <h2>Java ME</h2>
            <p>主要用于嵌入式系統程序的開發。</p>
            </center>
          </body>
        </html>

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

圖2.7 將頁面中的內容進行居中處理

5．文字列表標記

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

無序列表

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

【例2.4】使用無序列表對頁面中的文字進行排序。（實例位置：光盤\TM\sl\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 在頁面中使用無序列表

有序列表

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

【例2.5】使用有序列表對頁面中的文字進行排序。（實例位置：光盤\TM\sl\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 在頁面中使用有序列表

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.6】在頁面中定義學生成績表。（實例位置：光盤\TM\sl\2\6）

關鍵代碼如下：

        <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.10 在頁面中定義學生成績表

運行本實例，結果如圖2.10所示。

說明

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

2.1.5 HTML表單標記

對于經常上網的人來說，對網站中的登錄等頁面肯定不會感到陌生。在登錄頁面中，網站會提供給用戶用戶名文本框與密碼文本框，以供訪客輸入信息。這里的用戶名文本框與密碼文本框就屬于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屬性

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

target屬性

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

【例2.7】創建表單，設置表單名稱為form，當用戶提交表單時，提交至action.html頁面進行處理。定義表單元素，代碼如下：

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

2.<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.8】在該文件中首先應用<form>標記添加一個表單，將表單的action屬性設置為register_deal.jsp, method屬性設置為post，然后應用<input>標記添加獲取用戶名和E-mail的文本框、獲取密碼和確認密碼的密碼域、選擇性別的單選按鈕、選擇愛好的復選框、提交按鈕和重置按鈕。（實例位置：光盤\TM\sl\2\7）

關鍵代碼如下：

        <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.11所示。

圖2.11 博客網站的注冊頁面

3.<select>…</select>下拉列表框標記

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

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

<select>標記的屬性如表2.3所示。

表2.3 <select>標記的屬性

【例2.9】在頁面中應用<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.12所示。

圖2.12 在頁面中添加的下拉列表框

4.<textarea>多行文本標記

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

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

<textarea>標記的屬性如表2.4所示。

表2.4 <textarea>標記的屬性

表2.5 wrap屬性的可選值

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

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

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

圖2.13 在頁面的多行文本框中輸入內容

2.1.6 超鏈接與圖片標記

HTML語言的標記有很多，本書由于篇幅有限，只能介紹一些常用標記。除了上面介紹的常用標記外，還有兩個標記需要介紹，即超鏈接標記和圖片標記。

1．超鏈接標記

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

        <a href = ""></a>

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

2．圖片標記

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

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

<img>標記的屬性如表2.6所示。

表2.6 <img>標記的屬性

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

【例2.11】在頁面中添加表格，在表格中插入圖片和超鏈接。（實例位置：光盤\TM\sl\2\8）

關鍵代碼如下：

        <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.14所示。

圖2.14 在頁面中添加圖片和超鏈接

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

圖2.15 message.html頁面的運行結果

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

Java Web從入門到精通（第2版）

2.1 HTML標記語言

2.1.1 創建第一個HTML文件

2.1.2 HTML文檔結構

2.1.3 HTML常用標記

2.1.4 表格標記

2.1.5 HTML表單標記

2.1.6 超鏈接與圖片標記