当你输入一个url链接发生了什么？

  • 下面的图是上篇文章的改造版本

电脑浏览器输入百度

  • 打开台式电脑或者笔记本中的浏览器（IE，谷歌，360等），访问百度http://www.baidu.com，此时发送打开百度的请求给服务器，服务器接受到请求后反馈给浏览器，然后浏览器显示百度页面

    • 服务器这里指PHP,JAVA等后台语言处理逻辑，比如需要登录才能访问网站
  • 无论用哪个浏览器(IE,谷歌，360)和后台语言（PHP，jAVA）,最终展示给用户的页面，都是以html语言的代码形式转化的

HTML简单知识

  • 你在浏览器看到的所有页面，都是html+css展示的，比如图片，文字，页面布局等

  • html是页面的布局框架展示，而css就是对框架的颜色，文字，图片的美化

  • 建议自己去学下html+css的知识，点击此链接去学习，建议随意买一本这样的书，或者电子书都可以

  • 经过html+css美化好页面后，需要用js(javascript)去编写一些响应事件,可以点击此链接去学习，如：鼠标悬浮弹出一个对话框，鼠标右击出现菜单列表等，建议看一本完整的书系统学习下，javascript的知识，弄清楚了html+css+javascript的关系

  • 看看下面这个页面展示

  • 下面是对应的html代码

<html>

  <head>

     <title>百度一下</title>

	  <link rel="stylesheet" media="all" href="css/web-274d6a76417c1f7a7da5.css" />

	   <script src="/scripts/login.js" type="text/javascript"></script>

	 <style>

		#myDiv {background-color:#ccc;width:500px;height:500px;}

		.title {color:red;}

	 </style>

</head>

<body>

      <div id="myDiv">

      <p class="title">这个是登录页面</p>

        <form method="post" action="login.php">

            <input type="text" name="username" />

             <input type="password" name="pwd" />

               <input type="submit" value="登录" />

        </form>

		<a href="http://www.sina.com">点击跳转到新浪</a>

    </div>

</body>

</html>

HTML代码主要分析

  • <link rel="stylesheet" media="all" href="css/web-274d6a76417c1f7a7da5.css" /> 引用css样式文件，文件主要写的是文字的大小，背景色，背景图片页面布局等等，会同样执行第一张图片的流程
  • <script src="/scripts/login.js" type="text/javascript"></script> 引用js文件，主要编写的页面事件，会同样执行第一张图片的流程
  • <a href="http://www.sina.com">点击跳转到新浪</a> 点击这个链接，就是跳转到了一个新页面，会同样执行第一张图片的流程
  • <form method="post" action="login.php"> 点击登录后，发送一个登录的请求，就是login.php这个后台文件，处理的请求，login.php里面编写的代码，就类似于输入的用户名和密码是否正确，如果正确就跳转到个人中心，否则提示登录失败

总结

  • 浏览器输入网站后，得到后台的响应，浏览器（前端）是用html+css+js页面布局，页面设计，事件处理后最终展示到浏览器
  • 等初级测试工程师系列教程写完了，会把html+css+javascript+后台语言（python）的整个处理逻辑写一篇实战文章
  • 安卓手机+后台语言(python)的交互过程，中级测试工程师的文章来写实战文章
  • 苹果手机+后台语言的交互过程，由于我设备，就不会实战了

其他

  • 怎么找书看？去京东搜相关的关键字，如javascript， 然后看目录和评价再决定是否买书，还是去下载电子书

  • 下一篇的预告：HTML标签的认识和测试用例的编写

  • 在微信公众号搜索xiaobaiji008，和我一起进步，你也可以扫描下面二维码进行关注

浏览器的HTML页面展示的更多相关文章

  1. 《浏览器工作原理与实践》<04>从输入URL到页面展示，这中间发生了什么？

    “在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...

  2. app——分享wap站，数据处理页面展示

    无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...

  3. 【原】老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...

  4. Saiku控制页面展示的数据过长自动换行(二十四)

    Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...

  5. 【转】老生常谈-从输入url到页面展示到底发生了什么

    今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...

  6. （转）老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索"从输入url到页面展示到底发生了什么",你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么 ...

  7. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  8. 转载--从输入URL到页面展示到底发生了什么

    最近我也在看http协议, tcp相关知识, 在吃饭时无意看到来一篇文章讲解“从输入URL到页面展示到底发生了什么”, 细细看完, 很值得回味, 所以转载, 以供日后在温习. (PS, 作者这篇文章发 ...

  9. SpringBoot页面展示Thymeleaf

    https://www.jianshu.com/p/a842e5b5012e 开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.Spring ...

随机推荐

  1. java8中的常用日期操作

    java8有很多时间上的新api,在操作时间的时候很好用,这儿算是个备忘录吧,(补充中...) 定位某个时间:of方法 LocalDateTime dateTime = LocalDateTime.o ...

  2. 【IO多路复用】

    " 目录 一.IO模型介绍 二.阻塞IO(blocking IO) 三.非阻塞IO(non-blocking IO) 四.多路复用IO(IO multiplexing) 五.异步IO(Asy ...

  3. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  4. Django模型model Field详解：

    类型说明 AutoField一个自动增加的整数类型字段.通常你不需要自己编写它,Django会自动帮你添加字段:id = models.AutoField(primary_key=True),这是一个 ...

  5. Centos610安装Nexus

    1.下载Nexus 地址:     https://pan.baidu.com/s/1D5AI6zmuRBSMK0k7j41VuQ 提取码: q50j 选择02-nexus 2.新建nexus账号 u ...

  6. leetCode练题——28. Implement strStr()

    1.题目 28. Implement strStr()——Easy Implement strStr(). Return the index of the first occurrence of ne ...

  7. 调用webservice服务(通过反射的方式动态调用)

    调用 ";//系统类别 var jkxlh = "";//接口序列号 var jkid = "68W05";//接口id string WriteXm ...

  8. idea开发web项目${pageContext.request.contextPath}无法转义

    web-app版本问题,我的web.xml中头文件的配置是: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web ...

  9. linux磁盘管理2-raid,lvm

    raid 多个磁盘合成一个“阵列”来提供更好的性能.冗余,或者两者都提供 提高IO能力 磁盘并行读写 提高耐用性 磁盘冗余来实现 级别:多块磁盘组织在一起的工作方式有所不同 RAID实现的方式 外接式 ...

  10. 路由器安全-NetFlow

    1.NetFlow介绍 提供高层次的诊断,分类和识别网络异常. 使用NetFlow来检查哪些行为改变明显的攻击是非常有效的. 就像Wiretap一样捕获数据包. NetFlow像电话账单.(谁和谁在通 ...