不朽情缘卡免费游戏

書名： HTML5從入門到精通（第4版）
作者名：明日科技編著
本章字?jǐn)?shù)： 3955字
更新時(shí)間： 2024-12-24 10:26:16

2.2　HTML的基本結(jié)構(gòu)

2.2.1　文件開始標(biāo)簽——<html>

在任何的一個(gè)HTML文件里，最先出現(xiàn)的HTML標(biāo)簽就是<html>，它用于表示該文件是以超文本標(biāo)識(shí)語言（HTML）編寫的。<html>標(biāo)簽是成對(duì)出現(xiàn)的，起始標(biāo)簽<html>和結(jié)束標(biāo)簽</html>分別位于文件的最前面和最后面，文件中的所有內(nèi)容和HTML標(biāo)簽都包含在其中。例如：

     <html>
          文件的全部內(nèi)容
     </html>

該標(biāo)簽不帶任何屬性。

事實(shí)上，現(xiàn)在常用的Web瀏覽器（例如Google Chrome瀏覽器）都可以自動(dòng)識(shí)別HTML文件，并不要求有<html>標(biāo)簽，也不對(duì)該標(biāo)簽進(jìn)行任何操作。但是，為了提高文件的適用性，使編寫的HTML文件能適應(yīng)不斷變化的Web瀏覽器，還是應(yīng)該養(yǎng)成使用這個(gè)標(biāo)簽的習(xí)慣。

2.2.2　文件頭部標(biāo)簽——<head>

習(xí)慣上，把HTML文件分為兩部分：文件頭和文件主體。文件主體部分就是在Web瀏覽器窗口的用戶區(qū)內(nèi)看到的內(nèi)容，而文件頭部分用來規(guī)定該文件的標(biāo)題（出現(xiàn)在瀏覽器窗口的標(biāo)題欄中）和文件的一些屬性。

<head>是一個(gè)表示網(wǎng)頁頭部的標(biāo)簽。在由<head>標(biāo)簽定義的元素中，并不放置網(wǎng)頁的任何內(nèi)容，而是放置關(guān)于HTML文件的信息，也就是說，<head>標(biāo)簽定義的元素并不屬于HTML文件的主體。在<head>標(biāo)簽中可以定義文件的標(biāo)題、編碼方式及URL等信息。這些信息大部分用于提供索引、辨認(rèn)或其他方面的應(yīng)用。

寫在<head>與</head>中間的文本，如果寫在<title>標(biāo)簽中，則表示該網(wǎng)頁的名稱，并作為窗口的名稱顯示在這個(gè)網(wǎng)頁窗口的最上方。

如果HTML文件并不需要提供相關(guān)信息，則可以省略<head>標(biāo)簽。

在HTML語言的頭元素中，一般需要包括標(biāo)題、基底信息、元信息等。HTML的頭元素是以<head>為起始標(biāo)簽，以</head>為結(jié)束標(biāo)簽的。一般情況下，CSS和JavaScript都是在頭元素中定義的，而在HTML語言頭部定義的內(nèi)容往往不會(huì)直接顯示在網(wǎng)頁上。它用于包含當(dāng)前文檔的相關(guān)信息。

常用的<head>標(biāo)簽內(nèi)容如表2.1所示。

表2.1　<head>標(biāo)簽內(nèi)容

<head>與</head>之間的內(nèi)容不會(huì)顯示在瀏覽器的文檔窗口中，但是，其間的元素有特殊重要的意義。

2.2.3　文件標(biāo)題標(biāo)簽——<title>

每個(gè)HTML文件都需要有一個(gè)文件名稱。在瀏覽器中，文件名稱作為窗口名稱顯示在該窗口的最上方。這對(duì)瀏覽器的收藏功能很有用。瀏覽者如果認(rèn)為某個(gè)網(wǎng)頁對(duì)自己很有用，并希望以后經(jīng)常閱讀，則可以選擇瀏覽器“收藏”菜單中的“添加到收藏夾”命令來保存該網(wǎng)頁，供以后調(diào)用。網(wǎng)頁的名稱要寫在<title>和</title>標(biāo)簽之間，并且<title>標(biāo)簽應(yīng)包含在<head>與</head>標(biāo)簽之中。

