pg赏金女王免费旋转模式在哪

書(shū)名： HTML+CSS網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)精解
作者名：吳玉中等編著
本章字?jǐn)?shù)： 5192字
更新時(shí)間： 2018-12-30 14:34:28

第2章頁(yè)面基本元素

學(xué)前必讀：

本章主要講解HTML頁(yè)面基本元素，這些元素是構(gòu)成頁(yè)面的基礎(chǔ)，它們各有自己相應(yīng)的作用，掌握這些頁(yè)面的基本元素是定義HTML頁(yè)面的關(guān)鍵，這些設(shè)置決定了頁(yè)面的文檔類型和現(xiàn)實(shí)效果，同時(shí)也直接影響頁(yè)面中各種元素能否正常顯示。

本章重點(diǎn)：

● 頁(yè)面頭部元素<head>

● 頁(yè)面標(biāo)題元素<title>

● 元信息元素<meta>

● 頁(yè)面主體元素<body>

2.1 頁(yè)面頭部元素<head>

在HTML語(yǔ)言的頭部元素中，一般需要包括標(biāo)題、基礎(chǔ)信息和元信息等。HTML的頭部元素是以<head>為開(kāi)始標(biāo)記，以</head>為結(jié)束標(biāo)記的。

基本語(yǔ)法：

    <head>…</head>

語(yǔ)法介紹：

<head>元素的作用范圍是整篇文檔。<head>元素中可以有<meta>元信息定義、文檔樣式表定義和腳本等信息，定義在HTML語(yǔ)言頭部中的內(nèi)容往往不會(huì)在網(wǎng)頁(yè)上直接顯示。

案例代碼：

    <!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    文檔頭部信息
    </head>
    <body>
    文檔正文內(nèi)容
    </body>
    </html>

2.2 頁(yè)面標(biāo)題元素<title>

HTML頁(yè)面的標(biāo)題一般是用來(lái)說(shuō)明頁(yè)面的用途，它顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在<head>與</head>之間。標(biāo)題標(biāo)記以<title>開(kāi)始，以</title>結(jié)束。

基本語(yǔ)法：

    <head>
    <title>…</title>
    </head>

語(yǔ)法介紹：

在標(biāo)記中間的“…”就是標(biāo)題的內(nèi)容，它可以幫助用戶更好地識(shí)別頁(yè)面。頁(yè)面的標(biāo)題只有一個(gè)，它位于HTML文檔的頭部，即<head>和</head>之間。

案例代碼：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>頁(yè)面標(biāo)題元素</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中加粗部分的標(biāo)記為標(biāo)題標(biāo)記，在瀏覽器的預(yù)覽效果中可以看到標(biāo)題名稱“頁(yè)面標(biāo)題元素”，如圖2.1所示。

圖2.1 頁(yè)面標(biāo)題

提示：設(shè)置HTML文檔的標(biāo)題時(shí)應(yīng)盡可能準(zhǔn)確地描述文檔內(nèi)容，表達(dá)清晰。

2.3 元信息元素<meta>

meta元素提供的信息不顯示在頁(yè)面中，一般用來(lái)定義頁(yè)面信息的說(shuō)明、關(guān)鍵字、刷新等。在HTML中，meta標(biāo)記不需要設(shè)置結(jié)束標(biāo)記，在一個(gè)尖括號(hào)內(nèi)就是一個(gè)meta內(nèi)容。在一個(gè)HTML頁(yè)面中可以有多個(gè)meta元素。meta元素的屬性有name和http-equiv，其中name屬性主要用于描述網(wǎng)頁(yè)，以便于搜索引擎查找、分類。

2.3.1 元信息元素名稱屬性name、content

name屬性提供了由<meta>標(biāo)簽定義的名稱/值對(duì)中的名稱，HTML標(biāo)準(zhǔn)沒(méi)有指定任何預(yù)先定義的<meta>名稱，通常情況下，可以自由使用對(duì)自己和源文檔的閱讀者來(lái)說(shuō)都有意義的名稱。

