不管你在刷朋友圈,还是在购物,或者在看新闻,你所看到的都是浏览器呈现给你的。

现在的网页一般都很复杂,里面有各种图片、不同字体和颜色的文字、音频和视频、动态菜单等等。但在呈现到你眼前之前,浏览器从网络另一端的服务器上得到的只有一行行的代码。它要把那些杂乱的代码变成一副规整的画面,把页面中的各种元素准确地展示给你看,不能把它们的位置、颜色、大小、动态效果搞错;还要准确响应你做的各种操作,比如你向上滑了一下手指,它就要在屏幕上画一副新的画面,并且还要有动态效果。

虽然程序猿会用几种不同的技术(比如CSS、JavaScript、JSON)来共同控制你最终看到的画面,但最基本的就是HTML。可以说没有HTML,就没有网页,浏览器呈现页面的第一步,也是从解读HTML开始的。如果你对藏在屏幕后面的HTML感兴趣,请继续往下看。

HTML是个什么鬼?

HTML是欧洲核子研究中心的物理学家蒂姆·伯纳斯-李在1980年前后发明的,他的初衷是为了让科学家们更方便地表达和分享知识。在HTML出现之前,人们在互联网上只能用电邮等技术传送普通的文本。现在大家经常说的H5,就是HTML第5版。

HTML是超文本标记语言的缩写,它根据页面中不同内容的类型(比如文字、图片、音频、视频等)定义了一组元素,这些元素中可以包含一个或多个标签。页面中的内容就放在这些标签中,或者标签本身就是内容项。所以标签看起来就像括号一样,一般都是成对出现的。比如要在页面中显示一个按钮,对应的标签就是 <button>OK</button>。看到了吧,很简单,开始标签就是把一个英文单词放到一对尖括号里,结束标签只是在单词前加了一个反斜杠。有些元素只需要一个标签,比如表示换行的<br/>,可以把结束标签省略掉,并把反斜杠/放到右尖括号>前面就可以了。

浏览器就是根据这些标签来决定该如何“呈现”页面中的“内容”的。比如下面这个最基本的HTML代码,它会在页面上显示一行文字:我是一个栗子...

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
      <p>我是一个栗子...</p>
      <!-- 我是一个注释 -->
      <!-- body中的标签就是浏览器要显示的内容 -->
  </body>
</html>

大多数电脑上的浏览器都可以看到页面的代码,如果你用chrome的话,只要在页面上点击鼠标右键,然后选择“审查元素”,就能看到上面这种代码了。刚开始看可能会吓到你,因为大多数页面中都会有非常非常多的代码,但只要你仔细看,总能找到<html><head><body>这几个标签,它们也会遵循上面的结构。

好吧,我知道这看起来并不像一棵树。但在程序猿的世界里,这个结构确实叫做树,老师就是这么教的。如果你坚持要看到树,我可以给你画一棵。

enter image description here

接下来我会继续深入,介绍上面提到的那些概念。不过你也可以现在就开始动手,在浏览器中访问Mozilla Thimble。这是一个交互式的在线编辑器,可以教你怎么编写HTML代码。另外你也有必要看一下 HTML 元素 列表,里面有所有的HTML元素和它们的用途。

元素--垒页面的砖块

HTML是由元素构成的,元素包含一对相互匹配的标签和这两个标签中的任何东西。HTML给每个元素定义了一个明确的语义,比如<p>我是一段文本</p>,表示一段文本,<img src='images/img.jpg'/>表示要显示一个放在'images目录下,名为img.jpg的图片。

有些元素有非常明确的含义,有些没有,还有些是出于技术需要而定义的,可能根本不需要显示。但大多数元素都可以包含其它元素,就像在一个大盒子里放进一个小盒子一样,从而形成一个层级结构,也就是我们说的树。html就像树干一样,head是一个树枝,body也是个树枝,在body中又会分出好多不同的树枝。这个层级结构被称为DOM(文档对象模型)。

标签

HTML文档都是用普通的文本编写的,你可以用任何编辑器编写,记事本也行。编辑完后,保存为后缀名为.html或htm的文件,双击浏览器就会自动打开它。不过我们一般都用专业的编辑器,比如Sublime Text,因为这种专业的编辑器能识别出HTML语法,然后用不同的颜色显示不同的元素。

所有放在小于号<和大于号>之间的东西都叫标签,HTML都会特殊对待,如果出现没有结束的标签,或者标签不是成对出现的,HTML都会报错。比如:

<em>I <strong>really</strong> mean that</em>

如果写成这样就是错的(注意看<strong>的位置):

<em>I <strong>really</em> mean that</strong>

属性

开始标签中可以放入额外的信息,一般是 ‘名称=值’这种格式,这些额外的信息叫做属性。有些属性也可以只放名称。比如<img src='images/img.jpg'/>中就有个名为src的属性。属性值之间如果有空格,必须用引号引上。

命名字符引用

因为HTML语法给一些字符赋予了特殊的含义,所以要显示这些字符时,必须用特殊的形式代替,比如小于号<和大于号>,如果要显示它们,只能用&gt;&lt;,这样的命名字符引用有很多,感兴趣可以看一下这里

注释和doctype

编程的时候,最重要的就是注释了,因为时间长了很容易忘。在HTML里面可以把注释放在<!---->之间。我们可以在代码中看到注释,但浏览器又不会把它显示在页面中。

除了标签,文本内容和命名字符引用,HTML还必须在第一行声明doctype,以便告诉浏览器页面是用哪个版本的HTML写的,对于HTML 5来说,只要记住写成<!DOCTYPE html> 就可以了。

关于HTML我们就介绍这么多,只要你掌握了那些标签的含义,就可以写自己的页面了。