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

時間 2021-06-01

標籤 javascript css html 前端 java python 程序員 chrome 編程 windows 欄目 HTML 简体版

原文原文鏈接

某一天，正走在回學校的路上的我忽然想到：「將來將會是一個科技的時代——雖然如今也是——只是在將來，科技將會無處不在。若是咱們依舊對周圍這些無處不在的代碼一無所知的話，或許咱們會成爲黑客帝國之中被控制的普通人。」因而開始想着，有一天人們會像學習一門語言同樣開始學習編程，直到又有一天我看到了學習編程如同窗習一門語言的說法。這又剛好在我作完最小物聯網系統以後，算是一個有趣的時間點，我開始想着像以前作最小物聯網系統的那些步驟同樣，寫一個簡單的入門。也能夠補充好以前在這個最小物聯網系統缺失的那些東西，給那些正在開始試圖去解決編程問題的人。javascript

讓咱們先從身邊的語言下手，也就是如今無處不在的html+javascript+css。css

無處不在的HTML

之因此從html開始，是由於咱們不須要配置一個複雜的開發環境，也許你還不知道開發環境是什麼東西，不過這也不要緊，畢竟這些知識須要慢慢的接觸纔能有所瞭解，尤爲是對於普通的業餘愛好者來講，固然，對於專業選手言天然不是問題。HTML是Web的核心語言，也算是比較基礎的語言。html

html的hello,world

Hello,world是一個傳統，因此在這裏也遵循這個有趣的傳統，咱們所要作的事情其實很簡單，雖然也有一點點hack的感受。——讓咱們先來新建一個文並命名爲"helloworld.html"。前端

(PS:大部分人應該都是在windows環境下工做的，因此你須要新建一個文本，而後重命名，或者你須要一個編輯器，在這裏咱們推薦用sublime text。破解不破解，註冊不註冊都不會對你的使用有太多的影響。)java

新建文件python
輸入程序員

hello,world

保存爲->"helloworld.html"，chrome
雙擊打開這個文件。正常狀況下都應該是用你的默認瀏覽器打開。只要是一個正常工做的現代瀏覽器，都應該能夠看到上面顯示的是"Hello,world"。編程

這纔是最短的hello,world程序，可是呢？在ruby中會是這樣子的windows

bash2.0.0-p353 :001 > p "hello,world"
"hello,world"
    => "hello,world"
2.0.0-p353 :002 >

等等，若是你瞭解過html的話，會以爲這一點都不符合語法規則，可是他工做了，沒有什麼比安裝完Nginx後看到It works!更讓人激動了。

遺憾的是，它可能沒法在全部的瀏覽器上工做，因此咱們須要去調試其中的bug。

調試hello,world

咱們會發現咱們的代碼在瀏覽器中變成了下面的代碼，若是你和我同樣用的是chrome，那麼你能夠右鍵瀏覽器中的空白區域，點擊審查元素，就會看到下面的代碼。

html<html>
    <head></head>
    <body>hello,world</body>
</html>

這個纔是真正能在大部分瀏覽器上工做的代碼，因此複製它到編輯器裏吧。

說說hello,world