content屬性提供了名稱/值對(duì)中的值，該值可以是任何有效的字符串（如果值中包含空格，就要用引號(hào)括起來(lái)）。Content屬性始終要和name或http-equiv屬性一起使用。

基本語(yǔ)法：

    <meta name="generator" content="編輯軟件的名稱">

語(yǔ)法介紹：

在該語(yǔ)法中，name為屬性名稱，設(shè)置為generator，也就是設(shè)置編輯工具，在content中定義具體的編輯工具名稱。

案例代碼：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content="FrontPage">
    <title>元信息元素名稱屬性</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記定義編輯工具為FrontPage。

2.3.2 元信息元素的附加屬性http-equiv

http-equiv類似于http的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。content-type設(shè)定頁(yè)面使用的字符集，用以說(shuō)明網(wǎng)頁(yè)制作所使用的文字語(yǔ)言，瀏覽器會(huì)根據(jù)此來(lái)調(diào)用相應(yīng)的字符集顯示頁(yè)面內(nèi)容。

基本語(yǔ)法：

    <meta http-equiv="content-type" content="text/html; charset=字符集類型" />

語(yǔ)法介紹：

在該語(yǔ)法中，http-equiv用于傳送HTTP通信協(xié)議的標(biāo)頭，而在content中才是具體的屬性值。charset用于設(shè)置網(wǎng)頁(yè)的內(nèi)碼語(yǔ)系，也就是字符集的類型，國(guó)內(nèi)常用的是GB碼，charset往往設(shè)置為GB2312，即簡(jiǎn)體中文。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=euc-jp" />
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記是告訴瀏覽器等設(shè)備，文件為html文件，且使用了日語(yǔ)編碼。

2.3.3 設(shè)置頁(yè)面關(guān)鍵字

在搜索引擎中，檢索信息都是通過(guò)輸入關(guān)鍵字來(lái)實(shí)現(xiàn)的。關(guān)鍵字是整個(gè)網(wǎng)站登錄過(guò)程中最基本也是最重要的一步，是進(jìn)行網(wǎng)頁(yè)優(yōu)化的基礎(chǔ)。關(guān)鍵字在瀏覽時(shí)是看不到的，它可以供搜索引擎使用。當(dāng)用關(guān)鍵字搜索網(wǎng)站時(shí)，如果網(wǎng)頁(yè)中包含該關(guān)鍵字，就可以在搜索結(jié)果中列出來(lái)。

基本語(yǔ)法：

    <meta name="keywords" content="輸入具體的關(guān)鍵字">

語(yǔ)法介紹：

在該語(yǔ)法中，name為屬性名稱，這里是keywords，也就是設(shè)置網(wǎng)頁(yè)的關(guān)鍵字屬性，而在content中則定義具體的關(guān)鍵字。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="插入關(guān)鍵字">
    <title>插入關(guān)鍵字</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分標(biāo)記為插入關(guān)鍵字。

2.3.4 設(shè)置頁(yè)面說(shuō)明

設(shè)置頁(yè)面說(shuō)明也是為了便于搜索引擎的查找，它用來(lái)詳細(xì)說(shuō)明網(wǎng)頁(yè)的內(nèi)容，頁(yè)面說(shuō)明在網(wǎng)頁(yè)中不顯示出來(lái)。

基本語(yǔ)法：

    <meta name="description" content="設(shè)置頁(yè)面說(shuō)明">

語(yǔ)法介紹：

在該語(yǔ)法中，name為屬性名稱，這里設(shè)置為description，也就是將元信息屬性設(shè)置為頁(yè)面說(shuō)明，在content中定義具體的描述語(yǔ)言。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="設(shè)置頁(yè)面說(shuō)明">
    <title>設(shè)置頁(yè)面說(shuō)明</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記為設(shè)置頁(yè)面的說(shuō)明。