HTML文件的標(biāo)簽是可以嵌套的，即在一對(duì)標(biāo)簽中可以嵌入另一對(duì)子標(biāo)簽，嵌套在<head>標(biāo)簽中使用的主要是<title>標(biāo)簽。語法格式如下。

     <title>…</title>

<title>標(biāo)簽內(nèi)部就是標(biāo)題的內(nèi)容。實(shí)例代碼如下。

上面代碼中的粗體顯示的就是頁面的標(biāo)題。保存頁面后在瀏覽器中打開，可以看到瀏覽器的標(biāo)題欄中顯示了剛才設(shè)置的標(biāo)題“簡單的HTML文件”，效果如圖2.24所示。

圖2.24　HTML頁面的標(biāo)題

2.2.4　基底網(wǎng)址標(biāo)簽——<base>

URL路徑是一種互聯(lián)網(wǎng)地址的表示法，在這個(gè)數(shù)據(jù)中可以包括以何種協(xié)議連接、要連接到哪一個(gè)地址、連接地址的端口（Port）號(hào)以及服務(wù)器（Server）中頁面的完整路徑和頁面名稱等信息。在HTML中，URL路徑分為兩種形式：絕對(duì)路徑和相對(duì)路徑。絕對(duì)路徑是寫出服務(wù)器上磁盤驅(qū)動(dòng)器的名稱和完整的路徑，同時(shí)顯示磁盤上的目錄結(jié)構(gòu)；相對(duì)路徑是相對(duì)于當(dāng)前HTML文檔所在目錄或站點(diǎn)根目錄的路徑。

HTML頁面通過基底網(wǎng)址把當(dāng)前HTML頁面中的所有相對(duì)URL轉(zhuǎn)換成絕對(duì)URL。一般情況下，HTML頁面的絕對(duì)路徑是通過基底網(wǎng)址標(biāo)簽<base>設(shè)置的，因此頁面中的鏈接地址只需要設(shè)置為相對(duì)地址，當(dāng)瀏覽器瀏覽頁面時(shí)，相對(duì)地址將通過<base>標(biāo)簽附在基底網(wǎng)址的后面，從而轉(zhuǎn)換為絕對(duì)地址。

例如，在HTML頁面的頭部定義基底網(wǎng)址如下。

     <base >

在頁面主體中設(shè)置的某一個(gè)相對(duì)地址如下。

     <a href="../html/book.html">

說明

在相對(duì)路徑中，使用../表示當(dāng)前路徑的上一級(jí)路徑，使用./表示當(dāng)前路徑。

當(dāng)使用瀏覽器瀏覽時(shí)，這個(gè)鏈接地址就變成以下絕對(duì)地址：

http://www.mingribook.com/html/book.html

因此，在HTML頁面中設(shè)置基底標(biāo)簽時(shí)不應(yīng)該多于一個(gè)，并且要將其放置在頭部以及任何包含URL地址的語句之前。語法格式如下。

     <base href="鏈接地址" target="新窗口的打開方式">

在該語法中，“鏈接地址”是要設(shè)置的頁面的基底地址，而“新窗口的打開方式”可以被設(shè)置為不同的效果。<base>標(biāo)簽的屬性值及含義如表2.2所示。實(shí)例代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <base  target="_blank">
          <title>基底網(wǎng)址標(biāo)簽</title>
     </head>
     <body>
          <a href="index.htm">打開一個(gè)相對(duì)地址</a>
     </body>
     </html>

表2.2　<base>標(biāo)簽的屬性值及其含義

運(yùn)行該程序，當(dāng)鼠標(biāo)移動(dòng)到鏈接文字上面時(shí)，可以看到在瀏覽器的狀態(tài)欄中顯示了其完整的鏈接地址，它是由代碼中設(shè)置的基底地址加上程序中的相對(duì)地址組成的，如圖2.25所示。

