你知不知道屏幕后面长了一棵树_html/css

你知不知道屏幕后面长了一棵树_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:46:51

Original

1357 people have browsed it

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

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

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

HTML是个什么鬼？

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

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

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

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

Copy after login

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

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

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

元素--垒页面的砖块

HTML是由元素构成的，元素包含一对相互匹配的标签和这两个标签中的任何东西。HTML给每个元素定义了一个明确的语义，比如

我是一段文本

，表示一段文本，

表示要显示一个放在'images目录下，名为img.jpg的图片。

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

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

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

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

Copy after login

如果写成这样就是错的（注意看 的位置）：

<em>I <strong>really</em> mean that</strong>
Copy after login

属性

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

命名字符引用

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

注释和doctype

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

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

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