2.3.5 定義頁(yè)面的跳轉(zhuǎn)

使用<meta>標(biāo)記可以使網(wǎng)頁(yè)在經(jīng)過(guò)一定時(shí)間后自動(dòng)刷新，這可以通過(guò)將http-equiv屬性值設(shè)置為refresh來(lái)實(shí)現(xiàn)。content屬性值可以設(shè)置為更新時(shí)間。

基本語(yǔ)法：

    <meta http-equiv="refresh" content="跳轉(zhuǎn)的時(shí)間;URL=跳轉(zhuǎn)到的地址">

語(yǔ)法介紹：

refresh出現(xiàn)在http-equiv屬性中，使用content屬性表示刷新或跳轉(zhuǎn)的開(kāi)始時(shí)間與跳轉(zhuǎn)的網(wǎng)址。默認(rèn)情況下，跳轉(zhuǎn)時(shí)間以秒為單位。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="refresh" content="5;url=index1.html">
    <title>定義頁(yè)面的跳轉(zhuǎn)</title>
    </head>
    <body>
    5秒后自動(dòng)跳轉(zhuǎn)
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記是設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)，這里設(shè)置為5秒后跳轉(zhuǎn)到index1. html頁(yè)面。在瀏覽器中預(yù)覽可以看出，跳轉(zhuǎn)前如圖2.2所示，跳轉(zhuǎn)后如圖2.3所示。

圖2.2 跳轉(zhuǎn)前

圖2.3 跳轉(zhuǎn)后

提示：使用http-equiv屬性中的refresh不僅能夠?qū)崿F(xiàn)頁(yè)面之間的跳轉(zhuǎn)，還可以完成頁(yè)面自身的自動(dòng)刷新。

2.3.6 定義頁(yè)面的作者信息

在源代碼中可以設(shè)置網(wǎng)頁(yè)制作者的姓名以及個(gè)人信息，還可以在源代碼中保留作者希望保留的信息。

基本語(yǔ)法：

    <meta name="author" content="作者的姓名">

語(yǔ)法介紹：

在該語(yǔ)法中，name為屬性名稱，設(shè)置為author，也就是設(shè)置作者信息，在content中定義具體的信息。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="author" content="永浩">
    <title>定義作者信息</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記為設(shè)置作者的信息。

2.3.7 定義頁(yè)面的版權(quán)信息

通過(guò)name="copyright"設(shè)置可以說(shuō)明網(wǎng)頁(yè)的版權(quán)。

基本語(yǔ)法：

    <meta name="copyright" content="value">

語(yǔ)法介紹：

copyright為版權(quán)，content中定義版權(quán)信息。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="copyright" content="化勇工作室">
    <title>定義頁(yè)面的版權(quán)信息</title>
    </head>
    <body>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記為定義頁(yè)面的版權(quán)信息。

2.4 頁(yè)面主體元素<body>

網(wǎng)頁(yè)的主體部分包括要在瀏覽器中顯示處理的所有信息。在網(wǎng)頁(yè)的主體標(biāo)記中有很多的屬性設(shè)置，包括網(wǎng)頁(yè)的背景設(shè)置、文字屬性設(shè)置和鏈接設(shè)置等。

2.4.1 主體元素的背景顏色屬性bgcolor

背景顏色的設(shè)計(jì)是最為簡(jiǎn)單的，但同時(shí)也是最為常用和最為重要的，因?yàn)橄鄬?duì)于背景圖片來(lái)說(shuō)，它在顯示速度上有絕對(duì)的優(yōu)勢(shì)。在網(wǎng)頁(yè)文件中，一般通過(guò)<body>標(biāo)簽的bgcolor屬性來(lái)指定頁(yè)面的顏色背景。

基本語(yǔ)法：

    <body bgcolor="背景顏色">

語(yǔ)法介紹：

