当前位置：首页 > article >正文

Web 自动化之 HTML JavaScript 详解

article 2025/10/8 2:57:29

文章目录

- - 一、HTML 常用标签
  - 二、javascript 脚本
  - - 1、什么是 javascript(js)
    - 2、 js变量和函数
    - 3、js 弹窗处理
    - 4、js 流程控制语句和 switch 结构语句应用

一、HTML 常用标签

HTML：超文本标记语言
超文本：不仅只包含文字，还有超链接、视频…这些元素
HTML与HTML5(H5)
HTML5=HTML+一些其他特殊标签比如：canvas 画图标签
HTML结构标签对：

网页的标题常用标签分为：双标签+单标签

<html>
<head>
<title>我的个人页面</title>
</head>
<body>
<!‐‐段落标签‐‐>
<p>
<font size="6" color="blue" ><b><i>自我介绍</i></b></font>
</p>
姓名：hc<br/>
专业：计算机软件<br/>
图片:<br/><img src="hc2.png"></img><br/>
<a href="https://wwww.baidu.com" target="_black" >查看更多</a>
<!‐‐‐分隔线‐‐‐>
<hr width="100%" size="1" color="red"/>
<!‐‐常用标签：表格 ‐‐>
<table border="1" width="300px" height="300px">
<!‐‐行标签‐‐>
<tr>
<!‐‐列标签‐‐>
<td colspan="2">1</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table><!‐‐常用标签：表单 数据提交‐‐>
<form action="url地址" method="">
<!‐‐提交的方式：post/get get:url传递参数 post通过表单传参 post方式更加安全‐
‐>
<!‐‐文本框 密码框 按钮 复选框 单选框‐‐>
用户名:<input type="text"></input><br/>
密码:<input type="password"></input><br/>
<!‐‐单选框‐‐>
性别：<input type="radio" name="xb" >男</input> <input type="radio"
name="xb">女</input><br/>
<!‐‐复选框 ‐‐>
爱好：<input type="checkbox" >学习</input> <input type="checkbox"
>money</input> <input type="checkbox" >小姐姐</input> <br/>
上传作业:<input type="file" >学习</input>
计算机语言:
<select>
<option>java</option>
<option>Python</option>
<option>php</option>
</select> <br/>
文本域：
<textarea cols="25" rows="10"></textarea> <br/>
普通按钮：
<input type="button" value="打卡学习" ></input><br/>
特殊按钮（提交按钮）:
<input type="submit" value="提交"></input><br/>
特殊按钮（重置按钮）:
<input type="reset" value="重置"></input><br/>
</form>
</body>
</html>

前端页面布局：div table frame 框架
基于frame来进行页面设计：

<html>
<frameset rows="30%,*">
<frame src="mypage.html" ></frame>
<frameset cols="50%,50%">
<frame src="https://taobao.com"></frame>
<frame src="https://www.baidu.com/"></frame>
</frameset>
</frameset>
</html>

二、javascript 脚本

用户交互：必须懂明白javascript脚本

1、什么是 javascript(js)

javascript:前端脚本语言，实现用户的交互
网页端执行js脚本两种方式：

内嵌式
外部导入

2、 js变量和函数

<html><head><title>网页的标题</title><script  language="javascript">document.write("执行外部js脚本"+"<br/>")<!--变量-->var a=10;var name="xingyao";var c= true;document.write(a+"<br/>");document.write(name+"<br/>");document.write(c+"<br/>");<!--javascript函数-->function zt1(){<!--函数体语句-->var value1="正在学习<<Python基础>>";document.getElementById("result").value=value1;}function zt2(){<!--函数体语句-->var value2="正在学习<<接口自动化测试>>";document.getElementById("result").value=value2;}function zt3(){<!--函数体语句-->var value3="正在学习<<web自动化测试>>";document.getElementById("result").value=value3;}function zt8(){<!--函数体语句-->document.getElementById("result").value=name;}function abc(){alert("操作成功！！");}function con(){var res=confirm("请问需要删除此商品？");if (res==true){alert("删除");}}function pro(){var res=prompt("请输入需要删除的商品的编号");alert(res);}function jiesuan(){var paymoney;<!--int类型转化  parseInt-->var price=parseInt(document.getElementById('danjian').value);var count=parseInt(document.getElementById('shuliang').value);var paytype=document.getElementById('fangshi').value;<!-- isNaN 表示不是一个数字   !isNaN()判断参数是数字-->if (!isNaN(price) && !isNaN(count)){<!--计算支付金额--><!--选择不同的支付方式，计算方式不一样-->switch(paytype){case "9":case "8":case "7":case "6":paymoney=price*count*parseInt(paytype)/10;break;default:alert("请选择支付方式！！！");	}<!--计算支付金额显示在结算金额输入框 -->document.getElementById('jsje').value=paymoney+"元";}else{alert("Q币单价及Q币的数量必须是数字！！！");}}</script></head><body><hr color="red" size="2" width="100%"><form><input type="button" value="专题一" onclick="zt1()"></input><br/><input type="button" value="专题二"  onclick="zt2()" ></input><br/><input type="button" value="专题三" onclick="zt3()"></input><br/>.....<br/><input type="button" value="专题八" onclick="zt8()"></input><br/>当前学习阶段:<input type="text"  id="result" value="Python基础"></input><br/><hr color="red" size="2" width="100%"><input type="button"  value="alert弹窗" onclick="abc()"></input><br/><input type="button"  value="confirm弹窗" onclick="con()"></input><br/><input type="button"  value="prompt弹窗" onclick="pro()"></input><br/></form><hr color="red" size="2" width="100%"><form>支付方式:<select id="fangshi"><option value="9">现金支付(9折)</option><option value="8">支付宝支付（8折）</option><option value="7"> 微信支付（7折）</option><option value="6">京东支付（6折）</option></select><br/>Q币单价：<input type="text" id="danjian"></input><br/>购买数量：<input type="text" id="shuliang"></input><input type="button"  value="结算"  onclick="jiesuan()"></input><br/>结算金额：<input type="text" id="jsje" ></input></form></body>
</html>

