使用JS打印當前HTML頁面的幾個細節

、去掉頁眉頁腳的打印。雖然后面的JS函數中，也有類似的功能，經實踐檢驗似乎不起作用。下面的代碼是有效的，并且可以調整上、下邊距。

<style type="text/css" id="style1">
        @page { margin-top:80px; margin-bottom:30px;}
</style>

二、顯示在頁面上的“打印”按鈕。

<input type="button" name="button_print" value="打印" onclick="javascript：printHTML()">

三、JS代碼。

.1 瀏覽器根據域名解析IP地址

瀏覽器根據訪問的域名找到其IP地址。DNS查找過程如下：

瀏覽器緩存：首先搜索瀏覽器自身的DNS緩存（緩存的時間比較短，大概只有1分鐘，且只能容納1000條緩存），看自身的緩存中是否是有域名對應的條目，而且沒有過期，如果有且沒有過期則解析到此結束。

系統緩存：如果瀏覽器自身的緩存里面沒有找到對應的條目，那么瀏覽器會搜索操作系統自身的DNS緩存，如果找到且沒有過期則停止搜索解析到此結束。

路由器緩存：如果系統緩存也沒有找到，則會向路由器發送查詢請求。

ISP（互聯網服務提供商） DNS緩存：如果在路由緩存也沒找到，最后要查的就是ISP緩存DNS的服務器。

1.2 瀏覽器與WEB服務器建立一個TCP連接

TCP的3次握手。

1.3 瀏覽器給WEB服務器發送一個HTTP請求

一個HTTP請求報文由請求行（request line）、請求頭部（headers）、空行（blank line）和請求數據（request body）4個部分組成。

圖1 HTTP請求格式

1.3.1 請求行

請求行分為三個部分：請求方法、請求地址URL和HTTP協議版本，它們之間用空格分割。例如，GET /index.html HTTP/1.1。

1.請求方法

HTTP/1.1 定義的請求方法有8種：GET（完整請求一個資源）、POST（提交表單）、PUT（上傳文件）、DELETE（刪除）、PATCH、HEAD（僅請求響應首部）、OPTIONS（返回請求的資源所支持的方法）、TRACE（追求一個資源請求中間所經過的代理）。最常的兩種GET和POST，如果是RESTful接口的話一般會用到GET、POST、DELETE、PUT。

（1）GET

當客戶端要從服務器中讀取文檔時，當點擊網頁上的鏈接或者通過在瀏覽器的地址欄輸入網址來瀏覽網頁的，使用的都是GET方式。GET方法要求服務器將URL定位的資源放在響應報文的數據部分，會送給客戶端。

使用GET方法時，請求參數和對應的值附加在URL后面，利用一個問號‘？’代表URL的結尾與請求參數的開始，傳遞參數長度受限制。例如，/index.jsp?id=100&op=bind。通過GET方式傳遞的數據直接放在地址中，所以GET方式的請求一般不包含“請求內容”部分，請求數據以地址的形式表現在請求行。

地址中‘？’之后的部分就是通過GET發送的請求數據，各個數據之間用‘&’符號隔開。顯然這種方式不適合傳送私密數據。另外，由于不同的瀏覽器對地址的字符限制也有所不同，一般最多只能識別1024個字符，所以如果需要傳送大量數據的時候，也不適合使用GET方式。如果數據是英文字母/數字，原樣發送；如果是空格，轉換為+；如果是中文/其他字符，則直接把字符串用BASE64加密，得出：%E4%BD%A0%E5%A5%BD，其中%XX中的XX為該符號以16進制表示的ASCII。

（2）POST

允許客戶端給服務器提供信息較多。POST方法將請求參數封裝在HTTP請求數據中，以名稱/值的形式出現，可以傳輸大量數據，這樣POST方式對傳送的數據大小沒有限制，而且也不會顯示在URL中。POST方式請求行中不包含數據字符串，這些數據保存在“請求內容”部分，各數據之間也是使用‘&’符號隔開。POST方式大多用于頁面的表單中。因為POST也能完成GET的功能，因此多數人在設計表單的時候一律都使用POST方式，其實這是一個誤區。GET方式也有自己的特點和優勢，我們應該根據不同的情況來選擇是使用GET還是使用POST。

