javascript 獲取網(wǎng)頁各種寬度

頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

網(wǎng)頁正文全文高：document.body.scrollHeight

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的寬：window.screen.width

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對象的滾動(dòng)寬度

offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX 相對文檔的水平座標(biāo)

event.clientY 相對文檔的垂直座標(biāo)

event.offsetX 相對容器的水平坐標(biāo)

event.offsetY 相對容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點(diǎn)

本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對body進(jìn)行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

實(shí)現(xiàn)代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>請調(diào)整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請調(diào)整瀏覽器窗口大小</h2><hr>

瀏覽器窗口的實(shí)際高度: <input type="text" name="availHeight" size="4"><br>

瀏覽器窗口的實(shí)際寬度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數(shù)：獲取尺寸

{

//獲取窗口寬度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//獲取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結(jié)果輸出至兩個(gè)文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調(diào)用函數(shù)，獲取數(shù)值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會(huì)隨窗口大小的改變而變化。

（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。

（4）再通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小，并存儲(chǔ)在前述兩個(gè)變量中。

（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個(gè)文本框。

（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。

TML的作用

HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。

超文本兩層含義：

因?yàn)榫W(wǎng)頁中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，與世界各地主機(jī)的網(wǎng)頁鏈接（超鏈接文本）

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容

網(wǎng)頁文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個(gè)出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個(gè)表單中有很多信息組成,比如姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

兩種方式的區(qū)別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點(diǎn)擊提交：

可以看到服務(wù)器收到了請求報(bào)文。

HTML（HyperText Markup Language，中文：超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言。它由一系列標(biāo)簽組成，這些標(biāo)簽描述了網(wǎng)頁中的各個(gè)元素和其它相關(guān)信息。通過使用HTML標(biāo)簽和屬性，開發(fā)人員可以定義文本、圖像、鏈接、表格、表單等元素，并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。

參考文檔：https://www.cjavapy.com/article/3297/

HTML實(shí)例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

HTML文檔的后綴名可以是.html或.htm，都可以使用，沒有區(qū)別。

注意：對于中文網(wǎng)頁需要使用<meta charset="utf-8"> 聲明編碼，否則會(huì)出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會(huì)設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為<meta charset="gbk"> 。

1、HTML的基本概念

1）標(biāo)簽（Tag）

HTML使用標(biāo)簽來定義網(wǎng)頁中的各個(gè)元素。標(biāo)簽通常以尖括號< >的形式出現(xiàn)，如<p>表示段落，<img>表示圖像等。標(biāo)簽可以包含屬性，用于提供額外的信息或控制元素的行為。

2）元素（Element）

一個(gè)完整的HTML元素由開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。例如，<p>這是一個(gè)段落</p>就是一個(gè)完整的段落元素。

3）屬性（Attribute）

HTML標(biāo)簽可以具有屬性，用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現(xiàn)，例如<img src="image.jpg">中的src屬性指定了圖像的源文件。

4）文檔結(jié)構(gòu)

一個(gè)HTML文檔由<html>、<head>和<body>等標(biāo)簽組成。其中，<html>標(biāo)簽用于定義整個(gè)HTML文檔的根元素，<head>標(biāo)簽用于定義文檔的頭部信息，如標(biāo)題和樣式表鏈接，<body>標(biāo)簽用于定義文檔的主體內(nèi)容。

5）塊級元素和內(nèi)聯(lián)元素

HTML元素可以被分類為塊級元素和內(nèi)聯(lián)元素。塊級元素以塊的形式顯示，獨(dú)占一行或一塊空間，如<p>、<div>等。內(nèi)聯(lián)元素以行內(nèi)的方式顯示，不會(huì)獨(dú)占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素內(nèi)部，形成一個(gè)層次結(jié)構(gòu)。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 聲明

HTML文檔的開頭通常會(huì)包含一個(gè)DOCTYPE聲明，用于指定文檔的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML與Web 瀏覽器

