当你输入一个url链接发生了什么？
-
下面的图是上篇文章的改造版本
发送请求2.png
电脑浏览器输入百度
- 打开台式电脑或者笔记本中的浏览器（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的关系 -
看看下面这个页面展示
image.png
-
下面是对应的
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，和我一起进步，你也可以扫描下面二维码进行关注
image
网友评论