圖2 HTTP請求方法

2.URL

URL：統一資源定位符，是一種資源位置的抽象唯一識別方法。

組成：<協議>://<主機>:<端口>/<路徑>

端口和路徑有事可以省略（HTTP默認端口號是80）

3.協議版本

協議版本的格式為：HTTP/主版本號.次版本號，常用的有HTTP/1.0和HTTP/1.1

1.3.2 請求頭部

請求頭部為請求報文添加了一些附加信息，由“名/值”對組成，每行一對，名和值之間使用冒號分隔。

請求頭部的最后會有一個空行，表示請求頭部結束，接下來為請求數據。

1.3.3 請求數據

請求數據不在GET方法中使用，而在POST方法中使用。POST方法適用于需要客戶填寫表單的場合。與請求數據相關的最長使用的請求頭部是Cntent-Type和Content-Length。下面是一個POST方法的請求報文：

POST 　/index.php　HTTP/1.1 　　請求行

Host: localhost

User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2請求頭

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Referer: http://localhost/

Content-Length：25

Content-Type：application/x-www-form-urlencoded

　　空行

username=aa&password=1234　　請求數據

1.4 服務器端響應HTTP請求，瀏覽器得到HTML代碼

HTTP響應報文由狀態行（status line）、相應頭部（headers）、空行（blank line）和響應數據（response body）4個部分組成。

1.4.1 狀態行

狀態行由3部分組成，分別為：協議版本、狀態碼、狀態碼掃描。其中協議版本與請求報文一致，狀態碼描述是對狀態碼的簡單描述。

1.4.2 響應頭部

1.4.3 響應數據

用于存放需要返回給客戶端的數據信息。

HTTP/1.1 200 OK　　狀態行

Date: Sun, 17 Mar 2013 08:12:54 GMT　　響應頭部

Server: Apache/2.2.8 (Win32) PHP/5.2.5

X-Powered-By: PHP/5.2.5

Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Pragma: no-cache

Content-Length: 4393

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Content-Type: text/html; charset=utf-8

　　空行

<html>　　響應數據

<head>

<title>HTTP響應示例<title>

</head>

<body>

Hello HTTP!

</body>

</html>

1.5 瀏覽器解析HTML代碼，并請求HTML代碼中的資源

瀏覽器拿到HTML文件后，開始解析HTML代碼，遇到靜態資源時，就向服務器端去請求下載。

1.6 關閉TCP連接，瀏覽器對頁面進行渲染呈現給用戶

瀏覽器利用自己內部的工作機制，把請求到的靜態資源和HTML代碼進行渲染，呈現給用戶。

來源：CSDN

文作者：HelloGitHub-kalifun

今天給大家推薦一個使用 JavaScript 語言編寫的開源 Web 3D 模型項目 —— Zdog。

一、介紹

1.1 Zdog

Zdog 項目地址：https://github.com/metafizzy/zdog

Tips: 本文出現的所有作品都是通過 Zdog 完成的。

圓形、扁平、設計師友好用于 canvas 和 SVG 的偽 3D 引擎。

使用 Zdog 您可以在 Web 上設計和渲染簡單的 3D 模型。Zdog 是一個偽 3D 引擎。它的幾何形狀存在于 3D 空間中，但呈現為扁平形狀，這使 Zdog 特別。

1.2 Zdog 特點

體積小：整個庫只有 2100 行代碼，最小體積為 28 KB。
圖形圓滑：所有的圓形都呈現為圓邊，沒有多邊形鋸齒。
使用友好：使用 API 完成建模。

二、方法介紹

解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。

2.1 初始靜態演示

讓我們進入一個基本的非動畫演示。

靜態演示只需要在畫布上將想要繪畫的圖像渲染出來就可以了。

// Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo = new Zdog.Illustration({
 // 用class選擇器設置畫布
 element: '.zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo
 addTo: illo,
 // 設置圓的直徑
 diameter: 80,
 // 設置畫筆寬度
 stroke: 20,
 // 設置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo.updateRenderGraph();

2.2 動畫

為實現動畫場景，我們需要每幀重新渲染圖形在畫布上。

let illo = new Zdog.Illustration({
 // 用id選擇器設置畫布
 element: '#zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: illo,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉。值越大越快。
 illo.rotate.y += 0.03;
 illo.updateRenderGraph();
 // 動畫下一幀繼續執行函數
 requestAnimationFrame( animate );
 }
 // 開始動畫，執行函數
 animate();

2.3 放大

Zdog 需要設置大量數字。設置 zoom 將按比例縮放整個場景。

// Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo2 = new Zdog.Illustration({
 // 用class選擇器設置畫布
 element: '.zdog-canvas2',
 // 將圖形放大4倍
 zoom: 4,
 });
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo2
 addTo: illo2,
 // 設置圓的直徑
 diameter: 80,
 // 設置畫筆寬度
 stroke: 20,
 // 設置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo2.updateRenderGraph();

2.4 拖動旋轉

通過在插圖上設置 dragRotate：true 來拖動來啟用旋轉。

let newcanvas2 = new Zdog.Illustration({
 // 用id選擇器設置畫布
 element: '#zdog-canvas2',
 dragRotate: true,
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: newcanvas2,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas2,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate2() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉。值越大越快。
 newcanvas2.rotate.y += 0.03;
 newcanvas2.updateRenderGraph();
 // 動畫下一幀繼續執行函數
 requestAnimationFrame( animate2 );
 }
 // 開始動畫，執行函數
 animate2();

三、快速入手

下面我們將一步步的講解如何使用 Zdog 這個庫。我們采用的是最簡單的 CDN 引用方式，方便大家能夠快速體檢其魅力（復制代碼便可查看效果）。

Tips： 解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>zdog</title>
 <style type="text/css">
 .zdog-canvas {
 /*給class="zdog-canvas"的畫布添加背景*/
 background: #FDB;
 }
</style>
</head>
<body>
<!--Zdog在<canvas>或<svg>元素上呈現。-->
<!--設置畫布1，及長寬-->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<!--設置畫布2，及長寬-->
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<!--引入zdog文件-->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
 // Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo = new Zdog.Illustration({
 // 用class選擇器設置畫布
 element: '.zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo
 addTo: illo,
 // 設置圓的直徑
 diameter: 80,
 // 設置畫筆寬度
 stroke: 20,
 // 設置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo.updateRenderGraph();
?
?
 let newcanvas = new Zdog.Illustration({
 // 用id選擇器設置畫布
 element: '#zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: newcanvas,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉。值越大越快。
 newcanvas.rotate.y += 0.03;
 newcanvas.updateRenderGraph();
 // 動畫下一幀繼續執行函數
 requestAnimationFrame( animate );
 }
 // 開始動畫，執行函數
 animate();
</script>
</body>
</html>

第一個畫布是初始靜態演示，第二個畫布是動畫，第三個畫布是由第一個畫布放大，第四個畫布是通過拖動實現不規則旋轉。

四、總結

Zdog 可以設計和顯示簡單的 3D 模型而不需要很多開銷。這讓我們成為一個靈魂畫手簡單了很多，如果你想給自己的網站增添色彩，不妨試試 Zdog 吧。如果各位感興趣的話，下一期我將帶領大家成為一位代碼上的靈魂畫手！

五、參考資料

Zdog官方文檔^[1]

References

[1] Zdog官方文檔: https://zzz.dog/

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系、加入我們，讓更多人愛上開源、貢獻開源～

在線咨詢

上一篇：今日HTML小知識-2：設置顏色透明
下一篇：「論文推薦」高鋁粉煤灰堿法提鋁過程鎵的吸附研究

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商