Web测试方法与技术

HTML概述（Hyper Text Markup Language）

HTML基本结构

1、网页骨架

用HTML编写的网页中有一些结果是默认且必须存在的，这些结构就叫做网页骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
2、HTML基本标签 
标签
  • 单标签：<标签名 />
  • 双标签：<标签名称><!--标签名称-->
常用标签
  • <!DOCTYPE html>：向浏览器声明当前的文档是HTML类型
  • <html></html>之间的文本描述，<html>是网页中最大的一个标签，称之为根标签
  • <head></head>描述网页头部，里面的内容是给浏览器看的
  • <meta charset="UTF-8">设置当前网页的显示编码
  • <title></title>网页标题，里面的内容会在浏览器的标签页上显示
  • <body></body>网页主体
  • <div></div>定义一个区域
  • <h1></h1>内容显示为网页中的标题
  • <p></p>内容显示为段落
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <p>段落</p>
    </div>
</body>

标签属性 

HTML标签属性总是以键值对形式出现，基本格式如下：

<标签名 属性1="value1" 属性2="value2"><!--标签名-->

每个标签可以拥有多个属性。属性必须写在开始标签中，位于标签名后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格分隔。任何属性都有默认值，省略该属性表示使用默认值。

JavaScript

JS是一种轻量及脚本语言。可以插入HTML页面的代码中，插入HTML页面中的代码可以被所有浏览器执行。JS主要用来向HTML页面添加交互行为。JS可以创建动态的HTML内容，也可以对事件做出反应。

位置

JS脚本必须位于<script></script>之间。<script>可被放置在HTML页面的<body>和<head>部分中。F12进入开发者工具，点击Elements查看

引用方式 
内部引用

在<script></script>之间的代码包含了JS脚本代码。浏览器会解释并执行这些JS代码。

外部引用

<script>的src属性包含了JS外部脚本代码所在的路径。现在网页中大部分都是通过外部引用方式使用JS脚本的。

输出

JS可用不同的方式显示数据，并可在浏览器的开发者工具Console面板中查看输出的内容

  • 警告弹窗
window.alert("Hello World!")
  • 将内容写到HTML文档中，这种方式会覆盖原来的HTML文件中的内容
document.write("Hello World!")
  • 把内容写入浏览器的控制台
console.log("Hello World!")
操作HTML中的DOM 
HTML中的DOM

文档对象模型（Document Object Model，DOM）。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取。JS利用HTML DOM动态地修改网页。HTML DOM模型被结构化为对象树：

查找HTML元素 

当用JS操作DOM修改Web页面上的元素时，首先需要确定修改的是哪一个元素，这就涉及到元素定位问题。JS提供三种定位元素的方式：

  • 通过id定位
Document.getElementById("su")
  • 通过标签名定位
Document.getElementsByTagName("span")
  • 通过类名定位
Document.getElementsByClassName("btn")
修改HTML
  • 改变内容
Document.getElementById("su").innerHTML = "archer"
  • 改变属性
Document.getElementById("su").value="archer"
读取cookie
var x = document.cookie;
使用事件

使用JS脚本还可以实现一些操作，来展示网页中的对应效果

当用户点击鼠标时：

HTML中：

<element onclick="SomeJavaScriptCode">

JS中：

Object.onlick=function(){SomeJavaScriptCode};

CSS（层叠样式表，Cascading Style Sheets）

        用来定义、显示HTML元素。HTML元素的样式通常存储在层叠样式表中。CSS解决了内容与表现分离的问题，通过CSS可以让相同的页面在不同的浏览器中呈现相同的样式。

CSS规则组成

CSS规则由两个主要部分构成：选择器和一条或多条声明。

选择器通常是需要改变样式的HTML元素。每条声明都是一个键值对。

CSS选择器 

CSS需要通过选择器来确定要定义样式的元素。常用的选择器如下：

  • 通用选择器：*
选择器示例说明
**选取所有元素
  • ID选择器：#ID{}
选择器示例说明
#id#firstname选取id为"firstname"的元素
  • CLASS选择器：.CLASSNAME{}
选择器示例说明
.class.intro选择class为"intro"的所有元素
.class1.class2.name1.name2选择class中同时有name1和name2的所有元素
.class1.class2.name1.name2选择作为类名name1元素后代的所有类名为name2的元素
  • 元素选择器：TAG{}
