Web 自动化之 HTML JavaScript 详解

文章目录

- - 一、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" id="f1" >学习</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；
}