PythonUI HTML
HTML：超文本标记语言（只是一门语言，不是编成语言，编成语言能够动态自动化处理一些事情，HTML只能处理静态的数据）
HTML的标签（元素）构成：
标签名
属性、ID、name、class、href、src
text文本
HTML作用：是元素定位的依据，所有的html的元素的构成部分都可以用来进行元素定位
HTML使用：
pycharm中新建一个.html的文件，会自动写好的一段html文本（body是空的）
注释快捷键：ctrl+/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>python29</title> </head> <body>
<!--注释--> <h1>1级标题</h1> <h2>2级标题</h2> <h3>2级标题</h3> <p>窗前明月光， 疑是地上霜， 举头望明月， 低头思故乡</p> <p>窗前明月光，<br> 疑是地上霜，<br> 举头望明月，<br> 低头思故乡。 </p> <p>窗前明月光，</p> <p>疑是地上霜，</p> <p>举头望明月，</p> <p>低头思故乡。</p> <div>窗前明月光，</div> <div>疑是地上霜，</div> <div>举头望明月，</div> <div>低头思故乡，</div> <!--有序列表--> <ol> <li>yuz</li> <li>开始</li> <li>小样儿</li> </ol> <!--无序列表--> <ul> <li>yuz</li> <li>开始</li> <li>小样儿</li> </ul> </body> </html>
表格：
<!--表格--> <table border="1"> <tr>table row <th>名字</th> table header <th>性别</th> <th>年龄</th> </tr> <tr> <th>雨泽</th> <th>2</th> <th>30</th> </tr> <tr> <td>小样儿</td> <td>1</td> <td>18</td> </tr> </table>
超链接:a标签
--需要和href属性绑定起来使用
--定位a标签
--可以通过href属性定位
--text文本
<!--超链接，经常会进行元素定位--> <div> <a href="http://www.baidu.com">进入百度</a> </div>
img标签
--和src绑定
--经常和a标签组合使用
--如果img没有明显的特征，可以通过a标签进行定位
<!--图片image,可以是本地地址，也可以是网页地址,放在a标签里可图片超链接--> <a href="http://www.baidu.com"> <img src="https://movie.douban.com/photos/photo/2602633532" width="800px" height="1200px"> </a>
注意：不是所有的img都放在a标签中的
iframe标签
--可以嵌套另外一个html页面
<!--iframe标签--> <iframe> <html> <head></head> <body>hello world</body> </html> </iframe> <iframe src="http://www.baidu.com" width="800px" height="600px"> </iframe>
input标签
--input框前面有提示：label标签
--input框内有隐形提示，输入数据后，提示消失，用placeholder
--定位密码加锁，使用type="password"
--输入type=""，会自动弹出各种类型
radio --单选
checkbox---多选
date、color、file、time、button、email
<!--input标签--> <label>用户名：</label><input> <label>密码：</label><input placeholder="请输入密码"> <label>密码：</label><input type="password" placeholder="请输入密码"> <!--单选--> <div> 你最喜欢的明星： <input type="radio" name="favor_star">梦辰 <input type="radio" name="favor_star">孙俪 <input type="radio" name="favor_star">万茜 </div> <!--多选--> <div> 你最喜欢的水果： <input type="checkbox" name="favor">苹果 <input type="checkbox" name="favor">香蕉 <input type="checkbox" name="favor">橙子 </div> <!--时间--> <input type="date"> <!--颜色--> <input type="color"> <!--上传文件--> <input type="file">
select选择器
--跟option组合使用
--标签的元素定位：option
<!--下拉框选择器--> 下拉框选择器: <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select> 下拉框选择器2: <select name="科目"> <option name="subject" value="yuwen">语文</option> <option name="subject" value="shuxue">数学</option> <option name="subject" value="yingyu">英语</option> </select>
form表单
在form表单中添加后端服务器地址，使用action，请求方法：get,post。。。。，点击【提交】，会将form表单中的数据传输后端，后端处理后返回结果，显示在页面上
注意：用户输入的内容必须要有name属性
<form action="http://httpbin.org/post" method="post"> <label>账号：</label><input name="username" placeholder="请输入账号"> <label>密码：</label><input name="password" type="password" placeholder="请输入密码"> 科目: <select name="科目"> <option name="subject" value="yuwen">语文</option> <option name="subject" value="shuxue">数学</option> <option name="subject" value="yingyu">英语</option> </select> <input type="submit"> </form>
在web自动化测试中，可以通过修改value值，改变输入的数据。
id属性
--在同一页面当中，id是唯一的
--在不同的页面当中，id是可以重复的
class属性
--几乎每个标签都会有class属性，是使用最频繁的一个
--极大的概率能够使用class属性进行元素定位
disabled、readonly属性
--不是元素定位，而是我们会遇到某些情况，
当定位某些输入框的时候，需要改变元素的属性，让他可以读写
放你发现某个元素不能读写的时候，检查源代码是否有这两个属性。
登录页面
1，有用户名输入框
2，密码输入框
3，登录按钮
4，清空数据按钮，当点击时，清空输入的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <label>账号：</label><input id="uName" name="username" type="text" placeholder="请输入账号" ><br> <label>密码：</label><input id="pwd" name="password" type="password" placeholder="请输入密码" ><br> <button value="login" type="button" onclick="my_submit()">登录</button> <button id="btn" type="button" onclick="my_reset()">重置</button> <script language="JavaScript"> function my_submit(){ var uName = document.getElementById("uName") var pwd = document.getElementById("pwd"); if (uName.value == ""){ alert("请输入用户名") } else if (pwd.value == ""){ alert("请输入密码") } } function my_reset(){ var uName = document.getElementById("uName") var pwd = document.getElementById("pwd"); uName.value=""; pwd.value=""; } </script> </body> </html>
