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值，改變輸入的數據。