使用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小时内与您取得联系。

整合营销服务商