圖2.25　設(shè)置基底地址

2.2.5　文件主體標(biāo)簽——<body>

網(wǎng)頁的主體部分以<body>標(biāo)簽標(biāo)志它的開始，以</body>標(biāo)簽標(biāo)志它的結(jié)束。在網(wǎng)頁的<body>標(biāo)簽中設(shè)置了很多屬性，如表2.3所示。

表2.3　<body>標(biāo)簽的屬性

下面就來分別介紹這些屬性的應(yīng)用。

1．文字顏色屬性——text

<body>標(biāo)簽的text屬性可以改變整個(gè)頁面默認(rèn)文字的顏色。在沒有對(duì)文字進(jìn)行單獨(dú)定義顏色時(shí)，這個(gè)屬性將對(duì)頁面中所有的文字產(chǎn)生作用，語法格式如下。

     <body text="顏色代碼">

在該語法中，text的屬性值與設(shè)置頁面背景色相同，也就是說，該屬性設(shè)置也與頁面的主體標(biāo)簽放置在一起。實(shí)例代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>設(shè)置頁面文字顏色</title>
     </head>
     <body text="#0000FF">
          設(shè)置頁面的文字顏色為藍(lán)色
          </body>
     </html>

運(yùn)行這段代碼，實(shí)現(xiàn)的效果如圖2.26所示。

圖2.26　設(shè)置頁面文字顏色為藍(lán)色

2．背景顏色屬性——bgcolor

<body>標(biāo)簽的bgcolor屬性用來設(shè)定整個(gè)頁面的背景顏色。與文字顏色相似，bgcolor屬性也是使用顏色名稱或者十六進(jìn)制值來表現(xiàn)顏色效果的。語法格式如下。

     <body bgcolor="顏色代碼">

該語法中的body表示頁面的主體標(biāo)簽，這意味著設(shè)置頁面的背景顏色要和頁面的主體標(biāo)簽放置在一起。實(shí)例代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>設(shè)置頁面背景顏色</title>
     </head>
     <body bgcolor="#0000FF" text="#FFFFFF">
          設(shè)置頁面的背景為藍(lán)色，文字的顏色為白色
     </body>
     </html>

運(yùn)行這段代碼，可以看到打開的頁面背景色為#0000FF藍(lán)色，文字的顏色為#FFFFFF白色，效果如圖2.27所示。

圖2.27　設(shè)置頁面的背景顏色為藍(lán)色

3．背景圖像屬性——background

頁面中可以使用.jpg或.gif格式的圖片。這些圖片可以作為頁面的背景圖，這可以通過<body>標(biāo)簽的background屬性來實(shí)現(xiàn)。背景圖不同于插入網(wǎng)頁中的圖片，它被放在網(wǎng)頁的最底層，而文字和圖片等都位于其上面。文字、插入的圖片等會(huì)覆蓋背景圖片。在默認(rèn)情況下，背景圖片在水平方向和垂直方向上會(huì)不斷重復(fù)出現(xiàn)，直到鋪滿整個(gè)網(wǎng)頁。語法格式如下。

     <body background=”文件鏈接地址”  bgproperties=”背景圖片固定屬性”>

文件的鏈接地址可以是相對(duì)地址，也就是本機(jī)上圖片文件的存儲(chǔ)位置，也可以設(shè)置為網(wǎng)上的圖片資料，如http://www.mingribook.com/book.jpg。在默認(rèn)情況下，用戶可以省略bgproperties屬性，這時(shí)圖片會(huì)按照水平和垂直的方向不斷地重復(fù)出現(xiàn)，直到鋪滿整個(gè)頁面。如果將bgproperties屬性設(shè)置為fixed，那么背景圖像在滾動(dòng)頁面時(shí)也會(huì)移動(dòng)，這相對(duì)瀏覽者來說，它始終停留在相同的位置上。

