2.1.1 瞭解HTML的發展
早期編寫網頁的的語言叫超文字標記語言 (HTML)，英文縮寫實HTML。其檔案格式是文本語言，瀏覽器會按照文本中的標記對其中的內容重新進行解釋，並按照解釋後的內容顯示在瀏覽器的視窗中。HTML語言經過了十幾年的發展，已經有了很大的變化，到現在已經到了HTML5.0，擴充了DHTML和XML等子集。隨著WWW的廣泛應用，圖形的顯示顯得非常重要。從1995年開始使用GIF映像分隔字元和表格來分割不同的網頁元素。隨著瀏覽器的升級，每個瀏覽器開發公司都在自己的瀏覽器中增加了一些新的功能。而HTML 4.01版本是 1999年12月發布的。自從它問世以來，因為它的通用性、易學性，因此逐漸流行起來。
HTML是一種標記語言，那麼HTML的標記語言有那些標記呢？在下面幾節中我們將詳細介紹。
2.1.2 熟悉HTML的基本結構
一個標準的HTML網頁檔案是一個尾碼名為.htm或是.html文字檔，我們可以用任何文字編輯器來開啟修改它。用HTML標記語言編寫的網頁應該具備這樣的基本格式：
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
整個頁面的HTML代碼是以<html>開始，並以</html>。<head></head> 部分是網頁設定部分，可以包含一個頁面相關資訊，一般包含文件屬性參數等，這些屬性不是網頁的顯示元素，<title></title>部分設定網頁的標題文字。網頁的主題內容是在<body></body>內包含的，裡面的內容均會經過瀏覽器解釋後顯示在視窗中。比如下面編製一個簡單的網頁代碼：
<html>
<head>
<title>使用Html語言編寫網頁</title>
</head>
<body>
我學會使用HTML標記語言了！
</body>
</html>
儲存到硬碟上，命名為newfile.htm，滑鼠雙擊就可以開啟瀏覽了，如圖2.1所示。
圖 2.1 使用HTML語言編寫網頁
2.1.3 掌握HTML的常用標記
HTML標記語言發展了十幾年，從開始的1.0，到現在的5.0版本，每次升級就會增加很多功能。熟練使用常用的標記是做網頁編程的基礎，有些標記沒有必要死記，因為現在很多的網頁製作工具都是“所見即所得 (WYSIWYG)”的製作模式，那些標記都是自動產生的，只要我們知道那些標記是起什麼作用就行了。常用的標記主要有一下幾個：
（1）<title>標記
上一節的執行個體中我們已經使用過該標記了，利用該標記可以為網頁添加網頁標題。
（2）<body>標記
該標記是網頁內容的主題，網頁中需要表現的內容都在該標記內，在<body>標記內可以使用一些段落格式控制標記來控制內容的格式。
如：
<P>標記：分段標籤，用於段落控制；
<BR>標記：分行符號號，用於段落控制；
<CENTER>標記：包含在該標記內的文本置中顯示；
<H1>標記：用於項目標題，根據字型大小可以選擇<H1>、<H2>、<H3>、<H4>等；
<UL>標記：無序表標籤；
<OL>標記：有序表標籤；
<DIR>標記：目錄表標籤；
（3）<a>標記
該標記用於超串連，比如：<a href=http://News.163.com> 網易新聞網</a>。在產生的網頁上就會出現連結到網易新聞網的超串連。
（4）<img>標記
該標記是用於顯示圖片的標記，比如：<img src=http://www.webjx.com/htmldata/2006-01-03/”index.gif”>。網頁載入的時候就會顯示出名為index.gif圖片。
（5）<table>標記
<table>標記是在CSS出現以前使用最為頻繁的格式控制標記。該標記是用來產生表格來控制常值內容。
<table>標記不是單獨使用的，配套的標記有:
<tr>標記：表格的列標籤；
<td>標記：表格的儲存格標籤。
例如下面的代碼利用<table>標記控制文字格式設定：
<html>
<head>
<title>使用Html語言編寫網頁</title>
</head>
<body>
<table bordercolor="#000000" border="1">
<tbody>
<tr>
<td>
</td>
<td>
表格控制符
</td>
<td>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
第一個儲存格
</td>
<td>
第二個儲存格
</td>
<td>
第三個儲存格
</td>
</tr>
</tbody>
</table>
</body>
</html>
預覽效果如圖2.2所示：
圖 2.2 標記控制文本排列格式
該標記是用來分割網頁頁面的。在一個頁面內可以實現多個htm網頁顯示。比如下面一段代碼就可以實現將表單水平分割三塊：
<frameset cols=”網頁1的顯示寬度,網頁2的顯示寬度,網頁3的顯示寬度”>
<frame src= 網頁1的路徑>
<frame src= 網頁2的路徑>
<frame src= 網頁3的路徑>
</frameset>
將<frameset>標記的cols屬性換為rows就可以實現垂直分割表單了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
