對(duì)于不懂技術(shù)的新人，如果說要學(xué)習(xí)開發(fā)技術(shù)闹瞧。我通常建議他從網(wǎng)頁開始绑雄。

網(wǎng)頁由Html、Css和Javascript三部分構(gòu)成夹抗。我們稱它為網(wǎng)頁三劍客绳慎。

4.1.1 什么是網(wǎng)頁三劍客纵竖？

小奈：我想學(xué)習(xí)寫代碼漠烧。有時(shí)提出的需求技術(shù)說做不了，但其它平臺(tái)已經(jīng)實(shí)現(xiàn)了這個(gè)功能靡砌。開發(fā)是不是忽悠我已脓？
大仁：那我建議你學(xué)下html，上次和你說的輸入url后通殃，貨品其實(shí)就是網(wǎng)頁度液，現(xiàn)在教你寫網(wǎng)頁。
大仁：和你說說網(wǎng)頁三劍客画舌，三劍客各司其職堕担，相輔相成。

網(wǎng)頁三劍客各司其職曲聂，html負(fù)責(zé)頁面布局霹购，css負(fù)責(zé)裝飾頁面，Javascript則負(fù)責(zé)網(wǎng)頁的動(dòng)態(tài)效果和后臺(tái)數(shù)據(jù)交互朋腋。

4.1.2 劍客一：html

如果把網(wǎng)頁當(dāng)作人齐疙，html則是人的身體，她有基本的骨架和血肉旭咽。至于它的結(jié)構(gòu)贞奋，我們可以把它想像成盒子，盒子套著盒子穷绵。

image.png

html非常單純轿塔，比如說<h1>表示大標(biāo)題，<p>表示段落，<img>表示段落勾缭。
html還有個(gè)非常有趣的標(biāo)簽洽议，<a href='url'>某個(gè)鏈接</a>, 鏈接標(biāo)簽，我們可以在一張網(wǎng)頁里寫上很多鏈接漫拭，這樣子就很方便了亚兄。就像一張網(wǎng)一樣，所有的網(wǎng)頁跳轉(zhuǎn)都變得很方便采驻。
在互聯(lián)網(wǎng)早期审胚，網(wǎng)頁都十分簡(jiǎn)陋获茬。

禁用css后

在早期鲁僚，大家就是這樣子忍受的舵抹。后來大家都抱怨了栈源，但是HTML只負(fù)責(zé)展示內(nèi)容和結(jié)構(gòu)饲做。
好吧主胧，后來瀏覽器大叔勸福它稍微打扮下迄委，大家伙給她申請(qǐng)了手鐲之類的裝飾品蚌吸，之后就有了size（尺寸）汰翠、color（顏色）龄坪、align（對(duì)齊）等，哎呦复唤，稍微好看點(diǎn)健田。

化妝后

網(wǎng)頁早期就是html負(fù)責(zé)布局和裝飾的，劍客一工作繁忙佛纫，后來就有了劍客二妓局。

4.1.3.劍客二：css

css真的是很神奇，把html打扮的美輪美奐的呈宇。劍客二有很多法寶好爬，其中選擇器和盒子是最常用的；

法寶1:選擇器

面對(duì)著一個(gè)村姑甥啄，化妝師開始想辦法了存炮，首先是把整個(gè)html的結(jié)構(gòu)定位出來。例如要找標(biāo)題型豁，html>head>title這樣子才找到僵蛛，化妝師直接規(guī)定 html head title 以后就是定位title了，類似的其它部件的定位也是如此迎变。

image.png

部件都可以定位到了充尉，定位到了之后就開始化妝了，例如把這個(gè)變成紅色衣形，字體20驼侠。
h1 {color:red;size:20}

法寶2:盒子

上面我們看到姿鸿，盒子都是倒在這邊去了，盒子和盒子間的距離不行倒源，這樣子排版很丑耶苛预，所以給這些盒子添加了支架，固定它們的位置笋熬。

• 邊框（border）： 可以設(shè)定寬窄热某，樣式，顏色
• 內(nèi)邊距(padding)： 內(nèi)容到邊框的間距
• 外邊距(margin)： 邊框到相鄰元素的間距

image.png

4.1.4 劍客三：Javascript

劍客三負(fù)責(zé)兩大塊工作胳螟，一是負(fù)責(zé)網(wǎng)頁動(dòng)作昔馋，而是外部數(shù)據(jù)通訊。

