1、第一步，还是打开软件，建立一个HTML文档，然后在<body>和</body>之间添加你要显示的所有内容；
2、绝大多数网页，都是由div换个标签（尖括号包含的就是标签）来标注出各个内容板块和区域，也可以说是，人的身体上的各个外在部位（眼睛、鼻子、嘴巴、耳朵、眉毛等等）；网页多数都是左右结构，上下结构，或者上下左右一起用。
3、接下来看一下代码：<body>&盟敢势袂lt;div class="head" style=&qu泠贾高框ot;height:100px;width:100%; background-color:#C00;display:block"> <h1>菜单栏</h1> </div> <div class="body" style="height:500px;width:100%; background-color:#F60;display:block"> <h1>主题内容</h1> </div> <div class="footer" style="height:100px;width:100%; background-color:#999;display:block"> <h1>联系方式 版权</h1> </div></body>这里面有三个div标签分别给他们起了名字是：head、body、footer,（为什么用class给他们起名？这个你目前可以忽略，直接用就行了）；1、从三个名称上能看出来我们把网页分为了三个大部分（其实电脑真的很笨，你必须要把所有细节都告诉他才行）；2、至于每个每个div标签中都有一个style是干嘛的？装饰呗，高度，宽度，背景色，display干嘛的？定义这个div为一个盒子类型，去掉了可就显示不出啦了，还有其他的定义，目前也先别忙着研究3、这三个div都有结束标签</div>千万别乱包含在一起
4、而这里的代码是干嘛的？你最好先看看跟上面的div相互包含有什么不同？<body st鲻戟缒男yle="text-align:center;&鳎溻趄酃quot;> <div class="head" style="height:100px;width:100%; background-color:#C00;display:block"> <h1>菜单栏</h1> </div> <div class="body" style="height:500px;width:100%; background-color:#F60;display:block"> <!--h1>主题内容</h1--> <!---/******这里是网页的主要内容******/--> <div class="left" style="height:500px;width:70%; background-color:#39F;display:block"> <h1>左边内容</h1> </div> <div class="right" style="height:500px;width:30%; background-color:#FF0;display:block"> <h1>右边内容</h1> </div> </div> <div class="footer" style="height:100px;width:100%; background-color:#999;display:block"> <h1>联系方式 版权</h1> </div></body>这里在主体class="body"的div中有加了两个div盒子（层）来定义主体的左右结构内容，看到这里，你在去看看任何一个网站，鼠标放在网页里右键“查看源代码”去多看看，是否所有网站都是这样来的呢
