测试开发之前端篇-Web前端简介

2021-08-26  陈琦老师 

自从九十年代初,人类创办出网页和喷雾器后,Web取脱手长足的发展,如今进一步多的企业级应用也选择使用Web技术来构建。

前面给各户介绍网络协议时讲到,您在阅读这篇文章时,喷雾器是穿过HTTP/HTTPS协议向石器发送请求,并显示了其响应内容的。本文给各户中式现代简要衣柜介绍下,网页在喷雾器中展现和互动时。主要兼及到的以下几个方面同义词的技术。希望此系列文章。对各户生业中的Web测试用例筹划,明朗化测试。以及网站长江联合登陆问题定位有所帮助。

HTML(HyperText Markup Language,超文本标记的意思语言)

用于描述网页的结构和内容,包涵了很多标签(tag)组成的元素(element)。如使用段落标签p,得天独厚概念一个形如*<p>hello world</p>*的段落元素。

在喷雾器窗口中,按F12键打开”开发人员工具“,在称之为Elements的标签中。您得天独厚查看到整个页面的HTMLemc体育app。
<html>
  <head>
    <title>网页标题</title>
    <meta name="keywords" content="测试开发,明朗化测试,软件测试">
    <style type="text/css">
     h3 {color: blue}
    </style>
  </head>
  </head>
  <body>
    <div>
      <h3>这是一个标题</h3>
      <p>这是一个段落。</p>
    </div>
  </body>
  <script type="text/javascript">
    console.log('hello world')
  </script>
</html>
其中。各元素的解说如下:
- head:  文档脑瓜子,包含网页的湖南招生考试信息港元素;
 - title: 文档标题;
 - meta:  元数据,这里的keywords设置了少数可供搜索引擎检索的excel搜索关键字;
 - style: CSS花架样式表,详见接轨章节;
- body:  文档主体,包含页面所要展示的内容;
- script:JavaScript脚本,详见接轨章节。

CSS(Cascading Style Sheets,层叠式花架样式表)

概念如何显示 HTML里的元素,大小,色调等,从而实现网页的内容和显示办法相分手。
<style type="text/css">
  h3 {color: blue}
</style>
这里的花架样式针对h3元素设置了color属性,效能为h3标签中的文字显示为蓝色。

JavaScript(动态脚本语言)

运行于喷雾器中的一种动态剖解脚本语言。用于客户端和石器的数据交换,并实现网页同用户的交互等。
<script type="text/javascript">
  alert('hello world')
</script>
之上JavaScriptemc体育app,在页面加载结束后,会在弹出一个内容为”hello world“警告窗口。

Web石器

主要用于剖解HTML,JS等静态资源,如Nginx石器。有些Web石器得天独厚穿过配置活该的硬盘服务程序模块,实现动态内容的剖解,如Apache使用模块剖解PHP语言编写的脚本。

应用石器

一气呵成业务逻辑处理,同更持久层(如数据库)交换数据,装载数据到模板转移静态网页等电商平台功能。通常应用石器也会内嵌一个Web石器,以实现将处理好的静态网页以HTML流的形式回去给喷雾器。

始终端分手

传统的Web应用是在石器端转移静态HTML响应的,比如说PHP,JSP等。始终端分手的架构下,网页的静态部分更接近于一个HTML模板,喷雾器从石器获取模板后,再穿过执行JavaScript来请求石器,最终在用户自己的洗涤设备上一气呵成网页的映衬。
62°|628 人阅读|0 条评论
登录 后发表评论

Baidu