象头王财神

書名：網頁編程技術
作者名：叢書編委會編
本章字數： 6267字
更新時間： 2018-12-28 18:13:48

第1章 HTML基礎

本章要點

▲掌握HTML文件的基本結構

▲掌握HTML基本標記的含義、用法及屬性設置

▲利用HTML標記創建網頁中的基本元素

HTML是網頁文件的支持語言，通過IE瀏覽器看到的精美網頁其實是IE執行網頁的HTML代碼的結果。超文本標記語言（HyperText Markup Language），它是WWW的描述語言。設計HTML語言的目的是為了能把存放在一臺計算機中的文本或圖形與另一臺計算機中的文本或圖形方便地聯系在一起，形成有機的整體。我們只需使用鼠標在某一文檔中單擊一個鏈接，Internet就會馬上轉到與此圖標相關的內容上，而這些信息可能存放在網絡的另一臺計算機中。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

1.1 HTML簡介

現在是互聯網的世界，在互聯網上有成千上萬的網站，我們可以瀏覽到包含文字、聲音、圖片、視頻等內容的網站，這些內容都是通過HTML語言表現出來的，HTML是一種用于網頁設計的語言。

HTML是超文本標記語言（HyperText Markup Language）的縮寫
HTML不是一種編程語言，而是一種標記語言（Markup Language）
標記語言都會提供一套標記標簽（Markup Tags）
HTML用標記標簽來設計網頁

HTML（Hypertext Markup Language）即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺，自1990年以來HTML就一直被用做WWW（World Wide Web，也可簡寫Web、中文叫做萬維網）的信息表示語言，使用HTML語言描述的文件，需要通過Web瀏覽器顯示出其效果。

所謂超文本，是因為它可以加入圖片、聲音、動畫、影視等內容，事實上每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，它只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。HTML的普遍應用就是帶來了超文本的技術——通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面與世界各地主機的文件鏈接。直接獲取相關的主題。如下所示，通過HTML可以表現出豐富多彩的設計風格。

圖片：<IMG SRC="文件名">

文字格式：<FONT SIZE="2 " COLOR="#00FFFF">文字</FONT>

超鏈接：<A HREF="文件名"></A>

音頻：<EMBED SRC="聲音地址" AUTOSTART=true>

視頻：<EMBED SRC="視頻地址" AUTOSTART=true>

從上面我們可以看到HTML超文本文件需要用到的一些標簽。在HTML中每個用來當做標簽的符號都是一條命令，它告訴瀏覽器如何顯示文本。這些標簽均由"<"和">"符號以及一個字符串組成。而瀏覽器的功能是對這些標簽進行解釋，顯示出文字、圖像、動畫、播放聲音等。這些標簽符號用"<標簽名字屬性>"來表示。

HTML只是一個純文本文件，創建一個HTML文檔，只需要兩個工具，一個是HTML編輯器，另一個是Web瀏覽器。HTML編輯器是用于生成和保存HTML文檔的應用程序。Web瀏覽器是用來打開Web網頁文件，提供給我們查看Web資源的客戶端程序。可以使用任何文本編輯器來打開并編寫HTML文件，例如Windows的“記事本”，范例1.1.html，就是用記事本編寫的一個HTML文件。

※ 范例代碼 1.1.html

選擇“開始→程序→附件→記事本”命令，打開記事本程序，輸入代碼，如圖1.1所示。

※ 范例效果圖

單擊“另存為”命令，文件名改寫為1.1.html，然后雙擊該文件，可以在瀏覽器中看到最終的頁面效果，如圖1.2所示。

圖1.1 記事本文件中輸入HTML文檔

圖1.2 IE中顯示的頁面效果

如果希望這一頁是網站的首頁（主頁），想讓瀏覽者輸入網址后，就顯示這一頁的內容，可以把這個文件設為默認文檔，文件名為index.html或index.htm。

1.2 HTML文件的基本結構

一個完整的HTML文檔是由一系列的元素和標簽組成的，元素名不區分大小寫，HTML用標簽來規定元素的屬性和它在文件中的位置，HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。

1.2.1 HTML文件結構

下面通過范例1.2.html，掌握HTML文件的基本結構，效果如圖1.3所示。

※ 范例代碼 1.2.html