該語(yǔ)法中的body就是頁(yè)面的主體標(biāo)記，bgcolor的值可以是一個(gè)已命名的顏色，也可以是一個(gè)十六進(jìn)制的顏色值。在HTML 4.01中，不贊成使用body元素的bgcolor屬性。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主體元素的背景屬性</title>
    </head>
    <body bgcolor="#C21647" >
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記是為頁(yè)面設(shè)置背景顏色為紅色，在瀏覽器中預(yù)覽效果，如圖2.4所示。

顏色背景雖然比較簡(jiǎn)單，但也有不少地方需要注意，如要根據(jù)不同的頁(yè)面內(nèi)容設(shè)計(jì)背景顏色的冷暖狀態(tài)，要根據(jù)頁(yè)面的編排設(shè)計(jì)背景顏色與頁(yè)面內(nèi)容的最佳視覺(jué)搭配等，如圖2.5 所示的網(wǎng)頁(yè)使用了大面積的綠色背景，與網(wǎng)頁(yè)整體內(nèi)容搭配。

圖2.4 設(shè)置頁(yè)面的背景顏色

圖2.5 綠色背景網(wǎng)頁(yè)

2.4.2 主體元素的背景圖片屬性background

使用恰當(dāng)?shù)膱D片作為背景，能夠使頁(yè)面看上去更加生動(dòng)美觀。使用background屬性可以將圖片設(shè)置為背景，還可以設(shè)置背景圖片的平鋪方式、顯示方式等。

基本語(yǔ)法：

    <body background="圖片的地址">

語(yǔ)法介紹：

圖片的地址可以是相對(duì)地址，也可以是絕對(duì)地址。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>頁(yè)面背景圖片</title>
    </head>
    <body background="images/company_ditu.JPG">
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記為設(shè)置的網(wǎng)頁(yè)背景圖片company_ditu.JPG，在瀏覽器中預(yù)覽可以看到背景圖像，如圖2.6所示。

網(wǎng)頁(yè)中的背景設(shè)計(jì)是相當(dāng)重要的，好的背景不但能影響訪問(wèn)者對(duì)網(wǎng)頁(yè)內(nèi)容的接受程度，還能影響訪問(wèn)者對(duì)整個(gè)網(wǎng)站的印象。如圖2.7所示的網(wǎng)頁(yè)使用了背景圖像。

2.4.3 主體元素的文本屬性text

text屬性可以設(shè)置HTML文檔的文本顏色。在沒(méi)有對(duì)文字的顏色進(jìn)行單獨(dú)定義時(shí)，這一屬性可以對(duì)頁(yè)面中所有的文字起作用。

圖2.6 頁(yè)面的背景圖像

圖2.7 使用背景圖像的網(wǎng)頁(yè)效果

基本語(yǔ)法：

    <body text="文字的顏色">

語(yǔ)法介紹：

顏色值可以為顏色名稱，如 "red"；或?yàn)槭M(jìn)制值的字體顏色，如"#ff0000"；還可以為RGB代碼的字體顏色，如"RGB(255,0,0)"。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主體元素的文本屬性</title>
    </head>
    <body text="#ff0cc0">
    <p>人生亦生活，生活亦人生，生活中的愛(ài)情，愛(ài)情中的生活，二者相互共存，彼此易同化，讓人難以捉摸，我們總有一種感覺(jué)，生活中缺少了什么，只為了一個(gè)殘忍而偏激的解釋，就說(shuō)少了一份真感情，而感情又是個(gè)抽象的東西，比如說(shuō)，一個(gè)男孩對(duì)一個(gè)女孩說(shuō) “我愛(ài)你 ”，然后他們?cè)谝黄穑屯挾裕@是個(gè)美麗的結(jié)局，但不幸的是，生活并不是童話。</p>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記為設(shè)置的文字顏色為粉紅色，在瀏覽器中預(yù)覽可以看到文檔中文字的顏色，如圖2.8所示。

