首先，一个前端最基本的就是排网页，有人会看不起拍页面，认为不就是排一个页面嘛，有啥的，分分钟的事，可是他不知道的是，一个网页中也包含了很多内容，像我们如果不理解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="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="js/jquery.js"></script>

　　那上面就是我们排一个最基本的构成，不要小看这些东西，每一个部分都需要我们不断的探索，才能在前端的道路上走的越来越稳。

PC端网页的基本构成的更多相关文章

  1. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  2. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  3. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

  4. 自适应PC端网页制作使用REM

    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...

  5. pc端网页，移动端网页（andorid、ios）离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

  6. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  7. PC端网页嵌入百度地图

    1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文件 参考网址:https ...

  8. 手机测试pc端网页

    在这个问题上徘徊了 一个钟头了,终于被我找到方法了,就赶紧记下来,以后好查阅!! 主要问题在防火墙,防火墙阻当了80端口,所以怎么用手机访问都是访问不了的.把防火墙关闭就好了! 贴上httpd-vho ...

  9. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

随机推荐

  1. Java 9 尝鲜之JShell交互式编程环境

    JShell--Java 9 的交互式编程环境 本文要求读者有基本的 Java 知识. Tips Java 9 的代码由于提供了新特性,所以有些代码并不支持向后兼容.也就是说,用 Java 9 写的代 ...

  2. MySQL元数据库——information_schema

    平时使用MySQL客户端操作数据库的同学,只要稍微留神都会发现,除了我们建的库之外,还经常看到三个数据库的影子: 1. information_schema 2. performance_schema ...

  3. 美团点评DBProxy读写分离使用说明

    目的 因为业务架构上需要实现读写分离,刚好前段时间美团点评开源了在360Atlas基础上开发的读写分离中间件DBProxy,关于其介绍在官方文档已经有很详细的说明了,其特性主要有:读写分离.负载均衡. ...

  4. 腾讯云上Selenium用法示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:崔庆才 前言 在上一节我们学习了PhantomJS 的基本用法,归根结底它是一个没有界面的浏览器,而且运 ...

  5. 【mysql】关于InnoDB表text blob大字段的优化

    最近在数据库优化的时候,看到一些表在设计上使用了text或者blob的字段,单表的存储空间已经达到了近100G,这种情况再去改变和优化就非常难了 一.简介 为了清楚大字段对性能的影响,我们必须要知道i ...

  6. 使用 ItextSharp HTML生成Pdf（C#）

    以前生成pdf的时候.因为生成的pdf数据是固定的,所以先做好pdf模板,动态的数据可以先用占位符 生成的时候.找到占位符坐标.把数据填充进去 优点:先做好模板.生成的pdf 表格.文.内容会好看一些 ...

  7. Elasticsearch搜索之cross_fields分析

    cross_fields类型采用了一种以词条为中心(Term-centric)的方法,这种方法和best_fields及most_fields采用的以字段为中心(Field-centric)的方法有很 ...

  8. HTML基础的基础

    今天咱们来看一下有关HTML的相关基础内容 学过.net的对HTML不会陌生 但是对于想单纯的了解下HTML的可能对他不是很了解 男的可以这么理解HTML=How To Make Love 咳咳,请上 ...

  9. （函数封装）获取class名称

    使用原生JavaScript,获取类操作符时:即使使用getElementByClassName,在Firefox和IE9以下是不兼容的.Firefox下是可以用它获取的到元素而IE不行,一般框架都会 ...

  10. 【数据库系列学习一】Access与Excel的区别和联系

    1.主题对一个主题Access只有一个表,而Excel可以有多个表.2.多表关系Access表各个表间存在严格的关联.Excel表各个表间的关系随意.3.数据计算Excel表中单元格中可以存储数据,也 ...