浏览器的HTML页面展示
当你输入一个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页面展示的更多相关文章
- 《浏览器工作原理与实践》<04>从输入URL到页面展示,这中间发生了什么?
“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...
- app——分享wap站,数据处理页面展示
无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...
- 【原】老生常谈-从输入url到页面展示到底发生了什么
刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- 【转】老生常谈-从输入url到页面展示到底发生了什么
今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...
- (转)老生常谈-从输入url到页面展示到底发生了什么
刚开始写这篇文章还是挺纠结的,因为网上搜索"从输入url到页面展示到底发生了什么",你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么 ...
- base64编码后的pdf文件前端页面展示--pdf.js的应用
最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...
- 转载--从输入URL到页面展示到底发生了什么
最近我也在看http协议, tcp相关知识, 在吃饭时无意看到来一篇文章讲解“从输入URL到页面展示到底发生了什么”, 细细看完, 很值得回味, 所以转载, 以供日后在温习. (PS, 作者这篇文章发 ...
- SpringBoot页面展示Thymeleaf
https://www.jianshu.com/p/a842e5b5012e 开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.Spring ...
随机推荐
- Hadoop学习2—伪分布式环境搭建
一.准备虚拟环境 1. 虚拟环境网络设置 A.安装VMware软件并安装linux环境,本人安装的是CentOS B.安装好虚拟机后,打开网络和共享中心 -> 更改适配器设置 -> 右键V ...
- 具体的client-server通信模型以及最为常用的通信模式
实现虚拟网络服务的主要技术,指出IP负载均衡技术是在负载调度器的实现技术中效率最高的. 在已有的IP负载均衡技术中: 1)有通过网络地址转换(Network Address Translation)将 ...
- UIImageView的API
- (instancetype)initWithImage:(UIImage *)image; 返回使用指定图像初始化的图像视图. - (instancetype)initWithImage:(UII ...
- jvm 内存,线程,gc分析
1.查看 gc的次数,和各个垃圾回收区域的内存比例 jstat : jstat -gcutil pid interval(ms) 例子:jstat -gcutil 332 1000 参数说明如下: ...
- POJ 1204 Word Puzzles(AC自动机)
这题的数据卡在,如下: 5 5 3 ABCDE FGHIJ KLMNO PQRST UVWXY PQR RS RST puzzle中间的行中可以包含要查询的多个单词.这个问题很好解决,SearchDf ...
- 实现简单ORM案例
ORM框架: • 我们希望设计一个可以实现对象和SQL自动映射的框架,但是整体用法和设计比Hibernate简单.砍掉不必要的功能.• 会穿插使用设计模式• 增加 – 将对象对应成sql语句,执行sq ...
- 进程作业管理2-kill,前后台作业,并行执行
kill命令:向进程发送控制信号,以实现对进程管理,每个信号对应一个数字,信号名称以SIG开 头(可省略),不区分大小写 显示当前系统可用信号: kill –l 或者 trap -l 常用信号: ...
- 路由器安全-FPM
1.FPM(也叫NGACL) FPM是Cisco IOS新一代的ACL,叫做Flexible Packet Matching,灵活的包匹配. 根据任意条件,无状态的匹配数据包的头部,负载,或者全部. ...
- java中关于类和对象的一些思考
就这个问题而言 第一种和第二种定义的变量并不是一种形式 前者我们称为原始数据变量 后者我们称为对象变量 这两种变量的创建方式,定义方式,使用方式都有着很多不同 需要引起注意. 在java中,有着基本的 ...
- 02-15Android学习进度报告十五
今天学习了关于ListView Item多布局的实现.感觉有点困难. 何为ListView Item多布局,打个比方,QQ这种聊天列表 代码示例如下: public class MutiLayoutA ...