稻米鼠 · 更新于 2018-08-19 07:00:33

第六章 开始写点东西

那么现在,我们理解了标记语言,准备好了一个基础的模版,接下来终于该开始写点什么了,这是一个很美好的时刻,嗯,真的很美好很美好啊~~因为我们终于开始了自己的代码旅程。

其实这个事情真的很简单,甚至比前面的每一章都要简单,为什么呢?因为我们只要在 <body></body> 标签之间写下我们要显示的内容就可以了,比如,我们来写代码界最著名的:Hello world!Code is so easy!

好吧,后一句是我自作主张加上的,来看代码~~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        Hello world!Code is so easy!
    </body>
</html>

那么把这些代码复制到 Notepad++ 里,然后保存为 “你喜欢的名字.html” 之类的废话我就不一次次重复了,还有哦,现在我们都知道了主要的网页代码要写在 <body></body> 之间,就像上边演示的一样,那么为了节省篇幅,后面写代码我可能省略掉其他内容,只写 body 标签之间的内容,你们要自己记得把结构补全!

我已经很认真地说过了哦,在后面的章节里要是你再跟我说我就是把你的代码复制进去的(但是你没有补全完整的结构),为啥不起作用?我肯定不会告诉你的哦~(我能说我已经被这么咨询了无数次了么?)

好了,言归正传,简单吧,当然很简单,就是找对位置写一句话而已,于是呢,效果也很简单,就是空白的页面里显示着一句话而已。我们不甘心的哦~想想我们前面学了加粗呢,来试试哦:

Hello world!Code is so <b>easy</b>!

你说这简直是废话!早就会了啊,你能不能说点新鲜的?好,我们来给它做个分段哦,一句话一个段落。Word 里面我们就是加个回车分隔开两个段落就可以了,那么在代码里这个办法不好用哦,因为回车啊,空格啊什么的是被忽略的(在某些特殊情况下不是)。所以我们要学习一个新的标签 <p>这里面是一个段落哦</p>,来看代码:

<p>Hello world!</p>
<p>Code is so <b>easy</b>!</p>

第一段不用说了,很简单很明白的,来看看第二段,首先是 p 标签标记了整个段落,然后段落里面有 b 标签标记的加粗。这种一层套着一层的情况我们叫做标签的嵌套,记得标签嵌套的原则是:内层标签要完整的包含在外层标签之内,我们来看例子哦:

<p>Hello <b>world!</p>
<p>Code</b> is so easy!</p>

上面的意思是希望让 world! Code 加粗显示,但是 b 标签却跨越了两个段落,这就错了哦,我们要写成:

<p>Hello <b>world!</b></p>
<p><b>Code</b> is so easy!</p>

这样才对,那么对此的总结是 “你家有老婆,我家有老婆,但是你的老婆是你的老婆,我的老婆是我的老婆,咱俩关系再好,也不可以共用一个老婆!” 那么一说一笑就记住了哦~~

本章学习卡片:卡片 6


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me