在網(wǎng)頁(yè)中需要根據(jù)網(wǎng)頁(yè)整體色彩的搭配來(lái)設(shè)置文字的顏色，如圖2.9 所示的文字和整個(gè)網(wǎng)頁(yè)的顏色相協(xié)調(diào)。

2.4.4 未訪問(wèn)過(guò)的鏈接屬性link

超鏈接是網(wǎng)頁(yè)中最重要、最根本的元素之一。網(wǎng)站中的一個(gè)個(gè)網(wǎng)頁(yè)是通過(guò)超鏈接的形式關(guān)聯(lián)在一起的，正是因?yàn)橛辛司W(wǎng)頁(yè)之間的鏈接才形成了這紛繁復(fù)雜的網(wǎng)絡(luò)世界。超鏈接中以文字鏈接最多，在默認(rèn)情況下，瀏覽器以藍(lán)色作為超鏈接文字的顏色，訪問(wèn)過(guò)的文字顏色則變?yōu)榘导t色。可以通過(guò)link參數(shù)修改鏈接文字的顏色。

圖2.8 設(shè)置文字的顏色

圖2.9 文字和整個(gè)網(wǎng)頁(yè)的顏色相協(xié)調(diào)

基本語(yǔ)法：

    <body link="顏色">

語(yǔ)法介紹：

這一屬性的設(shè)置與前面幾個(gè)設(shè)置顏色的參數(shù)類似。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>未訪問(wèn)過(guò)的鏈接屬性</title>
    <style type="text/css">
    </style>
    </head>
    <body link="#FF6600">
    <a href="#"> 鏈接的文字</a>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記是為鏈接文字設(shè)置顏色為橙黃色，如圖2.10所示。

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

2.4.5 激活的鏈接屬性alink

使用alink可以設(shè)置正在訪問(wèn)的文字顏色。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>激活的鏈接屬性</title>
    </head>
    <body link="#FF6600"alink="#31693A">
    <a href="#">鏈接的文字</a>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記是為單擊鏈接時(shí)設(shè)置鏈接文字的顯示顏色，在瀏覽器中預(yù)覽效果，可以看到單擊鏈接的文字時(shí)，文字已經(jīng)改變了顏色，如圖2.11所示。

圖2.11 單擊鏈接文字時(shí)的顏色

2.4.6 已訪問(wèn)過(guò)的鏈接屬性vlink

使用vlink可以設(shè)置已訪問(wèn)過(guò)的超鏈接顏色。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>已訪問(wèn)過(guò)的鏈接屬性</title>
    </head>
    <body link="#FF6600"alink="#31693A" vlink="#FF000C">
    <a href="#">鏈接的文字</a>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記是為鏈接的文字設(shè)置訪問(wèn)后的顏色，在瀏覽器中預(yù)覽效果，可以看到單擊鏈接后文字的顏色已經(jīng)發(fā)生改變，如圖2.12所示。

圖2.12 已訪問(wèn)過(guò)的鏈接文字顏色

2.4.7 IE瀏覽器中的左邊界屬性leftmargin

在HTML頁(yè)面中，可以定義頁(yè)面的左邊距，即內(nèi)容和瀏覽器左側(cè)邊框之間的距離，設(shè)定合適的左邊距可以防止網(wǎng)頁(yè)外觀過(guò)于擁擠。

基本語(yǔ)法：

    <body leftmargin=左邊距的值>

語(yǔ)法介紹：

在默認(rèn)情況下，邊距的值以像素為單位。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IE瀏覽器中的左邊界屬性</title>
    </head>
    <body leftmargin="50">
    設(shè)置頁(yè)面的左邊距為50像素
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的標(biāo)記是設(shè)置左邊距為50像素，在瀏覽器中預(yù)覽效果，可以看出定義的邊距效果，如圖2.13所示。

圖2.13 設(shè)置頁(yè)面的左邊距效果

2.4.8 IE瀏覽器中的上邊界屬性topmargin