<html>
<head>
<title>HTML文件的基本結構</title>
</head>
<body>
這是一個網頁！
</body>
</html>

※ 范例效果圖

圖1.3 HTML文件的基本結構

（1）<! doctype>標記指明本文檔中HTML語言的版本，該標簽必須位于HTML文件的第一行，用瀏覽器瀏覽網頁時，此行內容并不顯示在頁面中，在編寫HTML文檔時也可省略。

（2）<html></html>在文檔的最外層，文檔中的所有文本和HTML標簽都包含在其中，它表示該文檔是以超文本標識語言（HTML）編寫的。事實上，現在常用的Web瀏覽器都可以自動識別HTML文檔，并不要求有<html>標簽，也不對該標簽進行任何操作，但是為了使HTML文檔能夠適應不斷變化的Web瀏覽器，還是應該養成不省略這對標簽的良好習慣。

（3）<head></head>是HTML文檔的頭部標簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的，在此標簽中可以插入其他標記，用以說明文件的標題和整個文件的一些公共屬性。若不需要頭部信息則可省略此標記，良好的習慣是不省略。

（4）<title>和</title>是嵌套在<head>頭部標簽中的，標簽之間的文本是文檔標題，它被顯示在瀏覽器窗口的標題欄。

（5）<body> </body>標簽一般不省略，標簽之間的文本是正文，是在瀏覽器中要顯示的頁面內容。

上面的這幾對標簽在文檔中都是唯一的，<head>標簽和<body>標簽是嵌套在HTML標簽中的。

1.2.2 HTML的使用要點

（1）“<”和“>”是HTML任何標簽的開始和結束。例：<body> </body>

（2）標簽與標簽之間可以嵌套。例：<center><a>大連工業大學</a></center>

（3）HTML的標簽和屬性名不區分大小寫。例：<html> <HTML> <Html>三個標簽是一致的。

（4）HTML代碼中任何回車和空格在顯示時不起作用（顯示空格為“ ”）。為了使代碼清晰，建議不同的標簽之間用回車換行編寫。

（5）HTML標簽中可以放置各種屬性。例：<h1 align="center">標題1</h1>

（6）在HTML源代碼中的注釋。 注釋語句只出現在源代碼中，不會在瀏覽器中顯示。

1.2.3 HTML的標簽及屬性

※ 基本語法：

成對標簽 <標簽名屬性1="值" 屬性2="值" 屬性3="值" …>內容</標簽名>

單獨標簽 <標簽名屬性1="值" 屬性2="值" 屬性3="值" …>

例如：<font color="#ff0000" face="宋體" size="15">字體設置</font><br>

在HTML中用“<”和“>”括起來的部分，我們稱它為標簽，這些標簽可以形成頁面中文本的布局、文字的格式及五彩繽紛的畫面。屬性是標簽里參數的選項。

HTML的標簽分單標簽和成對標簽兩種。成對標簽是由首標簽<標簽名> 和尾標簽</標簽名>組成的，成對標簽的作用域只作用于這對標簽中的文檔,單獨標簽在相應的位置插入元素就可以了。大多數標簽都有自己的一些屬性，屬性要寫在開始標簽內，屬性用于進一步改變顯示的效果，各屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認值。標簽屬性值如果是顏色值，HTML中顏色值有兩種表示形式，分別是：

① 使用顏色名稱來表示。

② 使用十六進制格式數值#RRGGBB來表示，RR、GG和BB分別表示顏色中的紅、綠、藍三基色的兩位十六進制數據。

常用的顏色值如表1-1所示。

表1-1 常用顏色值

※ 范例代碼 1.3.html

<html>
<head>
<title>世僑國貿公寓</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!—
p,td{font-size:9pt; line-height:16px}
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
…
</body>
</html>

※ 代碼分析

<body>標簽中屬性bgcolor的含義是定義頁面的背景色，值為#FFFFFF表示白色，屬性ext表示頁面中文字的顏色，值為#000000表示黑色。

※ 范例效果圖

范例效果如圖1.4所示。

圖1.4 HTML標簽及屬性的應用

注意1：為了使讀者有一個好的習慣，提倡全部對屬性值加雙引號。

