這是一篇面向“三無(wú)”人士的教程，所以零基礎(chǔ)，也會(huì)有奇效。三無(wú)：無(wú)英語(yǔ)能力，無(wú)編程經(jīng)驗(yàn)，無(wú)互聯(lián)網(wǎng)認(rèn)知。這篇文章對(duì)于“業(yè)內(nèi)人士”，也有可讀性，它只是從另一個(gè)層面看編程。然而，對(duì)于“負(fù)基礎(chǔ)”的人士，想讀懂并且動(dòng)手完成練習(xí)，首先需要拋掉固有觀念、慣性思維。負(fù)基礎(chǔ)：偏見(jiàn)、缺乏自信、沒(méi)有勇氣、懶于動(dòng)手、不愛(ài)思考，以及～理由生產(chǎn)廠家。
編程，沒(méi)有想象中那么難，離大眾也并不遙遠(yuǎn)。
中國(guó)有 8 億微信用戶，平均每人每天把玩微信數(shù)小時(shí)，當(dāng)然，你也在其中；而微信，便是編程結(jié)果，因此活在當(dāng)下的絕大多數(shù)人，離編程僅有一步之遙，如此之近，我來(lái)幫你捅破這層窗戶紙。
微信，是一款 APP，是我后面的后面的后面要講的教程內(nèi)容，這里，我們先來(lái)說(shuō)說(shuō)～百度。
百度，大家都用過(guò)，一個(gè)用來(lái)搜索答案的網(wǎng)頁(yè)。沒(méi)錯(cuò)，這篇教程要講的，便是：如何從一無(wú)所知，到實(shí)現(xiàn)一個(gè)看起來(lái)像百度那樣精簡(jiǎn)的網(wǎng)頁(yè)。
在開(kāi)始之前，得先明確一點(diǎn)：互聯(lián)網(wǎng)應(yīng)用程序（微信、百度）實(shí)際上并不只是你看到的那樣，正如微信不只是 APP，百度不只是網(wǎng)頁(yè)。絕大多數(shù)普通用戶看到、用到的，只是其冰山一角，然而站在學(xué)習(xí)的角度，我們完全可以將巨大的冰山，等同于一角，并在具備了一定編程能力和認(rèn)知之后，根據(jù)自身意愿，自由探索整座冰山。
現(xiàn)在我們來(lái)看看百度長(zhǎng)啥樣子：
這個(gè)頁(yè)面已經(jīng)足夠精簡(jiǎn)，但在本教程里，它需要進(jìn)一步簡(jiǎn)化成下面這樣子：
如此一來(lái)，便只有 logo、輸入框、按鈕三個(gè)元素。是吧，家喻戶曉的百度首頁(yè)，其實(shí)主要由這三個(gè)元素組成。
與之對(duì)應(yīng)的三個(gè)代碼標(biāo)簽分別是：
<img />(圖片)
<input />（輸入）
<button></button>（按鈕）
這三個(gè)標(biāo)簽的字面意思，就是括號(hào)里的中文。英語(yǔ)不好的同學(xué)不必?fù)?dān)心，在這個(gè)教程里，不會(huì)出現(xiàn)太多單詞，而且它們即簡(jiǎn)單又好記，把心態(tài)擺正，在學(xué)習(xí)編程的過(guò)程中，一不小心也學(xué)會(huì)了英語(yǔ)。
現(xiàn)在來(lái)說(shuō)說(shuō)這三個(gè)標(biāo)簽：
為了讓標(biāo)簽看起來(lái)更有共性，其實(shí)寫成下面這樣子也是可以的：
<img></img>
<input></input>
<button></button>
眼尖的你，定然會(huì)發(fā)現(xiàn)：所謂的代碼，去掉討厭的英文，其實(shí)不過(guò)是：<>和</>。沒(méi)錯(cuò)，<>表示開(kāi)始，</>表示結(jié)束。
是吧，代碼并不可怕，它們不過(guò)如此。現(xiàn)在，我們來(lái)進(jìn)一步拓展它：
<img src="logo.jpg" ></img>
<input value=""></input>
<button>按鈕</button>
莫慌，包裹在<>里面的，叫作標(biāo)簽的屬性，屬性的作用是讓標(biāo)簽產(chǎn)生效果。
img?是 image（圖片） 的縮寫，src是 source （資源）的縮寫。
src="logo.jpg" 的意思是： <img /> 標(biāo)簽的資源來(lái)自一個(gè)叫 logo.jpg 的文件。
logo.jpg?是一個(gè)圖片文件，logo?是文件名，.jpg?是后綴。
文件名用以區(qū)分，后綴用以定義格式。
當(dāng)看到?jpg, png?我們知道它是圖片文件，當(dāng)看到?doc, txt?我們知道它是文檔。
Ok，現(xiàn)在你知道：<img /> 標(biāo)簽需要導(dǎo)入圖片資源，通過(guò)?src?屬性來(lái)導(dǎo)入，編寫代碼的語(yǔ)法：src="ooxx.jpg"。
<input /> 是一個(gè)輸入框，用戶可以在里面輸入文本內(nèi)容。
value?的中文意思是：值。所以用戶輸入的文本內(nèi)容就是?<input />?標(biāo)簽的值。value=""?表示值為空；""?表示空的意思。當(dāng)用戶在輸入框里輸入文字的時(shí)候，value?的值就會(huì)動(dòng)態(tài)變成這些文字。
最后一個(gè)是 <button></button>?標(biāo)簽。<button>?表示開(kāi)始，</button> ?表示結(jié)束，中間夾著“按鈕”表示這個(gè)按鈕的名字叫按鈕；當(dāng)然你也可以像百度那樣，把“按鈕”替換成“百度一下”。
看到這里，你已經(jīng)掌握了這三個(gè)標(biāo)簽的意思和用法。如果你決定繼續(xù)學(xué)習(xí)，我會(huì)告訴你：在編程世界里，這三標(biāo)簽有一個(gè)共同的老大?“HTML”。
HTML 是一種標(biāo)記語(yǔ)言，它沒(méi)有語(yǔ)法，也沒(méi)有邏輯運(yùn)算能力，只有特定的書(shū)寫格式。譬如：有開(kāi)始，就有結(jié)束，在開(kāi)始的地方，會(huì)有屬性，屬性讓標(biāo)簽得以施展能力。如果光寫標(biāo)簽，不寫屬性，你將在頁(yè)面上看不到任何內(nèi)容，也用不了任何功能。
HTML?的出現(xiàn)，拉開(kāi)了?Web?時(shí)代的序幕，在互聯(lián)網(wǎng)早期，Web?即網(wǎng)頁(yè)，現(xiàn)如今，網(wǎng)頁(yè)只能是?Web?的一個(gè)子集。關(guān)于?Web?的概念，同學(xué)們自行去拓展，這篇教程里，我們繼續(xù)專注于網(wǎng)頁(yè)的編寫。
說(shuō)到?HTML?你還需要知道?CSS?和?JavaScript，不要擔(dān)心，我只是順便一提而已，你并不需要記住，只需要知道：HTML、CSS、JavaScript?俗稱“網(wǎng)頁(yè)三劍客”。它們是1 2 3的關(guān)系，在?Web?的發(fā)展進(jìn)程中，先有?HTML，后有?CSS，再有?JavaScript。
在互聯(lián)網(wǎng)的蠻荒時(shí)代，HTML?主宰了網(wǎng)頁(yè)的一切，為了滿足各種各樣的功能，HTML?擁有上百個(gè)標(biāo)簽，成千的屬性。<img /> <input /> <button> src value 就是其中比較常用的“小弟”。 不要焦慮，現(xiàn)在是?2017年，實(shí)際上你并不需要全部掌握，通常，職業(yè)生涯中，常用到的標(biāo)簽，不會(huì)超過(guò)?10?個(gè)，常用到的屬性，也才?2～30?個(gè)。而就在方才，你已不知不覺(jué)掌握了?3?個(gè)標(biāo)簽，2?個(gè)屬性。在后續(xù)的教程里，你將很自然地熟知它們，至于那些不常用的，同學(xué)們?cè)诰邆淞艘欢ǖ木幊棠芰χ?，可以按需自行拓展?br>
說(shuō)了這么多，我們來(lái)動(dòng)手?jǐn)]代碼吧～
首先，新建一個(gè)文件夾，然后在文件夾里再新建一個(gè)以 .html 結(jié)尾的文件。
文件夾和文件名字，同學(xué)們自行命名，如果你有命名恐懼癥的話，可以像我這樣，創(chuàng)建一個(gè)名為：demo?的目錄，再創(chuàng)建一個(gè)名為：index.html?的文件。
現(xiàn)在，你需要一個(gè)順手的編輯器，我個(gè)人比較偏愛(ài)?Sublime Text（點(diǎn)閱讀原文可以獲得下載地址）如果你不喜歡它，可以自行尋找任何你喜歡的編輯器。
將剛剛新建的目錄，拖拽到編輯器里，雙擊?index.html，開(kāi)始編寫：
上面你看到一堆紅色的陌生代碼，然而仔細(xì)端詳?shù)脑捑蜁?huì)發(fā)現(xiàn)它們似曾相識(shí)。沒(méi)錯(cuò)，奕如<button></button>?標(biāo)簽，有開(kāi)始，也有結(jié)束，成雙成對(duì)地出現(xiàn)。
在?HTML?的世界里，標(biāo)簽和標(biāo)簽之間，是層層嵌套的，嵌套別人的叫“爸爸”，被嵌套的是“兒子”，嵌套爸爸的標(biāo)簽是“爺爺”，被兒子嵌套的標(biāo)簽叫“孫子”，聰明如你，依次類推。
為了避免多層嵌套后找不到北，分不清誰(shuí)是“爸爸”，誰(shuí)是“兒子”，一般我們?cè)跁?shū)寫的時(shí)候，會(huì)用縮進(jìn)兩個(gè)空格來(lái)表示嵌套關(guān)系，在調(diào)整格式后，應(yīng)該是下面這樣子：
寫到這里，我想告訴你，這便是一個(gè)完整的網(wǎng)頁(yè)代碼。所有的網(wǎng)頁(yè)，都是這個(gè)結(jié)構(gòu)。
一并9行，下面講一下他們都是誰(shuí)，能干嘛：
第一行：<!DOCTYPE html>
這是一個(gè)聲明，告訴瀏覽器以下代碼都是?html?格式。
"!"?感嘆號(hào)是聲明的開(kāi)始，知道它表示聲明開(kāi)始就可以了。
“DOCTYPE”實(shí)際上是一個(gè)組合單詞，前半段?DOC?是?document（文檔）的縮寫，后半段?TYPE?的中文意思是：類型。所以第一行的意思：文檔類型是html。
第二行和第九行：?<html></html>
看到?<html>?這個(gè)標(biāo)簽，同學(xué)們應(yīng)該很熟悉，上面圍繞著?HTML?展開(kāi)了許多文字。實(shí)際上現(xiàn)在的?HTML?標(biāo)簽不區(qū)分大小寫，如果你愿意的話，你也可以寫成?<HTML></HTML> 。
如果你還沒(méi)有忘記?HTML?標(biāo)簽都是成對(duì)成對(duì)出現(xiàn)的，那么這里你應(yīng)該能意識(shí)到：網(wǎng)頁(yè)代碼在聲明格式之后，由 <html>?開(kāi)始，于 </html>?結(jié)束。
第三行和第五行：?<head></head>
依然是成對(duì)地出現(xiàn)，這個(gè)標(biāo)簽的字面意思：頭。顧名思義，表示?HTML?文檔的頭部。頭部區(qū)域，一般定義一些資源鏈接、網(wǎng)頁(yè)標(biāo)題、編碼格式。
第四行：<title></title>
這個(gè)標(biāo)簽的字面意思是：標(biāo)題。如果在開(kāi)始和結(jié)束之間寫入一句話（<title>我是標(biāo)題哦</title></b>我是標(biāo)題哦<b>），那么就會(huì)出現(xiàn)在瀏覽器地址欄的上方，如下圖：
第六行和第八行：?<body></body>
這對(duì)標(biāo)簽的意思：身體。沒(méi)錯(cuò)，HTML?文檔流不但有頭部，還有身體。body?的這一部分，便是我們代碼主要書(shū)寫的地方。也是網(wǎng)頁(yè)開(kāi)發(fā)的重中之重，幾乎?99%?的代碼，最終都將被堆砌在 <body>和 </body>?之間。
講到這里，你又順勢(shì)學(xué)習(xí)了：
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>
<body></body>
1?個(gè)格式聲明和?4?對(duì)標(biāo)準(zhǔn)標(biāo)簽。
如果你覺(jué)得都能記住，那就把它們記住，如果記不住也不打緊，這些都是模板標(biāo)簽，即：任何一個(gè)網(wǎng)頁(yè)都會(huì)有的結(jié)構(gòu)性標(biāo)簽，而且，許多智能編輯器都會(huì)幫你自動(dòng)創(chuàng)建。
接下來(lái)，我們把前面學(xué)到的：
<img />
<input />
<button></button>
整合到標(biāo)準(zhǔn)?HTML?框架中去，開(kāi)始實(shí)際意義上的代碼編寫。
如果你有認(rèn)真在看，不難發(fā)現(xiàn)，上面的代碼多了一行：
<meta charset="utf-8">
莫慌，這一行的作用是解決中文亂碼的問(wèn)題。
上面講過(guò)，在?HTML?文檔流的頭部，也就是被嵌套在?<head>?和?</head>?標(biāo)簽之間的位置，一般是引入外部資源、定義編碼格式的地方。在后續(xù)的教程中，這個(gè)部分除了 <meat />?還會(huì)出現(xiàn)：<link /> <style> </style> <script> </script> 等標(biāo)簽，這里只需知道即可。
So，讀到這里，你已具備了一定的編程知識(shí)并書(shū)寫了幾行代碼?，F(xiàn)在在?Sublime Text?中打開(kāi)?index.html?文件并點(diǎn)擊右鍵，選擇在瀏覽器中打開(kāi)，一切正常的話，應(yīng)該會(huì)看到下面的頁(yè)面效果:
是的，這并不是百度首頁(yè)的樣子。
看不到?logo，因?yàn)檫€沒(méi)有引入圖片資源；輸入框和按鈕都很丑，位置也不對(duì)，因?yàn)檫€沒(méi)有進(jìn)行樣式調(diào)整。
但今天已經(jīng)說(shuō)得太多了，且這篇教程的目的也已經(jīng)達(dá)到，截止這里，你已經(jīng)知道一些網(wǎng)頁(yè)相關(guān)的由來(lái)和些許的動(dòng)手能力，一次不能太多，剛好即可。
在下一篇教程里，我將著重講解樣式的部分，即：CSS，弄懂它，你便可以完成一個(gè)貨真價(jià)實(shí)的百度首頁(yè)。
好好消化一下，下篇再續(xù) ：
