HTML基礎標籤之body標籤

body是什麼意思中文

下面的是一個簡易的html5模板：

body元素定義文件的主體（所有主流瀏覽器都支援標籤）。

alink

屬性規定文件中活動連結（active link）的顏色，當連結被點選時，該連結就處於活動狀態。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

background

屬性規定規定文件的背景影象。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

bgcolor

屬性規定文件的背景顏色。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

link

屬性規定文件中未訪問連結的預設顏色。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

text

屬性規定文件的字型顏色。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

vlink

規定文件中已被訪問連結的顏色。所有主流瀏覽器都支援該屬性。HTML5不支援該屬性。

CSS實際應用：

小提示

：link未訪問、visited已訪問、hover懸停、active活動的（書寫順序很重要，一定按照順序，否則會出現連結樣式失效），未已懸活 未已懸活 未已懸活 未已懸活。。。在CSS定義中，a：hover必須被置於a：link，a：visited之後，才是有效的。a：active必須被置於a：hover之後，才是有效的。實際中link和visited的顏色應相同，hover的顏色應該是加強色（起強調作用）。

簡潔寫法：

a：link，a：visited{

color：lightblue；

text-decoration：none；

}

a：hover，a：active{

color：blue；

text-decoration：none；

}

小知識

：

偽類

（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是：

selector：pseudo class{

property：value；

}

選擇符：偽類{

屬性：值；

}

兩種

獲取body.class

的方法：

document。getElementsByTagName（‘body’）［0］；

document。getElementById（‘myid’）。className；（需要同時給body設定id和class）

js中和body有關

的語句：

網頁可見區域寬：document。body。clientWidth；（body。width）

網頁可見區域高：document。body。clientHeight；（程式碼從上到該語句執行時的body高度）

網頁可見區域寬：document。body。offsetWidth；（包括邊線的寬）

網頁可見區域高：document。body。offsetHeight；（包括邊線的高，程式碼從上到該語句執行時的body高度）

網頁正文全文寬：document。body。scrollWidth；（html。width）

網頁正文全文高：document。body。scrollHeight；（html。height，程式碼從上到該語句執行時的body高度）

網頁捲軸距開始時的距離（上下）：document。body。scrollTop；（有問題，一直為0，以後解決）

網頁捲軸距開始時的距離（左右）：document。body。scrollLeft；（有問題，一直為0，以後解決）

連結的定義主要有三個屬性，

顏色

（color）、

文字修飾

（text-decoration：none，一般設定為none）和

背景

（background，一般也不使用）。text-decoration：overline（文字上）、line-through（文字中）、underline（文字下）、blink（閃爍，好像已失效）、none（無）；

小實踐

：

一個hover偽類，不同的連結樣式

：

body和html的100%height

：

第一張圖片中div無高度，原因在於以百分比設定元素的尺寸，必須要以父元素的尺寸作為參考，如果父元素沒有設定尺寸，就不會生效，在這裡body雖然設定100%高度，但父元素html未設定100%高度（469px），所以body的100%高度無效，那div也就沒有效果，第二張反之。

頁面的背景顏色

：

“body{background：lightblue；}”，這裡看上去是body的背景色起作用了，其實這裡不是body的background起作用，而是body作為一個根節點起作用了，html標籤未被啟用，body擔當類似於根節點的節點，body的背景色被瀏覽器俘獲，瀏覽器背景色為background的背景色，瀏覽器背景色作為了body的背景色。

“body{background：lightblue；} html{background：orange；}”，html有了背景色樣式，body的背景色變成了正常的body標籤（一個實實在在、普普通通的標籤）的背景色，而此時的html標籤最頂級，背景色被瀏覽器獲取，成為瀏覽器的背景色。

參考

：

http://www.zhangxinxu.com/wordpress/?p=259