UI自動化（1）---HTML基礎知識
阿新 • • 發佈：2018-01-11
shortcut 直接 hold 拼搏 寂寞 方式 lis thread 尖括號
一、HTML基礎
1、HTML（超文本標記語言）
html代碼實際上就是一套能夠被瀏覽器所識別的規則代碼，由一個個標簽組成。html代碼就是一大長串字符串，而這種字符串的格式正好能夠被瀏覽器所識別，也就有了我們的WEB頁面。
-
- HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標簽通常是成對出現的，比如 <b> 和 </b>
- 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
- 開始和結束標簽也被稱為開放標簽和閉合標簽
2、後端與前端交互方式
1）後端通過直接返回瀏覽器能夠識別的html代碼
2）後端返回數據，前端替換html種的指定數據
3、HTML標簽
1 <!DOCTYPE html> <!--標準的html規則，類似於Python的解釋器--> 2 <html lang="en"> <!--html標簽(只能一個)，指定語言en--> 3 <head> <!-- html head標簽的開始 --> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> <!-- html head標簽的結束 --> 7<body> <!-- html body標簽的開始 --> 8 <a href="http://www.cnblogs.com/MaggieTang/">MaggieTang的博客</a> <!--類似有很多href這種的叫做標簽內部屬性--> 9 註釋的寫法 <!-- --> 10 </body> <!-- html body標簽的結束 --> 11 </html>head標簽
4、head標簽
head標簽中大部分內容是不能在網頁展示的。titile和引入的shortcut icon 是唯一能在網頁展示的兩個內容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- 每3秒中刷新一次 --> 6 <!--<meta http-equiv="refresh" content="3">--> 7 <!-- 3秒後跳轉頁面 --> 8 <!--<meta http-equiv="refresh" content="3;Url=http://www.imdsx.cn/dsx/">--> 9 <!-- 關鍵字檢索 --> 10 <!--<meta name="keywords" content="大師兄">--> 11 <!-- 網站描述--> 12 <!--<meta name="description" content="大師兄是名低調的測試工程師">--> 13 <!-- ie打開時以最高的兼容模式打開 --> 14 <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">--> 15 <!--style是寫css標簽的位置--> 16 <style></style> 17 <!--script是引入js文件的--> 18 <script></script> 19 <!--title的圖標--> 20 <title>HTML標題</title> 21 <!--瀏覽器上title旁邊的圖標--> 22 <link rel="shortcut icon" href="http://www.imdsx.cn:80/wp-content/themes/QQ/images/favicon.ico"/> 23 <!--link stylesheet引入的是外部的樣式表（CSS）--> 24 <link rel="stylesheet" href=""/> 25 <body> 26 </body> 27 </html>
5、body標簽
<body> 與 </body> 之間的文本是可見的頁面內容。所有的標簽分為兩種：自閉合標簽（單身狗，比如有：meta、link、input。。。。。）和主動閉合標簽（有對象，比如有：p、div、a、title、html。。。。）
1、塊級標簽（占用整行）。比如：div標簽
2、內聯標簽也叫行內標簽（用多少占多少）。比如：span標簽
1 <!--p是段落標簽--> 2 <p>年輕,就是拿來折騰的。讓自己具備獨立生活的能力，具備一技之長的資本，是需要無數個夜晚的靜思，無數寂寞時光的堆積而成的。<br/> 3 別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有每天進步，才能擁抱生命的無限可能！<br/> 4 你以為你給對方留了電話存了微信，應該彼此也能互相幫忙，卻忘記了一件很重要的事情，只有關系平等，才能互相幫助。<br/> 5 不要為了戶口丟掉生活，為了穩定丟掉青春，為了平淡丟掉夢想，因為你所謂的穩定，不過實在浪費生命。<br/> 6 真正的勇者不是狼狽的逃脫，而是用閑暇時間，磨練自己。<br/> 7 只有等現實的日子富足了，能力夠強了，才可以去追求那些美好的生活狀態，才該去追求那些偉大的夢。否則那些夢幻般的生活，都只是空中閣樓，不堪一擊。<br/> 8 生活是自己的，自己都不求進取，憑什麽讓別人給你美好的未來？</p> 9 <!--， 表示空格，<表示“<”符號，>表示“>”符號--> 10 <p>   前面都是添加的空格。</p> 11 <!--br是換行標簽--> 12 <br/> 13 <!--1、塊級標簽（占用整行）比如：div標簽--> 14 <!--2、內聯標簽也叫行內標簽（用多少占多少）比如：span標簽--> 15 <!--<h1><h2><h3><h4><h5><h6>標題標簽的數字越小，字體越大，數字越小，字體越小--> 16 <h1>MaggieTang</h1> 17 <h2>MaggieTang</h2> 18 <h3>MaggieTang</h3> 19 <h4>MaggieTang</h4> 20 <h5>MaggieTang</h5> 21 <h6>MaggieTang</h6>
上面的代碼在瀏覽器前端展示的樣式如下：
1 <!--div標簽相當於一個白板，什麽都沒有，一切都需要通過css進行裝飾，同時通過css進行裝飾後，可以變成任意標簽。--> 2 <div></div> 3 <!--真正的白板標簽，什麽CSS樣式都沒有，同時通過CSS進行裝飾後，可以變成任意標簽。--> 4 <span>我是span標簽</span>
1 <!--文本框標簽 input--> 2 <!--文本框--> 3 <div> 4 <label for="name">用戶名：</label> 5 <input type="text" name="username" id="name" value="請輸入用戶名"> <!--value是值--> 6 <input type="text" name="username" placeholder="請輸入用戶名"> <!--placeholder類似於文本框提示--> 7 </div> 8 <div> 9 <!--密碼框--> 10 <label for="passwd">密碼：</label> 11 <input type="password" name="password" id="passwd" placeholder="請輸入密碼"> 12 </div> 13 <div> 14 <!--多選框--> 15 <label>興趣愛好：</label> 16 <!--默認勾選checked="checked"--> 17 <input type="checkbox" name="aihao" id="paino" value="1"><label for="paino">鋼琴</label> 18 <input type="checkbox" name="aihao" id="balei" value="2"><label for="balei">芭蕾</label> 19 <input type="checkbox" name="aihao" checked="checked" id="paint" value="3"><label for="paint">畫畫</label> 20 <input type="checkbox" name="aihao" id="wushu" value="4"><label for="wushu">武術</label> 21 <input type="checkbox" name="aihao" id="xiaotiqin" value="5"><label for="xiaotiqin">小提琴</label> 22 </div> 23 <div> 24 <!--單選框，name相同表示單選框（radio）的屬性是互斥的。--> 25 <label for="sex">性別：</label> <!--label通過for和input的id進行連用，增大input獲取焦點的範圍--> 26 <input type="radio" name="sex" id="male"><label for="male">男</label> 27 <input type="radio" name="sex" id="formale"><label for="formale">女</label> 28 </div> 29 <div> 30 <!--按鈕，value為按鈕上的值--> 31 <input type="button" value="添加"> <!--button只是一個單純的按鈕，如果想要提交數據，就需要和js連用--> 32 <input type="submit" value="提交"> <!--submit 和form連用，直接請求form對應的action的目標URL--> 33 <input type="reset" value="重置"> <!--reset 和form連用，使用reset重置到初始化樣式。--> 34 </div>
上面代碼對應在瀏覽器中展示的樣式：
1 <div> 2 <!--form比做一張白紙，input輸入進來的東西就是寫在紙上的字，通過form提交給服務端--> 3 <!--action是提交的url的路徑--> 4 <!--method請求方式（get/post)--> 5 <form action="http://www.baidu.com" method="get"> 6 <input type="text" name="username" placeholder="請輸入用戶名"> 7 <input type="password" name="password" placeholder="請輸入密碼"> 8 <input type="submit" value="提交"> 9 <input type="reset" value="重置"> 10 </form> 11 </div>
上面代碼對應在瀏覽器中展示的樣式：
1 <div> 2 <!--textarea多行文本--> 3 <!--textarea的文本內容需要寫在兩個標簽之間，沒有value屬性。--> 4 <textarea rows="10px" cols="30px">默認值(內容)</textarea> 5 </div> 6 <div style="display: inline-block"> 7 <!--下拉框，size代表可以展示多少個option，selectd表示默認選中--> 8 <select size="2"> 9 <option selected="selected">北京</option> 10 <option>上海</option> 11 <option>廣東</option> 12 <option>四川</option> 13 </select> 14 </div> 15 <div style="display: inline-block"> 16 <!--下拉框，multiple表示可以支持多選--> 17 <select size="4" multiple="multiple" name="city"> 18 <option selected="selected" value="1">北京</option> 19 <option value="2">上海</option> 20 <option value="3">廣東</option> 21 <option value="4">四川</option> 22 </select> 23 </div> 24 <div style="display: inline-block"> 25 <!--分組select--> 26 <select> 27 <optgroup label="中國"> 28 <option>北京</option> 29 <option>上海</option> 30 <option>浙江</option> 31 </optgroup> 32 <optgroup label="美國"> 33 <option>芝加哥</option> 34 <option>紐約</option> 35 <option>洛杉磯</option> 36 </optgroup> 37 </select> 38 </div>
上面代碼對應在瀏覽器中展示的樣式：
1 <!--a:超鏈接標簽--> 2 <a href="http://www.baidu.com">百度首頁（當前頁面跳轉）</a> <!--當前界面跳轉--> 3 <a href="http://www.baidu.com" target="_blank">百度首頁(新標簽)</a><!--新的標簽打開百度首頁--> 4 <a href="http://www.baidu.com" target="_blank" style="text-decoration: none">百度首頁(沒有下劃線)</a><!--去掉標簽的下劃線--> 5 <!--a還可以作為錨點，例子：回到頂部。--> 6 <div id="ding" style="height: 1000px"></div> 7 <a href="#ding" style="text-decoration: none">回到頂部</a> <!--錨點--> 8 <div> 9 <!--img：圖片標簽--> 10 <img src="20180106115308.jpg" alt="圖片不見了（圖片不見的時候顯示我）" title="孩子抱狗（鼠標移上去的時候顯示的名字）"> 11 <img src="201801061153080.jpg" alt="圖片不見了（圖片不見的時候顯示我）" title="孩子抱狗（鼠標移上去的時候顯示的名字）"> 12 </div> 13 <div> 14 <!--無序列表--> 15 <ul> 16 <li>第一點</li> 17 <li>第二點</li> 18 <li>第三點</li> 19 </ul> 20 <!--有序列表--> 21 <ol> 22 <li>第一點</li> 23 <li>第二點</li> 24 <li>第三點</li> 25 </ol> 26 <!--分組列表--> 27 <dl> 28 <dt>主菜單一</dt> 29 <dd>子菜單1.1</dd> 30 <dd>子菜單1.2</dd> 31 <dt>主菜單二</dt> 32 <dd>子菜單2.1</dd> 33 <dd>子菜單2.2</dd> 34 </dl> 35 </div>
上面代碼對應在瀏覽器中展示的樣式：
1 <!--表格標簽--> 2 <!--外層是table標簽，thread是表頭，tbody是內容--> 3 <!--tr是行，th是標題（列）--> 4 <!--tr是行，td是具體內容（列）--> 5 <!--border是表格外框線條粗細，cellpadding是表格大小，border-collapse:collapse為表格設置合並邊框模型--> 6 <table border="1" cellpadding="10" style="border-collapse:collapse;" > 7 <thead> 8 <tr> 9 <th>ID</th> 10 <th>課程</th> 11 <th>姓名</th> 12 <th>年齡</th> 13 <th colspan="2">操作</th> 14 </tr> 15 </thead> 16 <tbody> 17 <tr> 18 <td>1</td> 19 <td rowspan="3">計算機</td> 20 <td>阿夏</td> 21 <td rowspan="3">18</td> 22 <td>編輯</td> 23 <td>刪除</td> 24 </tr> 25 <tr> 26 <td>2</td> 27 <td>阿喜</td> 28 <td>編輯</td> 29 <td>刪除</td> 30 </tr> 31 <tr> 32 <td>3</td> 33 <td>阿飛</td> 34 <td>編輯</td> 35 <td>刪除</td> 36 </tr> 37 </tbody> 38 </table>
上面代碼對應在瀏覽器中展示的樣式：
UI自動化（1）---HTML基礎知識