迪威国际app

書名： Java Web從入門到精通（第3版）
作者名：明日科技
本章字?jǐn)?shù)： 4444字
更新時間： 2020-06-29 17:33:50

2.1 HTML標(biāo)記語言

相信所有讀者都有在互聯(lián)網(wǎng)獲取信息的習(xí)慣。在瀏覽器的地址欄中輸入一個網(wǎng)址，就會展示出相應(yīng)的網(wǎng)頁內(nèi)容。在網(wǎng)頁中包含有很多內(nèi)容，如文字、圖片、動畫，以及聲音和視頻等。網(wǎng)頁的最終目的是為訪問者提供有價值的信息。提到網(wǎng)頁設(shè)計不得不提到HTML標(biāo)記語言，HTML全稱Hypertext Markup Language，譯為超文本標(biāo)記語言。HTML用于描述超文本中內(nèi)容的顯示方式。使用HTML可以實現(xiàn)在網(wǎng)頁中定義一個標(biāo)題、文本或者表格等。本節(jié)將詳細(xì)介紹HTML標(biāo)記語言。

2.1.1 創(chuàng)建第一個HTML文件

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

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

（1）依次選擇“開始”→“程序”→“附件”→“記事本”命令。

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

圖2.1 在記事本中輸入HTML文件內(nèi)容

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

圖2.2 保存HTML文件

說明

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

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

圖2.3 運行HTML文件

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

技巧

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

2.1.2 HTML文檔結(jié)構(gòu)

HTML文檔由4個主要標(biāo)記組成，這4個標(biāo)記是<html>、<head>、<title>和<body>。在2.1.1節(jié)中為大家介紹的實例里，就包含了這4個標(biāo)記，這4個標(biāo)記構(gòu)成了HTML頁面最基本的元素。

1．<html>標(biāo)記

<html>標(biāo)記是HTML文件的開頭。所有HTML文件都是以<html>標(biāo)記開頭，以</html>標(biāo)記結(jié)束。HTML頁面的所有標(biāo)記都要放置在<html>與</html>標(biāo)記中，<html>標(biāo)記并沒有實質(zhì)性的功能，但卻是HTML文件不可缺少的內(nèi)容。

說明

HTML標(biāo)記是不區(qū)分大小寫的。

2．<head>標(biāo)記

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

3．<title>標(biāo)記

<title>標(biāo)記為標(biāo)題標(biāo)記。可將網(wǎng)頁的標(biāo)題定義在<title>與</title>標(biāo)記中。例如在2.1.1節(jié)中定義的網(wǎng)頁的標(biāo)題為“HTML頁面”，如圖2.4所示。<title>標(biāo)記被定義在<head>標(biāo)記中。

圖2.4 <title>標(biāo)記定義頁面標(biāo)題

4．<body>標(biāo)記

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

本節(jié)中介紹的是HTML頁面最基本的結(jié)構(gòu)。要深入學(xué)習(xí)HTML語言，創(chuàng)建更加完美的網(wǎng)頁，必須學(xué)習(xí)HTML語言的其他標(biāo)記。

2.1.3 HTML常用標(biāo)記

HTML中提供了很多標(biāo)記，可以用來設(shè)計頁面中的文字、圖片，定義超鏈接等。這些標(biāo)記的使用可以使頁面更加生動，下面介紹HTML中的常用標(biāo)記。

1．換行標(biāo)記

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

與前面為大家介紹的HTML標(biāo)記不同，換行標(biāo)記是一個單獨標(biāo)記，不是成對出現(xiàn)的。下面通過實例來介紹換行標(biāo)記的使用。

【例2.1】創(chuàng)建HTML頁面，實現(xiàn)在頁面中輸出一首古詩。（實例位置：資源包\TM\sl\2\1）

運行本實例，結(jié)果如圖2.5所示。

圖2.5 在頁面中輸出古詩

2．段落標(biāo)記

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

3．標(biāo)題標(biāo)記

在Word文檔中，可以很輕松地實現(xiàn)不同級別的標(biāo)題。如果要在HTML頁面中創(chuàng)建不同級別的標(biāo)題，可以使用HTML語言中的標(biāo)題標(biāo)記。在HTML標(biāo)記中，設(shè)定了6個標(biāo)題標(biāo)記，分別為<h1>~<h6>，其中<h1>代表1級標(biāo)題，<h2>代表2級標(biāo)題……<h6>代表6級標(biāo)題。數(shù)字越小，表示級別越高，文字的字體也就越大。

【例2.2】在HTML頁面中定義文字，并通過標(biāo)題標(biāo)記和段落標(biāo)記設(shè)置頁面布局。（實例位置：資源包\TM\sl\2\2）

運行本實例，結(jié)果如圖2.6所示。

圖2.6 使用標(biāo)題標(biāo)記和段落標(biāo)記設(shè)計頁面

4．居中標(biāo)記

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

對例2.2中的代碼進行修改，使用居中標(biāo)記將頁面內(nèi)容居中。

【例2.3】使用居中標(biāo)記對頁面中的內(nèi)容進行居中處理。（實例位置：資源包\TM\sl\2\3）

將頁面中的內(nèi)容進行居中后的效果如圖2.7所示。

圖2.7 將頁面中的內(nèi)容進行居中處理

5．文字列表標(biāo)記

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

無序列表

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

【例2.4】使用無序列表對頁面中的文字進行排序。（實例位置：資源包\TM\sl\2\4）

本實例的運行結(jié)果如圖2.8所示。

圖2.8 在頁面中使用無序列表表

有序列表

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

【例2.5】使用有序列表對頁面中的文字進行排序。（實例位置：資源包\TM\sl\2\5）

