网页不仅要显示内容，还要美观，比如设置网页的背景色、字体的颜色、字体的大小。如果要给不同部分设置不同的样式，需要两个标签
和。
这两个标签没有具体的含义，只是用来区分区域的，比如现在我想设计一个网页，上面是标题栏“猫哥的文章大全”，左边是菜单栏“文章一、文章二、文章三”，右边是具体的内容栏即“每篇文章具体的内容”。
这样的话，可以设计为
<html> <body> <div id="title">猫哥的文章 </div> <div id="menu"> <span>文章一</span><span>文章二</span><span>文章三</span> </div> <div id="content"> 这篇文章很精彩 </div> </body> </html>
运行一下代码，就发现了，
与虽然都是包裹内容的标签，但是
前后自动换行，前后不换行，一般来说分区域的时候都是需要换行的，所以
标签很火，经常在市面上看到相关字样的教程，其实
标签就是网页上用来划分区域的标签而已，具备了一个换行的功能。
好了，既然是要划分区域，那么区域的位置和样式肯定要有区别（没区别划分区域干嘛？），那这个位置和样式就要借助CSS来实现了！CSS也是一种语言，用来描述网页样式的（样式的意思就是外观），举个例子先，它一般借助html标签的style属性来实现。例如：
猫哥的文章
。
style属性中可以写多个样式，中间用分号分割即可。
到了这一句，有两个挺大的问题，第一，怎么有个id=“title”，id是干嘛的？第二，感觉代码好乱，不舒服。
解释下，id是标签的唯一标识，之前也说过name是标签的名字，可以这么理解，id就是标签的身份证号、name就是标签的姓名。CSS可以通过id找到唯一一个标签，然后设置这个标签的样式。
这句加粗字体的话，说明了第二个问题的解决办法。可以用下面的代码实现与
猫哥的文章
同样的效果。
<html> <head> <style type="text/css"> #title{color:red;font-size:30px;} </style> </head> <body> <div id="title"">猫哥的文章</div> <div id="menu"> <span>文章一</span><span>文章二</span><span>文章三</span> </div> <div id="content"> 这篇文章很精彩 </div> </body> </html>
解释下，部分只有区域（div）和内容，所有跟样式、显示相关的放在标签下的标签中，其中type=“text/css”，表示使用css语言来描述style(样式)。</div><div>#title中，#表示按id选取，所以是选取id="title"的标签，然后{color:red;font-size:30px;}中，大括号表示前面选取的样式在大括号中设定。然后就是颜色的为红色、字体大小为30px，以:分割设定内容和设定值。</div><div><br /></div><div>其实，在html中也有一些描述样式的标签，但是建议统统忽略，html表现主题内容和分区，具体分区的位置和区域内的样式，交给css吧。这样也有个很大的好处，程序员写html，css神马的，就交给美工吧！（在现实中，有很多极端，有的公司程序员包打天下，前端到后端到数据库全干了，有的公司html和css是美工的，程序员纯后端，不管哪种，都应该了解html、了解css，猫哥属于能读懂html和css，能写，但是要弄得漂亮美观，这个还需要2亿多个艺术细胞啊）。</div><div><br /></div><div>至此，我们把这个网页分为了3部分，还设置了标题部分的颜色和字体，但是我们想要的，标题栏在上面、左边菜单栏、右边内容，还没实现，这就牵扯到布局啦，布局实际上也属于样子方面的，可以依赖CSS实现，在下一篇手记再实现吧！</div><div><br /></div>
