小朋友的编程-四

通过前边的铺垫，我们基本上对编程有了一些了解，简短的来说，编程就是通过编程语言，给机器预设一些指令代码，让机器能够按照一定的步骤完成我们需要的功能。
然后通过视频介绍我们知道了网页的秘密，所有的网页本质上都是代码，而且是一种叫html的代码，这篇文章，会介绍一些在视频中提到的专用词汇。

首先是关于网页

一个网页就是一个html格式的文件，如果你尝试把一个网站保存下来的话，它的后缀就是文件名.html，我相信你肯定知道txt格式, 也见过mp3,mp4,exe等。
常见文件格式例子

如果你电脑里的文件是没有后缀的话，那就是系统并没有设置显示文件后缀，可以参考这里去试试https://jingyan.baidu.com/article/5d368d1e31ed903f60c057c6.html

一般来说，格式是代表着一种数据的组织方式，也指示着文件的用途。我套用个生活中的例子，需要帮助时，当你看到一个穿警服的人，即便你并不认识也从来没见过他，你也会知道他是警察，有困难就去找他帮忙。警服在这里就表示了对方警察的身份和职能，其实格式也有类似的意思，它会代表文件的某种特定的用途。比如mp4是要拿视屏播放器才能打开的，因为它是一种视屏文件格式，mp3是音乐要用音乐播放器放，txt文本格式可以用记事本打开，同理我们这里的html，它就是代表网页，是需要用浏览器来打开的。

事实上，浏览器是能够认识html中的代码，进而把这些代码渲染成漂亮的网页便于人们使用，毕竟只有专业认识才认识代码，而普通人上网只需要看到浏览器处理后的网页的样子就可以了。

– 好了，恭喜你，你了解到一个叫做文件格式的新知识了

html是有一定规则的，还记得在js.jirengu.com这个在线练习网站中，打开差不多是这样的：
这是代开网页的样子

刚进入时，左侧它就会自动给出一部分写好了的代码，我把它复制到下面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

视屏中并没有详细说明这些东西，但你可能也发现了一些规律，比如大部分代码都好像是这样的一种形式：<单词> 有的可能还有其他东西 </单词>，或者简单一点儿像 <单词>，总之是由一个或者几个尖括号和单词组成的结构，这种结构我们称之为网页中的一个元素[element：元素，单元之意]。元素就像是零件，将他们组合起来就是一个网页了，事实上，你看到的所有网页都是由各种各样的元素组合起来的，就好比扣子，拉链和布料这些基本材料，可以做成各种各样的衣服那样，（这是你小姨举的例子 (^_^)v

– 好了，恭喜你，你又知道了：网页是由各种各样的元素组成的

除此之外，上边提到的结构中还有单词我们没有说到，这些单词不是乱写的，而是由一个叫万维网联盟（缩写W3C）的国际组织规定好了的，它们是能被各种浏览器都认识的特定单词，也称之为标签，所以基本上：

元素 = <标签名> 可能有内容 </标签名> 或者 <标签名>

所以我们现在就来找找，上述的代码中有哪些标签呢?
有一个html标签，一个head标签，一个body标签，meta跟title也都是标签，这里说明一下，第一句<!DOCTYPE html>是个例外，它的作用是告诉浏览器下面的 HTML 是用什么版本编写的，方便浏览器认识代码用的，你可以把它理解为一种固定不变的步骤。

我们知道了术语之后，再回头看看上边的代码，其实基本上就是一个大的html元素，有2个子元素是 头（head）元素 跟 体（body）元素，而头元素中又嵌套了 meta元素（这里的meta里边的charset我们称之为的属性）和 title元素，而我们通常就会在主体（body）元素中利用各种标签，进行代码的编写，从而达到我们想要的网页效果，这也是我们视频中步骤一部分的内容。如果我用图表示一下，就是这样：

就像机器人拥有各种各样的零件一样，网页中w3c规定的标签目前有150多个之多，常见的还有比如视频中我们用到的 <div> （表示区域）, <button>(表示按钮), <img>（表示图片）, <input>（表示输入框）, <script>(表示js代码)等等，以后我们还会逐渐见到其他元素，不过不要慌，这些标签都不用你去记忆，用到时去搜索查查，知道它是怎么回事儿就够了。

关于js代码

…待续