选择器示例说明
elementp选择所有<p>元素
element.classp.intro选择class为"intro"的所有<p>元素
element, elementdiv, p选择所有<div>和所有<p>元素
element elementdiv p选择<div>内的所有<p>元素
element>elementdiv > p选择父元素是<div>的所有<p>元素
element+elementdiv + p选择紧跟<div>元素的首个<p>元素
element~elementp ~ ul选择前面有<p>元素的每个<ul>元素
  • 属性选择器：[属性]{}
选择器示例说明
[attribute][target]选择带有target属性的所有元素
[attribute=value][target=_blank]选择带有target="_blank"属性的所有元素
[attribute~=value][title~=flower]选择title属性包含但是flower的所有元素
[attribute^=value]a[href^="https"]选择其src属性以"https"开头的每个<a>元素
[attribute$=value]a[href$=".pdf"]选择其src属性以".pdf"结尾的所有<a>元素
[attribute*=value]a[href*="abc"]选择其href属性值中包含"abc"子串的每个<a>元素
CSS创建
  • 外部样式
<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
  • 内联样式
<p style="color: sienna; margin-left: 20px">这是一个段落</p>
常见CSS样式
背景样式 
  • background：与网页/标签背景相关的属性样式，都可以在这里进行设置，包括背景的颜色、背景的图像、背景的起始位等，也可以单独对这些属性进行设置
  • background-color：可以单独设置元素的背景颜色
  • background-image：可以单独设置网页/标签的背景图片
  • background-position：可以单独设置网页/标签的背景图像的起始位置
  • background-repeat：可以单独设置网页/标签的背景图像是否平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
        p {
            background-color: red;
        }
        body {
            background-image: url("wx_icon.jpg");
            background-repeat: repeat;
            background-position: right top;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <p>设置了红色背景</p>
</div>

</body>
</html>

文本样式 
  • color：设置文本颜色
  • text-align：对齐元素中的文本
  • text-decoration：向文本中添加修饰
  • text-indent：缩进元素中文本的首行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            color: green;
            text-align: right;
            text-decoration: underline;
            text-indent: 50px;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <h1>标题1</h1>
    <p>background-color：可以单独设置元素的背景颜色
background-image：可以单独设置网页/标签的背景图片
background-position：可以单独设置网页/标签的背景图像的起始位置
background-repeat：可以单独设置网页/标签的背景图像是否平铺</p>
</div>

</body>
</html>

字体样式
  • font：在一个声明中设置所有的字体属性
  • font-family：指定文本的字体系列
  • font-size：指定文本的字体大小
  • font-style：指定文本的字体样式
  • font-weight：指定字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        p {
            font-family: "Times New Roman";
            font-size: 200%;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <p>background-color：可以单独设置元素的背景颜色</p>
</div>

</body>
</html>

列表 
  • list-style：把所有用于列表的属性设置在一个声明中
  • list-style-image：将图像设置为列表项标志
  • list-style-type：设置列表项标值类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        ul {
            list-style-image: url("Chrome_icon.png");
            list-style-type:circle
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <ul>
      <li>archer</li>
      <li>saber</li>
      <li>lancer</li>
    </ul>
</div>

</body>
</html>

表格 
  • border：设置表格边框
  • border-collapse：设置表格的边框是否被折叠成一个单一的边框
  • width：定义表格的宽度
  • text-align：设置表格中的文本对齐方式
  • padding：设置表格中的填充
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        #stu {
            border-collapse: collapse;
            width: 100%;
        }
        #stu td, #stu th {
            border: 1px solid red;
            padding: 8px;
        }
    </style>
</head>
<body>
<table id="stu">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <th>竹筒饭</th>
        <th>18</th>
        <th>航空母舰</th>
    </tr>
    <tr>
        <th>archer</th>
        <th>19</th>
        <th>武装直升机</th>
    </tr>

</table>

</body>
</html>

定位 
  • static：没有定位
  • relative：相对定位
  • fixed：元素的位置相对于浏览器窗口是固定位置
  • absolute：绝对定位，元素的位置相对于最近的以定位父元素
  • sticky：黏性定位，基于用户的滚动位置来定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        div.static {
            position: static;
            border: 3px solid green;
        }
        div.relative {
            position: relative;
            left: 30px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <h1>定位</h1>
    <p>设置不同定位</p>
    <div class="static">
        正常文档流定位
    </div>
    <div class="relative">
        相对定位
    </div>
</body>
</html>

盒子模型 

        所有HTML元素可以看作盒子。CSS盒子模型本质上是一个盒子，用以封装HTML元素，它包括内外边距、边框、内容。

Margin（外边距）：边框外的区域，外边距是透明的

Border（边框）：围绕在内边距和内容外的边框 

Padding（内边距）：介于内容外和边框内边的区域，内边距是透明的

Content（内容）：盒子的内容，显示文本或图像

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/790122.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

手撸俄罗斯方块（一）——简单介绍

手撸俄罗斯方块（一）——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》&#xff08;俄语&#xff1a;Тетрис&#xff0c;英语&#xff1a;Tetris&#xff09;&#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏&#xff0c;是落下型益智游戏的始祖&#xff0c;电子游戏领域的代表作之一&a…
阅读更多...
结束休刊博客真·vlog | 顺便说一下500粉的事

结束休刊博客真·vlog | 顺便说一下500粉的事

啊&#xff0c;首先是信 ♥亲爱的读者们&#xff0c; 在这个充满数字韵律与代码奇迹的时空里&#xff0c;我满怀激动与感激的心情&#xff0c;提笔写下这封信&#xff0c;宣布一个令人振奋的消息——经过一段时间的休整与充电&#xff0c;我终于要结束这段宝贵的休刊时光&…
阅读更多...
【堆 优先队列】1354. 多次求和构造目标数组

【堆 优先队列】1354. 多次求和构造目标数组

本文涉及知识点 堆 优先队列 LeetCode1354. 多次求和构造目标数组 给你一个整数数组 target 。一开始&#xff0c;你有一个数组 A &#xff0c;它的所有元素均为 1 &#xff0c;你可以执行以下操作&#xff1a; 令 x 为你数组里所有元素的和 选择满足 0 < i < target.…
阅读更多...
JDBC编程的学习——MYsql版本

JDBC编程的学习——MYsql版本

目录 前言 什么是JDBC ??? 前置准备 使用JDBC的五个关键步骤 1.建立与数据库的连接 2.创建具体的sql语句和Statement 3.执行SQL语句 4.处理结果集 5.释放资源 完整流程展示 前言 笔者在先前的博客就提过会写关于JDBC的内容 [Mysql] 的基础知识和sql 语句.教你速成…
阅读更多...
Security认证要点速记

Security认证要点速记

登录校验流程 springSecurity已经为我们默认实现了一个用不着的登录功能&#xff0c;我们需要自己实现个符合我们需求的登录功能&#xff0c;所以我们需要去了解默认登录功能的流程&#xff0c;对其中的部分进行替换 SpringSecurity底层就是过滤器链&#xff0c;包含实现了各种…
阅读更多...
（自用）多进程与信号

（自用）多进程与信号

程序和进程 程序≠进程 产生进程 创建进程——fork函数 函数原型 #include <unistd.h> pid_t fork(void); 函数功能: fork函数的功能是创建一个与当前进程几乎完全相同的子进程。这个“几乎完全相同”指的是子进程会复制父进程的代码段、数据段、BSS段、堆、栈等所…
阅读更多...
dledger原理源码分析(四)-日志

dledger原理源码分析(四)-日志

简介 dledger是openmessaging的一个组件&#xff0c; raft算法实现&#xff0c;用于分布式日志&#xff0c;本系列分析dledger如何实现raft概念&#xff0c;以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的日志&#xff0c;包括写入&#xff0c;复制…
阅读更多...
esp32硬件电路设计

esp32硬件电路设计

ESP-IDF 入门指南 | 乐鑫科技 (espressif.com) ESP32-DevKitC V4 入门指南 - ESP32 - — ESP-IDF 编程指南 v5.1 文档 (espressif.com)
阅读更多...
看惯了黑黝黝的大屏风格再来看浅色系的大屏，很漂亮很个性

看惯了黑黝黝的大屏风格再来看浅色系的大屏，很漂亮很个性

**看惯了黑黝黝的大屏风格&#xff0c;再来看浅色系的大屏&#xff0c;很漂亮很个性** 在科技产品的世界里&#xff0c;大屏设计一直以其沉浸感和视觉冲击力占据着一席之地。然而&#xff0c;当我们长时间沉浸在那些深邃、沉稳的黑黝黝大屏中时&#xff0c;是否曾想过换一种风…
阅读更多...
VBA即用型代码手册：根据预定义的文本条件删除行

VBA即用型代码手册：根据预定义的文本条件删除行

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…
阅读更多...
uni-app三部曲之三： 路由拦截

uni-app三部曲之三： 路由拦截

1.引言 路由拦截&#xff0c;个人理解就是在页面跳转的时候&#xff0c;增加一级拦截器&#xff0c;实现一些自定义的功能&#xff0c;其中最重要的就是判断跳转的页面是否需要登录后查看&#xff0c;如果需要登录后查看且此时系统并未登录&#xff0c;就需要跳转到登录页&…
阅读更多...
电子电气架构 --- 智能座舱万物互联

电子电气架构 --- 智能座舱万物互联

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
windows防火墙端口设置

windows防火墙端口设置

PS&#xff1a;本文实例为Windows Server 2019&#xff0c;其他Windows版本大同小异。 1、首先打开windows防火墙&#xff0c;点击“高级设置” 2、 高级设置界面 3、假设需要开放一个端口为3306应该怎么做 光标对准“入站规则”右键新建规则&#xff0c;选择“端口” 协议这…
阅读更多...
【UE5.1 角色练习】16-枪械射击——瞄准

【UE5.1 角色练习】16-枪械射击——瞄准

目录 效果 步骤 一、瞄准时拉近摄像机位置 二、瞄准偏移 三、向指定方向射击 四、连发 效果 步骤 一、瞄准时拉近摄像机位置 打开角色蓝图&#xff0c;在事件图表中添加如下节点&#xff0c;当进入射击状态时设置目标臂长度为300&#xff0c;从而拉近视角。 但是这样切…
阅读更多...
Android 通知访问权限

Android 通知访问权限

问题背景 客户反馈手机扫描三方运动手表&#xff0c;下载app安装后&#xff0c;通知访问权限打不开。 点击提示“受限设置” “出于安全考虑&#xff0c;此设置目前不可用”。 问题分析 1、setting界面搜“授予通知访问权限”&#xff0c;此按钮灰色不可点击&#xff0c;点…
阅读更多...
C++基础篇（1）

C++基础篇（1）

目录 前言 1.第一个C程序 2.命名空间 2.1概念理解 2.2namespace 的价值 2.3 namespace的定义 3.命名空间的使用 4.C的输入输出 结束语 前言 本节我们将正式进入C基础的学习&#xff0c;话不多说&#xff0c;直接上货&#xff01;&#xff01;&#xff01; 1.第一个C程…
阅读更多...
JAVA分布式事务详情分布式事务的解决方案Java中的分布式事务实现

JAVA分布式事务详情分布式事务的解决方案Java中的分布式事务实现

本人详解 作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》 公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯 转载说明：务必注明来源（注明：作者：王文峰…
阅读更多...
关于Python中的字典你所不知道的七个技巧

关于Python中的字典你所不知道的七个技巧

01 引言 Python是我最喜欢的编程语言之一&#xff0c;它向来以其简单性、多功能性和可读性而闻名。 字典作为Python中最常使用的数据类型&#xff0c;大家几乎每个人都或多或少在项目中使用过字典&#xff0c;但是字典里有一些潜在的技巧可能并不是每个同学都会用到。 在本文…
阅读更多...
院内导航：如何用科技破解就医找路难题

院内导航：如何用科技破解就医找路难题

自2019年开始“院内导航”被纳入医院智慧服务评估体系以来&#xff0c;到2023年改善就医服务升级的部署&#xff0c;每一步都见证了我国医疗卫生体系向智能化、人性化迈进的坚实步伐。 面对庞大复杂的医院环境与日益增长的就诊需求&#xff0c;如何让患者在茫茫人海中迅速找到就…
阅读更多...
31_JQuery一文读懂，JS的升级版

31_JQuery一文读懂，JS的升级版

今日内容 零、 复习昨日 一、JQuery 零、 复习昨日 1 js数组的特点(长度,类型,方法) - js数组的长度不限 - 类型不限 - 提供很多方法2 js中和的区别 - 判断数值相等 - 判断数值和数据类型同时相等3 js表单事件的事件名(事件属性单词) - 获得焦点 onfocus - 失去焦点 onblur …
阅读更多...
最新文章

Copyright @ 2022~2023