1 無(wú)處不在的HTML
無(wú)處不在的HTML
之所以從html開始，是因?yàn)槲覀儾恍枰渲靡粋€(gè)復(fù)雜的開發(fā)環(huán)境，也許你還不知道開發(fā)環(huán)境是什么東西，不過(guò)這也沒(méi)關(guān)系，畢竟這些知識(shí)需要慢慢的接觸才能有所了解，尤其是對(duì)于普通的業(yè)余愛好者來(lái)說(shuō)，當(dāng)然，對(duì)于專業(yè)選手言自然不是問(wèn)題。HTML是Web的核心語(yǔ)言，也算是比較基礎(chǔ)的語(yǔ)言。
1.1 html的hello,world
Hello,world是一個(gè)傳統(tǒng)，所以在這里也遵循這個(gè)有趣的傳統(tǒng)，我們所要做的事情其實(shí)很簡(jiǎn)單，雖然也有一點(diǎn)點(diǎn)hack的感覺(jué)。——讓我們先來(lái)新建一個(gè)文并命名為"helloworld.html"。
(PS:大部分人應(yīng)該都是在windows環(huán)境下工作的，所以你需要新建一個(gè)文本，然后重命名，或者你需要一個(gè)編輯器，在這里我們推薦用sublime text。破解不破解，注冊(cè)不注冊(cè)都不會(huì)對(duì)你的使用有太多的影響。)
-
新建文件
-
輸入
hello,world -
保存為->"helloworld.html"，
- 雙擊打開這個(gè)文件。 正常情況下都應(yīng)該是用你的默認(rèn)瀏覽器打開。只要是一個(gè)正常工作的現(xiàn)代瀏覽器，都應(yīng)該可以看到上面顯示的是"Hello,world"。
這才是最短的hello,world程序，但是呢？在ruby中會(huì)是這樣子的
2.0.0-p353 :001 > p "hello,world"
"hello,world"
=> "hello,world"
2.0.0-p353 :002 >等等，如果你了解過(guò)html的話，會(huì)覺(jué)得這一點(diǎn)都不符合語(yǔ)法規(guī)則，但是他工作了，沒(méi)有什么比安裝完Nginx后看到It works!更讓人激動(dòng)了。
遺憾的是，它可能無(wú)法在所有的瀏覽器上工作，所以我們需要去調(diào)試其中的bug。
1.1.1 調(diào)試hello,world
我們會(huì)發(fā)現(xiàn)我們的代碼在瀏覽器中變成了下面的代碼，如果你和我一樣用的是chrome，那么你可以右鍵瀏覽器中的空白區(qū)域，點(diǎn)擊審查元素，就會(huì)看到下面的代碼。
<html>
<head></head>
<body>hello,world</body>
</html>這個(gè)才是真正能在大部分瀏覽器上工作的代碼，所以復(fù)制它到編輯器里吧。
1.1.2 說(shuō)說(shuō)hello,world
我很不喜歡其中的，但是我也沒(méi)有找到別的方法來(lái)代替它們，所以這是一個(gè)設(shè)計(jì)得當(dāng)?shù)恼Z(yǔ)言。甚至大部分人都說(shuō)這算不上是一門真正的語(yǔ)言，不過(guò)html的原義是
超文本標(biāo)記語(yǔ)言
所以我們可以發(fā)現(xiàn)其中的關(guān)鍵詞是標(biāo)記——markup，也就是說(shuō)html是一個(gè)markup，head是一個(gè)markup，body也是一個(gè)markup。
然而，我們真正工作的代碼是在body里面，至于為什么是在這里面，這個(gè)問(wèn)題就太復(fù)雜了。打個(gè)比方來(lái)說(shuō)：
-
我們所使用的漢語(yǔ)是人類用智慧創(chuàng)造的，我們所正在學(xué)的這門語(yǔ)言同樣也是人類創(chuàng)造的。
- 我們?cè)谧约旱恼Z(yǔ)言里遵循著桌子是桌子，凳子是凳子的原則，很少有人會(huì)問(wèn)為什么。
1.1.3 想用中文？
所以我們也可以把計(jì)算機(jī)語(yǔ)言與現(xiàn)實(shí)世界里用于交流溝通的語(yǔ)言劃上一個(gè)等號(hào)。而我們所要學(xué)習(xí)的語(yǔ)言，并不是我們最熟悉的漢語(yǔ)語(yǔ)言，所以我們便覺(jué)得這些很復(fù)雜，但是如果我們?cè)囍脻h語(yǔ)替換掉上面的代碼的話
<語(yǔ)言>
<頭><結(jié)束頭>
<身體>你好，世界<結(jié)束身體>
<結(jié)束語(yǔ)言>這看上去很奇怪，只是因?yàn)槭侵弊g過(guò)去的原因，也許你會(huì)覺(jué)得這樣會(huì)好理解一點(diǎn)，但是輸入上可就一點(diǎn)兒也不方便，因?yàn)檫@鍵盤本身就不適合我們?nèi)ポ斎霛h字，同時(shí)也意味著可能你輸入的會(huì)有問(wèn)題。
讓我們把上面的代碼代替掉原來(lái)的代碼然后保存，打開瀏覽器會(huì)看到下面的結(jié)果
<語(yǔ)言> <頭><結(jié)束頭> <身體>你好，世界<結(jié)束身體> <結(jié)束語(yǔ)言>更不幸的結(jié)果可能是
<璇█> <澶?><緇撴潫澶?> <韜綋>浣犲ソ錛屼笘鐣?<緇撴潫韜綋> <緇撴潫璇█>這是一個(gè)編碼問(wèn)題，對(duì)中文支持不友好。
我們把上面的代碼改為和標(biāo)記語(yǔ)言一樣的結(jié)構(gòu)
<語(yǔ)言>
<頭></頭>
<身體>你好，世界</身體>
<結(jié)束語(yǔ)言>于是我們看到的結(jié)果便是
<語(yǔ)言> <頭> <身體>你好，世界被chrome瀏覽器解析成什么樣了？
<html><head></head><body><語(yǔ)言>
<頭><!--頭-->
<身體>你好，世界<!--身體-->
<!--語(yǔ)言-->
</body></html>以
<!--開頭，-->結(jié)尾的是注釋，寫給人看的代碼，不是給機(jī)器看的，所以機(jī)器不會(huì)去理解這些代碼。
但是當(dāng)我們把代碼改成
<whatwewanttosay>你好世界</whatwewanttosay>瀏覽器上面顯示的內(nèi)容就變成了
你好世界或許你會(huì)覺(jué)得很神奇，但是這一點(diǎn)兒也不神奇，雖然我們的中文語(yǔ)法也遵循著標(biāo)記語(yǔ)言的標(biāo)準(zhǔn)，但是我們的瀏覽器不支持中文標(biāo)記。
結(jié)論:
- 瀏覽器對(duì)中文支持不友好。
- 瀏覽器對(duì)英文支持友好。
剛開始的時(shí)候不要對(duì)中文編程有太多的想法，這是很不現(xiàn)實(shí)的:
- 現(xiàn)有的系統(tǒng)都是基于英語(yǔ)語(yǔ)言環(huán)境構(gòu)建的，對(duì)中文支持不是很友好。
- 中文輸入的速度在某種程度上來(lái)說(shuō)沒(méi)有英語(yǔ)快。
我們離開話題已經(jīng)很遠(yuǎn)了，但是這里說(shuō)的都是針對(duì)于那些不滿于英語(yǔ)的人來(lái)說(shuō)的，只有當(dāng)我們可以從頭構(gòu)建一個(gè)中文系統(tǒng)的時(shí)候才是可行的，而這些就要將cpu、軟件、硬件都包含在內(nèi)，甚至我們還需要考慮重新設(shè)計(jì)cpu的結(jié)構(gòu)，在某種程度上來(lái)說(shuō)會(huì)有些不現(xiàn)實(shí)。或許，需要一代又一代人的努力。忘記那些吧，師夷長(zhǎng)之技以治夷。
1.2 其他html標(biāo)記
添加一個(gè)標(biāo)題，
<html>
<head>
<title>標(biāo)題</title>
</head>
<body>hello,world</body>
</html>我們便可以在瀏覽器的最上方看到“標(biāo)題”二字，就像我們常用的淘寶網(wǎng)，也包含了上面的東西，只是還包括了更多的東西，所以你也可以看懂那些我們可以看到的淘寶的標(biāo)題。
<html>
<head>
<title>標(biāo)題</title>
</head>
<body>
hello,world
<h1>大標(biāo)題</h1>
<h2>次標(biāo)題</h2>
<h3>...</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>更多的東西可以在一些書籍上看到，這邊所要說(shuō)的只是一次簡(jiǎn)單的語(yǔ)言入門，其他的東西都和這些類似。
1.2.1 美妙之處
我們簡(jiǎn)單地上手了一門不算是語(yǔ)言的語(yǔ)言，瀏覽器簡(jiǎn)化了這其中的大部分過(guò)程，雖然沒(méi)有C和其他語(yǔ)言來(lái)得有專業(yè)感，但是我們?cè)囍ラ_始寫代碼了。我們可能在未來(lái)的某一篇中可能會(huì)看到類似的語(yǔ)言，諸如python，我們所要做的就是
$ python file.py
=>hello,world然后在終端上返回結(jié)果。只是因?yàn)樵谖铱磥?lái)學(xué)會(huì)html是有意義的，簡(jiǎn)單的上手，然后再慢慢地深入，如果一開始我們就去理解指針，開始去理解類。我們甚至還知道程序是怎么編譯運(yùn)行的時(shí)候，在這個(gè)過(guò)程中又發(fā)生了什么。雖然現(xiàn)在我們也沒(méi)能理解這其中發(fā)生了什么，但是至少展示了
- 中文編程語(yǔ)言在當(dāng)前意義不大，不現(xiàn)實(shí)，效率不高兼容性差
- 語(yǔ)言的語(yǔ)法是固定的。（ps:雖然我們也可以進(jìn)行擴(kuò)充，我們將會(huì)在后來(lái)支持上述的中文標(biāo)記。）
- 已經(jīng)開始寫代碼，而不是還在配置開發(fā)環(huán)境。
- 隨身的工具才是最好的，最常用的code也才是實(shí)在的。
1.2.3 更多
我們還沒(méi)有試著去解決“某商店里的糖一顆5塊錢，小明買了3顆糖，小明一共花了多少錢”的問(wèn)題。也就是說(shuō)我們學(xué)會(huì)的是一個(gè)還不能解決實(shí)際問(wèn)題的語(yǔ)言，于是我們還需要學(xué)點(diǎn)東西，比如javascript,css。我們可以將Javascript理解為解決問(wèn)題的語(yǔ)言，html則是前端顯示，css是配置文件，這樣的話，我們會(huì)在那之后學(xué)會(huì)成為一個(gè)近乎專業(yè)的程序員。我們剛剛學(xué)習(xí)了一下怎么在前端顯示那些代碼的行為，于是我們還需要Javascript。
更多建議：