UI自动化测试，web自动化测试，了解HTML元素

最新推荐文章于 2024-04-10 06:57:01 发布

小洁将心向明月

最新推荐文章于 2024-04-10 06:57:01 发布

阅读量334

点赞数

分类专栏： UI自动化文章标签：前端 html ui

本文链接：https://blog.csdn.net/colala6688/article/details/126687470

版权

UI自动化专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML

容器型元素：div,form,table,frame

页面元素：a,img,input(button,text,file,),select-下拉框，radio，textarea，submit

文本标签

    <!-- 
    在这里写注释使用Ctrl+shift+/写注释 
    DOCTYPE 声明下面是一个html文件
     -->
    <!DOCTYPE html>
    <html>
        <head>
            <!-- 编码格式 
            单标签：只有开始，没有结束
            标签名后面的键值对称之为标签的属性
            -->
            <meta charset="utf-8">
            <title>百度一下，你就知道</title>
            <!-- 页面作者 -->
            <meta name="张三" content="zhangsan@163.com;3123123"></meta>
            <!-- 页面搜索关键字 -->
            <meta name="keywords" content="软件开发;项目维护"></meta>
            <!-- 页面描述 -->
            <meta name="description" content="公司首页"></meta>
            
            <!-- link 可以引入外部的css样式表 -->
            <link href="css.css">
            <!-- 引入外部的js代码 -->
            <script src="hello.js"></script>
        </head>
        <body>
            <!-- 如果想在浏览器中看到内容，就要放到body标签 -->
            <!-- 你好呀！明天周六，可以要考试，是多选题
            晚上还有作业，头大了 -->
            
            <!-- 文本标签 -->
            
            <!-- h系列的是标题标签，h1-h6依次变小 -->
            <h1>周末了真开心</h1>
            <h2>周末了真开心</h2>
            <h3>周末了真开心</h3>
            <h4>周末了真开心</h4>
            <h5>周末了真开心</h5>
            <h6>周末了真开心</h6>
            
            <!-- 分割线
             可以设置宽度 默认是铺满这一页 居中显示
             -->
            <hr width="30%" align="left">
            
            <!-- 段落标签 
            一个p标签代表一个段落
            -->
            
            <p>你好呀！明天周六，可以要考试，是多选题</p>
            <p>晚上还有作业，头大了</p>
            
            <!-- 加粗 倾斜 -->
            <b>周瑜</b><br>
            <i>黄盖</i><br>
            <u>黄盖</u><br>
            <i><b>孙权</b></i>
            <b><i>孙权</i></b>
            
            <!-- br是换行标签 -->
            
            <!-- 中划线 -->
            <br><del>写错了案发三份</del>
            
            <!-- 字体标签 
            color:设置字体颜色
            size 设置字体大小 从1-7由小到大
            fact：设置字体
            -->
            <font color="red" size="7" fact="宋体">写错了</font>
        </body>
    </html>

多媒体标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多媒体标签</title>
    </head>
    <body>
        <!-- 多媒体标签指的就是音视频 
        src：图片地址
        width 宽
        height 高
        title 鼠标悬停在图片上的提示信息
        alt 图标丢失后的提示信息
        -->
        <!-- <img src="images/8.jpg" width="1000" height 高="500" title="这是一张图片" alt="糟糕，找不到了"/> -->
        <!-- 引入音频 -->
        <!-- <embed src="蔡徐坤.mp3"></embed> -->
        <!-- 引入视频 -->
        <embed src="不笑抽了不算.mp4" width="1000" height="500"></embed>
    </body>
</html>

超链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>超链接</title>
    </head>
    <body>
        <!-- 超链接到在线地址 
        target="_blank" 可以设置超链接打开网页会在一个新的窗口页上打开
        
        -->
        <a href="https://www.baidu.com/" target="_blank">点我有惊喜1</a>
        <!-- 超链接一张图片 -->
        <a href="images/4.jpg">点我有惊喜2</a>
    </body>
</html>

列表标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表标签</title>
    </head>
    <body>
        <!-- 无序列表 -->
        <ul>
            <li>刘备</li>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
            <li>黄忠</li>
        </ul>
        
        <!-- 有序列表 -->
        <ol>
            <li>刘备</li>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
            <li>黄忠</li>
        </ol>
        
    </body>
</html>

表格标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格标签</title>
    </head>
    <body>
        <!-- 
         tr 代表行
         td代表单元格 th是自动加粗加黑
         -->
        <table border="1px" >
            <tr>
                <th>姓名</th>
                <th>职业</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>晓明</td>
                <td>演员</td>
                <td>40</td>
            </tr>
            
            <tr>
                <td>马大师</td>
                <td>演员</td>
                <td>72</td>
            </tr>
            
        </table>
    </body>
</html>

iframe标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 在这个页面中会嵌套一个子页面 -->
        <iframe src="hello.html" width="500px" height="500px">
        </iframe>
        <iframe src="new_file01.html" width="300px" height="300px"></iframe>
    </body>
</html>

form表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 用于给服务器提交数据 -->
        <form action="" method="GET">
            身份证：<input type="text" name="uname" placeholder="请输入身份信息"/><br>
            密码：<input type="password" name="pwd"/><br>
            <!-- 单选框
            如果想做单选按钮，name属性的值必须保持一致
            checked设置了默认值
            -->
            性别：
            <input type="radio" name="gender" value="0"/>男
            <input type="radio" name="gender" value="1" checked/>女
            
            <br>
            <!-- 多选 -->
            你喜欢的语言：
            <input type="checkbox" name="favlan" value="1"/>python
            <input type="checkbox" name="favlan" value="2"/>java
            <input type="checkbox" name="favlan" value="3"/>js
            <input type="checkbox" name="favlan" value="4" checked/>go
            <br>
            <!-- 下拉选择框 -->
            选择你喜欢的城市：
            <select name="city">
                <option value="0">---------请选择-------</option>
                <option value="1">---------桂林-------</option>
                <option value="2">---------南宁-------</option>
                <option value="3">---------南昌-------</option>
                <option value="4">---------武汉-------</option>
                <option value="5">---------青岛-------</option>
                <option value="6">---------三亚-------</option>
                
            </select>
            
            <!-- 提交按钮 -->
            <input type="submit"/>
            
            <button></button>
        </form>
    </body>
</html>

HTML和CSS和JavaScript的关系：

html:整个页面的结构和骨架

css:层叠样式表，用于修饰，美化页面的元素。相当于是美颜的效果。

JavaScript：定义元素的操作（如点的时候有什么行为）

小洁将心向明月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
UI自动化测试，web自动化测试，了解HTML元素

做自动化，了解页面元素是基础，是前提，元素定位的时候必不可少。如何查看页面元素？方法一：鼠标移动到元素上，点击鼠标右键，点击检查，即可查看！方法二：按下键盘上的F12按键，即可看见。如果是笔记本电脑，按下shift+F12
复制链接

扫一扫

专栏目录