在HTML頁(yè)面中，可以定義頁(yè)面的左邊距，即內(nèi)容和瀏覽器上側(cè)邊框之間的距離，設(shè)定合適的上邊距可以防止網(wǎng)頁(yè)外觀過(guò)于擁擠。

基本語(yǔ)法：

    <body topmargin=上邊距的值>

語(yǔ)法介紹：

在默認(rèn)情況下，邊距的值以像素為單位。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IE瀏覽器中的上邊界屬性</title>
    </head>
    <body topmargin="50" >
    設(shè)置頁(yè)面的上邊距為50像素
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記是設(shè)置上邊距為50像素，在瀏覽器中預(yù)覽效果，可以看出定義的邊距效果，如圖2.14所示。

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

提示：一般網(wǎng)站的頁(yè)面左邊距和上邊距都設(shè)置為0，這樣看起來(lái)頁(yè)面不會(huì)有太多的空白。

2.4.9 主體元素的背景圖片滾動(dòng)屬性bgproperties

在默認(rèn)情況下，如果頁(yè)面的內(nèi)容較長(zhǎng)，當(dāng)拖動(dòng)瀏覽器滾動(dòng)條的時(shí)候，背景會(huì)隨著文字內(nèi)容的滾動(dòng)而滾動(dòng)，所謂背景圖像固定，是指不論瀏覽器的滾動(dòng)條如何拖動(dòng)，背景都永遠(yuǎn)固定在相同的位置，并不會(huì)隨著文字滾動(dòng)而滾動(dòng)。

基本語(yǔ)法：

    <body background="圖像的地址" bgproperties=fixed>

語(yǔ)法介紹：

Internet Explorer和Netscape Navigator6都支持 <body>標(biāo)簽的bgproperties屬性擴(kuò)展。但它只有與background屬性擴(kuò)展一起使用時(shí)才有效。bgproperties屬性只有一個(gè)值fixed。它把背景圖像凍結(jié)在瀏覽窗口，這樣就不會(huì)隨著其他窗口的內(nèi)容而滾動(dòng)了。

案例代碼：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>主體元素的背景圖片滾動(dòng)屬性</title>
    </head>
    <body background="images/company_ditu.jpg"bgproperties=fixed>
    <p>&nbsp;</p>
    <p> 每個(gè)夢(mèng)想都值得灌溉</p>
    <p> 眼淚變成雨水就能落下來(lái)</p>
    <p> 每個(gè)孩子都應(yīng)該被寵愛(ài)</p>
    <p> 他們是我們的未來(lái)</p>
    <p> 這是最好的未來(lái)</p>
    <p> 我們用愛(ài)鑄造完美現(xiàn)在</p>
    <p> 千萬(wàn)溪流匯聚成大海 </p>
    <p> 每朵浪花一樣澎湃</p>
    <p> 這是最好的未來(lái)</p>
    <p> 不分你我彼此相親相愛(ài)</p>
    <p> 千山萬(wàn)水證明這關(guān)懷</p>
    <p> 幸福永遠(yuǎn)與愛(ài)同在</p>
    </body>
    </html>

代碼分析：

在代碼中，加粗部分的代碼標(biāo)記是設(shè)置背景的屬性為固定，文字是為了使頁(yè)面的長(zhǎng)度增加，出現(xiàn)滾動(dòng)條，在瀏覽器中預(yù)覽效果，如圖2.16所示是沒(méi)有拖動(dòng)滾動(dòng)條之前的頁(yè)面效果，當(dāng)拖動(dòng)了瀏覽器的滾動(dòng)條之后，可以從如圖2.17所示的效果中看到，背景圖像并不會(huì)跟著一起滾動(dòng)，而是固定在了原有的位置上，這樣，背景固定的效果就實(shí)現(xiàn)了。

圖2.16 沒(méi)有拖動(dòng)滾動(dòng)條之前的頁(yè)面效果

圖2.17 背景固定的效果

2.5 創(chuàng)建樣式元素<style>

基本語(yǔ)法：

    <style type="text/css">
    </style>

