整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
說程序員是大大的直男，但是一旦程序員浪漫起來，他們會用他們狂拽酷炫吊的技能展現自己的羅曼蒂克實力，那時候就真的沒文科男什么事啦！下面我就跟大家分享如何用簡單的html制作一個網頁版的愛心表白，不管你是不是程序員都能用，手機就可展示。
先來看下效果：
后面會提供給大家源代碼，在這里先交大家怎么去根據自己的實際情況去改這個文件。
首先大家將我后面的源代碼復制下來并且粘貼進一個txt文件就可以。
不要看到下載就害怕，這個大家只要搜索jquery就能下載了，下載完是一個jquery.js文件，將文件改名為jquery.txt，雙擊打開將內容復制到下圖所示位置。（如果有人不會下，可以私信我索要）
大家根據自己的實際請款更改頁面的一些信息，比如姓名，日期、或者是表白內容都可以
最后奉上源碼，這里是沒有jquery.js的，已經預留空，需要大家復制粘貼進來就行了，最后將txt文件的后綴改為.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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G家life</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<!--audio id="audio" controls>
<source src="music.mp3" type="audio/mpeg" codecs="mp3">
</audio-->
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">*2017—03-10,Acquaintance</span><br />
<span class="space"/><span class="comments">*2017-03-14.meet</span><br />
<span class="space"/><span class="comments">*/</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 />
<span class="comments">// But when I see you.</span><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="comments">// </span><br /-->
<span class="keyword">你是非?？蓯鄣娜?<br />真應該遇到最好的人<br /></span> 我也真希望 <span class="keyword">我就是</span>;<br />
<!--span class="keyword"></span> <span class="keyword"> </span>;<br /-->
<span class="placeholder"/><span class="comments">// I love three things in this world.</span><br />
<span class="placeholder"/><span class="comments">// Sun, moon and you. </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>
<br>
I want to say:<br />
You are the sun at two in the morning;<br />
玲瓏骰子安紅豆<br />
入骨相思知不知<br />
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
沈菇涼，這是我們相遇的第:
<div id="elapseClock"></div>
</div>
<div id="loveu">
不思量 自難忘<br/>
<div class="signature">- 管先森</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
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>
<div style="text-align:center;clear:both">
<p></p>
<p><a target="_blank"></a></p>
</div>
</body>
</html>
上面這個就是html的源碼，當然還有css和js的源碼我還沒有給到大家，主要是大家目前還沒有對html有個了解，再去學css和js就會有點懵逼的樣子了
那我從第一行開始講起吧，
第一行是告訴瀏覽器，我這個是HTML5，所以你要用h5的格式去解析。這個不是很重要，反正每個頁面上都有的。
第二行之前講過，我就不再敘述了，是html網頁的開頭標簽，相當于就是告訴html，我要開始寫代碼啦
第三行之前也講過，是html中的頭文件開頭標簽
第四行meta是告訴瀏覽器接受一個html文檔
等等，領導回來了……，我明天再說了
mg標簽的title和alt屬性有什么區別
alt：圖片加載失敗時，顯示在網頁上的替代文字
title：鼠標（手機端該屬性無意義）放在圖片上時顯示的文字
alt是必需屬性（但屬性值可為空），title非必需
H5新增了哪些標簽
常見的有：article、aside、audio、video、footer、header、nav、section
塊級元素、行內元素分別有哪些？
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行內元素：span, strong, em, br, img , input, label, select, textarea, cite
HTML5新特征
拖放（Drag and drop）API；語義化標簽（header、nav、footer、article、section）
音頻、視頻（audio、video）API；本地離線存儲（localStorage）,長期存儲數據，關閉瀏覽器后不丟失；會話儲存（sessionStorage）,數據在關閉瀏覽器后自動刪除。
表單控件（calendar、date、time、email、url、search）；新增DOM查詢 document.querySelector() 、 document.querySelectorAll()
移除的元素
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
cookie與sessionStorage和localStorage的區別
保存方式：cookie存放在客戶的瀏覽器上在瀏覽器與服務器之間來回傳遞，每次都會攜帶在HTTP頭中，作用是與服務器進行交互，作為http規范的一部分而存在的。session都在客戶端中保存，不參與服務器通訊。
生命周期：cookie可設置失效時間，localStorage除非手動清除否則永久保存，sessionStorage關閉當前頁面或瀏覽器后失效
存儲的大?。篶ookie 4kb左右，session 5M
DOCTYPE的作用？嚴格模式和混雜模式的區別
！DOCTYPE告訴瀏覽器以HTML5標準解析頁面，如果不寫，則進入混雜模式
嚴格模式（標準模式）：以w3c標準解析代碼
混雜模式（怪異模式）：瀏覽器用自己的方式解析代碼，混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作
<meta>標簽的使用
<meta charset=’UTF-8’> <meta name=’keywords’ content=’關鍵詞’>
<meta name=description=’描述’> <meta name=’viewport’ content=’視口相關屬性’
Label 的作用是什么？是怎么用的？
答案：label 標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。兩種用法：一種是 id 綁定，一種是嵌套
第一種id綁定：<label for="myname">用戶名:</label> <input type="text" id="myname">
第二種嵌套：<label>點擊<input type='text' name='theinput' id='theinput'></label>
target這個屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數值主要有：
_blank ：在新瀏覽器窗口中打開鏈接文件
_parent ：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就像 _self 參數一樣。
_self ：在同一框架或窗口中打開所鏈接的文檔。此參數為默認值，通常不用指定。
_top ：在當前的整個瀏覽器窗口中打開所鏈接的文檔，因而會刪除所有框架。
網站的構成
1網站域名：訪問網站所用的地址，也就是IP地址的映射
2網站程序：包括用戶瀏覽所看到的的頁面和網站后臺的管理程序，現在一般有成熟的網站管理系統
3網站空間：可以是虛擬主機或者是服務器，用于存儲網站程序以及資料，并提供網站程序運行所需要的環境
B/S模式的優缺點
B/S模式是瀏覽器/服務器模式，優點是不用專門安裝軟件。維護非常方便，成本非常低，但是這種模式響應速度相對較慢，交互能力非常弱
C/S模式是客戶端/服務器模式，優點是本地可以存儲信息，可以為服務器分擔壓力，另外這種模式的交互能力比較好，響應速度也比較快，缺點是用戶需要下載客戶端并且后期需要不斷地進行更新，另外這種模式的開發和維護成本比較高，安全性也比較低，兼容性也是比較大的問題。
為什么HTML5不需要dtd約束?
在html5之前的版本都是基于SGML。DTD 規定了標記語言的規則，是文檔類型約束，這樣瀏覽器才能正確地呈現內容。但是html5不基于SGML，其中sgml是標準通用語言，xhtml和html4.0都是標準通用語言的子集，所以不需要引用DTD
CSS中能不能實現合并單元格?為什么?（*）
CSS是層疊樣式表，是一種用來控制HTML元素樣式的代碼；通過CSS控制，你可以改變頁面上任何元素的樣式，同樣也要知道，它所能做的，也僅僅是改變元素的樣式，樣式以外的東西是沒法改變的；因為合并單元格，要刪除多余的單元格，那么對于改變元素的結構，CSS是心有余而力不足的
rgba（）設置透明度和opacity設置透明度的區別
rgba（）設置的透明度只是針對于元素本身，不會作用于內容，opacity設置透明度不僅作用于元素本身，還作用于內容
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
