首页 > 代码库 > PC端网页的基本构成
PC端网页的基本构成
首先，一个前端最基本的就是排网页，有人会看不起拍页面，认为不就是排一个页面嘛，有啥的，分分钟的事，可是他不知道的是，一个网页中也包含了很多内容，像我们如果不理解margin，padding，会经常对我们的页面造成困扰。
言归正传，一个网页，由三个层构成：结构层（html）、表示层（css）、行为层（js）。接下来我们分别来介绍一下，以及我们在页面中怎么用和链接进页面。
1>结构层（html）：
所谓的结构层就是一个框架，就想我们盖房子，得让这个房子的框架先出来。那么这个html的构成呢其实很简单，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
那么，上面呢就是我们一个页面的基本结构，我们接下来就只需在<body></body>里放入我们所需的标签，这个我们后面再详细介绍。
2>表示层（css）
刚刚我们说了结构层是一个房子的框架，那么表示层（css）呢就是我们开始装扮一个房子，我们想让这个房子是蓝色的，还是紫色。想让她处于北面还是南面，给大家举个简单的例子：
<div class="box"></div>
.box{
width:100px;height:100px;background:blue;
}
好，这个大括号里写的就是我们所说的样式，就是这个盒子她长什么样。那么box前面的这个点代表的是class名，这个后来我们慢慢解释。有人说我写了一大堆样式，必须要放在一个文件里吗，当然不是，而且我们也不建议这样做，因为这样会使页面的加载速度慢，那么我们可以把我们写的一大堆样式放在一个文件里，文件的后缀名为.css。那我们怎么和页面建立一个联系呢，我们这给大家说个标签link,她呢放在head里就可以，像这样<link rel="stylesheet" href="http://www.mamicode.com/css/index.css">，index.css就是我们的css文件，也可以叫层叠样式表。
其实，css放入html里有三种方式，第一种就是我们上面介绍的，外链，也是我们比较推荐的；第二种，内嵌，也就是style <style></style>。吧我们写好的样式放入里面就okay了，比如
<style>
.box{
width:100px;height:100px;background:blue;
}
</style>
第三种，行内，这种我们一般不推荐，写法很简单，<div style="width:100px;height:100px;background:blue;"></div>
3>行为层（js）
最后一个就是行为层（js）,这个呢是最重要的一个，这个重要不仅仅指的是页面的一个重要部分，也是关于我们以后在前端道路上要重点发展的一个，这个还是希望大家要好好掌握，那他的链入方式和css和一样，比如 <script src="http://www.mamicode.com/js/jquery.js"></script>
那上面就是我们排一个最基本的构成，不要小看这些东西，每一个部分都需要我们不断的探索，才能在前端的道路上走的越来越稳。
PC端网页的基本构成