一糖耸、網(wǎng)頁動(dòng)作

??html只是個(gè)靜態(tài)頁面語言秘遏。如果用html顯示文字的話，它是展示全部文字嘉竟，而劍客三邦危，它可以讓文字打字機(jī)一樣，一個(gè)一個(gè)字顯示出來舍扰。

除了類似文字打印機(jī)動(dòng)效倦蚪，基本上你看到的動(dòng)態(tài)效果，劍客三都可以實(shí)現(xiàn)妥粟。

有興趣就看审丘，下面是上次的js代碼吏够，就是有個(gè)打字方法type()

<script language="javascript">  //<script>代表腳本
    var index=0;
    var word;
    function type(){    //打字方法的邏輯勾给，一次打一個(gè)字
        var typePanel = document.getElementById("jack");
        typePanel.innerText = word.substring(0,index++);
        if(index % 3 == 0){
            typePanel.className = "";
        }else if(index % 3 == 1){
            typePanel.className = "saying";
        }
    }
    window.onload=function(){  //加載入口
        word=document.getElementById("w").innerHTML;
        setInterval(type, 200);  //每隔0.2秒調(diào)用一下打字方法
    }

</script>

大仁： 小明，聽說你大學(xué)的專業(yè)是計(jì)算機(jī)科學(xué)與技術(shù)锅知？
小明： 是的播急，大仁哥。
大仁： “那好售睹，去幫我搶個(gè)榮耀v9桩警。”
小明：領(lǐng)導(dǎo)昌妹，請(qǐng)你尊重這門專業(yè)捶枢，計(jì)算機(jī)科學(xué)是……
大仁： 請(qǐng)你談?wù)凬AS設(shè)備卷管理模塊中失效數(shù)據(jù)恢復(fù)問題的應(yīng)用。
小明：大仁哥飞崖，腳本寫好了”

1.效果圖

運(yùn)行的效果圖烂叔，就是模擬不斷點(diǎn)擊換一換的效果

image

2.圖解

怎么做的呢？讓我們一步步分解

image

image

document.getElementsByClassName("hot-refresh")[0]

已經(jīng)獲取該元素

image

模擬點(diǎn)擊

image

定時(shí)器每100毫秒點(diǎn)擊一次

setInterval(function () {
    if (Date.now() > new Date("2017-3-21 10:08:00"))  {
        document.getElementsByClassName("hot-refresh")[0].click()
    }
}, 100);

1.大于某個(gè)時(shí)間點(diǎn)
2.模擬點(diǎn)擊

二固歪、外部數(shù)據(jù)通訊

賬號(hào)登錄

?? 賬號(hào)好比旅游景點(diǎn)的門票蒜鸡，在登錄網(wǎng)頁上胯努，你需要把你的賬號(hào)+密碼，也就是門票給檢票員逢防。
小奈：這個(gè)門票是不是和賬戶密碼一樣叶沛？
大仁：是的
小奈：賬號(hào)登陸是怎么實(shí)現(xiàn)的？

賬號(hào)密碼

賬號(hào)登陸

大仁：這里的賬號(hào)登陸和門票進(jìn)場(chǎng)一樣忘朝，但是稍微不同的是灰署，它是永久性的，只要你不改密碼/不被禁用局嘁。

數(shù)據(jù)庫是什么氓侧？

數(shù)據(jù)：舉個(gè)例子，班級(jí)里面的每個(gè)人导狡，例如小周约巷，他的各個(gè)字段：年級(jí)，性別旱捧、語數(shù)英等等独郎，周杰倫的所有信息算是一條數(shù)據(jù)。
數(shù)據(jù)表：數(shù)據(jù)表就像一個(gè)excel表格枚赡，里面存了3年1班所有學(xué)生的數(shù)據(jù)氓癌。

數(shù)據(jù)表

數(shù)據(jù)庫：數(shù)據(jù)庫可以理解成一個(gè)文件夾，里面有很多excel表格贫橙，例如3年級(jí)所有班級(jí)（1贪婉、2、3班）的excel表格卢肃。

這就是賬號(hào)登錄的過程疲迂。如果沒有劍客三，網(wǎng)頁就只能作為本地網(wǎng)頁莫湘，自己和自己玩尤蒿。
Javascript既可以讓網(wǎng)頁動(dòng)起來，也可以和后端進(jìn)行數(shù)據(jù)通訊幅垮，發(fā)送登錄賬號(hào)密碼給