自动化测试第三节课

Web

**HTML**
-  网页的具体内容和结构
**CSS**
-  网页的样式
**JavaScript**
-  网页的交互效果

拓展知识,

1.平面设计(ps, dw(dreamweaver), coredraw)
2.前端(html, css, js)
3.后端(服务器+数据库)
4.测试(漏洞检测，能不能发版)

HTML

基本概念
HTML（超文本标记语言），是为了发送Web上的超文本开发的标记语言
他可以理解为文本，然后浏览器负责进行解析
HTML5 考虑到在手机也能正常运行使用。

HTML骨架

HTML由标签
1.双标签的书规则:<双标签名称></双标签名称>
2.单标签的书写规则:<但标签名称 />
3.严格的html语法要求，不管单双标签都必须要正确的关闭，单标签通过/关闭，双标/标签关闭
4.可嵌套使用，但是不能交叉嵌套

3.课堂练习答案.jpg

HBuilder
1.HBuilder默认字符编码为utf8，所以不加<meta charset="UTF-8">不会乱码。

2.代码从上至下

HTML内常见标签整理

h1 h2 h3 等等为字体的大小如下
段落标签为p

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第二个网页</title>
    </head>
    <body>
<!--        这是一些内容文字 <br />
        我想换一个行 <br />
        
        我想空行 &nbsp;  空三个行 -->
        
        <h1>我是标题标签,最大的</h1>
        <h2>我是标题标签,比h1标签小一点</h2>
        <p>我是文章段落标签</p>  
        
        <b>文字加粗</b>
        <strong>文字是strong的加粗文字</strong> <br />
    
        <i>倾斜的文字i标签</i>  <br />
        <em>倾斜的文字标签</em>
    </body>
</html>

上述代码中为空格和换行，空格使用想换一个行 <br />
容器标签:div, span;（用来容纳其他标签）


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div和span标签</title>
    </head>
    <body>
        <!-- div容器标签, 会独占一行,所以会自动换行 -->
        <div>我是一个很大的容器, 大的块标签</div>
        <div>我是一个很大的容器, 大的块标签</div>
        <div>我是一个很大的容器, 大的块标签</div>
        
        <span>我是一个容器标签, 文字容器</span>   <br />
        <span>我是一个容器标签, 文字容器</span>  <br />
        <span>我是一个容器标签, 文字容器</span>  <br />
    </body>
</html>

可以注意到容器标签连续使用要用br才能换行，div大的标签不用。

img 图片标签(单标签)
1.可通过属性src来插入图片，属性写在<>标签内，格式: 属性名=属性值，如src="01.jpg"

<img src="images/image3.jpeg" width="200" height="200" />
        
        <!-- 按比例缩小,只需要设置一个值 -->
        <img src="images/image3.jpeg" width="300" />
        
        <!-- 里面可以设置title标签(图片标题)  alt属性(图片的提示文字)-->
        <img src="images/image3.jpeg" width="300" title="漂亮的小姐姐" />
        <img src="image3.jpeg" width="300" title="漂亮的小姐姐" alt='女孩' />
        
        <img src="/Users/James/Desktop/03.软件测试-HTML基础/02.资料/images/image3.jpeg" />

title将鼠标悬浮会出现其中的内容，alt图片报错出现提示的内容。

2.绝对路径：目录下的绝对的位置，直接到达目标位置，通常是从盘符开始的路径，不推荐使用，一般使用相对路径

链接标签 a 可跳转到目标位置

        <a href="04图片标签.html">这是一个a标签,它是链接标签</a>  <br />
        <a href="http://www.baidu.com">这是一个a标签,它是链接标签, 跳转百度</a> <br />
        
        <a href="http://www.baidu.com" target="_blank">新建一个页面, 跳转百度</a>
        <a href="#">点击之后,跳转到当前页面最前面(属于空链接的写法)</a> <br />
        <a href="javascript:;">点击之后,跳转到当前页面最前面(属于空链接的写法)</a>

form表单

        <form action="某一个后台程序" method="get"> 文本输入框
            <input type="text" />
        </form>