[Day 3] 阿嬷都看得懂的 HTML 在干嘛

阿嬷都看得懂的 HTML 在干嘛

If a picture paints a thousand words, Then why can't I paint you? - If, lyrics

昨天我们提到前後端的分别，让我们稍微回忆看看。呃，好，我知道你阿嬷的记忆力可能没那麽好，不过应该还算可以记得

前端......浏览器............
後端......服务器............
吧!? 忘记也没关系，现在你阿嬷记得了！

昨天也提到，尽管网页看起来像是张很长的海报，但是网页本身并不是张很大的图片！网页看起来像图片，是因为前端工程师对浏览器下了文字指令，让浏览器按照这些文字指令，画出－－没错，术语叫作「渲染」出－－这张很长的海报。

在深入介绍渲染的细节以前，让我们来玩这个游戏：画海报版的比手画脚！小刘先当画的人，手上有张空白的海报；而我们这些刘姥姥手上有张画好的海报，嗯，我们就先挑这张好了：

但是我们只能用说话的方式，告诉小刘怎麽画出这张海报。

我们可能会说：

在画面左边有个滑雪的女人，占了整个海报的一半。
画面上方 5/8 是蓝色的天空。
然後剩下底部的画面都是白色的，是个滑雪场。
右上角有 6 行白色的文字，第一行是 "Montreal"；
第二、三行是 "Winter Sports"。
剩下三行是日期，分别是 "JAN 19"、"FEB 23"、"1924"。......

让我们仔细看看上面我们说的这段话，会发现我们很常先跟小刘说说「有」某个东西，再说这个东西大概长怎样，例如：

在画面左边有个滑雪的女人，占了整个海报的一半。......
右上角有 6 行白色的文字，第一行是 "Montreal"......

更精确地，这句话其实是在说：

有个图片，这个图片长得像这样－－宽大概占海报的一半，位置在整个海报的左边，图片内容是个滑雪的女人。

还有这句话也符合上面的这个格式：

右上角有 6 行白色的文字，第一行是 "Montreal"；

这句话其实是再说：

有个区块，这个区块长得像这样－－位置在整个海报的右上角，内容是 6 行文字，其中有行文字，这行文字长得像这样－－位置在这个区块的最上方，文字的颜色是白色，而文字的内容是 "Montreal"。

这句话甚至提到有两个东西，其中一个包着另一个！

你可能会说，其他几句话看不出这样的格式啊！没关系，让我们挑几句来仔细看看：

画面上方 5/8 是蓝色的天空。

仔细想想，这句话是不是其实是在说：

有个区块，这个区块长得像这样－－高度大概是整张海报的 5/8，位置在整个海报的上方，颜色是蓝色的。(至於是不是天空，其实这是看的人自己的解读了。)

呢？

而这句话可能更复杂了：

然後剩下底部的画面都是白色的，是个滑雪场。

这句话应该是在说：

有个区块，这个区块长得像这样－－高度大概是整张海报的 3/8，位置在整个海报的下方，颜色是白色的。这个区块中，有张图片，这张图片长得像这样－－它的内容是个滑雪场。

~~对上述语句分析感兴趣的阿嬷可以参考英国哲学家罗素的 On Denoting 这篇文章。~~

我们在「画海报版的比手画脚」这个游戏当中，告诉小刘怎麽画出海报的方式，其实就是各位阿嬷变成前端工程师後，告诉浏览器怎麽渲染出网页的方式。我们会先告诉浏览器有什麽，然後再告诉浏览器这个东西长怎样。

那麽，你阿嬷会怎麽告诉浏览器，底下这张网页长怎样呢？

你阿嬷大概会这样说：

整个网页有 2 个主要区块，第一个区块长得像这样－－高度大概 8%，底色是白，位置在最上方，这个区块里面又有 3 个区块，其中第一个区块长得像这样－－宽度大概是 1/3，位置在最左边，里面又有 2 个东西，其中第一个是个图片，图片内容是 Facebook 的 Logo............

没错，我们都会先告诉浏览器在这个网页上，有哪些东西，像是文字啦、区块啦、表格啦、按钮啦......然後再告诉浏览器这些东西长怎样，像是宽度高度、位置、和其他东西的距离、内容、颜色、字体......

当然，我们和浏览器沟通的时候，并不是用中文或英文，而是使用特殊的语言。我们会使用 HTML 这个语言告诉浏览器，这个网页中有哪些东西－－或者用虾趴的术语来说，告诉浏览器这个网页中有哪些「元素」(element)；再使用 CSS 这个语言告诉浏览器，这些元素长怎样－－或者用虾趴的术语来说，告诉浏览器这些元素的「样式」(style)。

我们会在後面的章节，告诉各位阿嬷 HTML 和 CSS 具体而言怎麽写。不过，让我们来做个有趣的实验。让我们开启电脑，使用 Chrome 这个浏览器，点开苹果的网页。

苹果的网页以设计精致着称，是不是非常美呢？

那麽，我们要开始窥探这位美人的内在秘密了。

让我们按下 F12，开启发展者工具 (DevTool)。在这里，我们可以看见前端工程师告诉浏览器怎麽渲染画面的指令，也就是 HTML 与 CSS 怎麽写。

左半边就是发展者工具，在点选上方我画红圈的 "Element" 後，底下红框中的，就是 HTML。目前看不懂是很正常的，我们在後面的章节中，会介绍 HTML 怎麽写喔！

那麽，我们怎麽知道网页中的哪个东西，对应到这些 HTML 的哪些段落，或用专业术语说，对应到哪些 HTML 「标签」呢？很简单，只要按下左上角的我画红圈中的按钮：

再把滑鼠游标移到网页的某个元素上，在发展者工具中，就会直接把这个元素对应的 HTML 标签反白：

怎麽知道这个反白的 HTML 标签，就是我们指到的那个 "iPhone" 的按钮呢？很简单，让我们删掉这个 HTML 标签看看。在那个 HTML 标签上面按右键，再跳出的选单中点选 "Delete element"，就可以删掉这个 HTML 标签了。

然後，我们就会发现，网页中的 "iPhone" 这个按钮也跟着消失罗！