13 web 测试方法与技术

于 2021-07-06 11:26:24 发布
阅读量1.1k 收藏
点赞数
分类专栏： 📒python自动化学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50050403/article/details/118512031
版权

文章目录

13-1 html 讲解

html 定义网页内容
javascrip 定义网页行为
css 描述网页布局

在这里插入图片描述

1）HTML基本概念

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2）HTML基本结构

在这里插入图片描述
在这里插入图片描述

<!DOCTPYE html>	# 向浏览器声明文档类型
<html lang="en">	# 根标签
<head>	# 头部：写给浏览器看的
	<meta charset="UTF-8">	# 设置网页编码
	<title>Title</title>	# 定义网页标题,显示在标签上
</head>
<body>
# 定义网页主体,显示在页面上
</body>
</html>

3）HTML基本标签

在这里插入图片描述

1.属性

在这里插入图片描述
全局属性：所有标签都可以使用
事件属性：不同操作中特殊的属性
各个标签独有的属性

&1 全局属性

在这里插入图片描述

&2 事件属性
*1 窗口事件

在这里插入图片描述

*2 表单事件

在这里插入图片描述

*3 键盘事件

在这里插入图片描述

*4 鼠标事件

在这里插入图片描述

*5 多媒体事件

在这里插入图片描述

2.标签

&1 注释标签

在这里插入图片描述

&2 文档标题标签

在这里插入图片描述

&3 标题标签

在这里插入图片描述

&4 段落标签

在这里插入图片描述

&5 容器标签
*1 span

在这里插入图片描述

*2 div

在这里插入图片描述

&6 图像标签

在这里插入图片描述

&7 超链接标签

在这里插入图片描述

&8列表标签
*1 无序列表

在这里插入图片描述

*2 有序列表

在这里插入图片描述

&9 表格标签

在这里插入图片描述

&10 表单标签
*1 表单域

在这里插入图片描述

@1 表单标签

在这里插入图片描述

  • type属性
    在这里插入图片描述
*2 文本域标签

在这里插入图片描述

&11 下拉菜单

在这里插入图片描述

13-2 javascript 讲解

在这里插入图片描述
在这里插入图片描述

1）简介

在这里插入图片描述
在这里插入图片描述

2）用法

1. 位置

在这里插入图片描述

2.引用方式

在这里插入图片描述

  • 查看外部引用js脚本
    在这里插入图片描述
    在这里插入图片描述

3）输出

在这里插入图片描述

1.显示数据

在这里插入图片描述

  • 使用console
&1

在这里插入图片描述

&2

在这里插入图片描述

&3

在这里插入图片描述

4）基础语法

1.字面量

在这里插入图片描述

2.变量

在这里插入图片描述

3.操作符

在这里插入图片描述
===从内容到类型完全相等

4.函数

在这里插入图片描述
在这里插入图片描述

5）操作HTML DOM

在这里插入图片描述
在这里插入图片描述

1.查找HTML元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.改变HTML

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.Cookie

在这里插入图片描述
在这里插入图片描述

4.使用事件

在这里插入图片描述

6）操作浏览器BOM

在这里插入图片描述
在这里插入图片描述

1.浏览器窗口

在这里插入图片描述
在这里插入图片描述

2.用户屏幕

在这里插入图片描述
在这里插入图片描述

3.当前页面的地址

在这里插入图片描述
在这里插入图片描述

4.浏览器的历史

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9-3 css 讲解

在这里插入图片描述
在这里插入图片描述

1）基础入门

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2）基础语法

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

1.CSS选择器

在这里插入图片描述
在这里插入图片描述

2.CSS创建

在这里插入图片描述

3.背景

在这里插入图片描述

4.文本

在这里插入图片描述

5.字体

在这里插入图片描述

6.列表

在这里插入图片描述

7.表格

在这里插入图片描述

8.定位

在这里插入图片描述

9.盒子模型

在这里插入图片描述
在这里插入图片描述

10.网页布局

在这里插入图片描述

9-4 web 端常见 bug 解析

在这里插入图片描述
在这里插入图片描述

1）页面布局方面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2）页面元素方面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3）功能方面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可能原因：

  • 网速太慢，代码没有下载完全就运行了，js脚本不完整，刷新一次就好了，就不是bug，是网络过慢问题
  • bug1：网页设计有问题，导致部分代码不能被执行
  • bug2：浏览器不兼容
  • bug3:服务器访问量过大 ，服务器超负载导致功能代码没有下载完全，属于性能方面问题
    在这里插入图片描述
    在这里插入图片描述

4）其他

在这里插入图片描述
在这里插入图片描述
可能原因：

  • 通过非200状态码分析页面请求失败原因
    在这里插入图片描述
    可能原因：
  • 个人网络问题，不是bug
  • 网页性能问题，需要针对性优化
卢思小姐姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卢思小姐姐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值