自从九十年代初,人类创造出网页和浏览器后,Web取得了长足的发展,如今越来越多的企业级应用也选择使用Web技术来构建。

前面给大家介绍网络协议时讲到,您在阅读这篇文章时,浏览器是通过HTTP/HTTPS协议向服务器发送请求、并显示了其响应内容的。本文给大家简要介绍下,网页在浏览器中展现和互动时,主要涉及到的以下几个方面的技术。希望此系列文章,对大家工作中的Web测试用例设计、自动化测试,以及网站问题定位有所帮助。

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

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

在浏览器窗口中,按F12键打开”开发人员工具“,在名为Elements的标签中,您可以查看到整个页面的HTML代码。

<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设置了一些可供搜索引擎检索的关键字;
 - 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>

以上JavaScript代码,在页面加载结束后,会在弹出一个内容为”hello world“警告窗口。

Web服务器

主要用于解析HTML、图片、CSS、JS等静态资源,如Nginx服务器。有些Web服务器可以通过配置相应的程序模块,实现动态内容的解析,如Apache使用模块解析PHP语言编写的脚本。

应用服务器

完成业务逻辑处理,同更持久层(如数据库)交换数据,装载数据到模板生成静态网页等功能。通常应用服务器也会内嵌一个Web服务器,以实现将处理好的静态网页以HTML流的形式返回给浏览器。

前后端分离

传统的Web应用是在服务器端生成静态HTML响应的,比如PHP、ASP、JSP等。前后端分离的架构下,网页的静态部分更接近于一个HTML模板,浏览器从服务器获取模板后,再通过执行JavaScript来请求服务器、获取数据、装载到模板,最终在用户自己的设备上完成网页的渲染。

测试开发之前端篇-Web前端简介的更多相关文章

  1. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  2. 什么是Web前端,Web前端是做什么的?

    什么是Web前端 Web前端,顾名思义是来做Web的前端的.而Web前端开发应该就是来开发基于Web前端的相关应用的或者说是来开发前端的.那么,前端又是什么呢?我们这里所说的前端泛指Web前端,也就是 ...

  3. 前端开发工程师:网易web前端课程,价值1499元【无水印版】

    这套网上的朋友购买分享给我的,特此分享~ 让大家都受益 早日成为强大的web前端开发工程师!!赶紧回复下载吧 下载地址:http://fu83.cn/thread-172-1-1.html

  4. 【Mock平台】测试开发实战01-开篇PRD和需求详细

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 平台背景 从业务特性上,不少测试的服务很多是依赖第三方的接口的,比如其中的支付场景,就需要很多状态的返回进行验证,但大部分服务提供商没有很 ...

  5. 初学者应该怎么学习前端?web前端的发展路线大剖析!

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  6. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. 【转载】开发备必:WEB前端开发规范文档

    规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者 ...

  9. 开发备必:WEB前端开发规范文档

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地 ...

  10. 微信公众平台开发:进阶篇(Web App开发入门)

    本文转载至:http://blog.csdn.net/yual365/article/details/16820805  WebApp与Native App有何区别呢? Native App: 1.开 ...

随机推荐

  1. GYM-A. Golden Spirit等

    1.题目链接:Problem - A - Codeforces 题意:桥两边有2 * n个不能独立过桥的老人,老人想到对面休息 re 分钟后返回原位置,每次过桥需要花费 cr 分钟,问最少需要多长时间 ...

  2. mdbook安装使用实录

    简介 mdbook是一个基于Rust的电子书系统,效果类似于gitbook.本人写图文文章一直都采用的印象笔记,但是写系列教程的情况不方便管理.因此引入mdBook,分享一下基本安装使用过程及遇到的问 ...

  3. 以解析csv数据为例,讨论string、char[]、stream 不同类型来源是否能进行高性能读取解析封装可能性

    篇幅较长,所以首先列举结果,也就是我们的目的 核心目的为探索特定场景对不同类型数据进行统一抽象,并达到足够高性能,也就是一份代码实现,对不同类型数据依然高性能 以下为结果,也就是我们的目的: 对1w行 ...

  4. Spring Cloud Zuul 获取当前请求的路由信息和路由后端的服务节点信息

    基本思路 参考spring-cloud-zuul-ratelimit开源项目,在过滤器中根据当前的请求路径,判断当前的路由信息,当取得路由信息后,可以对服务的调用次数做统计等操作. 具体实现 创建一个 ...

  5. Python 中read()、 readline() 、readlines()三者之间的区别?

    read()方法用于一次性读取整个文件的内容,并将其作为一个字符串返回. readline()方法用于逐行读取文件的内容.每次调用readline()方法,它会读取文件的下一行,并将其作为一个字符串返 ...

  6. docker 安装 es-head 以及Content-Type header请求头错误解决

    拉取es-head镜像,启动 docker pull mobz/elasticsearch-head:5 docker run -itd --name es-head -p 9100:9100 mob ...

  7. deepin版的微信无法启动

    我在网上找了半天的了,出现问题的原因应该是deepin-wine的问题: 既然是deepin-wine出了问题,那重装一下就好了,嗯~ 我直接,yay!结果发现有一个deepin-wine需要更新,更 ...

  8. 基于Python的 如何检查字符串输入是否为数字

    一 概念 这种有很多常用的方法,这里只介绍一种常用的方法是使用正则表达式来匹配数字的模式.通过定义一个匹配数字的正则表达式,然后使用re模块中的search()方法来进行匹配. 二 例子: 下面是一个 ...

  9. Ambiq Micro-AMA3B2KK-KBR芯片可穿戴产品解决方案开发之RTC时钟

    一 RTC   RTC的英文全称是Real-Time Clock,翻译过来是实时时钟芯片.绝大多数mcu芯片都集成了这个功能.在可穿戴产品中,时间往往是非常重要的因素,怎么让时间保持一直在运行,那就是 ...

  10. 使用RTX Voice,用N卡打造降噪麦克风

    原文地址:使用RTX Voice,用N卡打造降噪麦克风 | Stars-One的杂货小窝 随着直播的流行,不少人为了追求良好的直播效果,都选择购买相应的设备.如想要实现降噪的功能,得通过物理手段(买个 ...