第1章
HTML簡介和基本標籤
主要內容
. HTML簡介
. 瀏覽器簡介
. HTML標籤
. 常用標籤
1. HTML簡介
. HTML簡介
HTML全稱爲HyperText Mark-up Language，翻譯爲超文本標籤語言，標籤也稱作標記或者元素。HTML是目前網絡上應用最爲廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。需要說明的是HTML不是編程語言，而是一種描述性的語言，用於描述超文本中內容的顯示方式。比如，文字以什麼顏色、大小來顯示，圖片以什麼尺寸、位置來顯示等。這些描述都是用HTML標籤來描述的。
. HTML歷史
HTML的前身是SGML語言，SGML的前身是GML語言。
GML（Generalized Markup Language：通用標籤語言）是一種IBM格式化文檔語言，用於就其組織結構、各部件及其之間的關係進行文檔描述。GML將這些描述標記爲章節、重要小節和次重要小節（通過標題的級來區分）、段落、列表、表等。GML是SGML（Standard Generalized Markup Language，標準通用標記語言）的先驅和基礎，SGML是當今創建結構化文檔描述語言規則的戰略集合。
. HTML語法
語法結構：HTML標籤
<標籤 屬性="值">內容</標籤>
<p> 是HTML中的段落標籤，下面以 <p> 爲例來詳細解釋標籤。
語法格式：HTML標籤
語法解析：
標籤通常是成對出現的，分爲開始標籤（<p>）和結束標籤(</p>)，結束標籤只是在開始標籤前加一個斜槓“/”。標籤可以有屬性（align），屬性必須有值(center)。開始標籤與結束標籤中包含的內容稱之爲區域。標籤不區分大小寫，<p>和<P>是相同的。
. 網頁分類
HTML使用標籤編寫網頁，網頁基本上可以分爲3類。
1. 靜態網頁HTML
靜態網頁是指在不修改網頁源文件的情況下，網頁無論在何時何地被瀏覽，都將顯示相同的內容，網頁的內容不會發生變化。靜態網頁文件的擴展名包括html,htm等。
2. 動態網頁DHTML
動態網頁是指網頁可以實時的發生變化，也可以根據用戶的操作而發生相應的變化，雖然存在着一定的交互關係，但功能有限。它可以由JavaScript語言配合HTML和CSS來實現。這本書所講解的就是靜態網頁和動態網頁兩部分內容。動態網頁文件的擴展名包括html，htm等。
3. 交互式網頁
交互式網頁是指用戶可以提供給網站信息，網站根據用戶提交的信息響應用戶的要求。如網上註冊、論壇、調查等等。在這門課的最後部分我們會體驗交互式網頁，在第二學期將深入學習。交互式網頁文件的擴展名包括aspx，jsp，php，asp等。
. 瀏覽器
網頁運行在瀏覽器中，瀏覽器中的解釋器將網頁中的標籤解釋後就是我們在瀏覽器中
看到的網頁。顯然，瀏覽器在這裏起到了兩個作用，第一是解釋HTML標籤，第二是呈現網頁。常用的瀏覽器包括
. Microsoft 公司的 Internet Explorer（IE）。
. Mozilla 公司的Firefox（火狐）。
. Google公司的 Chrome
. 使用記事本快速體驗網頁製作
現在就來創建我們的第一個網頁。
1. 打開記事本
2. 將下面的代碼示例寫入記事本中，如圖1所示。
代碼演示：HTML簡介
<html>
<head>
<title>HTML簡介</title>
</head>
<body>
我的第一個網頁
</body>
</html>
圖1 HTML簡介
3. 編寫完成後保存該文檔。點擊記事本中的“文件”菜單，選擇“另存爲”命令，
彈出如圖2所示的對話框，將文件保存到“我的文檔”目錄中，命名爲index.html。這時我們已經完成了網頁的創建。
圖2 保存html文件
網頁文件的擴展名爲html或htm。
4. 打開“我的文檔”目錄，鼠標雙擊index.html文件，我們的網頁已經運行在瀏
覽器中了，如圖3所示。網頁製作，是不是很簡單。
圖3 瀏覽網頁
2. HTML文檔結構
在上面的例子中用到了4個標籤，除了<title>標籤外，其餘的三個標籤構成了HTML
文檔的結構，HTML文檔結構包括三個部分，如圖4所示。
1. <HTML> 標籤
<html> 表示網頁文件的開始,應該把它放在文檔的最前面，其他所有的標籤都應該放在<html>和</html>之間。
2. <HEAD>標籤
<head>表示頭部標籤，<head>標籤中通常放<title>標籤、<meta>標籤。
3. <BODY>標籤
<body>表示主體標籤，網頁上所有要顯示的內容都放在這個標籤內。
圖4 HTML文檔的結構
代碼演示：HTML文檔結構
<html> ①
<head> ②
<title>HTML簡介</title> ③
</head> ④
<body> ⑤
<!—在這裏寫註釋--> ⑥
我的第一個網頁
</body> ⑦
</html> ⑧
代碼解析：
① <html> 表示網頁的開始。
② <head> 表示頭部的開始。
③ <title> 表示網頁的標題，標題內的文本將顯示在瀏覽器的標題欄。
④ </head> 表示頭部結束。
⑤ <body> 表示正文部分的開始。
⑥ “<!-- -->”這對標籤稱爲註釋標籤，<!-- 是註釋的開始 -->是註釋的結束。它的作用是提醒自己或幫助用戶瞭解該文件的內容，所以註釋標籤不會顯示在瀏覽器
HTML
HEAD
BODY
中。
⑦ </body> 表示正文部分的結束。
⑧ </html> 表示網頁結束。
3. 使用Dreamweaver快速體驗網頁製作
. 開發工具
通過第一個例子，我們知道用記事本可以製作網頁，不過在記事本中製作網頁要編寫大量的標籤，效率很低。現在來學習一個專門製作網頁的工具Dreamweaver ，Dreamweaver是網頁三劍客之一，在本書中以Dreamweaver 8 版本開發網頁。
網頁三劍客是指Dreamweaver、Flash、Fireworks三個軟件。
1. Dreamweaver 是網頁製作工具。
2. Flash 是動畫製作工具。
3. Fireworks 是圖片製作工具。
. 使用Dreamweaver快速體驗網頁製作
在開始菜單中打開Dreamweaver 8工具，如圖5所示。
圖5 啓動Dreamweaver
在“文件”菜單中選中“新建”命令，彈出如圖6所示的對話框。
圖6 新建網頁文件
在圖6中選擇“基本頁”中的“HTML”，點擊“創建”按鈕，這樣我們就成功的創建了一個網頁，如圖7所示。在設計窗口中輸入“我的第一個網頁”，將標題更改爲“HTML簡介”。
圖7 填寫網頁內容
輸入完成後切換到代碼窗口，如圖8示。
圖8 查看網頁代碼
這時，我們發現Dreamweaver已經幫我們生成了HTML標籤，除了第1行和第4行的<meta>標籤外，其餘部分與我們講過的HTML文檔結構完全相同。接下來點擊“文件”菜單，選擇“保存”命令，在彈出的保存對話框中爲文件命名爲index.html，保存到桌面，如圖9所示。
圖9 保存網頁文件
在桌面上找到“index.html”文件，鼠標雙擊後在瀏覽器中打開了這個網頁，如圖10所示。使用Dreamweaver是不是方便了許多，它幫我們生成了HTML標籤。
圖10 第一個網頁運行結果
4. <META>標籤
網頁的<head>標籤中除了包含<title>標籤外還包括了<meta>標籤，<meta>標籤提供了關於網頁的信息，包括作者、關鍵字、網頁編碼、自動刷新等。
. 網頁編碼
代碼演示：Meta標籤-編碼
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ①
<title>HTML簡介</title>
</head>
<body>
使用meta標籤確定編碼格式。
</body>
</html>
代碼解析：
① 這是<meta>標籤，標籤中的charset表示當前網頁的編碼格式，值GB2312表示簡體中文編碼，也就是說網頁中的文字顯示爲簡體中文，這時就要求操作系統中安
裝GB2312字符集，否則就會顯示亂碼，不過中文操作系統中已經安裝了。如果在英文操作系統中瀏覽了GB2312編碼的網頁就會出現亂碼，因爲英文操作系統中沒有GB2312字符集。我們在瀏覽網頁時偶爾會遇到網頁顯示亂碼，多數是因爲META標籤中的編碼設置不正確。
網頁的常用編碼有GB2312、UTF-8、BIG5、GBK：
1． GB2312是簡體中文字符集，主要用於中國大陸和新加坡。
2． UTF -8可以理解爲通用字符集。
3． BIG5是繁體中文字符集，主要在臺灣和香港地區使用。
4． GBK是GB2312的後續標準，添加了更多的漢字和特殊符號。
. 刷新
代碼演示：Meta標籤-刷新1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<meta http-equiv="Refresh" content="2" /> ①
</head>
<body>
</body>
</html>
代碼解析：
① <meta http-equiv="Refresh" content="2" />標籤中的Refresh表示刷新， content="2"表示2秒鐘。這個META標籤實現了當網頁下載2秒後重新刷新這個網頁，就像點擊了瀏覽器上的按鈕。在網頁中的一些聊天程序就使用了網頁刷新功能，每隔幾秒鐘獲取一次最新的聊天內容。
代碼演示：Meta標籤-刷新2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<meta http-equiv="refresh" content="2;URL=http://www.sohu.com"> ①
</head>
<body>
</body>
</html>
代碼解析：
① <meta http-equiv="refresh" content="2; URL = http:// www. sohu.com/">標籤中的Refresh表示刷新， content="2"表示2秒鐘，URL表示網址。這個META標籤實現了當網頁下載2秒後轉向到http://www. sohu.com/ 網址。例如，CSND的論壇在登錄後會提示類似圖11所示的內容，就是利用了刷新功能。
圖11 Meta標籤的刷新
URL(Uniform Resource Locator)是統一資源定位器，可以理解爲Internet上的一個網址。如：http://www.google.com可以稱作是URL。
5. 常用標籤
HTML中有很多的標籤，包括文本標籤，段落標籤等，下面我們介紹一些常用標籤。見表1。
標籤 說明
<b>
字體變粗體
<i>
文字變斜體
<u>
文字加下劃線
<br>
換行
<p>
段落
<pre>
預格式化段落
<span>
行級層
<div>
塊級層
<sub>
下標
<sup>
上標
<hr>
水平線
<hn>
文字標題
表1 常用標籤
. <B> 、<I> 、<U>
這三個標籤都屬於文本標籤，<b>標籤用於將文字變爲粗體，<i>標籤用於將文字變爲斜體，<u>標籤用於爲文字添加下劃線。
代碼演示：<B><I><U>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>粗體 | 斜體 | 下劃線</title>
</head>
<body>
<b>粗體</b> <i>斜體</i> <u>下劃線</u> ①
</body>
</html>
代碼解析：
① <b>粗體的開始，</b>粗體的結束。
<i>斜體的開始，</i>斜體的結束。
<u>下劃線的開始，</u>下劃線的結束。
如圖12所示的效果。
圖12 粗體斜體下劃線標籤
. <BR>
<BR>標籤用於換行。
代碼演示：<BR>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>換行</title>
</head>
<body>
第一行<br> ①
第二行
</body>
</html>
代碼解析：
① <br>表示換行，當瀏覽器遇到<br>
時就另起一行來顯示<br>後面的文字。 圖13 換行標籤<br>
如圖13所示的效果。
網頁源代碼中的回車在瀏覽器中並不表示換行。
. <P>
<P>標籤表示段落。
代碼演示：<P>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落</title>
</head>
<body>
<p align="center"> ①
<font color="#FF0000">第一個段落</font> ②
</p>
<p align="left">第二個段落</p>
</body>
</html>
代碼解析:
① <p>表示段落，兩個相鄰的<p>之間
會空一行，如圖14所示的效果。Align
是段落的對齊屬性，有三個值“left”，
“center”，“right”,分別表示居左對
齊，居中對齊，居右對齊。<p>與<br>有
些相似，都表現出了換行，<br>換行時行
與行之間不空行。
圖14 段落標籤<p>
② <font>標籤用來修飾字體，color屬性表示字體的顏色，"#FF0000"是顏色值。
網頁中的顏色用 # 開頭，連接6位十六進制數表示，如 #336699。
. <PRE>
再來看看下面的代碼演示，我們希望詩中的每一句話顯示一行，但結果卻沒能實現，如圖16所示。
代碼演示：引入<pre>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>預定義格式</title></head>
<body>
<p>
靜夜思
牀前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。
</p>
</body>
</html>
代碼解析：
圖15 顯示的結果中並沒有按照預先定
義的格式顯示。也就是說源代碼中的回
車和空格是無效的。使用<pre>標籤可以
輕鬆解決。
圖15 引入pre
. <pre>
<pre>標籤表示按照預定義格式顯示段落。
代碼演示：<pre>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>預定義格式</title></head>
<body>
<pre>
靜夜思
牀前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。
</pre>
</body>
</html> 圖16 預格式化段落標籤<pre>
代碼解析：
① 如圖16顯示的結果，<pre>使得在HTML文件中採用的文字版面都原樣顯示在了瀏覽器中，這裏的回車是有效的。
. <SPAN>
<SPAN>類似於<p>，也屬於段落標籤，通常稱其爲行級層，兩個<span>之間不會空行，而是在同一行顯示。
代碼演示：<span>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span</title>
</head>
<body>
<span>第一個span</span>
<span>第二個span</span> ①
</body>
</html>
代碼解析:
① 兩個並列的<span>顯示在同一行，
如圖17所示。
圖17 <span>標籤
. <DIV>
<DIV>類似於<SPAN>和<P>，也屬於段落標籤，通常稱其爲層。但是<DIV>是塊級層，兩個<DIV>之間會換行顯示。
代碼演示：<div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div</title>
</head>
<body>
<div>第一個div</div>
<div>第二個div</div> ①
</body>
</html>
代碼解析:
① 兩個並列的<div>顯示在兩行，
如圖18所示。
圖18 <div>標籤
Q 老師，塊級層div與行級層span有什麼區別呢？
A 塊級層會另起一行來顯示層中的內容，而行級層會在同一行顯示內容，如圖17是行級層，圖18是塊級層。
. <SUB>和<SUP>
<SUB>是下標標籤， <SUP>是上標標籤，它們屬於文本標籤，如圖19所示。
代碼演示：<sub>和<sup>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>sub和sup</title>
</head>
<body>
下標x<sub>y</sub><br>
上標x<sup>y</sup>
</body>
</html>
代碼解析:
運行結果如圖19所示。
圖19 <sub>和<sup>標籤
. <HR>
<HR>是水平線標籤，如圖20所示。
代碼演示：<hr>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hr</title>
</head>
<body>
<hr width="100" size="1" noshade> ①
</body>
</html>
代碼解析:
① width="100"表示水平線的寬度爲100px,
size="1"表示水平線的高度爲1px。
noshade表示水平線沒有陰影。
圖20 水平線標籤 <hr>
1． 在網頁中寬度的單位叫像素，用px表示。
2． 當屏幕分辨率設置爲1024 * 768 時，表示屏幕寬度平均分成1024個點，高度平均分成768個點，每一個點的大小是一個像素。
. <HN>
<Hn>表示文字的標題，屬於文本標籤，其中的n表示一個整數，取值範圍是1-6,也就是說<hn>表示<h1> <h2> <h3> <h4> <h5> <h6>。代碼演示如圖21所示。
代碼演示：<hn>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hn</title>
</head>
<body>
<h1>1號標題</h1>
<h2>2號標題</h2>
<h3>3號標題</h3>
<h4>4號標題</h4>
<h5>5號標題</h5>
<h6>6號標題</h6>
</body>
</html>
代碼解析:
運行結果如圖21所示。
圖21 標題標籤<hn>
. 插入特殊字符
除了標籤外，HTML中的特殊字符也有重要的作用。例如，要求在瀏覽器中顯示<br>,如果將<br>直接寫在源代碼中，瀏覽器會將<br>解釋成換行，而不會顯示。
特殊字符以 & 開始，以 ; 結束。常用的特殊字符見表1。
代碼演示：特殊字符
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>特殊字符</title>
</head>
<body>
<br> ①
</body>
</html>
代碼解析:
① <是特殊字符，它被瀏覽器解釋後
顯示成< , >也是一個特殊字符， 圖22 特殊字符
它被瀏覽器解釋後顯示成 > ，如圖
22所示。
特殊字符 轉義碼
空格
<
<
>
>
￥
¥
“
"
.
©
.
®
±
±
‰
‰
÷
÷
表2 特殊字符
6. 本章總結
. HTML是超文本標籤語言，用來描述網頁中的內容。
. 常用的瀏覽器有IE、火狐和Chrome。
. HTML的文檔結構包括HTML、HEAD和BODY。
. Meta標籤中的charset用於設置網頁的編碼，gb2312是簡體中文編碼，Refresh用於網頁的刷新。
. Dreamweaver是製作網頁的工具。
. 常用的標籤有<b><i><u><br><p><pre><span><div><sub><sup><hr><hn>。
HTML簡介和基本標籤
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個