3、js 弹窗处理

网页的弹窗有三种

提示弹窗
包含确定和取消的弹窗
包含确定和取消的弹窗+用户输入

4、js 流程控制语句和 switch 结构语句应用

if/else 语句进行控制
if(条件){
}
else{
}
if/else 嵌套
if(条件){
if(条件){
}
else{
}
}
else{
if(条件){
}
else{
}
}
switch语句
switch(变量){
case 常量1：
js代码；
break；
case 常量2:
js代码；
break；
case 常量3:
js代码；
break；
…
default:
js代码
break；
}

Web 自动化之 HTML JavaScript 详解

文章目录一、HTML 常用标签二、javascript 脚本1、什么是 javascript(js)2、 js变量和函数3、js 弹窗处理4、js 流程控制语句和 switch 结构语句应用一、HTML 常用标签 HTML：超文本标记语言超文本：不仅只包含文字，还有超链接、视频…这些…...

编程日记 2025/7/16 2:01:14

一文了解氨基酸的分类、代谢和应用

氨基酸（Amino acids）是在分子中含有氨基和羧基的一类化合物。氨基酸是生命的基石，人类所有的疾病与健康状况都与氨基酸有直接或间接的关系。氨基酸失衡可引起肝硬化、神经系统感染性疾病、糖尿病、免疫性疾病、心血管疾病、肾病、肿瘤等各类疾…...

编程日记 2025/9/30 5:56:02

系统学习算法：动态规划（斐波那契+路径问题）

题目一： 思路： 作为动态规划的第一道题，这个题很有代表性且很简单，适合入门先理解题意，很简单，就是斐波那契数列的加强版，从前两个数变为前三个数算法原理： 这五步可以说是所有…...

编程日记 2025/10/2 3:54:27

jquery实现文字点选验证码

文字点选验证码是一种有效的防止自动化攻击的手段。用户需要按照提示顺序点击特定的文字，验证通过后才能进行下一步操作。本文将详细介绍如何使用jQuery实现这种验证码。一、实现思路生成验证码：随机生成一组文字，并随机排列在验证码区域…...

编程日记 2025/9/26 19:14:41

VTK|加载ply文件数据进行平移+高程渲染

文章目录将 .ply 点云或模型数据进行 Elevation 着色并可视化渲染的完整流程🟦 1. **使用 ElevationFilter 给模型上色（根据 Z 值）**🟩 2. **构造 Jet 风格的 Lookup Table（颜色映射表）**🔷 3.…...

编程日记 2025/6/6 2:44:22

JAVA房屋租售管理系统房屋出租出售平台房屋销售房屋租赁房屋交易信息管理源码

一、源码描述这是一套房屋租售管理源码，基于SpringBootVue框架，后端采用JAVA开发，源码功能完善，涵盖了房屋租赁、房屋销售、房屋交易等业务。二、源码截图...

编程日记 2025/10/6 5:14:07

掌握Multi-Agent实践(三)：ReAct Agent集成Bing和Google搜索功能，采用推理与执行交替策略，增强处理复杂任务能力

一个普遍的现象是，大模型通常会根据给定的提示直接生成回复。对于一些简单的任务，大模型或许能够较好地应对。然而，当我们面对更加复杂的任务时，往往希望大模型能够表现得更加“智能”，具备适应多样场景和解决复杂问题的能力。为此，AgentScope 提供了内置的 ReAct 智能体…...

