HTML番外篇：解析告白网页部分源代码

喽，首先和大家说声抱歉，停更了这么久，主要是期间因为工作调动的关系，工作变忙了，没有时间来更新了，今天趁着领导不在，偷偷来更新一下吧~

首先我的分享方式可能和别人的不同，别人可能是从最开始的一步一步开始教起，我不是，我是先把效果展示给大家，让大家先看看这个东西，然后我再开始讲，有看不下去的现在就可以吧网页关了，免得看完又来喷我，我不是什么大神，喷我有什么用？我看的心里还不舒服，是吧，为了营造良好的网络环境，别喷啊~

接下来进入主题：

大家可能都看过下面的这个网页截图

这个是一个类似于计时器的这么一个情侣间的网页，今天我的目的就是把大家都教会了(不会的我下面会放源码)，然后回家有兴趣的可以做好展示给自己的另一半看看~

我也放个网址吧，让你们可以看看实际效果是什么样的

http://1.giggle.applinzi.com/shouye1.html

就是这个样子，虽然可能过气了吧，但是我相信你的另一半看完还是会很感动的

那么接下来，我要放html的源码了:然后我会开始讲解:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>G家life</title>

@font-face {

font-family: digit;

src: url('digital-7_mono.ttf') format("truetype");

}

</style>

</head>

<body>

<!--audio id="audio" controls>

</audio-->

<span class="space"/><span class="comments">*2017—03-10,Acquaintance</span><br />

My name=<span class="keyword">Guan</span> Jiaqi<br />

Your name=<span class="keyword">Shen</span> Jimei<br />

<span class="comments">//The first time I saw you. </span><br />

Be attracted to you;<br />

<span class="comments">// I used to think.</span><br />

Like a person without reason;<br />

I believe this sentence is wrong for a long time;<br />

<span class="comments">// I want to stay with you every day.</span><br />

时到花自开;<br />

<span class="comments">// 靠在你肩上的时候心忽然，暖了一下.</span><br />

<span class="keyword">你是非常可爱的人.<br />真应该遇到最好的人<br /></span> 我也真希望 <span class="keyword">我就是</span>;<br />

<span class="placeholder"/><span class="comments">// I love three things in this world.</span><br />

<span class="placeholder"/>Sun for day, moon for night, and you forever.<br />

<span class="comments">// I love you not because of who you are,<br />but because of who I am when I am with you.

</span><br />

<br>

I want to say:<br />

You are the sun at two in the morning;<br />

玲珑骰子安红豆<br />

入骨相思知不知<br />

</div>

沈菇凉，这是我们相遇的第:

</div>

不思量自难忘<br/>

</div>

var offsetX=$("#loveHeart").width() / 2;

var offsetY=$("#loveHeart").height() / 2 - 55;

var together=new Date();

together.setFullYear(2017, 2, 14);

together.setHours(19);

together.setMinutes(0);

together.setSeconds(0);

together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {

var msg=document.createElement("div");

msg.id="errorMsg";

msg.innerHTML="Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";

document.body.appendChild(msg);

$("#code").css("display", "none")

$("#copyright").css("position", "absolute");

$("#copyright").css("bottom", "10px");

document.execCommand("stop");

} else {

setTimeout(function () {

startHeartAnimation();

}, 5000);

timeElapse(together);

setInterval(function () {

timeElapse(together);

}, 500);

adjustCodePosition();

$("#code").typewriter();

}

</script>

<p></p>

</div>

</body>

</html>

上面这个就是html的源码，当然还有css和js的源码我还没有给到大家，主要是大家目前还没有对html有个了解，再去学css和js就会有点懵逼的样子了

那我从第一行开始讲起吧，

第一行是告诉浏览器，我这个是HTML5，所以你要用h5的格式去解析。这个不是很重要，反正每个页面上都有的。

第二行之前讲过，我就不再叙述了，是html网页的开头标签，相当于就是告诉html，我要开始写代码啦

第三行之前也讲过，是html中的头文件开头标签

第四行meta是告诉浏览器接受一个html文档

等等，领导回来了……，我明天再说了

敢说！每年情人节都是各大情侣，单身青年忙碌的时候。无论是黑色情人节，白色情人节，各种色情人节，还是七月七日七夕情人节都会为自己的女（男）准备惊喜、

