javascript 獲取網頁各種寬度

頁可見區域寬：document.body.clientWidth

網頁可見區域高：document.body.clientHeight

網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)

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

網頁正文全文寬：document.body.scrollWidth

網頁正文全文高：document.body.scrollHeight

網頁被卷去的高：document.body.scrollTop

網頁被卷去的左：document.body.scrollLeft

網頁正文部分上：window.screenTop

網頁正文部分左：window.screenLeft

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

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

屏幕可用工作區高度：window.screen.availHeight

屏幕可用工作區寬度：window.screen.availWidth

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

scrollHeight: 獲取對象的滾動高度。

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

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

scrollWidth:獲取對象的滾動寬度

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

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置

event.clientX 相對文檔的水平座標

event.clientY 相對文檔的垂直座標

event.offsetX 相對容器的水平坐標

event.offsetY 相對容器的垂直坐標

document.documentElement.scrollTop 垂直方向滾動的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

IE，FireFox 差異如下：

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均無關)

網頁可見區域寬： document.body.clientWidth

網頁可見區域高： document.body.clientHeight

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)

網頁可見區域高： document.body.offsetHeight (包括邊線的高)

網頁正文全文寬： document.body.scrollWidth

網頁正文全文高： document.body.scrollHeight

網頁被卷去的高： document.body.scrollTop

網頁被卷去的左： document.body.scrollLeft

網頁正文部分上： window.screenTop

網頁正文部分左： window.screenLeft

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

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

屏幕可用工作區高度： window.screen.availHeight

屏幕可用工作區寬度： window.screen.availWidth

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

技術要點

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

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

Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。

Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。

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

實現代碼

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

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

<head>

<title>請調整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請調整瀏覽器窗口大小</h2><hr>

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

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

</form>

<!--

var winWidth = 0;

var winHeight = 0;

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

{

//獲取窗口寬度

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內部對body進行檢測，獲取窗口大小

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

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結果輸出至兩個文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調用函數，獲取數值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

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

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

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

（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。

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

（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

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

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

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

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

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

常用的HTML標簽

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

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

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

網頁效果

表單標簽

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

<form>標簽表示表單標簽，定義整體的表單區域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內容有很多其他標簽來承載

這些標簽稱為表單元素標簽

網頁效果

表單提交

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

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

兩種方式的區別:

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

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!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>個人描述:</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>

點擊提交：

可以看到服務器收到了請求報文。

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

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

HTML實例：

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

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

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

1、HTML的基本概念

1）標簽（Tag）

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

2）元素（Element）

一個完整的HTML元素由開始標簽、內容和結束標簽組成。例如，<p>這是一個段落</p>就是一個完整的段落元素。

3）屬性（Attribute）

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

4）文檔結構

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

5）塊級元素和內聯元素

HTML元素可以被分類為塊級元素和內聯元素。塊級元素以塊的形式顯示，獨占一行或一塊空間，如<p>、<div>等。內聯元素以行內的方式顯示，不會獨占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素內部，形成一個層次結構。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 聲明

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

例如：

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

2、HTML與Web 瀏覽器

HTML（HyperText Markup Language）是一種用于創建網頁結構和內容的標記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于顯示和解釋HTML文檔的應用程序。Web瀏覽器通過解析HTML文檔，將其轉換為可視化的網頁。瀏覽器會讀取HTML文檔中的標簽和內容，并根據這些標簽和內容的定義，渲染出網頁的結構和樣式。HTML提供了各種標簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網頁中的展示和交互方式。瀏覽器在解析HTML時，會根據標簽和屬性的定義，將文本顯示為段落、標題或其他格式，顯示圖像、鏈接，并響應用戶的交互操作。

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

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

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

3、HTML版本及歷史背景

HTML有多個版本，每個版本都有不同的特性和改進。

版本	發布時間
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年發布。它只包含一些基本的標簽和屬性，用于創建簡單的文本和鏈接。HTML 1.0的目標是定義一種通用的超文本標記語言。

2）HTML 2.0

HTML 2.0于1995年發布，是對HTML 1.0的改進和擴展。它引入了一些新的標簽和屬性，如圖像標簽和表格標簽，以支持更豐富的內容展示。

3）HTML 3.2

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

4）HTML 4.01

HTML 4.01于1999年發布，是對HTML 3.2的修訂和擴展。它引入了更多的標簽和屬性，如層標簽和樣式表，以支持更靈活的頁面設計和樣式控制。

5）XHTML 1.0

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

6）HTML5

HTML5是HTML的最新版本，于2014年正式發布。HTML5引入了許多新的特性和API，如語義化標簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應式設計，以適應不同設備和屏幕尺寸。

4、HTML用途

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

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

在線咨詢

上一篇：HTML5新增了哪些結構標簽？
下一篇：亞馬遜中的產品描述應該如何撰寫及優化？