一、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> 
    姓名：星瑶<br/> 
    专业：计算机软件<br/> 
    图片:<br/><img src="微微2.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脚本两种方式：
1、内嵌式
2、外部导入

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 value="正在学习<<Python基础>>";
                document.getElementById("result").value=name;
            }
            function zt2(){
                <!--函数体语句-->
                var value2="正在学习<<接口自动化测试>>";
                document.getElementById("result").value=value3;
            }
            function zt3(){
                <!--函数体语句-->
                var value3="正在学习<<web自动化测试>>";
                document.getElementById("result").value=value3;
            }
            function abc(){
                alert("操作成功！！");
            }
            function con(){
                res=confirm("请问需要删除此商品？");
                if (res==true){
                    alert("删除");
                    }
            }
            function pro(){
                res=prompt("请输入需要删除的商品的编号");
                alert(res);
            }
        </script>
    </head>
    <body>
    <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="专题八"></input><br/>
    当前学习阶段:<input type="text"  id="result" value="Python基础"></input><br/>
    <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>
    </body>
</html>

3、js弹窗处理

网页的弹窗有三种
1、提示弹窗
2、包含确定和取消的弹窗
3、包含确定和取消的弹窗+用户输入

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

1、if/else语句进行控制

if(条件){
}
else{
}

2、if/else嵌套

if(条件){
if(条件){
}
else{
}
}
else{
if(条件){
}
else{
}
}

3、switch语句

switch(变量){
case 常量1：
js代码；
break；
case 常量2:
js代码；
break；
case 常量3:
js代码；
break；
….
default:
js代码
break；
}

作业：

充钱规则：根据不同支付方式，享受不同的折扣，显示最终的成交价格
支付方式：下拉框微信支付 9折京东支付8折支付宝支付7折
Q币的数量：
Q币单价：
结算按钮：点击结算按钮显示最终成交价格，显示下面的这个文本框
成交价：

<!--充钱规则：根据不同支付方式，享受不同的折扣，显示最终的成交价格 
支付方式：下拉框 微信支付 9折 京东支付8折 支付宝支付7折 
Q币的数量： 
Q币单价： 
结算按钮：点击结算按钮显示最终成交价格，显示下面的这个文本框 
成交价-->
<html>
    <head>
        <title>我的网页</title>
        <script language = "javascript">
        function jiesuan(){
            var type = document.getElementById("type").value;
            var num = document.getElementById("num").value;
            var single_price = document.getElementById("single_price").value;
            var total_price;
            if (!isNaN(num) && !isNaN(single_price)){
                switch(parseInt(type)) {
                    case 9:    
                    case 8:    
                    case 7:
                        total_price = type * num * single_price/10;
                        document.getElementById("deal_price").value = total_price + "元";
                        break;
                    default:
                        alert("请选择支付方式!");
                        break;
                }
            }
            else{
                alert("Q币数量和单价必须为数字!")
            }
        }
        </script>
    </head>
    <body>
        支付方式：
        <select id = "type">
            <option value = 9>微信支付 9折</option>
            <option value = 8>京东支付 8折</option>
            <option value = 7>支付宝支付 7折</option>
        </select> <br/>
        Q币的数量：<input type = "text" id = "num"> </input> <br/>
        Q币的单价：<input type = "text" id = "single_price"> </input>
        <input type = "button" id = "js" value = "结算" onclick = "jiesuan()"> </input> <br/>
        成交价：<input type = "text" id = "deal_price"> </input> <br/>
    </body>
</html>

自动化测试框架学习笔记

web基础-01-Web自动化之HTML&JavaScript详解