1.新建txt文本输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title></title>
</head>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
<style type="text/css">
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ width: 100%; height: 100%; }
body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{ }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{ padding: 12px 20px; }
@keyframes breath {
0% {
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
50%{
transform: scale3d(1.02,1.02,1.02);
-webkit-transform: scale3d(1.02,1.02,1.02);
transform-origin: 50% 50%;
}
100%{
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
}
</style>
<script type="text/javascript">
$(function() {
$('#yes').click(function(event) {
modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
// typeWrite();
fireworks();

});
});
$('#no').click(function(event) {
modal('明人不说暗话！', A);
});
});
function A() {
modal('我喜欢你！', B);
}
function B() {
modal('我知道你在等我这一句话', C);
}
function C() {
modal('请您不要拒绝我', D);
}
function D() {
modal('拒绝我，不存在的', E);
}
function E() {
modal('这辈子都不可能让你离开我', F);
}
function F() {
modal('跟我走吧', G);
}
function G() {
modal('房产证上写你名', H);
}
function H() {
modal('我会做饭', I);
}
function I() {
modal('爱你。么么哒！', J)
}
function J() {
modal('行，我们去民政局登记吧', function() {
fireworks();
});
}
function fireworks() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
$('.page_two').fireworks({
sound: false,
opacity: 0.9,
width: '100%',
height: '100%'
});
}
function modal(content, callback) {
var tpl='<div class="container">'+
'<div class="mask"></div>'+
'<div class="modal">'+
'<p>'+ content +'</p>'+
'<button type="button" id="confirm" class="confirm">确定</button>'+
'</div>'+
'</div>';
$('body').append(tpl);
$(document).on('click', '.confirm', function() {
$('.container').remove();
callback();
});
}
var myWords='有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
var x=0;
var speed=150;
var current=0;
function typeWrite(){
$('.type_words').html(myWords.substring(0, x++)+'_');
var timer=setTimeout("typeWrite()", speed);
if (x==myWords.length) {
x=myWords.length;
clearTimeout(timer)
}
}
</script>
<body>
<div class="share_img"><img src="images/a8b.png" alt=""></div>
<div class="page_one">
<div class="content">
<div class="text_wrapper">
<img src="images/a8.png" alt="">
<div class="text">
小姐姐，我好喜欢你，你愿意做我女朋友吗？
</div>
</div>
</div>
<div class="btn-groups">
<div class="heart-btn">
<div id="yes" class="btn btn-a"><span>愿意</span></div>
</div>
<div id="no" class="btn btn-b"><span>不愿意</span></div>
</div>
</div>
<div class="page_two hide">
<div class="type_words"></div>
</div>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

2.保存修改文本后缀名为html。

以上两步就完成了，需要的请联系我领css等文件。

最后，小编想说：我是一名python开发工程师，

整理了一套最新的python系统学习教程，

想要这些资料的可以关注私信小编“01”即可（免费分享哦）希望能对你有所帮助

991年 8月

我叫客户端，英文名字 client。

她叫服务端，英文名字 server。

这一年，我们出生了。

是的，我们都是90后。

我爱她，可是她却远在天边。

为了和她可以互诉衷肠，我同时发明了HTTP协议。

一门世界上只有我和她能懂的语言，一种世界上只有我和她能懂的浪漫。

虽然我只能给她发出GET操作，她也只能返回HTML文档，但是已足够了。

当我发出 GET /index.html时她会返回

<html>
  <body>Hello World</body>
</html>

可能在她看来，我也是她的全世界吧。

我知道自己还不完美，所以给自己命名0.9版本，我期待未来自己也能变得更好。

1996年 5月

这是我的第二篇日记。

原谅我很少写日记，毕竟一位知名人物说过:"正常人谁写日记啊？！"

之前我只和她分享HTML，这已经远远不能满足我了，现在我还想和她分享图像、视频、二进制文件。

另外，我也想要和她有更多的接触，就像恋人除了牵手还想要拥抱接吻，我除了GET还想要POST，HEAD。

再次，在我的强烈要求下，每次交流能不能给点提示，省得老是被吐槽不解风情。所以，除了数据部分，每次通信加上了头信息，大家都有个心理准备这次要干吗。