【例2.2】背景圖片的設(shè)置與顯示效果。（實(shí)例位置：資源包\TM\sl\2\2）

（1）設(shè)置一個(gè)圖片文件作為網(wǎng)頁的背景，在默認(rèn)情況下不設(shè)置bgproperties屬性，此時(shí)圖片將在水平和垂直方向上平鋪圖像，代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>背景圖片</title>
     </head>
     <body background="images/1.jpg">
     </body>
     </html>

運(yùn)行效果如圖2.28所示。

圖2.28　平鋪圖像作為背景

（2）如果希望圖片不重復(fù)顯示，一般情況下需要借助CSS樣式，這里簡單介紹一下，在后面的章節(jié)中將詳細(xì)介紹CSS的相關(guān)內(nèi)容。

網(wǎng)頁背景的樣式設(shè)置通常是通過在頭部標(biāo)簽中添加<style>標(biāo)簽來實(shí)現(xiàn)的，代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>背景圖片不重復(fù)出現(xiàn)</title>
          <style type="text/css">
               body{background-repeat:no-repeat}
          </style>
     </head>
     <body background="images/1.jpg">
     </body>
     </html>

在這段代碼中，background-repeat的值被設(shè)置為no-repeat，也就是不重復(fù)，運(yùn)行效果如圖2.29所示。

圖2.29　背景圖像單獨(dú)顯示

如果在這段代碼中，將background-repeat的值設(shè)置為repeat-x，則背景圖片值在水平方向上平鋪，效果如圖2.30所示。相反，如果將background-repeat的值設(shè)置為repeat-y，則只在垂直方向上平鋪。

圖2.30　背景圖像水平平鋪效果

（3）除了設(shè)置背景是否重復(fù)，你還可以設(shè)置背景圖片是否隨著網(wǎng)頁中拖動(dòng)條的拖動(dòng)而變化。該屬性是通過bgproperties參數(shù)來設(shè)定的。如果bgproperties的值被設(shè)置為fixed，則背景圖片會(huì)被固定在頁面上并靜止不動(dòng)。代碼如下。

運(yùn)行這段代碼后的效果如圖2.31所示。當(dāng)拖動(dòng)滾動(dòng)條時(shí)，你會(huì)發(fā)現(xiàn)只有文字在移動(dòng)，而背景是靜止不動(dòng)的。

圖2.31　運(yùn)行代碼的效果

4．鏈接文字屬性——link

在網(wǎng)頁創(chuàng)建中，除了文字、圖片，超鏈接也是最常用的一種元素。超鏈接中以文字鏈接最多，在默認(rèn)情況下，瀏覽器以藍(lán)色作為超鏈接文字的顏色，訪問過的文字則變?yōu)榘导t色。用戶在創(chuàng)作網(wǎng)頁時(shí)，可以通過link參數(shù)修改鏈接文字的顏色。語法格式如下。

     <body link="顏色代碼">

這一屬性的設(shè)置與前面幾個(gè)設(shè)置顏色的參數(shù)類似，它們都是與<body>標(biāo)簽放置在一起，表明它對(duì)網(wǎng)頁中所有未單獨(dú)設(shè)置的元素起作用。

【例2.3】設(shè)置未訪問的鏈接文字的顏色。（實(shí)例位置：資源包\TM\sl\2\3）

HTML中默認(rèn)的超鏈接的文本顏色為藍(lán)色，下面則通過link將超鏈接的文本顏色修改為紅色。代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>頁面的鏈接文字</title>
     </head>
     <body text="#6699FF" link="#FF0000">
          <p align="center">設(shè)置文字的鏈接效果</p>
          <p align="center"><a >鏈接文字</a></p>
     </body>
     </html>

運(yùn)行這段代碼，你可以看到鏈接文字的顏色不再是默認(rèn)的藍(lán)色，而是被設(shè)置為紅色，如圖2.32所示。

在上面的代碼中，添加正在訪問的文字顏色設(shè)置。這需要用到alink屬性，添加后的代碼如下。