注意2：輸入開始標簽時，一定不要在“<”與標簽名之間輸入多余的空格，也不能在中文輸入法狀態下輸入這些標簽及屬性，否則瀏覽器將不能正確識別括號中的標簽命令，從而無法正確顯示信息。

1.3 HTML的基本標簽

1.3.1 頭部標簽

HTML頭部標簽是<head>，主要包含頁面的一些基本描述語句，一般位于頭部的內容不會直接顯示在網頁中，而是通過其他方式起到作用。表1-2列出了HTML常用的頭部標簽。

表1-2 頭部標簽

1.標題標簽<title>

在HTML文檔中，標題文字位于<title>和</title>之間。

※ 基本語法：<title>…</title>

例：<title>大連工業大學</title>

2.元信息標記<meta>

※ 基本語法：<meta name="value"content="value" http-equiv="value">

表1-3 <meta>標簽的常用屬性

例如：<meta http-equiv="content-type" content="text/html" charset="GB2312">

content的屬性為提供頁面內容的相關信息，指明文檔類型為文本類型。charset定義字符集，提供網頁的編碼信息，瀏覽器根據這行代碼選擇正確的語言編碼，GB2312表示定義網頁內容時用標準簡體中文顯示。

例如：<meta name="keywords" content="HTML,網頁制作" >

定義本網頁的關鍵字。搜索引擎可以讓訪問者根據這些關鍵字查找到網站主頁，各關鍵字之間用逗號隔開。

例如：<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

網頁自動刷新。經過用戶自定義設置的時間5秒后，頁面自動跳轉到url指定的位置。

例如：<meta name="description" content="本網站主要講解HTML文檔的具體應用 " >

描述本網頁的主要內容。

注意1：在HTML頭部可以包括任意數量的<meta>標簽。

注意2：meta標簽只能放在<head></head>標簽內。

※ 范例代碼 1.4.html

<html>

<head>

<!--

Javascript腳本

//-->

</script>

</head>

…

</body>

</html>

※ 范例效果圖

范例效果如圖1.5所示。

圖1.5 頭部標簽

1.3.2 內容標簽

在<body>與</body>之間的所有部分都被稱做主體部分，在其中放置的是頁面中的所有內容（文字、圖片、鏈接、表格、表單、視頻等）。

※ 基本語法：<body 屬性1="值1" 屬性2="值2" …>

表1-4列出了<body>標簽的常用屬性。

表1-4 <body>標簽的常用屬性

<body>里的屬性可以同時使用。

例如：<body text="#000000" bgcolor="#F0F0F0" background="bg.gif" >

注意：學習HTML語言需要記住的東西很多，但是我們并沒有必要全部記住。我們需要做的是了解每個標簽的功能及其屬性。當看到一個網頁時知道能用什么標簽或者屬性實現就可以了。當我們編輯網頁時如果忘了可以查看資料。

1.3.3 格式標簽

網頁設計過程中，經常需要用到一些格式標簽對網頁的格式進行定義，特別是HTML不識別Enter鍵和空格鍵，所以定義格式標簽十分重要，見表1-5。

表1-5 格式標簽

1.強制換行<br>

※ 基本語法：文字<br>

用HTML的標簽來強制換行、分段。<br>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。

※ 范例代碼 1.5.html

<html>
<head>
<title>強制換行</title>
</head>
<body>
無換行標記：登鸛雀樓 白日依山盡，黃河入海流。欲窮千里目，更上一層樓。
<br>有換行標記：<br>登鸛雀樓<br>白日依山盡，<br>黃河入海流。<br>欲窮千里目，<br>更上一層樓。
</body>
</html>

※ 范例效果圖

范例效果如圖1.6所示。

圖1.6 換行標簽

2.段落標簽<p>...</p>

※ 基本語法：<p align="left|center|right"> 文字</p>

由<p>標簽所標識的文字，代表同一個段落的文字。不同段落間的間距等于連續加了兩個換行符，也就是要隔一行空白行，用以區別文字的不同段落。它可以單獨使用，也可以成對使用。單獨使用時，下一個<p>的開始就意味著上一個<p>的結束。良好的習慣是成對使用。

其中屬性align用來設置段落文字在網頁上的對齊方式：left（左對齊）、center（居中）和right（右對齊），省略時默認為left。格式中的“|”表示“或者”，即多中選一。