编程日记 2025/9/29 10:56:14

AOP实现原理

AOP实现原理背景实现常用注解背景感觉需要掌握, 对理解其他知识点有好处. 实现动态代理实现. JDK 实现 InvacationHander CGLib Enhancer 轻量级的基于ASM字节码框架. 常用注解 Before After AfterRetruning AfterThrowing Around...

编程日记 2025/8/19 19:02:48

Bearer Token的神秘面纱：深入解析HTTP认证头的设计哲学

为何有些Token会带Bearer？ 在接口测试与开发中，我们经常会遇到这样的请求头： Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... 这个神秘的"Bearer"前缀从何而来？为何不直接使用Authorization: Token..…...

编程日记 2025/9/20 4:39:34

【国产化】在银河麒麟ARM环境下离线安装docker

1、前言采用离线安装的方式。关于离线安装的方式官网有介绍，但是说的很简单，网址：Binaries | Docker Docs 官网介绍的有几种主流linux系统的安装方式，但是没有kylin的，所以在此记录一下。在安装过程中也遇到了些…...

编程日记 2025/10/2 2:18:53

K8S - Harbor 镜像仓库部署与 GitLab CI 集成实战

引言在 Kubernetes 环境中，容器镜像的存储与管理至关重要。企业级镜像仓库（如 Harbor）为团队提供了安全、稳定、可扩展的镜像管理解决方案。一、Harbor 安装与配置 Harbor 是由 VMware 开源的企业级云原生镜像仓库，它不仅支持…...

编程日记 2025/5/29 0:53:24

ASCII码的快速记忆方法

当然！记住ASCII码的关键是找到规律和分组记忆。以下是一些快速记忆的方法： 1. 记住关键分界点 0~31：控制字符（不可打印，如换行、制表符等），不需要全记，知道0是NULL，10是…...

编程日记 2025/8/19 12:50:02

java volatile关键字

volatile 是 Java 中用于保证多线程环境下变量可见性和禁止指令重排序的关键字。普通变量不加volatile修饰有可见性问题，即有线程修改该变量值，其他线程无法立即感知该变量值修改了。代码： private static int intVal 0; // 普通变量未加 …...

编程日记 2025/9/25 1:55:12

解决SQL Server SQL语句性能问题（9）——正确使用索引

前述章节中，我们介绍和讲解了SQL调优所需要的基本知识和分析方法，那么，通过前述这些知识和方法定位到问题后，接下来，我们该怎么做呢？那就是本章的内容，给出解决SQL语句性能问题的、科学而合理的方案和方法。本章主要对解决SQL语句性能问题的几种常用方法进行说明和讲解…...

编程日记 2025/8/10 14:10:35

Vibe Coding: 优点与缺点

如果你最近在开发圈子里，你很可能听说过这个新趋势"vibe coding"（氛围编程）。我只能说我对此感受复杂。以下是原因。优势在构建新项目时，靠着氛围编程达到成功感觉很自由！但对于遗留代码来说情况就不同了，尽管也不是不可能。实时反馈和快速迭代 Cursor（…...

编程日记 2025/10/6 16:22:00

技术分享 | 如何在2k0300（LoongArch架构）处理器上跑通qt开发流程

近期迅为售后团队反馈，许多用户咨询：2K0300处理器采用了LA264处理器核，若要在该处理器上运行Qt程序，由于架构发生了变化，其使用方法是否仍与ARM平台保持一致？ 单纯回答‘一致’或‘不一致’缺乏说服力&…...

编程日记 2025/10/7 10:15:46

产品经理如何借助 DeepSeek 提升工作效能

在数字化时代的浪潮中，产品经理肩负着推动产品从概念到成功落地的重任，面临着复杂多变的市场环境、层出不穷的用户需求以及紧锣密鼓的项目周期。而 DeepSeek 这一先进的人工智能工具，宛如一把 “瑞士军刀”，为产品经理在各个工作环…...

编程日记 2025/7/30 22:52:59

基于卷积神经网络和Pyqt5的猫狗识别小程序

任务描述猫狗分类任务（Dogs vs Cats）是Kaggle平台在2013年举办的一个经典计算机视觉竞赛。官方给出的Kaggle Dogs vs Cats 数据集中包括由12500张猫咪图片和12500张狗狗图片组成的训练集，12500张未标记照片组成的测试集。选手需要在规定时间…...

编程日记 2025/10/5 7:16:07

Hadoop 和 Spark 生态系统中的核心组件

以下是 Hadoop 和 Spark 生态系统的核心组件及其功能： Hadoop 生态核心组件 1. HDFS（Hadoop 分布式文件系统） - 命令/工具： hdfs 命令（如 hdfs dfs -put 等）。 - 作用：分布式存储海量数据&a…...

