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月

結束語

您的項目需求