運行本實例，結(jié)果如圖2.9所示。

圖2.9 在頁面中插入有序列的列表

2.1.4 表格標(biāo)記

表格是網(wǎng)頁中十分重要的組成元素。表格用來存儲數(shù)據(jù)。表格包含標(biāo)題、表頭、行和單元格。在HTML語言中，表格標(biāo)記使用符號<table>表示。定義表格僅使用<table>是不夠的，還需要定義表格中的行、列、標(biāo)題等內(nèi)容。在HTML頁面中定義表格，需要學(xué)會以下幾個標(biāo)記。

表格標(biāo)記<table>

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

標(biāo)題標(biāo)記<caption>

標(biāo)題標(biāo)記以<caption>開頭，以</caption>結(jié)束，標(biāo)題標(biāo)記也有一些屬性，例如align、valign等。

表頭標(biāo)記<th>

表頭標(biāo)記以<th>開頭，以</th>結(jié)束，也可以通過align、background、colspan、valign等屬性來設(shè)置表頭。

表格行標(biāo)記<tr>

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

單元格標(biāo)記<td>

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

【例2.6】在頁面中定義學(xué)生成績表。（實例位置：資源包\TM\sl\2\6）

運行本實例，結(jié)果如圖2.10所示。

圖2.10 在頁面中定義學(xué)生成績表

說明

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

2.1.5 HTML表單標(biāo)記

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

1．<form>…</form>表單標(biāo)記

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

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

<form>標(biāo)記的各屬性說明如下。

action屬性

該屬性用來指定處理表單數(shù)據(jù)程序的URL地址。

method屬性

該屬性用來指定數(shù)據(jù)傳送到服務(wù)器的方式。它有兩種屬性值，即get與post。get屬性值表示將輸入的數(shù)據(jù)追加在action指定的地址后面，并傳送到服務(wù)器。當(dāng)屬性值為post時，會將輸入的數(shù)據(jù)按照HTTP協(xié)議中的post傳輸方式傳送到服務(wù)器。

name屬性

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

onSubmit屬性

該屬性用于指定當(dāng)用戶單擊提交按鈕時觸發(fā)的事件。

target屬性

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

下面的例子為創(chuàng)建表單，設(shè)置表單名稱為form，當(dāng)用戶提交表單時，提交至action.html頁面進行處理。

【例2.7】定義表單元素，代碼如下：

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

2．<input>表單輸入標(biāo)記

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

     <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>標(biāo)記的屬性如表2.1所示。

表2.1 <input>標(biāo)記的屬性

type屬性是<input>標(biāo)記中非常重要的內(nèi)容，決定了輸入數(shù)據(jù)的類型。該屬性值的可選項如表2.2所示。

表2.2 type屬性的屬性值

【例2.8】在該文件中首先應(yīng)用<form>標(biāo)記添加一個表單，將表單的action屬性設(shè)置為register_deal.jsp，method屬性設(shè)置為post，然后應(yīng)用<input>標(biāo)記添加獲取用戶名和E-mail的文本框、獲取密碼和確認(rèn)密碼的密碼域、選擇性別的單選按鈕、選擇愛好的復(fù)選框、提交按鈕、重置按鈕。關(guān)鍵代碼如下：（實例位置：資源包\TM\sl\2\7）

在頁面中添加表單元素后，即形成了網(wǎng)頁的雛形。頁面運行結(jié)果如圖2.11所示。

圖2.11 博客網(wǎng)站的注冊頁面

3．<select>…</select>下拉列表框標(biāo)記

<select>標(biāo)記可以在頁面中創(chuàng)建下拉列表框，此時的下拉列表框是一個空的列表，要使用<option>標(biāo)記向列表中添加內(nèi)容。<select>標(biāo)記的語法格式如下：

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

<select>標(biāo)記的屬性如表2.3所示。

表2.3 <select>標(biāo)記的屬性

【例2.9】在頁面中應(yīng)用<select>標(biāo)記和<option>標(biāo)記添加下拉列表框和多行下拉列表框。關(guān)鍵代碼如下：

運行本程序，可發(fā)現(xiàn)在頁面中添加了下拉列表框，如圖2.12所示。

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

4．<textarea>多行文本標(biāo)記

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

     <textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默認(rèn)值
     </textarea>

<textarea>標(biāo)記的屬性如表2.4所示。

表2.4 <textarea>標(biāo)記的屬性

表2.5 wrap屬性的可選值

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

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

圖2.13 在頁面的多行文本框中輸入內(nèi)容

2.1.6 超鏈接與圖片標(biāo)記

HTML語言的標(biāo)記有很多，本書由于篇幅有限，不能一一為大家介紹，只能介紹一些常用標(biāo)記。除了上面介紹的常用標(biāo)記外，還有兩個標(biāo)記需要向大家介紹，即超鏈接標(biāo)記與圖片標(biāo)記。

1．超鏈接標(biāo)記

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

     <a href = ""></a>

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

2．圖片標(biāo)記

大家在瀏覽網(wǎng)頁時通常會看到各式各樣的漂亮圖片，在頁面中添加的圖片是通過<img>標(biāo)記來實現(xiàn)的。<img>標(biāo)記的語法格式如下：

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

<img>標(biāo)記的屬性如表2.6所示。

表2.6 <img>標(biāo)記的屬性

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

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

運行本實例，結(jié)果如圖2.14所示。

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

頁面中的“查看詳情”為超鏈接，當(dāng)用戶單擊該超鏈接后，將跳轉(zhuǎn)至message.html頁面，如圖2.15所示。

圖2.15 message.html頁面的運行結(jié)果

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

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