※ 范例代碼 1.6.html

<html>
<head>
<title>段落標簽</title>
</head>
<body>
<p>花兒什么也沒有。它們只有凋謝在風中的輕微、凄楚而又無奈的吟怨，
就像那受到了致命傷害的秋雁，悲哀無助地發出一聲聲垂死的鳴叫。</p>
<p align="right">或許，這便是花兒那短暫一生最凄涼、最傷感的歸宿。</p><p align=center>而美麗苦短的花期</p>
<p align="left">卻是那最后悲傷的秋風挽歌中的瞬間插曲。</p>
</body>
</html>

※ 范例效果圖

范例效果如圖1.7所示。

圖1.7 段落標簽

※ 范例代碼 1.7.html

<html>
…
<body leftmargin="70">
<p><img src="Figure-00/2-01.gif" width="230" height="52"><img src="image/2-2.gif" width="208" height="52"></p>
<p> <span class="text3">中國職工國際旅行社總社阜城門門市 <br>
  <br>
  地址：北京市西城區阜外大街1號華利佳合商務樓405室 <br>
  負責人：王力仟 <br>
  聯系電話：010-88375285/88375250/68318141/68318142 <br>
  傳真：010-68315534 </span></p>
<p><span class="text3"><br>
  <br>
  中國職工國際旅行社總社東四十條門市部 <br>
  <br>
  地址：北京市東城區東四十條21號1層東廳 <br>
  負責人：蘇夢迦 <br>
  聯系電話：010-64050066/84031887 <br>
  傳真：010-84032533 </span></p>
<p><span class="text3"><br>
  <br>
  中國職工國際旅行社總社東高地門市部 <br>
  <br>
  地 址：北京市豐臺區六營門梅源小區45號樓103室 <br>
  負責人：宮宇 <br>
  聯系電話：88530959 88530960 <br>
  傳真：67974294 </span><br>
</p>
…
</body>
</html>

※ 范例效果圖

范例效果如圖1.8所示。

圖1.8 換行與段落標簽

3.定位標簽<div>…</div>

※ 基本語法：<div align="left|center|right"> 文本、圖像或表格</div>

設定文字、圖像、表格的擺放位置。當在許多段落中設置對齊方式時，常使用<div>…</div>標簽。其中屬性align用來設置文本塊、一段文字或標題在網頁上的對齊方式，省略時默認為left。

4.水平線標簽<hr>

※ 基本語法：<hr align="left|center|right" size=" " width=" " color=" " noshade>

在頁面中插入一條水平標尺線，可以使不同功能的文字分隔開，看起來整齊、明了。當瀏覽器解釋到HTML文檔中的<hr>標簽時，會在此處換行，并加入一條水平線段。線段的樣式由標簽的屬性參數決定。size設定線條粗細，以像素為單位，默認為2像素。width設定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當前窗口的百分比）。color設定線條色彩，默認為黑色。noshade去掉水平線的陰影效果，設置水平線為一條實線。

※ 范例代碼 1.8.html

<html>
<head>
<title>水平線標簽</title>
</head>
<body>
<p align="center"><img src="images/logo.gif" alt="歡迎光臨" ></p>
<hr width="600" size="1" color="#0000FF">
</body>
</html>

※ 范例效果圖

范例效果如圖1.9所示。

圖1.9 水平線標簽

5.注釋標記

※ 基本語法：

注釋并不局限于一行，長度不受限制。結束標記與開始標記可以不在一行上。

※ 范例代碼 1.9.html