比如在请求数据头信息， Accept: */*会告诉她我能接受的数据类型，她若返回数据 Content-Type:image/jpeg我就知道她要分享自己的美照，Content-Type:video/mp4我就知道可以看到她美美的视频。

最后，唉，女孩子有时候真的是有点啰嗦的，所以我又在HTTP协议里加了 Content-Encoding，暗示她可以压缩一下数据。

比如我会用 Accept-Encoding: gzip, deflate 来告诉她我能接受的压缩类型，而Content-Encoding: gzip就是告诉我她的实际压缩类型。

可以看出来现在HTTP协议复杂了很多，但是我想说这是我们俩的特殊密码，我愿意记录下来，成为一份美好的回忆。

另外一个很尴尬的问题就是，她觉得我不太久，每个Tcp链接只能发送一个请求，发送数据就关闭，这让我很苦恼，所以有些浏览器在请求时，用了一个非标准的Connection字段。

Connection: keep-alive

这样她就知道，我这次时间真的长了，不要再轻易断开链接。

不过遗憾的是，这个并没有纳入标准。

不管咋样，我觉得HTTP这次改的也算像模像样了，所以就命名1.0吧。

有了这个里程碑，我和我的服务端之后交流可以更加丰富多彩了。

毕竟异地恋，最重要的还是有效、丰富的沟通。

1997年1月

随着我们深入了解，我觉得我更爱她了，所以愿意做更多的事情。

作为男人最大的尊严，我首先把Connection: keep-alive纳入标准，即没有声明默认不关闭。

其次，我已经受不了我一问她一答这个模式，我想尽可能一次把我更多的爱意发出去，所以我引入管道机制，允许我同时发出多个请求，当然她还是按照顺序，先后回应即可，最起码我已经做到位了。

我的付出也是有回报的，server也很体贴的给我传回来 Content-Length字段，好让我方便知道她给了我多少数据。

但是有时候她要说的话太多了，我真的不想等待太久她处理完了才有回应，所以除了Content-Length，我同时在HTTP增加了Transfer-Encoding字段，就表明回应将由数量未定的数据块组成。

比如每个非空的数据块之前，会有一个16进制的数值，表示这个块的长度。最后是一个大小为0的块，就表示本次回应的数据发送完了。下面是一个例子。

HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

25
This is the data in the first chunk

1C
and this is the second one

3
con

8
sequence

0

这样，我就可以立马收到她的回复，真好。

最后，除了GET POST 等操作，我还增加了PUT PATCH各种姿势来和她沟通，你们懂的。

虽然优化了不少，但是作为男人要谦虚点，所以我把版本命名为1.1。

好的，就到这里吧，我会继续努力的，为了她。

2009年

听说谷歌公开了SPDY协议，还是用来解决我的 HTTP1.1 效率不高的问题？我不太开心，我还是喜欢我的HTTP协议。

server还问我能不能也把HTTP也优化优化，无语，我通过我的HTTP已经和她谈了18年的恋爱了。

就这样吧，不想写了，爱咋咋地。

2015年 5月

爱一个人，真的会让自己变得优秀啊。

为了能和我的她走的更近，我还是狠狠地把HTTP优化了下。

虽然是在SPDY的协议基础上，但是，不重要！

大概主要几点吧:

1、HTTP/1.1版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制，文本解析肯定不如二进制啊，所以直接彻底点，都变成二进制了。

这样我们可以快速理解对方的诉求。

2、之前说我这可以同时发出多个请求，server按照顺序处理，但是我不想一个个接收她的回应，所以她也可以并发返回给我数据啦。

3、恋爱越久，越怕对方说重复的话，所以除了数据体，我这次把头信息也进行了压缩。一方面可以使用gzip/ compress 进行压缩，另外我和她同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

4、这个是最重要的，服务端可以主动给客户端发送资源了，而不是我必须先发个请求。也就是当我走了99步之后，剩下的一步终于是她向我走来。

这次优化太多了，我决定直接命名HTTP2.0，当然之后还会有3.0，4.0。为了她，我愿意变得更加优秀。

结束语

从前车马很慢，书信很远，一生只够爱一个人。

如今，HTTP可以让你的爱意毫秒级传达给对方，但是也更祝福大家像我一样，得之所爱，一生被爱。

在线咨询

上一篇：利用 Python 开发桌面小工具，实现htm自动转
下一篇：HTML中的特殊符号你了解几个？百分之九十五的人不知

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML番外篇：解析告白网页部分源代码

991年 8月

1996年 5月

1997年1月

2009年

2015年 5月

结束语

您的项目需求