你所见之的技术宅社区的全部网页内容，寻根究底，无非是基于HTML语言的一系列HTML文档，如同用World编写一系列的doc文档。 而我们说发布的帖子，就如同你给一份原有的world文档增添新的一个章节。（想象一下这个画面）

首先打开你的浏览器(Chrome、或者火狐，或者任何一个除老土的IE以外先进的浏览器)，打开百度首页（www.baidu.com）或者浏览其它任何一个网站， 敲击键盘上的F12按键打开开发者工具，你便可了然一份网页的真身，如图所示。

单点击左边的三角折叠起来其中复杂的内容后，显而易见，一份HTML文档，是以一系列相互嵌套的尖括号包裹的标签构成的。 用拙劣的英文水平将其翻译，可得：整个HTML文档，首尾以“HTML标签”包裹，随之而来的是一个“头部标签”——head，紧接着是一个“身体标签”，而后……就没有而后了。 网页的全部结构便呈现于此。事实上，标签，是构成网页结构的基本单元（元素）。

通常来说，网页所要呈现在浏览器上面的内容都写在body标签里面，如下图所示。而head标签，则是给浏览器在加载页面的时候读取信息用的。例如 我们可以像下面的这份代码一样，给head标签里添加一个title标签，顾名思义，是标题的意思，那么浏览器在读取的时候，就将标题呈现在 网页的顶端。

HTML文档里有各种各样的标签，如同给world文档添加字体、字号、段落一样，HTML文档通过标签给内容添加各种效果。比如，我们可以使用p标签来 生成一个段落，使用br标签换行（br标签不是成对的，一个标签代表一行），使用strong标签来给文本加粗（粗体）等等。HTML的常用标签，借助万能的百度， 你可以轻而易举地学习到很多，这里便不再赘述。

前面我们了解到了，标签是构成网页文档的基本单元，那么现在我们来学习一个万能的标签，它叫做“div”。打开一个记事本，输入如下内容，保存为HTML文档 而后使用浏览器打开即可看到效果。

我们在body标签里面加上了一个style标签，顾名思义，样式、风格、主题的意思。前面我们提到过，head标签里面写的内容是给浏览器读取的， 现在我们便将body标签里的两个div，我将它们分别写上了id，为div1和div2，添加了样式规则。（其中的英文很好理解，就不解释了，字体颜色 、宽高、背景颜色什么的）那么浏览器读取的时候，就会按照我们规定的规则，将div呈现出来。如下图。

注意一条特征，div标签在没有定义宽度的时候是100%宽度，即撑满整个浏览器页面，那么我们可以将div标签理解成一个你可以任意定义的盒子， 你希望它长成什么样，完全取决于你在style标签里给他的样式。关于style标签和div的更多内容，欢迎通过百度了解。

在body标签还有一个奇特的标签，叫做script标签，在这里放置的东西，是可以进行数学运算的。要学习这个概念之前，请先准备两个工具，一个是记事本，一个是浏览器。

我们前面有提供网页的基本结构，将其全部复制到记事本，清空body标签里面的全部内容，并另存为后缀为html的文档，用浏览器打开查看效果。 每操作一次可以刷新一下浏览器查看最新的效果。

我们在head标签里面添加一个script标签，并在里面写上“var a = 3; alert("a")”。你写完后的效果应该是如下的样子。

打开浏览器运行后，你会发现它弹出了一个“数字3”。什么意思捏？在script标签里面，可以写上一段数学运算脚本，通过var关键字，可以定义 一个变量。这里，我们把a变量的值设定为3；而后我们通过alert来弹出a变量的值，也就是3。alert(XXX)是什么？alert可以帮助我们召唤浏览器 的弹窗，对我们定义的各种数学量进行呈现，比如括号里面放的便是需要呈现的东西的名字，比如这里我们就希望它呈现变量a的值。

你可以多加尝试，比如这样写“var a = 3 + 5;alert(a)”弹出来的一定是8，请注意在script标签里，所有的量都可以“计算”。你也许注意到了分号， 一句话的结束，可以在尾部加上分号，这样就避免了换行的麻烦，总之需要一个分隔符把它们隔开。script的中文名叫做“精灵”，或者“脚本”，这里翻译 为脚本更合适。写脚本的时候，需要一句一句来，每句话结束用分号隔开。你还可以做这样的尝试：“var a = 3;var b = 9;alert(a+b)”。你可以很容易理解 什么叫做一句话。这里的一句话，我们称为“语句”。

很多时候，我们也许需要一个一行n列的表格来存储一系列的值，那么，当我们使用“var a = 3;var b = 5;var k = 18;”诸如此类的变量未免太过于麻烦。 此时我们可以使用数组来存储一系列的值。使用一对方括号来生成一个数组：“var array = [3,4,17]”。其实，var关键字可以定义任何东西，而非仅仅是变量。 我们通过使用“alert(array[0],array[1],array[2])”来分别弹出数组array在第0个位置，第1个位置和第2个位置存储的数值，那么弹出的结果自然是3,4和17。 我们也许会很奇怪为什么是从0开始算位置的，但是这是电脑的特性，即规定了从零开始计数，我们记住它即可。