阿嬷都看得懂的开始写第一支 .html 档案罗！

昨天我们介绍了 HTML 标签怎麽写，各位阿嬷是不是跃跃欲试了呢？今天，就让我们打开记事本，开始写第一支 HTML 档案吧！

我们来写些什麽好呢？先来写些文字好了。

刚刚说到，文字段落的标签名称是 p。那就让我们向阿嬷打声招呼吧！

<p>Hello Granny!</p>

好，那我们来存档。记得，在存档的时候，要选择存档类型为「所有档案」，然後记得在档名後面加个 .html，这样才会存成 HTML 档案喔！

存档好了以後，在资料夹应该会是预设网页浏览器的图示。

让我们把这个档案点开，应该会打开浏览器。浏览器当中会显示

耶！恭喜阿嬷完成人生中第一个网页！这样已经踏出网页工程师的第一步罗！
感谢大家收看，那这系列就到这边结束罗！

等等，这个网页也太阳春了吧！好歹把阿嬷 Granny 的字样加上粗体啊！(咦
好的，如你所愿，把阿嬷变强变 strong。我们可以用 strong 标签，来加粗字体。
不过，实际上会怎麽写呢？我们想加粗的部分，是 Granny 这个字。
也就是说，strong 标签的范围就是要把 Granny 包起来罗？
没错，所以我们会这样写：

<p> Hello <strong>Granny</strong>!</p>

让我们重整一下这个网页，就会看到：

字体变粗罗～是不是很美呢？

什麽？你说还是太朴素？好吧那我们让阿嬷和乖孙开始对话吧。

<p> Hello <strong>Granny</strong>!
Howdy My Good Boy!</p>

同样重整页面，就会看到对话罗！

等等，这还是很丑吧！而且为什麽没换行啊？

没错，在 HTML 标签当中，通常会自动拿掉头尾的空格与中间的换行。那麽，应该怎麽解这题呢？有 2 个解法：

1. 手动加入断行标签 br (英文的 break 是打断的意思)。想想看，br 标签是否成对呢？没错，由於断行不会有任何内部的元素，所以断行标签也是单身狗喔！

<p> Hello <strong>Granny</strong>!
<br>Howdy My Good Boy!</p>

2. 使用 pre 标签取代 p。

<pre> Hello <strong>Granny</strong>!
Howdy My Good Boy!</pre>

等等，为什麽是 pre，难道是要预防 (prevent) HTML 标签自动拿掉头尾的空格与中间的换行吗？答案很接近 (其实 pre 是 preformatted，并未给予格式的意思)。当我们使用这些标签的时候，其实浏览器已经偷偷给了这些标签一些基础的样式了。例如 strong 标签的文字比较粗，或者用来表示大标题的 h1 标签字型较大等等。

在这些偷偷给的样式中，最麻烦的是元素间的推挤。在上面这段程序

<p>Hello <strong>Granny</strong>!</p>

中，strong 标签中的 "Granny" 和 p 标签中的 "Hello" 与 "!" (注意看喔，"!" 并没有被包含在 strong 标签中) 在渲染时，并没有产生什麽推挤，所以都被呈现在同一行当中。这看起来似乎相当自然，我只是想把字体加粗而已，没有想要换行没错。但是，以标签自带样式的角度来说，这是因为 strong 这个标签没有自带推挤的样式。让我们把 strong 标签改成 p 标签看看：

<p>Hello <p>Granny</p>!</p>

可以看见 "Hello", "Granny", "!" 整个变成 3 行了，而且这个行距比使用 br 标签时还宽好多啊！没错，这是因为 p 标签预设的样式，就有推挤其他元素。当 p 标签前面有其他元素的时候，p 标签自己会跑到那个元素的下方；而当 p 标签前後面有其他元素的时候，那个元素也会自己跑到 p 标签的下方喔！

因此，当我们在使用 HTML 标签的时候，需要特别注意这些标签的预设样式，才有办法让浏览器渲染出自己心中的理想排版喔！

今天我们开始写了第一个 .html 程序，虽然网页看起来还是阳春到爆炸，但是随着我们介绍的标签与样式越来越多，我们的网页也会越来越好看喔！明天就让我们多介绍几个 HTML 标签吧！