<!--|定義IE5.5滾動條|11|此處為特效配置參數，刪除或修改此行內容將導致特效運行不正常！刪除或修改此行以下特效代碼，當再次使用“有聲有色”編輯特效時將會發生異常！-->
   <style>
   <!--
   BODY {SCROLLBAR-FACE-COLOR: #FFCC00; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR:#FFFFE1; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; }


   <!-- 此網頁中的特別動態效果使用“有聲有色 2004”軟件編輯制作！-->
   <!-- “有聲有色 2004”--最好的網頁特效制作編輯軟件，制作特效您只需輕點幾下鼠標即可完成！ -->
   -->

※ 范例效果圖

范例效果如圖1.10所示。

圖1.10 注釋標簽

1.3.4 字體標簽

文字是網頁中非常重要的元素，通過文字來說明網頁的具體內容，關于字體標簽如表1-6所示。

表1-6 字體標簽

1.標題文字標簽<h#>…</h#>

※ 基本語法：<h# align="left|center|right"> 標題文字 </h#>

在頁面中，標題是一段文字內容的核心，所以總是用加強的效果來表示。可以通過設置不同大小的標題，使文章條理清晰。#用來指定標題文字的大小，#取1～6的整數值，取1時文字最大，取6時文字最小。屬性align設置標題在頁面中的對齊方式，省略時默認為left。

2.字體標簽<font>...</font>

※ 基本語法：<font size="數字" face="字體名" color="色彩">被設置的文字

</font>

在網頁中為了增強頁面的層次，其中的文字可以用不同的大小、字體、字型、色彩。用<font>標簽設置字號（<font>被W3C列為不建議使用的標記，以后將學習用CSS來設定字體）。<font>標記可設定文字的字體、字號和色彩。size用來設置文字的大小。數字的取值范圍從1～7，size取1時最小，取7時最大。face用來設置字體。如黑體、宋體、楷體_GB2312等。color用來設置文字色彩。

※ 范例代碼 1.10.html

<html>
<head>
<title>文本標志的綜合示例</title>
</head>
<body text="blue">
<h1>最大的標題</h1>
<h3>使用h3的標題</h3>
<h6>使用h6的標題</h6>


<p><b>黑體字文本</b> </p>
<p><i>斜體字文本</i> </p>
<p><u>下加一劃線文本</u> </p>
<p><tt>打字機風格的文本</tt></p>
<p><cite>引用方式的文本</cite></p>
<p><em>強調的文本</em></p>
<p><strong>加重的文本</strong></p>
<p><font size="+1" color="red">size取值"+1"、color取值"red"時的文本</font></p>
</body>
</html>

※ 范例效果圖

范例效果如圖1.11所示。

圖1.11 文本標志的綜合示例

注意：網頁中的文字樣式主要是通過CSS樣式來進行設置的，在后面章節中會講解到，font標簽不提倡使用。

1.3.5 超鏈接標簽

HTML文件中最重要的應用之一就是超鏈接，超鏈接是一個網站的靈魂，Web上的網頁是互相鏈接的，單擊被稱為超鏈接的文本或圖形就可以鏈接到其他頁面。超文本具有的鏈接能力,可層層鏈接相關的文件，這種具有超級鏈接能力的操作，即稱為超級鏈接。超級鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像、動畫，通過它們我們可享受豐富多彩的多媒體世界。超鏈接標簽<a>的屬性如表1-7所示。

表1-7 超鏈接標簽<a>的屬性

1.href指定鏈接地址

每一個文件都有自己的存放位置和路徑，理解一個文件到要鏈接的那個文件之間的路徑關系是創建鏈接的根本。URL(Uniform Resource Locator)中文名字為“統一資源定位器”，指的就是每一個網站都具有的地址。同一個網站下的每一個網頁都屬于同一個地址之下，在創建一個網站的網頁時，不需要為每一個鏈接都輸入完全的地址，我們只需要確定當前文檔同站點根目錄之間的相對路徑關系就可以了。因此，鏈接主要分以下兩種：

絕對路徑，如http://www.sina.com.cn
相對路徑，如news/index.html

絕對路徑：包含了標識Internet上的文件所需要的所有信息。文件的鏈接是相對原文檔而定的。包括完整的協議名稱，主機名稱，文件夾名稱和文件名稱。相對路徑是以當前文件所在路徑為起點，進行相對文件的查找。一個相對的URL不包括協議和主機地址信息，表示它的路徑與當前文檔的訪問協議和主機名相同，甚至有相同的目錄路徑。通常只包含文件夾名和文件名。甚至只有文件名。可以用相對URL指向與源文檔位于同一服務器或同文件夾中的文件。此時，瀏覽器鏈接的目標文檔處在同一服務器或同一文件夾下。

① 如果鏈接到同一目錄下，只需輸入要鏈接文件的名稱。如<a href="8.html"></a>

② 要鏈接到下級目錄中的文件，只需先輸入目錄名，然后加"/"，再輸入文件名。如<a href="book/8.html">第八章</a>

③ 要鏈接到上一級目錄中文件，則先輸入"../"，再輸入文件名。如<a href="../html/book/8.html">HTML基礎教程</a>

2.設定鏈接的目標窗口

※ 基本語法：<a href="URL" target="VALUE">

target屬性值如表1-8所示。

表1-8 target屬性值

3.錨點鏈接

瀏覽頁面時，如果頁面內容較多會使頁面的長度很長，需要不斷拖拉滾動條才能看到具體的內容，這樣操作起來很不方便。定義錨點鏈接后，單擊超鏈接就可以直接鏈接到頁面中的具體位置。

※ 基本語法：

這里的兩處name值保持一致。

注意1：屬性name是不可缺少的。

注意2：href屬性賦的值若是錨點的名字，必須在錨點名前邊加一個“#”號。

4.空鏈接

所謂空鏈接是指光標指向鏈接文字后光標呈手形，但沒有鏈接到任何頁面，仍然停留在當前頁面。

※ 基本語法：<a href="#">鏈接文字</a>

5.郵件鏈接

※ 基本語法：mailto:郵箱地址例如：mailto:abc@163.com

※ 范例代碼 1.11.html

<html>
<head>
<title>鏈接標簽的綜合示例</title>
</head>
<body>
<p align="center" style="font-size:9pt;color:yellow;background: black"><br>
<a name="Top"><font color="red">創建標簽處</font></a><br>
<br>
<br>
網頁制作學習網站<br>
<a  target="_blank">
<font
color="lime">http://www.w3school.com/</font><br><br></a><br>
<br>
本網站的主要內容<br>
<br>
<a href="index_Html.htm" target="_blank">Html教程</a><br>
<br>
<a href="../DHtml/index_DHtml.htm" target="_blank">動態Html教程
</a><br>
<br>
<a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a> <br><br>
JavaScript教程<br>
<br>
VBScript教程<br>
<br>
<a href="../yqlj/yqlj.htm" target="_blank">友情鏈接</a><br>
<br>
我要留言<br>
<br>
作者介紹<br>
<br>
<br>
歡迎給我來信，我的E-mail是：
<ahref="mailto:xiaolida@263.net"><font color="lime">xiaolida@263. net</font></a><br>
<br>
<a href="#Top"><font color="lime">點擊此處回到標簽處</font></a><br>
<br>
</p>
</body>
</html>

※ 范例效果圖

范例效果如圖1.12所示。

圖1.12 超鏈接標簽的綜合示例

1.4 上機練習

1.創建一個簡單的網頁，要求網頁的標題是“個人簡介”，網頁文本內容自定義，保存到以自己名字命名的文件夾中，HTML文件名為index.html。

2.寫出HTML文件的總體結構。

3.在IE瀏覽器中，如何查看網頁的HTML源文件。

4.設計頁面如圖1.13所示。要求背景顏色值為lightcyan，“桃花庵歌”字體為標題2，唐寅”字體為華文行楷，直線的長度分別為50px，80%，80%，高度分別為5，7，6，顏色分別為黃色、藍色和紅色。

圖1.13 基本標簽的應用

5.設計頁面如圖1.14所示。

圖1.14 文本標簽的應用

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

網頁編程技術

第1章 HTML基礎

1.1 HTML簡介

1.2 HTML文件的基本結構

1.2.1 HTML文件結構

1.2.2 HTML的使用要點

1.2.3 HTML的標簽及屬性

1.3 HTML的基本標簽

1.3.1 頭部標簽

1.標題標簽<title>

2.元信息標記<meta>

1.3.2 內容標簽

1.3.3 格式標簽

1.強制換行<br>

2.段落標簽<p>...</p>

3.定位標簽<div>…</div>

4.水平線標簽<hr>

5.注釋標記

1.3.4 字體標簽

1.標題文字標簽<h#>…</h#>

2.字體標簽<font>...</font>

1.3.5 超鏈接標簽

1.href指定鏈接地址

2.設定鏈接的目標窗口

3.錨點鏈接

4.空鏈接

5.郵件鏈接

1.4 上機練習