<div id="basc" class="gn_content">
<div class="gn_box">
这里是帖子排版滴进阶教学，嘘（禁声），敲黑板（咚咚咚）。 *本站禁止HTML标签噢*
好吧，与其说是进阶，其实是现对上个版本而言的。这里将从零开始教会你所有必须的知识，对，从零开始。 *本站禁止HTML标签噢*
</div>
<div class="gn_title"> *本站禁止HTML标签噢* </span>标签</div>
*本站禁止HTML标签噢*
你所见之的技术宅社区的全部网页内容，寻根究底，无非是基于HTML语言的一系列HTML文档，如同用World编写一系列的doc文档。
而我们说发布的帖子，就如同你给一份原有的world文档增添新的一个章节。（想象一下这个画面）
</p>
*本站禁止HTML标签噢*
首先打开你的浏览器(Chrome、或者火狐，或者任何一个除老土的IE以外先进的浏览器)，打开百度首页（www.baidu.com）或者浏览其它任何一个网站，
敲击键盘上的F12按键打开开发者工具，你便可了然一份网页的真身，如图所示。
</p>
*本站禁止HTML标签噢*
单点击左边的三角折叠起来其中复杂的内容后，显而易见，一份HTML文档，是以一系列相互嵌套的尖括号包裹的标签构成的。
用拙劣的英文水平将其翻译，可得：整个HTML文档，首尾以“HTML标签”包裹，随之而来的是一个“头部标签”——head，紧接着是一个“身体标签”，而后……就没有而后了。
网页的全部结构便呈现于此。事实上， *本站禁止HTML标签噢* 标签，是构成网页结构的基本单元（元素）</strong>。
</p>
*本站禁止HTML标签噢*
通常来说，网页所要呈现在浏览器上面的内容都写在body标签里面，如下图所示。而head标签，则是给浏览器在加载页面的时候读取信息用的。例如
我们可以像下面的这份代码一样，给head标签里添加一个title标签，顾名思义，是标题的意思，那么浏览器在读取的时候，就将标题呈现在
网页的顶端。
</p>
<!doctype html>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* 我是标题</title> <!--注释：呈现在网页顶端-->
</head>
*本站禁止HTML标签噢*
我是正文内容 <!--注释：呈现在网页正文空白处-->
</body>
</html>
*本站禁止HTML标签噢*
HTML文档里有各种各样的标签，如同给world文档添加字体、字号、段落一样，HTML文档通过标签给内容添加各种效果。比如，我们可以使用p标签来
生成一个段落，使用br标签换行（br标签不是成对的，一个标签代表一行），使用strong标签来给文本加粗（粗体）等等。HTML的常用标签，借助万能的百度，
你可以轻而易举地学习到很多，这里便不再赘述。
</p>
<div class="gn_title"> *本站禁止HTML标签噢* </span>盒子和样式</div>
*本站禁止HTML标签噢*
前面我们了解到了，标签是构成网页文档的基本单元，那么现在我们来学习一个万能的标签，它叫做“div”。打开一个记事本，输入如下内容，保存为HTML文档
而后使用浏览器打开即可看到效果。
</p>
<!doctype html>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* 我是标题</title>
<meta charset="utf-8"> <!--注释：这里不懂可以百度一下哦-->
*本站禁止HTML标签噢*
#div1{
background:grey;
color:white;
}
#div2{
background:red;
color:white;
width:200px;
height:200px;
}
</style>
</head>
*本站禁止HTML标签噢*
<div id="div1">我是没有定义宽高，灰色背景的div1</div>
<div id="div2">我是宽高为200像素，红色背景的div2</div>
</body>
</html>
*本站禁止HTML标签噢*
我们在body标签里面加上了一个style标签，顾名思义，样式、风格、主题的意思。前面我们提到过，head标签里面写的内容是给浏览器读取的，
现在我们便将body标签里的两个div，我将它们分别写上了id，为div1和div2，添加了样式规则。（其中的英文很好理解，就不解释了，字体颜色
、宽高、背景颜色什么的）那么浏览器读取的时候，就会按照我们规定的规则，将div呈现出来。如下图。
</p>
*本站禁止HTML标签噢*
注意一条特征，div标签在没有定义宽度的时候是100%宽度，即撑满整个浏览器页面，那么我们可以将div标签理解成一个你可以任意定义的盒子，
你希望它长成什么样，完全取决于你在style标签里给他的样式。关于style标签和div的更多内容，欢迎通过百度了解。
</p>
<div class="gn_title"><span class="gn_title_red"></span>脚本，算法和数学</div>
*本站禁止HTML标签噢* 在body标签还有一个奇特的标签，叫做script标签，在这里放置的东西，是可以进行数学运算的。要学习这个概念之前，请先准备两个工具，一个是记事本，一个是浏览器。</p>
<div class="gn_title"><span class="gn_title_red"></span>变量</div>
*本站禁止HTML标签噢*
我们前面有提供网页的基本结构，将其全部复制到记事本，清空body标签里面的全部内容，并另存为后缀为html的文档，用浏览器打开查看效果。
每操作一次可以刷新一下浏览器查看最新的效果。
</p>
*本站禁止HTML标签噢* 我们在head标签里面添加一个script标签，并在里面写上“var a = 3; alert("a")”。你写完后的效果应该是如下的样子。</p>
<!doctype html>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* 我是标题</title>
*本站禁止HTML标签噢*
var a = 3;
alert(a);
</script>
</head>
*本站禁止HTML标签噢*
</body>
</html>
*本站禁止HTML标签噢*
打开浏览器运行后，你会发现它弹出了一个“数字3”。什么意思捏？在script标签里面，可以写上一段数学运算脚本，通过var关键字，可以定义
一个变量。这里，我们把a变量的值设定为3；而后我们通过alert来弹出a变量的值，也就是3。alert(XXX)是什么？alert可以帮助我们召唤浏览器
的弹窗，对我们定义的各种数学量进行呈现，比如括号里面放的便是需要呈现的东西的名字，比如这里我们就希望它呈现变量a的值。
</p>
*本站禁止HTML标签噢*
你可以多加尝试，比如这样写“var a = 3 + 5;alert(a)”弹出来的一定是8，请注意在script标签里，所有的量都可以“计算”。你也许注意到了分号，
一句话的结束，可以在尾部加上分号，这样就避免了换行的麻烦，总之需要一个分隔符把它们隔开。script的中文名叫做“精灵”，或者“脚本”，这里翻译
为脚本更合适。写脚本的时候，需要一句一句来，每句话结束用分号隔开。你还可以做这样的尝试：“var a = 3;var b = 9;alert(a+b)”。你可以很容易理解
什么叫做一句话。这里的一句话，我们称为“语句”。
</p>
<div class="gn_title"><span class="gn_title_red"></span>数组</div>
*本站禁止HTML标签噢*
很多时候，我们也许需要一个一行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开始算位置的，但是这是电脑的特性，即规定了从零开始计数，我们记住它即可。
</p>
<div class="gn_title"><span class="gn_title_red"></span>数组</div>
</div>
