终于我们开始写代码了呢,但是真的动手以后会发现一些迷茫,因为虽然我们已经讲了好多东西,但是真正写的时候,还是会遇到一些没有讲到的细节[1],那么我们来做一个补充。

代码要用英文标点哦

这是新手期间最容易忽视的一个问题,那么我们的代码是用英文去写的,所以代码中涉及到的标点当然也应该用英文书写,这是一个非常理所当然的事情。当然,你要区分一下,哪里算是代码,哪里算是内容。

要有写注释的好习惯

目前我们所写的代码还都非常简短,也很简单,所以不会有什么困扰。但是习惯一定要从最开始培养,用注释来标注自己的代码都是用来做什么的,也方便自己回顾。

做好缩进十分重要

可能你已经发现了,我写的代码,在很多行前面会有一定的空白,而且长短不一。这个叫做缩进,是用来表明代码的层级的。因为有了整齐的缩进,才让代码变得更加容易阅读。我们使用 Tab 键来添加缩进。举个简单的例子,比如 第七章 基本模板 讲到的网页模板,我们看一下 html 这个标签。

<html lang="en">
</html>

这是一对标签,我先写下来,顺便说,成对的标签一定要一起写,倒也没什么特别的原因,就是省的忘掉写另一半,这么硬生生拆散人家,多不好,同理,括号啊、引号啊什么的,要写就一起写一对,免得忘了。

那么这里面还有内容对不对?被 html 标签套在里面的是 headbody 两个标签,于是我们就要缩进了:

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

看出来了吧,因为他们都是 html 标签的下一层级,所以前面都加了一个 Tab 的缩进。所以同一层级,有着同样长度的缩进,而每一个元素的起始标签和结束标签(如果不在同一行),前面的缩进长度一样。

继续写,head 标签里还有一些内容,比如说标题(title),

<html lang="en">
  <head>
    <title>Meow~</title>
  </head>
  <body>
  </body>
</html>

因为 titlehead 里面的内容了,所以在 head 的基础上再缩进一层。当然在 body 元素中也是同样的,总之就是一层一层的往里(右)推进。

<html lang="en">
  <head>
    <title>Meow~</title>
  </head>
  <body>
    <h1>为了缩进这个问题,我们费了不少的篇幅呢~</h1>
    <p>所以 <strong>一定要</strong>用心把它们搞明白哦~要不然小老鼠就要伤心的哭唧唧了呢~</p>
  </body>
</html>

你看这样,结构是不是显得特别清晰易读了呢??那么缩进就先说到这,大家在使用中仔细观察,而且我们后面还会对这些知识进行补充。

空白并不会对内容造成影响

此时,有一个疑惑越来越重了,我们代码中出现这么多空白,会不会有影响呢?

一般的我们会说,在代码中插入这些空白,不会产生影响。不过其实还是有一些影响的,首先空白的多了,文件会大(谁在乎呢。然后呢,用的好的话会让你的代码显得非常清晰易读,用得不好,会让你的代码十分混乱。

注意一下,上面代码中,我故意在 strong 标签前面写了一个空格。这个空格是会产生影响的,不过你也可以试试,把这个空格,换成多个空格,又会怎样。这些问题我们后面会慢慢的去讲。

不过在这里可以解释上节课的一个问题了,我们在文字中用回车换行并不能真正的形成段落,所以我们要特意的标记一下从哪里到哪里是一个段落。

【本章助记卡片:卡片 for 第九章

>注释 1: 所以读懂了,并不等于学会了,还是要实际动手操作一下,看看会不会遇到自己没有想到的问题,把这些问题都解决掉,才算是真的学会了。