浏览器的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页面展示

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

电脑浏览器输入百度

HTML简单知识

HTML代码主要分析

总结

其他

猜你喜欢