語(yǔ)法介紹：

style元素只能在HTML文檔的head內(nèi)使用。Microsoft Internet Explorer 4.0及以后版本允許多個(gè)樣式塊。

此元素在Internet Explorer 3.0及以上版本的HTML中可用，在Internet Explorer 4.0及以上版本的腳本中可用。

案例代碼：

    <html>
    <head>
    <style type="text/css">
    h1 {color: red}
    h3 {color: blue}
    </style>
    </head>
    <body>
    <h1>This is header 1</h1>
    <h3>This is header 3</h3>
    </body>
    </html>

代碼分析：

這段代碼首先在head內(nèi)使用style定義了h1和h3兩個(gè)樣式，然后在body正文內(nèi)應(yīng)用這兩個(gè)樣式，瀏覽的效果如圖2.18所示。

圖2.18 style樣式的使用

2.6 腳本元素<script>

基本語(yǔ)法：

    <script type="text/javascript">
    ……
    </script>

語(yǔ)法介紹：

必選的屬性

可選的屬性

案例代碼：

    <html>
    <body>
    <script type="text/javascript">
    document.write("<h1>Hello kete!</h1>")
    </script>
    </body>
    </html>

代碼分析：

這段代碼使用script定義了一段JavaScript代碼，使用document.write輸出標(biāo)題文字“Hello kete!”，在瀏覽器中瀏覽，效果如圖2.19所示。

圖2.19 script代碼

2.7 課后習(xí)題

填空題

（1）使用<body>標(biāo)記的______屬性可以為整個(gè)網(wǎng)頁(yè)定義背景顏色。使用______屬性可以將圖片設(shè)置為背景，還可以設(shè)置背景圖片的平鋪方式、顯示方式等。

（2）在HTML語(yǔ)言的頭部元素中，一般需要包括標(biāo)題、基礎(chǔ)信息和元信息等。HTML的頭部元素是以______為開(kāi)始標(biāo)記，以______為結(jié)束標(biāo)記。

（3）meta元素的屬性有______和______，其中______屬性主要用于描述網(wǎng)頁(yè)，以便于搜索引擎查找、分類。

（4）使用______標(biāo)記可以使網(wǎng)頁(yè)在經(jīng)過(guò)一定時(shí)間后自動(dòng)刷新，這可以通過(guò)將______屬性值設(shè)置為refresh來(lái)實(shí)現(xiàn)。______屬性值可以設(shè)置為更新時(shí)間。

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

HTML+CSS網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)精解

第2章 頁(yè)面基本元素

2.1 頁(yè)面頭部元素<head>

2.2 頁(yè)面標(biāo)題元素<title>

2.3 元信息元素<meta>

2.3.1 元信息元素名稱屬性name、content

2.3.2 元信息元素的附加屬性http-equiv

2.3.3 設(shè)置頁(yè)面關(guān)鍵字

2.3.4 設(shè)置頁(yè)面說(shuō)明

2.3.5 定義頁(yè)面的跳轉(zhuǎn)

2.3.6 定義頁(yè)面的作者信息

2.3.7 定義頁(yè)面的版權(quán)信息

2.4 頁(yè)面主體元素<body>

2.4.1 主體元素的背景顏色屬性bgcolor

2.4.2 主體元素的背景圖片屬性background

2.4.3 主體元素的文本屬性text

2.4.4 未訪問(wèn)過(guò)的鏈接屬性link

2.4.5 激活的鏈接屬性alink

2.4.6 已訪問(wèn)過(guò)的鏈接屬性vlink

2.4.7 IE瀏覽器中的左邊界屬性leftmargin

2.4.8 IE瀏覽器中的上邊界屬性topmargin

2.4.9 主體元素的背景圖片滾動(dòng)屬性bgproperties

2.5 創(chuàng)建樣式元素<style>

2.6 腳本元素<script>

2.7 課后習(xí)題

第2章頁(yè)面基本元素