想到你马上就可以做出属于自己的wordpress主题，是不是很激动也很兴奋？请淡定，这篇文章还是不会告诉你如何编写主题代码，咱们需要继续打基础，作为一只菜鸟，需要有打好基础的觉悟；了解php、html、css文件的基础性语句书写规范，构建wordpress主题页面结构框架图，这是本文需要完成的任务。
先来个最简单的，我给它起了个名字叫“有始有终”，就是说无论你写的是html语句、php语句、还是css语句，有开头还必须有结尾，程序语句始终保持闭合状态，浏览器才能正确解析并且显示出想要的效果来。
比如，在html代码中，<body>代表你开启了一个代码的开关，当你把想写的代码写完之后，你必须要使用一个</body>符号来关闭这个代码开关，这不仅符合程序编码的要求，还具有一种对称的美感，大家想一想是不是这个道理？<body>只是我举得一个例子，在html中的其他标记也要遵守有始有终的原则，这个很容易记住，再多举几个例子吧，只要出现了<div>, 那么它的后面必须有一个</div>和它配对，出现了<h1>, 后面也必须有一个</h1>和它配对。
有始有终原则在php语句中也是必须遵守的，一个规范化的php语句的格式：<?php 代码1;代码2; ?> ，大家看到了吧，所有的php程序语句都要以<?php 开头，以?>配对结尾，每一句代码之间还要使用英文的分号进行隔开。嘿嘿，这个配对不是完全对称啊，没办法，人家就是这样规定的。
css语句中的配对就更容易了，它是用花括号来进行语句的打开和关闭的，即用{ 符号来打开一个语句，再用 } 符号来关闭一个语句。举个简单的例子吧，body{background-color:red;} ，这就是一个最简单的css语句啦，花括号外面的东西告诉浏览器你的css设置要施加到谁的身上，很显然，这句代码是要施加到body身上的，body是什么？就是你的整个电脑屏幕！花括号里面的东西，告诉浏览器你想要的效果是什么，这句代码是定义背景颜色的，它将你的整个电脑屏幕的背景颜色定义成了红色。ok，就这么简单。
好了，上面的有始有终原则希望大家一定要记住。接下来我们讲网页结构的知识。
wordpress主题文件虽然是php编码的，但是它依然摆脱不了html的影响，它还是需要使用html标记进行网页结构的布局。插一句，网上讲解css的教程中提到了“盒子”模型，其实我觉得html网页结构也可以认为是一个个的“盒子”，当然更好的比喻是“拼图”，整个网页是一个拼好的大图片，不同的标记代表的就是一小块一小块的小图片。拼图游戏大家都不陌生，应该更好理解。
常用的html语法标记符号，body、div、p、span、h1~h6；现在由于html5的引入，又增加了header、footer、section、article、aside等标记符号。有没有感觉头有点晕？没关系，你就把这里每一个语法标记符号想象成一个个的小图片，下面我们就要用它们来玩拼图游戏，拼成一个网页。一定要记住，在拼图的时候有一个有始有终原则要遵守哈。
下面展示一下咱们即将制作的这个主题的网页结构示意图，鼠标单击可以放大，看的更清楚一些。
我相信，大家都能看懂我是怎么拼的这个图了吧？不就是用一小块一小块的排列起来，然后就构成了最大的那个wrapper图片么？对不对？不明白的欢迎给我留言探讨哈。
下面我来给出上面这个拼图效果的html编码，很容易的，大家都能看懂的我相信。
<div id="wrapper">
<header>
</header>
<section id="main">
<section id="posts">
</section>
<aside id="sidebar">
</aside>
</section>
<footer id="footer">
</footer>
</div>
有始有终的原则，大家检查一下我的代码，是不是都完美的实现了？解释一下id是用来干什么的，以免有看不懂的。id其实是css的专用选择器，它就像是身份证号码似的，咱不是上面说了嘛，像div、header等都好比是拼图，那么id就是相当于给拼图编号或者说是起名字啦，比如下面的这句代码，它的意思就是告诉浏览器，我是一个名字叫做wrapper的div，就这么简单。
<div id="wrapper"></div>
over，这一篇文章的内容你掌握了吗？
发表回复