1 無處不在的HTML · 一步步搭建物聯網系統

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