UI自动化（1）---HTML基础知识
一、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>
上面代码对应在浏览器中展示的样式：
