软件测试基础(四)

学习Html是为了未来给Web项目功能测试打基础的

认知Html

Html：超文本标记语言

Html5基本骨架组成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    网页内容编写区域
</body>
</html>

常用标签

注释：不会被程序执行，用来解释代码的含义。快捷键：Ctrl + /

在前端中，页面发布上线之前，需要检查所有的注释是否由不恰当的文字出现或去除掉注释

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <!-- 
        通过 h1 ~ h6 来定义标题，其中 h1 最大
        h1 一般用来代表整个网页的主标题，只能出现一次，利于seo优化
    -->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题5</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

浏览器页面显示如下图所示：

段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <!-- 
        通过 p 来定义段落
        浏览器会自动在每个 <p> 元素前后添加一个空行
    -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, officiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, libero!</p>
</body>
</html>

浏览器页面显示如下图所示：

在Vscode中可以输入lorenm+数字来快速生成一段英文

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <!-- 
        通过 a 来定义超链接，用于从一张页面链接到另一张页面
        其中最重要的是 href 属性，它指示链接的目的地
        target 属性指定窗口的打开方式，_blank 新建窗口、_self 在当前窗口
    -->
    <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
</body>
</html>

浏览器页面显示如下图所示：

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!-- 
        通过 img 来定义图片，用于在 HTML 页面中嵌入图像
        从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页，<img> 标签创建了一个容器，用于引用图像
        用 src 属性来规定图像的路径，用 alt 属性来显示因某种原因无法显示图像的替代文本
        可以通过 width、height 来规定图片的长高，否则会以图片的本身大小显示
    -->
    <img src="../source/images/logo.png" alt="显示不出">
</body>
</html>

浏览器页面显示如下图所示：

绝对路径：目标文件在硬盘上的真实路径（最精确路径）
相对路径：相对当前执行文件所在位置作为起点。其中 ../ 为上一级， ./ 为同级（可以省略）

换行标签和空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签</title>
</head>
<body>
    <!-- 
        通过 br 来定义换行，用于在 HTML 页面中插入单行换行符
        代码的换行在浏览器中只会当作空格来显示
        <br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距
        注意：请使用 <br> 标签来插入换行符，而不是用它来增加段落之间的空白。
        <br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）
    -->
    如需<br>在文本中强制<p>换行<br>，请使用 <br>br<br> 元素</p>。
</body>
</html>

浏览器页面显示如下图所示：

在浏览器中，不论你在两个字间有多少空格，都只会显示一个。想要显示多个空格，需要借用  

div和span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div标签和span标签</title>
</head>
<body>
    <!-- 
        <div> 标签定义 HTML 文档中的分割或部分（分区或小节），把文档分割为独立的、不同的部分
        <div> 是块级元素。这意味着它的内容自动地开始一个新行
        对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种
        这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素
    -->
    <h2>div标签</h2>
    <div>Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet consectetur.</div>

    <!-- 
        <span> 标签是一个行内容器，用于标记文本的一部分，或文档的一部分
        <span> 是行内元素。不会自动开始一个新行
     -->
     <h2>span标签</h2>
     <span>Lorem ipsum dolor sit amet consectetur.</span>
     <span>Lorem ipsum dolor sit, amet consectetur adipisicing.</span>
</body>
</html>

浏览器页面显示如下图所示：

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
    <!-- 
        <ol> 标签定义有序列表。有序列表可以是数字或字母顺序
        <ul> 标签定义无序（带项目符号）列表
        <li> 标签定义列表项，用于有序列表 (<ol>)、无序列表 (<ul>) 和菜单列表 (<menu>) 中
    -->
    <h2>有序列表</h2>
    <ol>
        <li>水果</li>
        <li>西瓜</li>
    </ol>

     <h2>无序列表</h2>
    <ul>
        <li>哔哩哔哩</li>
        <li>百度</li>
    </ul>
</body>
</html>

浏览器页面显示如下图所示：

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 
        <form> 标签用于为接收用户输入创建 HTML 表单，用以将表单信息提交到指定地方
        <input> 标签是行内元素，用于定义输入字段，用户可以在其中输入数据
        <input> 元素是最重要的表单元素，可以以多种方式显示，具体取决于 type 属性
    -->
    <h2>表单列表</h2>
    <!-- 
        get： 提交参数显示在Url上且对长度有限制，但提交速度快。一般用来提交数据
        post：提交参数不显示在Url上且没有长度限制，但提交速度慢。在F12的Network中可以看到，一般用来发送数据
    -->
    <form action="" method="get">
        文本框：<input type="text" name="username"><br>
        密码框：<input type="password" name="password"><br>
        <!-- 单选框和多选框需要同一组才能实现，通过 name 属性来分组 -->
        性别：<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女<br>
        爱好：<input type="checkbox" name="hobby" value="跑步">跑步 <input type="checkbox" name="hobby" value="动漫">动漫 <input type="checkbox" name="hobby" value="睡觉">睡觉<br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="点击验证">
    </form>
</body>
</html>