HTML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于顯示和解釋HTML文檔的應(yīng)用程序。Web瀏覽器通過解析HTML文檔，將其轉(zhuǎn)換為可視化的網(wǎng)頁。瀏覽器會(huì)讀取HTML文檔中的標(biāo)簽和內(nèi)容，并根據(jù)這些標(biāo)簽和內(nèi)容的定義，渲染出網(wǎng)頁的結(jié)構(gòu)和樣式。HTML提供了各種標(biāo)簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網(wǎng)頁中的展示和交互方式。瀏覽器在解析HTML時(shí)，會(huì)根據(jù)標(biāo)簽和屬性的定義，將文本顯示為段落、標(biāo)題或其他格式，顯示圖像、鏈接，并響應(yīng)用戶的交互操作。

通過HTML和Web瀏覽器的結(jié)合，用戶可以在瀏覽器中訪問和瀏覽各種網(wǎng)頁內(nèi)容，包括網(wǎng)頁文本、圖像、視頻、音頻等多媒體元素，并與網(wǎng)頁進(jìn)行交互，如點(diǎn)擊鏈接、填寫表單、提交數(shù)據(jù)等。

大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，需要在頭部將字符聲明為 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標(biāo)題</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3、HTML版本及歷史背景

HTML有多個(gè)版本，每個(gè)版本都有不同的特性和改進(jìn)。

版本	發(fā)布時(shí)間
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年發(fā)布。它只包含一些基本的標(biāo)簽和屬性，用于創(chuàng)建簡單的文本和鏈接。HTML 1.0的目標(biāo)是定義一種通用的超文本標(biāo)記語言。

2）HTML 2.0

HTML 2.0于1995年發(fā)布，是對HTML 1.0的改進(jìn)和擴(kuò)展。它引入了一些新的標(biāo)簽和屬性，如圖像標(biāo)簽和表格標(biāo)簽，以支持更豐富的內(nèi)容展示。

3）HTML 3.2

HTML 3.2于1997年發(fā)布，是對HTML 2.0的進(jìn)一步改進(jìn)。它引入了一些新的標(biāo)簽和屬性，如表單標(biāo)簽和框架標(biāo)簽，以支持交互性和頁面布局。

4）HTML 4.01

HTML 4.01于1999年發(fā)布，是對HTML 3.2的修訂和擴(kuò)展。它引入了更多的標(biāo)簽和屬性，如層標(biāo)簽和樣式表，以支持更靈活的頁面設(shè)計(jì)和樣式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年發(fā)布，它嚴(yán)格遵循XML的語法規(guī)則，要求所有標(biāo)簽和屬性都要正確嵌套和閉合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式發(fā)布。HTML5引入了許多新的特性和API，如語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲(chǔ)等。HTML5還支持響應(yīng)式設(shè)計(jì)，以適應(yīng)不同設(shè)備和屏幕尺寸。

4、HTML用途

HTML是構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的基礎(chǔ)語言，它提供了豐富的標(biāo)簽和屬性，使得開發(fā)者可以創(chuàng)建各種類型的網(wǎng)頁，并實(shí)現(xiàn)不同的功能和效果。HTML用于定義網(wǎng)頁的整體結(jié)構(gòu)，包括標(biāo)題、段落、列表、標(biāo)題、導(dǎo)航菜單等元素。通過使用不同的HTML標(biāo)簽和屬性，可以將文本、圖像、音頻、視頻等內(nèi)容組織起來，并構(gòu)建頁面的層次結(jié)構(gòu)。HTML可以用于展示文本內(nèi)容和多媒體元素，如圖像、音頻和視頻。通過使用適當(dāng)?shù)腍TML標(biāo)簽和屬性，可以插入和顯示各種類型的媒體內(nèi)容，從而使網(wǎng)頁更加豐富和吸引人。HTML提供了創(chuàng)建表單的標(biāo)簽和元素，可以用于收集用戶的輸入數(shù)據(jù)。通過使用表單元素如文本框、復(fù)選框、單選按鈕和下拉列表等，用戶可以輸入數(shù)據(jù)并提交給服務(wù)器進(jìn)行處理。

參考文檔：https://www.cjavapy.com/article/3297/

在線咨詢

上一篇：HTML5新增了哪些結(jié)構(gòu)標(biāo)簽？
下一篇：亞馬遜中的產(chǎn)品描述應(yīng)該如何撰寫及優(yōu)化？