運(yùn)行這段代碼之后，單擊鏈接文字“正在訪問的鏈接”，你會(huì)發(fā)現(xiàn)，當(dāng)鼠標(biāo)被按下時(shí)，文字顏色變?yōu)榫G色，如圖2.33所示。

圖2.32　設(shè)置鏈接文字的顏色

圖2.33　設(shè)置正在訪問的文字顏色

在上面的代碼中，繼續(xù)使用vlink屬性設(shè)置訪問后的文字鏈接顏色，實(shí)現(xiàn)的代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>頁面的鏈接文字</title>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
     </head>
     <body text="#6699FF" link="#FF0000" alink="#99FF00" vlink="#CCCCCC">
          <center>
               設(shè)置文字的鏈接效果
               <br/><br/>
               <a >鏈接文字</a>
               <br/><br/>
               <a href="2-11.html">訪問后的鏈接</a>
          </center>
     </body>
     </html>

運(yùn)行這段代碼之后，當(dāng)你單擊“訪問后的鏈接”文字鏈接時(shí)，你同時(shí)完成了頁面的跳轉(zhuǎn)（這里設(shè)置的是跳轉(zhuǎn)回本頁）。這時(shí)，你會(huì)看到訪問過的鏈接文字顏色變?yōu)榛疑鐖D2.34所示。

圖2.34　設(shè)置訪問后的文字鏈接顏色

5．邊距屬性——margin

在網(wǎng)頁的制作過程中，你還可以定義頁面的空白，也就是內(nèi)容與瀏覽器邊框之間的距離，其中包括上邊框和左邊框，設(shè)定合適的邊距可以防止網(wǎng)頁外觀過于擁擠。語法格式如下。

     <body topmargin=上邊距的值 leftmargin=左邊距的值>

在默認(rèn)情況下，邊距的值是以像素為單位的。實(shí)例代碼如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>設(shè)置邊距</title>
     </head>
     <body topmargin="60" leftmargin="50">
          設(shè)置頁面的上邊距為60像素
          <br/>
          設(shè)置頁面的左邊距為50像素
     </body>
     </html>

運(yùn)行此段代碼，你可以看到設(shè)置邊距前后的對(duì)比效果，設(shè)置邊距前的效果如圖2.35所示，設(shè)置自定義邊距后的效果如圖2.36所示。

圖2.35　默認(rèn)的頁面效果

圖2.36　設(shè)置邊距的效果

2.2.6　注釋—

除了以上這些基本標(biāo)簽，網(wǎng)頁還包含一種不顯示在頁面中的元素，那就是代碼的注釋文字。給代碼加注釋，是一種很好的編程習(xí)慣。適當(dāng)?shù)淖⑨尶梢詭椭脩舾玫亓私饩W(wǎng)頁中各個(gè)模塊的劃分，也有助于以后對(duì)代碼的檢查和修改。在HTML文件中添加注釋的語法格式如下。

     <!--注釋的文字-->

注釋很簡單，只需要在上面語法中“注釋的文字”的位置上添加需要的內(nèi)容即可。

編程訓(xùn)練（答案位置：資源包\TM\sl\2\編程訓(xùn)練）

【訓(xùn)練3】顯示一則天氣預(yù)報(bào)　在網(wǎng)頁中添加一則天氣預(yù)報(bào)，天氣預(yù)報(bào)中包含發(fā)布時(shí)間、發(fā)布者、閱讀量以及具體天氣情況。

【訓(xùn)練4】顯示清明節(jié)介紹　在網(wǎng)頁中添加一段文字，介紹清明節(jié)的來歷等。

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

HTML5從入門到精通（第4版）

2.2 HTML的基本結(jié)構(gòu)

2.2.1 文件開始標(biāo)簽——<html>

2.2.2 文件頭部標(biāo)簽——<head>

2.2.3 文件標(biāo)題標(biāo)簽——<title>

2.2.4 基底網(wǎng)址標(biāo)簽——<base>

2.2.5 文件主體標(biāo)簽——<body>