编程日记 2025/5/23 5:36:50

解锁健康养生新境界

在追求高品质生活的当下，健康养生早已超越 “治未病” 的传统认知，成为贯穿全生命周期的生活艺术。它如同精密的交响乐，需饮食、运动、心理与生活习惯多维度协奏，方能奏响生命的强音。饮食养生讲究 “顺时、适性”。遵循二十四节…...

编程日记 2025/10/5 12:16:07

MQTT：轻量级物联网通信协议详解

引言在物联网（IoT）迅速发展的今天，设备之间的高效通信变得至关重要。MQTT（Message Queuing Telemetry Transport）作为一种轻量级的发布/订阅消息传输协议，因其低带宽、低延迟和易于实现的特性&#xff0c…...

编程日记 2025/7/6 11:52:23

C 语言逻辑运算符：组合判断，构建更复杂的条件

各类资料学习下载合集 https://pan.quark.cn/s/8c91ccb5a474 在 C 语言编程中，我们已经学习了如何使用比较运算符（如 ==, <, >）来判断两个值之间的关系，从而得到“真”或“假”的结果。但很多时候，我们需要根据多个条件的组合…...

编程日记 2025/7/9 12:20:53

基于OpenCV的人脸识别：EigenFaces算法

文章目录引言一、概述二、代码解析1. 准备工作2. 加载训练图像3. 设置标签4. 准备测试图像5. 创建和训练识别器6. 进行预测7. 显示结果三、代码要点总结引言人脸识别是计算机视觉领域的一个重要应用，今天我将通过一个实际案例来展示如何使用OpenCV中的EigenFac…...

编程日记 2025/10/2 17:47:33

【深度学习新浪潮】智能追焦技术全解析：从算法到设备应用

一、智能追焦技术概述智能追焦是基于人工智能和自动化技术的对焦功能，通过深度学习算法识别并持续跟踪移动物体（如人、动物、运动器械等），实时调整焦距以保持主体清晰，显著提升动态场景拍摄成功率。其核心优势包括：精准性：AI 算法优化复杂运动轨迹追踪（如不规则移动…...

编程日记 2025/10/7 3:04:59

网络研讨会开发注册中, 5月15日特励达力科，“了解以太网”

在线研讨会主题 Understanding Ethernet - from basics to testing & optimization 了解以太网 - 从基础知识到测试和优化注册链接# https://register.gotowebinar.com/register/2823468241337063262 时间北京时间 2025 年 5 月 15 日星期四下午 3:30 - 4:30 适宜…...

编程日记 2025/10/6 12:54:39

在 Spring Boot 中实现动态线程池的全面指南

动态线程池是一种线程池管理方案，允许在运行时根据业务需求动态调整线程池参数（如核心线程数、最大线程数、队列容量等），以优化资源利用率和系统性能。在 Spring Boot 中，动态线程池可以通过 Java 的 ThreadPoolExecut…...

编程日记 2025/9/27 1:12:51

STL？vector！！！

一、前言之前我们借助手撕string加深了类和对象相关知识，今天我们将一起手撕一个vector，继续深化类和对象、动态内存管理、模板的相关知识二、vector相关的前置知识 1、什么是vector？ vector是一个STL库中提供的类模板，它是存储…...

编程日记 2025/10/2 9:10:34

从黔西游船侧翻事件看极端天气预警的科技防线——疾风气象大模型如何实现精准防御？

近日，贵州省黔西市一起载人游船侧翻事故令人痛心。调查显示，事发时当地突遇强风暴雨，水面突发巨浪导致船只失控。这一事件再次凸显：在极端天气频发的时代，传统“经验式防灾”已不足够，唯有依靠智能化的气象预警技术，才能筑牢安全底线。极端天气预警的痛点：为什么传统方…...

编程日记 2025/10/2 9:10:31

LDO与DCDC总结

目录 1. 工作原理 2. 性能对比 3. 选型关键因素 4. 典型应用总结 1. 工作原理 LDO LDO通过线性调节方式实现降压，输入电压需略高于输出电压（压差通常为0.2-2V），利用内部PMOS管或PNP三极管调整压差以稳定输出电压。其结构简单…...

编程日记 2025/8/22 21:39:42

FastChat部署大模型

一、前提条件 1、系统环境（使用的 autodl 算力平台） 2、安装相关库安装 modescope pip3 install -U modelscope # 或使用下方命令 # pip3 install -U modelscope -i https://mirror.sjtu.edu.cn/pypi/web/simple安装 fastchat git clone https://gi…...

编程日记 2025/10/4 0:10:29