我很不喜歡其中的<*></*>，可是我也沒有找到別的方法來代替它們，因此這是一個設計得當的語言。甚至大部分人都說這算不上是一門真正的語言，不過html的原義是

超文本標記語言

因此咱們能夠發現其中的關鍵詞是標記——markup，也就是說html是一個markup，head是一個markup，body也是一個markup。

然而，咱們真正工做的代碼是在body裏面，至於爲何是在這裏面，這個問題就太複雜了。打個比方來講：

咱們所使用的漢語是人類用智慧創造的，咱們所正在學的這門語言一樣也是人類創造的。
咱們在本身的語言裏遵循着桌子是桌子，凳子是凳子的原則，不多有人會問爲何。

想用中文？

因此咱們也能夠把計算機語言與現實世界裏用於交流溝通的語言劃上一個等號。而咱們所要學習的語言，並非咱們最熟悉的漢語語言，因此咱們便以爲這些很複雜，可是若是咱們試着用漢語替換掉上面的代碼的話

HTML<語言>
    <頭><結束頭>
    <身體>你好，世界<結束身體>
<結束語言>

這看上去很奇怪，只是由於是直譯過去的緣由，也許你會以爲這樣會好理解一點，可是輸入上可就一點兒也不方便，由於這鍵盤自己就不適合咱們去輸入漢字，同時也意味着可能你輸入的會有問題。

讓咱們把上面的代碼代替掉原來的代碼而後保存，打開瀏覽器會看到下面的結果

HTML<語言> <頭><結束頭> <身體>你好，世界<結束身體> <結束語言>

更不幸的結果多是

HTML<璇█> <澶�><緇撴潫澶�> <韜綋>浣犲ソ錛屼笘鐣�<緇撴潫韜綋> <緇撴潫璇█>

這是一個編碼問題，對中文支持不友好。

咱們把上面的代碼改成和標記語言同樣的結構

HTML<語言>
    <頭></頭>
    <身體>你好，世界</身體>
<結束語言>

因而咱們看到的結果即是

HTML<語言> <頭> <身體>你好，世界

被chrome瀏覽器解析成什麼樣了？

html<html><head></head><body><語言>
        <頭><!--頭-->
        <身體>你好，世界<!--身體-->
    <!--語言-->
</body></html>

以

結尾的是註釋，寫給人看的代碼，不是給機器看的，因此機器不會去理解這些代碼。

可是當咱們把代碼改爲

HTML<whatwewanttosay>你好世界</whatwewanttosay>

瀏覽器上面顯示的內容就變成了

HTML你好世界

或許你會以爲很神奇，可是這一點兒也不神奇，雖然咱們的中文語法也遵循着標記語言的標準，可是咱們的瀏覽器不支持中文標記。

結論:

瀏覽器對中文支持不友好。
瀏覽器對英文支持友好。

剛開始的時候不要對中文編程有太多的想法，這是很不現實的:

現有的系統都是基於英語語言環境構建的，對中文支持不是很友好。
中文輸入的速度在某種程度上來講沒有英語快。

咱們離開話題已經很遠了，可是這裏說的都是針對於那些不滿於英語的人來講的，只有當咱們能夠從頭構建一箇中文系統的時候纔是可行的，而這些就要將cpu、軟件、硬件都包含在內，甚至咱們還須要考慮從新設計cpu的結構，在某種程度上來講會有些不現實。或許，須要一代又一代人的努力。忘記那些吧，師夷長之技以治夷。

其餘html標記

添加一個標題，

HTML<html>
    <head>
        <title>標題</title>
    </head>
    <body>hello,world</body>
</html>

咱們即可以在瀏覽器的最上方看到「標題」二字，就像咱們經常使用的淘寶網，也包含了上面的東西，只是還包括了更多的東西，因此你也能夠看懂那些咱們能夠看到的淘寶的標題。

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>

更多的東西能夠在一些書籍上看到，這邊所要說的只是一次簡單的語言入門，其餘的東西都和這些相似。

美妙之處

咱們簡單地上手了一門不算是語言的語言，瀏覽器簡化了這其中的大部分過程，雖然沒有C和其餘語言來得有專業感，可是咱們試着去開始寫代碼了。咱們可能在將來的某一篇中可能會看到相似的語言，諸如python，咱們所要作的就是

bash$ python file.py
=>hello,world

而後在終端上返回結果。只是由於在我看來學會html是有意義的，簡單的上手，而後再慢慢地深刻，若是一開始咱們就去理解指針，開始去理解類。咱們甚至還知道程序是怎麼編譯運行的時候，在這個過程當中又發生了什麼。雖然如今咱們也沒能理解這其中發生了什麼，可是至少展現了

中文編程語言在當前意義不大，不現實，效率不高兼容性差
語言的語法是固定的。（ps:雖然咱們也能夠進行擴充，咱們將會在後來支持上述的中文標記。）
已經開始寫代碼，而不是還在配置開發環境。
隨身的工具纔是最好的，最經常使用的code也纔是實在的。

咱們尚未試着去解決「某商店裏的糖一顆5塊錢，小明買了3顆糖，小明一共花了多少錢」的問題。也就是說咱們學會的是一個還不能解決實際問題的語言，因而咱們還須要學點東西，好比javascript,css。咱們能夠將Javascript理解爲解決問題的語言，html則是前端顯示，css是配置文件，這樣的話，咱們會在那以後學會成爲一個近乎專業的程序員。咱們剛剛學習了一下怎麼在前端顯示那些代碼的行爲，因而咱們還須要Javascript。

在線查看:一步步搭建物聯網系統

圖靈-電子書版一步步搭建物聯網系統