- JavaScript 從入門到項目實踐（超值版）
- 聚慕課教育研發中心
- 7091字
- 2019-12-06 15:23:50
第4章
JavaScript開發基礎——HTML知識
◎本章教學微視頻：15個 45分鐘
學習指引
HTML即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言，是一種應用非常廣泛的網頁格式，也是被用來顯示Web頁面的語言之一。本章將詳細介紹HTML的基礎知識，主要內容包括HTML的文檔結構、HTML的常用標簽、HTML5的新增標簽。
重點導讀
- 掌握HTML的文檔結構。
- 掌握HTML的常用標簽。
- 掌握HTML5的新增標簽。
4.1 基本的HTML文檔
在一個HTML文檔中，必須包含<html></html>標簽（也稱標記）對，并且該標簽對需放在一個HTML文檔的開始和結束位置。即每個文檔以<html>開始，以</html>結束。<html>與</html>之間通常包含兩個部分，分別是<head></head>標簽對和<body></body>標簽對。<head></head>標簽對內包含HTML文件頭部信息，例如文檔標題、樣式定義等。<body></body>標簽對內包含文檔主體部分，即網頁內容。需要注意的是，<html>標簽不區分大小寫。
注：如果標簽是以成對的方式顯示，就說是標簽對，在介紹一個標簽對的屬性或方式時，習慣上是以開始標簽來說明，而不是以標簽對方式來說明。
為了便于讀者從整體把握HTML文檔的結構，下面通過一個HTML頁面來介紹HTML頁面的整體結構，示例代碼如下：
從上述代碼可以看出，一個基本的HTML頁面由以下幾個部分構成。
（1）<!DOCTYPE>聲明必須位于HTML5文檔中的第一行，也就是位于<html>標簽之前。該標簽用于告知瀏覽器文檔所使用的HTML規范。它是一條指令，告訴瀏覽器編寫頁面所用的標簽的版本。由于HTML5版本還沒有得到瀏覽器的完全認可，后面介紹時還采用以前通用的標準。
（2）<html></html>對說明本頁面是使用HTML語言編寫的，可使瀏覽器軟件能夠準確無誤地解釋、顯示。
（3）<head></head>對用于定義HTML的頭部信息，頭部信息不顯示在網頁中。在該標簽內可以嵌套其他標簽，用于說明文件標題和整個文件的一些公用屬性，如通過<style>標簽定義CSS樣式表，通過<script>標簽定義JavaScript腳本文件。
（4）<title></title>標簽對內的內容是HTML文件頭部信息中的重要組成部分，它包含的內容顯示在瀏覽器的窗口標題欄中。如果一個HTML文件沒有設置<title></title>標簽對內的內容，瀏覽器標題欄就只顯示本頁的文件名。
（5）<body></body>標簽對用來定義HTML頁面顯示在瀏覽器窗口的實際內容。例如，頁面中的文字、圖像、動畫、超鏈接以及其他HTML相關的內容都是在該標簽對中定義的。
4.1.1 文檔標簽
一般HTML的頁面以<html>標簽開始，以</html>標簽結束。HTML文檔中的所有內容都應位于這兩個標簽之間。如果這兩個標簽之間沒有內容，則該HTML文檔在IE瀏覽器中的顯示將是空白的。
<html>標簽的語法格式如下：
4.1.2 頭部標簽
頭部（<head></head>）標簽對內包含的是文檔的標題信息，如標題、關鍵字、說明以及樣式等。除了標題內容外，一般位于頭部標簽中的內容不會直接顯示在瀏覽器中，而是通過其他的方式顯示。
（1）內容。
頭部標簽中可以嵌套多個標簽，如<title>、<base>、<isindex>和<script>等，也可以添加任意數量的屬性，如<script>、<style>、<meta>或<object>等。除了<title>標簽外，嵌入的其他標簽可以使用多個。
（2）位置。
在所有的HTML文檔中，頭部標簽不可或缺，但是其起始和結尾標簽卻可以省去。在各個HTML的版本文檔中，頭部標簽一直緊跟<body>標簽，但在框架設置文檔中，其后跟的是<frameset>標簽。
（3）屬性。
<head>標簽的屬性profile給出了元數據描寫的位置，從中可以看到其中的meta和lind元素的特性。該屬性的形式沒有嚴格的格式規定。
4.1.3 主體標簽
主體標簽（<body>…</body>）包含了文檔的內容，用若干個屬性來規定文檔中顯示的背景和顏色。
主體標簽可能用到的屬性如下。
（1）background=url（文檔的背景圖像，url指圖像文件的路徑）。
（2）bgcolor=color（文檔的背景色）。
（3）text=color（文本顏色）。
（4）link=color（鏈接顏色）。
（5）vlink=color（已訪問的鏈接顏色）。
（6）alink=color（被選中的鏈接顏色）。
（7）onload=script（文檔已被加載）。
（8）onunload=script（文檔已推出）。
為該標簽添加屬性的代碼格式如下：
4.2 HTML的常用標簽
HTML文檔是由標簽組成的文檔，要熟練掌握HTML文檔的編寫，就要先了解HTML的常用標簽。
4.2.1 標題標簽<h1>到<h6>
在HTML文檔中，文本的結構除了以行和段的形式出現之外，還可以標題的形式存在。通常一篇文檔最基本的結構，就是由若干不同級別的標題和正文組成的。
HTML文檔中包含有各種級別的標題，各種級別的標題由元素<h1>到<h6>來定義，其中<h1>代表1級標題，級別最高，字號也最大，其他標題元素依次遞減，<h6>級別最低。
下面具體介紹一下標題的使用方法。
【例4-1】（實例文件：ch04\Chap4.1.html）標題標簽的使用。
相關的代碼示例請參考Chap4.1.html文件，在IE瀏覽器里面運行的結果如圖4-1所示。
圖4-1 標題標簽的應用
4.2.2 段落標簽<p>
段落標簽<p>用來定義網頁中的一段文本，文本在一個段落中會自動換行。段落標簽是雙標簽，即<p> 和</p>，在開始標簽<p>和結束標簽</p>之間的內容形成一個段落。如果省略掉結束標簽，從<p>標簽開始，那么直到在下一個段落標簽出現之前的文本，都將被默認為同一段段落內。
【例4-2】（實例文件：ch04\Chap4.2.html）段落標簽的使用。
相關的代碼示例請參考Chap4.2.html文件，在IE瀏覽器里面運行的結果如圖4-2所示。可以看出，<p>標簽將文本分成了3個段落。
圖4-2 段落標簽的應用
4.2.3 換行標簽<br>
使用換行標簽<br>可以給一段文字換行。該標簽是一個單標簽，沒有結束標簽，作用是將文字在一段內強制換行。一個<br>標簽代表一次換行，連續的多個標簽可以實現多次換行。使用換行標簽時，在需要換行的位置添加<br>標簽即可。
【例4-3】（實例文件：ch04\Chap4.3.html）換行標簽的使用。
相關的代碼示例請參考Chap4.3.html文件，在IE瀏覽器里面運行的結果如圖4-3所示。
圖4-3 換行標簽的應用
4.2.4 鏈接標簽<a>
鏈接標簽<a>是網頁中最為常用的標簽，主要用于把頁面中的文本或圖片鏈接到其他的頁面、文本或圖片。建立鏈接的要素有兩個，即可被設置為鏈接的網頁元素和鏈接指向的目標地址。鏈接的基本結構如下：
1．設置文本和圖片的鏈接
可被設置為鏈接的網頁元素是指網頁中通常使用的文本和圖片。文本鏈接和圖片鏈接通過<a>和</a>標簽來實現，將文本或圖片放在<a>開始標簽和</a>結束標簽之間即可建立文本和圖片鏈接。
【例4-4】（實例文件：ch04\Chap4.4.html）設置文本和圖片的鏈接。
相關的代碼示例請參考Chap4.4.html文件，在IE瀏覽器里面運行的結果如圖4-4所示，在其中可以查看到使用鏈接標簽設置文本和圖片的效果。
圖4-4 鏈接標簽的應用
2．設置電子郵件路徑
電子郵件路徑用來鏈接一個電子郵件的地址。其寫法如下：
【例4-5】（實例文件：ch04\Chap4.5.html）設置電子郵件路徑。
相關的代碼示例請參考Chap4.5.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用鏈接標簽設置電子郵件路徑的效果。當單擊含有鏈接的文本時，會彈出一個發送郵件的對話框，顯示效果如圖4-5所示。
圖4-5 設置電子郵件的路徑
4.2.5 列表標簽<ul>
文字列表可以有序地編排一些信息資源，使其結構化和條理化，并以列表的樣式顯示出來，以便瀏覽者能更加快捷地獲得相應信息。HTML中的文字列表如同文字編輯軟件Word中的項目符號和自動編號。
1．建立無序列表
無序列表相當于Word中的項目符號，無序列表的項目排列沒有順序，只以符號作為分項標識。無序列表的建立使用的是一對標簽<ul>和</ul>，其中每一個列表項的建立還要一對標簽<li>和</li>。其結構如下：
在無序列表結構中，使用<ul>和</ul>標簽表示該無序列表的開始和結束，<li>則表示該列表項的開始。在一個無序列表中可以包含多個列表項，并且<li>的結束標簽可以省略。
下面實例介紹了使用無序列表實現文本的排列顯示。
【例4-6】（實例文件：ch04\Chap4.6.html）建立無序列表。
相關的代碼示例請參考Chap4.6.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用列表標簽建立無序列表的效果，如圖4-6所示。
圖4-6 無序列表標簽的應用
通過觀察發現，無序列表項中，可以嵌套一個列表。如代碼中的“系統分析”列表項和“偽網頁草圖”列表項中都有下級列表，因此在這對<li>和</li>標簽間又增加了一對<ul>和</ul>標簽。
2．建立有序列表
有序列表類似于Word中的自動編號功能。有序列表的使用方法和無序列表的使用方法基本相同。它使用的標簽是<ol>和</ol>，每個列表項前使用的標簽是<li>和</li>，且每個項目都有前后順序之分，多數情況下，該順序使用數字表示。其結構如下：
【例4-7】（實例文件：ch04\Chap4.7.html）建立有序列表。
相關的代碼示例請參考Chap4.7.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用列表標簽建立有序列表后的效果了，如圖4-7所示。
圖4-7 有序列表標簽的應用
4.2.6 圖像標簽<img>
圖像可以美化網頁，插入圖像時可使用圖像標簽<img>。<img>標簽的屬性及描述如表4-1所示。
表4-1 <img>標簽的屬性及描述
1．插入圖片
src屬性用于指定圖片源文件的路徑，它是<img>標簽必不可少的屬性。其語法格式如下：
圖片的路徑既可以是絕對路徑，也可以是相對路徑。
【例4-8】（實例文件：ch04\Chap4.8.html）在網頁中插入圖片。
相關的代碼示例請參考Chap4.8.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用<img>標簽插入圖片后的效果，如圖4-8所示。
圖4-8 圖像標簽的應用
2．從不同位置插入圖片
在插入圖片時，用戶可以將其他文件夾或服務器中的圖片顯示到網頁中。
【例4-9】（實例文件：ch04\Chap4.9.html）從不同位置插入圖片。
相關的代碼示例請參考Chap4.9.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用<img>標簽插入圖像后的效果，如圖4-9所示。
圖4-9 從不同位置插入圖片
3．設置圖片的寬度和高度
在HTML文檔中，還可以設置插入圖片的顯示尺寸。設置圖片尺寸可通過圖片的屬性width（寬度）和height（高度）來實現。
【例4-10】（實例文件：ch04\Chap4.10.html）設置圖片在網頁中的寬度和高度。
相關的代碼示例請參考Chap4.10.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用<img>標簽設置的圖片的寬度和高度效果，如圖4-10所示。
圖4-10 設置圖片寬度與高度
從運行結果中可以看到，圖片的顯示尺寸是由width和height控制的。當只為圖片設置一個尺寸屬性時，另外一個尺寸就以圖片原始的長寬比例來顯示。圖片的尺寸單位可以選擇百分比或數值。百分比為相對尺寸，數值為絕對尺寸。
4.2.7 表格標簽<table>
HTML中的表格標簽有以下3個，下面詳細進行介紹。
（1）<table>…</table>標簽。
<table>標簽用于標識一個表格對象的開始；</table>標簽標識一個表格對象的結束。一個表格中，只允許出現一對<table>和</table>標簽。
（2）<tr>…</tr>標簽。
</tr>用于標識表格一行的開始；</tr>標簽用于標識表格一行的結束。表格內有多少對<tr>和</tr>標簽，就表示表格中有多少行。
（3）<td>…</td>標簽。
<td>標簽用于標識表格某行中的一個單元格的開始；</td>標簽用于標識表格某行中的一個單元格的結束。<td>和</td>標簽書寫在<tr>和</tr>標簽內。一對<tr>和</tr>標簽內有多少對<td>和</td>標簽，就表示該行有多少個單元格。
在HTML中，最基本的表格必須包含一對<table>和</table>標簽、一對或幾對<tr>和</tr>標簽以及一對或幾對<td>和</td>標簽。一對<table>和</table>標簽定義一個表格，一對<tr>和</tr>標簽定義一行，一對<td>和</td>標簽定義一個單元格。
【例4-11】（實例文件：ch04\Chap4.11.html）定義一個4行3列的表格。
相關的代碼示例請參考Chap4.11.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用表格標簽插入表格后的效果，如圖4-11所示。
圖4-11 定義表格
4.2.8 表單標簽<form>
表單主要用于收集網頁上瀏覽者的相關信息，其標簽為<form>和</form>。表單的基本語法格式如下：
其中，action=“url”用于指定處理提交表單的格式，它可以是一個URL地址或一個電子郵件地址。method=“get|post”用于指明提交表單的HTTP方法。enctype=“mime”用于指明把表單提交給服務器時的互聯網媒體形式。表單是一個能夠包含表單元素的區域。通過添加不同的表單元素，將顯示不同的效果。
下面介紹如何使用表單標簽開發一個簡單網站的用戶意見反饋頁面。
【例4-12】（實例文件：ch04\Chap4.12.html）開發用戶意見反饋頁面。
相關的代碼示例請參考Chap4.12.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到使用表單標簽插入表單后的效果，如圖4-12所示。可以看到，創建的用戶反饋表單包括一個標題“用戶意見反饋頁面”，還包括“姓名”“性別”“年齡”“聯系電話”“電子郵件”“聯系地址”等內容。
圖4-12 表單標簽的應用
4.3 HTML5的新增標簽
為了更好地處理今天的互聯網應用，HTML5添加了很多新標簽及功能，如多媒體標簽<audio>和<video>、繪制圖形標簽<canvas>等。
4.3.1 <audio>標簽
<audio>標簽主要是定義播放聲音文件或者音頻流的標準。它支持3種音頻格式，分別為Ogg、MP3和WAV。
如果需要在HTML5網頁中播放音頻，輸入的基本格式如下：
其中，src屬性規定要播放的音頻的地址，controls屬性是供添加播放、暫停和音量控件的屬性。
另外，在<audio>和</audio>之間插入的內容是供不支持audio元素的瀏覽器顯示的。
【例4-13】（實例文件：ch04\Chap4.13.html）在網頁中插入音頻。
相關的代碼示例請參考Chap4.13.html文件，然后雙擊該文件，如果用戶的瀏覽器是IE 11.0以前的版本，瀏覽效果如圖4-13所示。可見，IE 11.0以前的瀏覽器版本不支持<audio>標簽。
在IE 11.0中瀏覽，效果如圖4-14所示。可以看到加載的音頻控制條并聽到聲音，此時用戶還可以控制音量的大小。
圖4-13 插入音頻文件
圖4-14 播放音頻文件
4.3.2 <video>標簽
<video>標簽主要是定義播放視頻文件或者視頻流的標準。它支持3種視頻格式，分別為Ogg、WebM 和MPEG 4。
如果需要在HTML5網頁中播放視頻，輸入的基本格式如下：
其中，在<video>與</video>之間插入的內容是供不支持video元素的瀏覽器顯示的。
【例4-14】（實例文件：ch04\Chap4.14.html）在網頁中插入視頻。
相關的代碼示例請參考Chap4.14.html文件，然后雙擊該文件，如果用戶的瀏覽器是IE 11.0以前的版本，瀏覽效果如圖4-15所示。可見，IE 11.0以前版本的瀏覽器不支持<video>標簽。
在IE 11.0中瀏覽，效果如圖4-16所示，可以看到加載的視頻控制條界面。單擊“播放”按鈕，即可查看視頻的內容，同時用戶還可以調整音量的大小。
圖4-15 不支持<video>標簽
圖4-16 預覽視頻效果
4.3.3 <canvas>標簽
<canvas>標簽是一個矩形區域，它包含width和height兩個屬性，分別表示矩形區域的寬度和高度，這兩個屬性都是可選的，并且都可以通過CSS來定義，其默認值是300px和150px。
<canvas>標簽在網頁中的常用格式如下：
上面的示例代碼中，id表示畫布對象名稱，width和height分別表示寬度和高度。最初的畫布是不可見的，此處為了觀察這個矩形區域，使用CSS樣式，即<style>標簽。style表示畫布的樣式。如果瀏覽器不支持<canvas>標簽，會顯示畫布中間的提示信息。
1．添加canvas的步驟
畫布canvas本身不具有繪制圖形的功能，它只是一個容器，如果讀者對Java語言非常了解，就會發現HTML5的畫布和Java中的Panel面板非常相似，都可以在容器中繪制圖形。既然畫布元素放好了，那么就可以使用腳本語言JavaScript在網頁上繪制圖形了。
使用canvas結合JavaScript繪制圖形，一般情況下需要下面幾個步驟。
第一步：JavaScript使用id來尋找canvas元素，即獲取當前畫布對象。
第二步：創建context對象。
getContext()方法返回一個指定contextId的上下文對象，如果指定的id不被支持，則返回null，當前唯一被強制必須支持的是2d，也許在將來會有3d。注意，指定的id是大小寫敏感的。對象cxt建立之后，就可以擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
第三步：繪制圖形。
fillStyle()方法將其染成紅色，fillRect()方法規定了形狀、位置和尺寸。這兩行代碼繪制一個紅色的矩形。
2．繪制基本形狀
畫布canvas結合JavaScript可以繪制簡單的矩形，還可以繪制一些其他的常見圖形，例如直線、圓等。下面以繪制矩形和圓形為例，來介紹使用canvas繪制基本形狀的方法。
用canvas和JavaScript繪制矩形時，涉及一個或多個方法，這些方法如表4-2所示。
表4-2 繪制矩形的方法
【例4-15】（實例文件：ch04\Chap4.15.html）繪制矩形。
相關的代碼示例請參考Chap4.15.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到繪制的矩形，效果如圖4-17所示。可以看到，網頁中，在一個藍色邊框內顯示了一個藍色矩形。
提示：上面的代碼中，定義了一個畫布對象，其id名稱為myCanvas，高度和寬度都為500像素，并定義了畫布邊框的顯示樣式。代碼中首先獲取畫布對象，然后使用getContext()方法獲取當前2d的上下文對象，并使用fillRect()方法繪制一個矩形。其中涉及一個fillStyle屬性，fillStyle用于設定填充的顏色、透明度等，如果設置為rgb(200,0,0)，則表示一個不透明顏色；如果設置為rgba(0,0,200,0.5)，則表示為一個透明度50%的顏色。
圖4-17 繪制矩形
用canvas和JavaScript繪制圓形時，涉及一個或多個方法，這些方法如表4-3所示。
表4-3 繪制圓形的方法
路徑是繪制自定義圖形的好方法，在canvas中，通過beginPath()方法開始繪制路徑，這個時候就可以繪制直線、曲線等，繪制完成后，調用fill()和stroke()方法完成填充和邊框設置，通過closePath()方法結束路徑的繪制。
【例4-16】（實例文件：ch04\Chap4.16.html）繪制圓形。
相關的代碼示例請參考Chap4.16.html文件，然后雙擊該文件，就可以在IE瀏覽器中查看到繪制的圓形，效果如圖4-18所示。可以看到，在網頁中，一個藍色邊框內顯示了繪制的圓形。
圖4-18 繪制圓形
4.4 典型案例——制作日程表
通過在記事本中輸入HTML語句，可以制作出多種多樣的頁面效果。本節將以制作日程表為例，介紹HTML的綜合應用方法，其具體的操作步驟如下。
第一步：打開記事本，在其中輸入以下代碼。
輸入代碼后的記事本頁面，如圖4-19所示。
圖4-19 在記事本中輸入的代碼
第二步：在</head>標簽之前輸入以下代碼。
輸入代碼后的記事本頁面，如圖4-20所示。
圖4-20 輸入CSS代碼
第三步：在</style>標簽之前輸入以下代碼。
輸入代碼后的記事本頁面，如圖4-21所示。
第四步：在<body>和</body>標簽之間輸入以下代碼。
輸入代碼后的記事本頁面，如圖4-22所示。
圖4-21 輸入控制字體樣式的代碼
圖4-22 輸入塊級代碼
第五步：在</body>標簽之前輸入以下代碼。
輸入代碼后的記事本頁面如圖4-23所示。
圖4-23 輸入代碼后的記事本頁面
第六步：在記事本中選擇“文件”→“保存”菜單命令，彈出“另存為”對話框，設置保存文件的位置，在“文件名”下拉列表框中輸入“制作日程表.html”，然后單擊“保存”按鈕，如圖4-24所示。
第七步：雙擊打開保存的制作日程表.html文件，即可看到制作的日程表，如圖4-25所示。
第八步：如果需要在日程表中添加工作內容，可以用記事本打開制作日程表.html文件，在代碼段“<td style="text-align: center"> </td>”的 之前輸入內容即可。如要輸入星期一完成的第一件工作內容“完成校對”，可在如圖4-26所示的位置輸入。
圖4-24 “另存為”對話框
圖4-25 制作日程表
圖4-26 輸入文字
第九步：保存后打開文檔，即可在瀏覽器中看到添加的工作內容，如圖4-27所示。
圖4-27 最終的日程表預覽效果
4.5 就業面試技巧與解析
4.5.1 面試技巧與解析（一）
面試官：使用記事本編輯HTML文件時應注意哪些事項？
應聘者：很多初學者在保存文件時，沒有將HTML文件的擴展名改為.html或.htm，導致文件還是以.txt為擴展名，因此，無法在瀏覽器中查看。如果是通過右擊創建的記事本文件，那么在給文件重命名時，一定要以.html或.htm作為文件的擴展名。特別要注意的是，當Windows系統的擴展名被隱藏時，更容易出現這樣的錯誤。為避免這種情況的發生，可以在“文件夾選項”對話框中查看是否顯示文件擴展名。
4.5.2 面試技巧與解析（二）
面試官：如何解決HTML5瀏覽器支持問題？
應聘者：瀏覽器對HTML5的支持需要一個過程，一款瀏覽器暫時還不能支持HTML5定義的全部內容。要想解決瀏覽器現在的支持問題，首先盡量使用大部分瀏覽器支持的HTML5元素及對象，其次可以分別將多個瀏覽器支持的對象格式融入代碼中，如不同瀏覽器對音頻文件格式支持不同，將多種多媒體文件融入代碼中，這樣不同的瀏覽器會自動選擇自己支持的格式打開。
- Spring 5.0 Microservices（Second Edition）
- 程序員面試筆試寶典（第3版）
- R語言經典實例（原書第2版）
- Java異步編程實戰
- Oracle 11g從入門到精通（第2版） （軟件開發視頻大講堂）
- React.js Essentials
- PostgreSQL 11從入門到精通(視頻教學版)
- 深入淺出Serverless：技術原理與應用實踐
- Java：High-Performance Apps with Java 9
- Learning OpenCV 3 Computer Vision with Python（Second Edition）
- HTML5從入門到精通（第4版）
- 運維前線：一線運維專家的運維方法、技巧與實踐
- Managing Microsoft Hybrid Clouds
- 深入理解BootLoader
- 城市信息模型平臺頂層設計與實踐