HTML知识
目录
一、什么是HTML？
二、为什么用HTML？
三、HTML基础语法
正文
前情：
F12下百度网页：
标签<> </>
一个标签，由标签名跟属性构成
标签里面的标签：子标签、下属标签
header:表示<html></html>这个标签的主体信息/摘要信息
body:请求的内容，页面的原信息，页面上面的所有信息都是在body里面
一、什么是HTML？
1.超文本标记语言----------------不是编程语言，只能静态的标记（编程语言能自动化动态处理数据）
2.HTML的标签构成（标签=元素）
标签名
属性、ID、name、class、href、src
text文本（<a>哈哈哈哈哈</a> 标签中的“哈哈哈哈哈”就是text文本，有些标签中间没有文本，就是空文本）
3.标签的作用：所有HTML的标签的所有构成部分都可以用来定位元素（查找）
4.HTML跟json的对比
<a>哈哈哈哈哈</a> -------->转化成json格式，为：{"a":"哈哈哈哈哈"}
在html的<a></a>标签中还可以添加属性、样式，而json格式的只能存数据
所以html包含的内容/信息会更加丰富
二、为什么用HTML？
因为进行元素定位的依据，就是使用HTML
三、HTML基础语法
1.pycharm中新建一个.html的文件，会自动写好的一段html文本（body是空的），将title修改为python-selenium autotest.
如下图示：页面（body）为空，标题为修改后的python-selenium autotest.
2.body中的内容
①注释，<!-----注释----->，快捷键ctrl+/
②标题<h></h>
一级标题<h1></h1>
二级标题<h2></h2>
三级标题<h6></h6>
align属性，表示对齐方式,显示左对齐align="left"、右对齐align="right"、居中align="center"，
颜色属性style="color:#..."
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>python-selenium autotest</title> </head> <body> <h1 align="center" style="color:#00FF00">selenium之html练习</h1> <h2>这里是二级标题</h2> <h6>这里是三级标题</h6> </body> </html>
③ P标签 ( 段落 paragraph)
<p> hello world, hello python, hello java. </p>
页面显示的是一句话，并没有换行显示成段落！----这个是html的特性，不能控制页面的排版，需要跟 换行标签组合使用。
1)<br>换行-------一般不适用这种方法
<p> hello world,<br> hello python,<br> hello java.<br> </p>
2）一个段落写一个p标签
<p>hello world</p> <p>hello python</p> <p>hello java</p>
结果如上显示，段落之间有空行*（一个p标签是一个段落，所以有空行）。
不想要空行，怎么办？下面3）
3）<div> ♥♥-----常使用div进行页面排版、优化（html常见的）
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分，可以在div中加属性、内容，更加容易扩展，排版的优化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>python-selenium autotest</title> </head> <body> <h1 align="center" style="color:#00FF00">selenium之html练习</h1> <h2>这里是二级标题</h2> <h6>这里是三级标题</h6> <!--<br>格式的换行--> <p> hello world,<br> hello python,<br> hello java.<br> </p> <!--p标签--> <p>hello world</p> <p>hello python</p> <p>hello java</p> <!--div区块--> <div style="color:#0FFF00">hello world</div> <div style="color:#0FF0F0">hello python</div> <div style="color:#0000F0">hello java</div> </body> </html>
结果：
4）<hr> 水平线
直接<hr>,没有任何美化操作的
5）列表
（1）有序列表 orderedlist
语法<ol>
<li>哈哈哈</li>
<li>哇哇</li>
</ol>
（2）无序列表unorderedlist----------<ul></ul>
语法<ul>
<li>哈哈哈</li>
<li>哇哇</li>
</ul>
（3）列表嵌套
语法<ul>
<li>声音
<ul>
<li>哈哈哈</li>
<li>哇哇</li>
</ul>
</li>
</ul>
代码实现：
<!--水平线--> <hr> <!--有序列表--> <ol> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ol> <!--无序列表--> <ul> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ul> <!--嵌套列表--> <ul> <li>最喜欢的 <ul> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ul> </li> </ul>
结果:
6)表格 table
语法：表头：th
行：tr
列：td
代码实现：
<!--表格--> <!--border=1，加边框，不加就没有边框 --> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>职业</th> </tr> <tr> <td>彭于晏</td> <td>18</td> <td>明星</td> </tr> <tr> <td>胡歌</td> <td>18</td> <td>明星</td> </tr> </table>
结果：
7）超链接 <a></a>
a标签需要和href属性绑定使用，才是超链接。直接写a标签没有href，就是一个文本而已。
在web自动化测试中，对a标签的定位：①可以通过href属性定位。②通过text文本进行定位（没有href的情况下）
<!--超链接--> <!--放在div里面，换行--> <div> <a href="http://www.baidu.com">进入百度</a> </div>
结果：点击【进入百度】，即可跳转到百度首页
8）图片 image -----单个标签，不是标签对
①img标签要跟src属性组合使用，src存放图片地址，可以是在线地址，也可以是本地地址
src是用于原地址（href是用于超链接）
设置图片大小可以width、heigth
②点击图片，可以进入另一个页面：将img放到a标签里面，就会有a标签的特性（添加href）
♥♥定位img: 使用src定位
经常和a标签组合使用，如果img没有明显的特质，可以用a标签进行定位。
注意：不是所有的img都放在a标签中的。
代码实现：
<!--图片--> <a href="http://www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593939076033&di=947eeb758985a83dffad1f02e7b76980&imgtype=0&src=http%3A%2F%2Fimage11.m1905.cn%2Fuploadfile%2F2013%2F0507%2F20130507045955829.jpg" width="200px" height="220px"> </a>
结果：点击图片进入百度
9）iframe
♥♥：定位iframe：用src属性
在一个iframe中可以嵌套另外一个html页面（一个网页中存在另外一个网页），结构如下：
<!--iframe--> <iframe> <html></head> <head> <body></body> </html> </iframe>
提问：什么要嵌套网页？定位子网页的元素的时候，要指定。
代码实现：
<iframe src="http://www.baidu.com" width="300px" height="320px"> </iframe>
结果：加载了子页面，百度
10) input 只有一个标签，不是标签对--------------使用频率很高的是：用户输入、密码输入password、选择上传文件file
♥♥♥input标签，定位使用name属性!!!!!!
①input基础
input框前面有提示：label标签
input框内有隐形提示，输入数据后，提示消失，用placeholder
定位密码加锁，使用type="password"即可
代码实现：
<!--用户输入--> <label>请输入用户名1</label><input><br> <!--影藏提示 --> <input type="password" placeholder="请输入密码">
结果如下：输入的密码被隐藏
②input属性( password密码、checkbox多选、radio单选、submit提交按钮、file上传的文件、date获取日期、time获取时间、color颜色盘、button按钮、email只能输入email格式的、、、、、)
radio --单选
<!--单选radio--> <div>最喜欢的 <input type="radio">彭于晏 <input type="radio">胡歌 <input type="radio">鹿晗 </div>
直接按照上面的代码执行，是可以多选的，还必须加上一个name属性，表示在这个name 范围内是单选的。
如下彭于晏、胡歌、鹿晗是在同一个“最喜欢的男明星”这个范围内，是只能单选。
王菲、刘亦菲是在同一个“最喜欢的女明星”的范围，这两个人只能单选
“最喜欢的男明星” 跟 “最喜欢的女明星” 是不同的范围，这两个可以并存。
<!--单选radio--> <div>最喜欢的 <input type="radio" name="最喜欢的男明星">彭于晏 <input type="radio" name="最喜欢的男明星">胡歌 <input type="radio" name="最喜欢的男明星">鹿晗 <input type="radio" name="最喜欢的女明星">王菲 <input type="radio" name="最喜欢的女明星">刘亦菲 </div>
结果如下：男明星、女明星可以共存（男、女都只能选一个）
checkbox---多选
<!--多选checkbox，也要使用name属性--> <div>一般喜欢的 <input type="checkbox" name="一般喜欢的男明星">张三 <input type="checkbox" name="一般喜欢的男明星">李四 <input type="checkbox" name="一般喜欢的男明星">王二 </div>
结果：
date、color、file、time、button、email
<!--date、color、file、time、button、email--> <div>时间 <input type="date" > <input type="color" > <input type="file"> <input type="time"> <input type="button"> <input type="email"> </div>
结果：
11) select下拉框选择器------跟option组合使用
select标签的元素定位：option
<!--selection下拉框选择器--> <select> <option>选择1</option> <option>选择2</option> <option>选择3</option> </select>
结果：
12）form表单
form表单提交的数据，是以form表单的形式向后端传输。上面的所有内容，都是可以放在form中;表单是需要提交的，使用submit,如下面：
点击[提交]，数据传递到后端服务上；后端服务通过request.form，获取form表单的数据，处理后就可以进行登录等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>python-selenium autotest</title> </head> <body> <form> <h1 align="center" style="color:#00FF00">selenium之html练习</h1> <h2>这里是二级标题</h2> <h6>这里是三级标题</h6> <div style="color:#0FFF00">hello world</div> <div style="color:#0FF0F0">hello python</div> <div style="color:#0000F0">hello java</div> <!--水平线--> <hr> <!--有序列表--> <ol> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ol> <!--无序列表--> <ul> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ul> <!--嵌套列表--> <ul> <li>最喜欢的 <ul> <li>彭于晏</li> <li>胡歌</li> <li>鹿晗</li> </ul> </li> </ul> <!--表格--> <!--border=1，加边框，不加就没有边框 --> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>职业</th> </tr> <tr> <td>彭于晏</td> <td>18</td> <td>明星</td> </tr> <tr> <td>胡歌</td> <td>18</td> <td>明星</td> </tr> </table> <!--超链接--> <!--放在div里面，换行--> <div> <a href="http://www.baidu.com">进入百度</a> </div> <!--图片--> <a href="http://www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593939076033&di=947eeb758985a83dffad1f02e7b76980&imgtype=0&src=http%3A%2F%2Fimage11.m1905.cn%2Fuploadfile%2F2013%2F0507%2F20130507045955829.jpg" width="200px" height="220px"> </a> <iframe src="http://www.baidu.com" width="300px" height="320px"> </iframe><br> <!--用户输入--> <label>请输入用户名1</label><input><br> <!--影藏提示 --> <input type="password" placeholder="请输入密码"> <!--单选radio--> <div>最喜欢的 <input type="radio" name="最喜欢的男明星">彭于晏 <input type="radio" name="最喜欢的男明星">胡歌 <input type="radio" name="最喜欢的男明星">鹿晗 <input type="radio" name="最喜欢的女明星">王菲 <input type="radio" name="最喜欢的女明星">刘亦菲 </div> <!--多选checkbox，也要使用name属性--> <div>一般喜欢的 <input type="checkbox" name="一般喜欢的男明星">张三 <input type="checkbox" name="一般喜欢的男明星">李四 <input type="checkbox" name="一般喜欢的男明星">王二 </div> <!--date、color、file、time、button、email--> <div>时间 <input type="date" > <input type="color" > <input type="file"> <input type="time"> <input type="button"> <input type="email"> </div><br> <!--selection下拉框选择器--> <select> <option>选择1</option> <option>选择2</option> <option>选择3</option> </select> <input type="submit"> </form> </body> </html>
结果：
在form表单中添加后端服务器地址，使用action，请求方法：get,post。。。。，点击【提交】，会将form表单中的数据传输后端，后端处理后返回结果，显示在页面上：
<form action="http://httpbin.org/post" method="post"> 。。 。。 </form>
结果：点击提交，得到form表单传输的数据，按照name属性提取内容，没有name属性，就没有数据。
只要是用户输入的数据，都要加上name属性，提交后就可以提取到输入的数据了。------只要input标签，99%都会有name属性。
为什么要name属性？
通过input的输入框往后端传输数据时，只有通过name属性，后端才知道传了什么数据。
还需要注意：传入过去的数据，是不会拿到标签外面的数据的（标签外面的数据是显示在UI上的，能够看到的，并不能进行数据传递），所以下面这样的，就获取不到数据。
<div>一般喜欢的 <input type="checkbox" name="一般喜欢的男明星">张三 <input type="checkbox" name="一般喜欢的男明星">李四 <input type="checkbox" name="一般喜欢的男明星">王二 </div>
怎么办?
在标签里加上value属性---用户输入input的数据，都是通过value属性去传递数据。----传输的数据是放在value属性里面
<div>喜欢的 <input type="checkbox" name="star_male" value="张三">张三 <input type="checkbox" name="star_male" value="lisi">李四 <input type="checkbox" name="star_male" value="wanger">王二 </div>
结果：
总结：输入，name属性提取数据，value属性传递数据。input标签外的数据无法传递。radio、checkbox等都是通过value值进行传递。
在web自动化测试中，可以通过修改value值，改变输入的数据。
