2020年8月10日31---Html知识介绍

最新推荐文章于 2021-03-23 07:14:42 发布

henry_rhy

最新推荐文章于 2021-03-23 07:14:42 发布

阅读量540

点赞数

分类专栏： web自动化

本文链接：https://blog.csdn.net/qq_40236497/article/details/107947483

版权

web自动化专栏收录该内容

19 篇文章 0 订阅

订阅专栏

'''
==================================
cooding:utf-8
@Time    :2020/8/11 21:09
@Author  :henry
@Email   :yinpingwei@gmail.com
@File    :web_day1.py
@Software:PyCharm
===================================
'''
'''
selenium  --  web网页自动化 -- 功能自动化

前端：
    由html + css + javascript 组成
    html: 页面的内容表达
    css: 样式布局
    javascript: 动态处理页面+用户响应

标签对 - 标签名 - 定义好了的。
 
一个html页面当中，有非常多的标签对。也叫做元素。
标签对里是以键值对的方式来排列的
    <标签名></标签名>
    <标签名 属性名=值 属性名=值  属性名=值></标签名>
    <标签名 属性名=值 属性名=值  属性名=值>文本内容</标签名>
 
所有的元素有3个特征：标签名、属性、文本内容

标签名 a： 表示是个链接，点击可跳转的
标签名 script src ：是一个json脚本,不是页面的表达

1个页面有超多元素：
    如何在页面有众多的元素当中，找一个符合条件的元素：
        1.列表了特征
        2.在页面的元素当中一个去遍历匹配
        
在页面上呈现元素，主要是写在body里面
例如：
type="text” 代表着文本
readonly   表示只读不允许写的意思
type="radio" 代表单选
type="checkbox" 代表多选
type="file"  代表上传
type="button" value="查看惊喜"    代表着按钮文字
disabled   表示不可点击，置灰
type="email"  代表着填写email
type="date"   代表着选择时间
type="password"    代表着输入密码
type="color">    选择颜色

<img src="" alt="">   填写img,tag键自动补全剩余的，代表着图片
    1. src=""  表示图片的来源地址
    2. alt=""
    
<a href=""></a>  填写a,tag键自动补全剩余的，代表着链接
    1. href=""  表示链接地址
    
<!--    !快级元素？-->  ctrl+/
 
<div></div>  填写div,tag键自动补全剩余的 
    1.不代表任何东西，就像一个表格一样，可以在里面放东西，各种链接
    2.是一个分块的组
    
<span></span>  填写span,tag键自动补全剩余的
    1.就一行文本，

<ul></ul>  填写ul,tag键自动补全剩余的
    <li></li>  填写li,tag键自动补全剩余的
    1.都是表单，填写文字的
    
<table></table>  填写table,tag键自动补全剩余的，这个是表格，
    <th></th>  这个代表表头
    <tr></tr>  这个代表行
    <td></td>  这个代表列

select>option   这个代表下拉列表，tag键自动补全剩余的  
    1.option 是选项

<iframe src="xxxx" frameborder="0"></iframe>   iframe，tag键自动补全剩余的
    1.代表着框架，框架镶嵌框架

<textarea></textarea>   这个表示多文本域，也叫富文本

<br>   代表换行
<h1>xxx</h1>  表示大标题的呈现，有1-6个级别
<from></from>表单元素
<action>  表示提交到后台，需要json处理

弹框有两种：
    1.第一种是html弹框，可以定位的
    2.第二种是弹框是不可以定位的，是最顶层的，是由js来表达的，有三种
        2.1 第一种是：alert("xxxxx")    弹框只有确定按钮，是没有输入的
        2.2 第二种是：confirm("xxxx")   弹框有确认和取消按钮，是没有输入的
        2.3 第二种是：prompt("xxxx？")  弹框有确认和取消按钮，是可以输入的



哪些属性所有元素都可以有：
style : 内联样式。直接在元素上通过style属性来设置样式。 display:none 隐藏不显示。
id: 身份证。在页面当中，id值不会重复。唯一性。 可能是变动的(每次访问时id不一样)
class: 类。class值不是唯一的。一个元素可以有多个class值，用空格隔开。
name: 不唯一。低于id的一个可以用来识别元素的特性。

紫色的是标签名
棕色的全是属性    属性后面的是值
黑色代表文本内容

元素的状态：
  存在 - 存在于html当中。
  可见 - 在存在html的前提之下，有可见和不可见。
  可用 - 在可见的前提之下，元素有可用和不可用。

'''

在这里插入图片描述

html练习文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>py30</title>
</head>
<body>
    <from>
        <h2>py30 自动化网址</h2>
        请输入你的用户名：<input id="ww" name="nb" type="text" readonly>
        <br>
        请选择你的性别：<input type="radio" name="sex">男  <input type="radio" name="sex">女  <input type="radio" name="sex">人妖
        <br>
        请选择你的兴趣爱好是：<input type="checkbox">看书  <input type="checkbox">睡觉
                <input type="checkbox">动漫 《斗罗大陆》  <input type="checkbox">学习python自动化
        <br>
        请上传你的靓照：<input type="file">
        <br>
        请点击按钮：<input type="button" value="查看惊喜!" disabled>
        <br>
        请确认你的时间：<input type="date">
        <br>
        请输入你的邮箱：<input type="email">
        <br>
        请输入你的密码：<input type="password">
        <br>
        请选择你的颜色：<input type="color">
        <br>
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="400" height="260px;">
        <br>
        <a href="http://www.baidu.com">点我一下，就去百度</a>
    </from>
    <!--    !快级元素？-->
    <div>
        <div></div>
        <a href=""></a>
        <img src="" alt="">
        <span>py30自动化测试</span>
    </div>
    <div>
        <ul>
            <li>py30-学习</li>
            <li>py30-树胶</li>
            <li>py30-运动</li>
        </ul>
        <table>
            <th></th>
            <tr></tr>
            <td></td>
        </table>
    </div>

    <select name="我的爱好" id="hobby">
        <option value="动漫">动漫</option>
        <option value="动漫">睡觉</option>
        <option value="动漫">美食</option>
        <option value="动漫">学习</option>
        <option value="动漫">唱歌</option>
    </select>
    <br>
    <iframe src="http://www.baidu.com" frameborder="0"></iframe>

    <textarea></textarea>


</body>
</html>

henry_rhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020年8月10日31---Html知识介绍

'''==================================cooding:utf-8@Time :2020/8/11 21:09@Author :henry@Email :[email protected]@File :web_day1.py@Software:PyCharm===================================''''''selenium -- web网页自动化 -- 功能自动化前端：由html
复制链接

扫一扫