一步步搭建物联网系统——无处不在的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。

在线查看:一步步搭建物联网系统

图灵-电子书版一步步搭建物联网系统