【软件测试】4_基础知识 _HTML

文章目录

[一、Web 基本介绍](#一、Web 基本介绍)
二、HTML基本介绍
- [2.1 html定义](#2.1 html定义)
- [2.2 HTML 语言发展历史](#2.2 HTML 语言发展历史)
三、HTML网页骨架（重点）
四、HTML语法和标签基本介绍
- [4.1 HTML单标签和双标签](#4.1 HTML单标签和双标签)
- [4.2 常见的标签和语法](#4.2 常见的标签和语法)
五、图片标签-单标签
- [5.1 标签属性](#5.1 标签属性)
- [5.2 图片常见的属性](#5.2 图片常见的属性)
六、链接标签-双标签
七、路径
- [7.1 绝对路径](#7.1 绝对路径)
- [7.2 相对路径及用法](#7.2 相对路径及用法)
八、表单-双标签
- [8.1 表单基本介绍](#8.1 表单基本介绍)
- [8.2 表单元素-文本输入、提交、选框等](#8.2 表单元素-文本输入、提交、选框等)
- [8.3 表单元素注意细节](#8.3 表单元素注意细节)

一、Web 基本介绍

1、web 就是 world wide web 的缩写，称之为全球广域网，俗称 WWW。

2、网站我们可以认是由多个网页组合在一起而形成一种服务。

3、web 前端就是来负责一个网站当中前台网页里的内容。

4、网页就是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含文字、图片、超链接、声音、视频...（网页本质就是一个 html 文件）

二、HTML基本介绍

2.1 html定义

HyperText markup language 超文本标记语言。

其中的超：指的就是它能表达的内容不仅仅只是文字。

2.2 HTML 语言发展历史

1．在互联网最初的时候是没有 HTML 的，我们只能通过网络传输最简单的文字内容

2．随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字内容之外的语言---HTML1.0

3．在最初的时候就是 html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5

三、HTML网页骨架（重点）

1、网页是我们通过 HTML 语言来书写。

2、因为我们需要使用 HTML 语言来书写网页所以我们要有相应的书写代码工具。 ( Hbuilder )

3、在我们使用 HTML 语言去书写网页的过程我们会发现有一些结构是默认必须存在的，这个结构我们就叫做网页(html)骨架。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

注意：

1、DOCTYPE html : 向浏览器声明当前的文档是 Html 类型。

2、html：它是网页当中最大的一个标签，我们称之为根标签 。

3、head：网页头的部，它里面的内容是写给浏览器看的。

4、meta：如果有 charset 那就表示在设置当前网页的显示编码。

5、title：网页的标题，它里面的内容会在浏览器的标签页上显示。

6、body：网页主体，它里面的内容会显示在浏览器的空白区域内。

四、HTML语法和标签基本介绍

一、HTML 标签

所谓的标签就是 HTML 语言的发明者人为定义好的一些"单词"，它就相当于我们汉语中的字。

二、语法

语法就是用来定义这些 "字" 应该如何去解析或者书写的规则。

4.1 HTML单标签和双标签

1、我们人为的将 HTML 标签分为单标签 和 双标签 二种

html 复制代码

<标签名 />                   <!-- 单标签 -->

<标签名称> </标签名称>         <!-- 双标签 -->

4.2 常见的标签和语法

（1）标题标签 :在 html 当中人为定义了六种标题分别 h1-h6，它们都是双标签。在一个网页当中，我们只允许出现一个 h1。

（2）段落标签：p 双标签

（3）换行标签： br 单标签

（4）空格：  

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题1</h1>        <!-- 标题标签 -->
<h2>标题2</h2>        <!-- 标题标签 -->
<h3>标题3</h3>        <!-- 标题标签 -->
<h4>标题4</h4>        <!-- 标题标签 -->
<h5>标题5</h5>        <!-- 标题标签 -->
<h6>标题6</h6>        <!-- 标题标签 -->

<P>我是段落1</P>        <!-- 段落标签 -->
<P>我是段落2</P>        <!-- 段落标签 -->
<P>11     33</P>     <!-- 在HTML网页编写过程中，我们手动的敲换行是没有用的；敲空格，无论写多少空格，在显示的时候只有一个起作用。 -->

我是第一行
<br />             <!-- 换行标签 -->
我是第二行
<br />

我&nbsp;爱你     <!-- 添加空格 -->
    
<h2><p>我是小花</p></h2>   <!-- 在 HTML 当中允许多个标签互相嵌套使用，但是不允许交叉嵌套。 -->
    
</body>
</html>

五、图片标签-单标签

5.1 标签属性

html 复制代码

<img src="地址" />   
<img src="" alt="" />
    
<!-- 属性名=属性值 --> 
<!-- img标签名，src是属性名 -->

<!-- 设置宽度的图片 -->
<img src="01.jpeg" width="800" />

注意：

1、img 是一个单标签，它的作用是可以在网页当中插入图片。

2、src 是 img 标签的属性，它里面的值称之为属性值，具体用来表示想要加载的图片存在哪里。

3、标签名与标签属性之间用空格隔开。

4、属性名与属性值之间用 单等号 连接。

5、属性值需要放在引号里面，单引号、双引号无所谓（如果属性值时数字，那么可以省略引号）

6、一个标签的身上可以有多个属性名=属性值，要求多个属性名=属性值之间都用空格隔开。

5.2 图片常见的属性

1、src 设置图片所在位置。

2、alt 当图片加载失败的时候会显示它里面的文字。

3、width/height 分别用来设置图片宽和高，如果只设置了宽度或者高度，那么另外一边会自动缩放。

4、title 当鼠标悬停在图片上的时候会显示它里面的文字。

html 复制代码

<img src="01.jpeg" alt="你看不到图片" />

六、链接标签-双标签

1、语法

html 复制代码

<a href="目标地址"> 内容 </a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.baidu.com/">百度一下，你就知道</a>
    
<!--空链接：一般出现在开发阶段，很多页面的线上真实地址还没有写出来，用空链接占位-->
<a href="#">百度一下，你就知道</a>   

<!--打开窗口设置：多了一个标签页-->
<a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a> 
    
</body>
</html>

2、作用

可以实现在当前页面向新页面进行跳转的操作。它里面写的内容是目标网页的地址

3、属性

①target 这个属性可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开

②href 的属性值设置为 # 的时候，可以设置为空链接，它的作用就是当用户点的时候不会发生跳转。

七、路径

所谓的路径我们可以看做是在程序代码中用来查找某个具体的资源所 "走"过的路。例如：

C:/Users/Administrator/Desktop/_book\img\2.png.

7.1 绝对路径

绝对路径一般是以 盘符为起点 来进行查找，或者就是 一个绝对 URL 地址 。

https://www.baidu.com/img/bd_logo1.png ，但是在实际的工作中，我们不建议大家使用绝对路径。

7.2 相对路径及用法

概念：相对路径就是相对某一个已知的文件为起点进行资源的查找。

在实际工作中相对路径使用的频率是最高的。我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。

(以查找图片为例的含义就是我们要在一个 HTML 网页中插入一张 HTML 文件之外的图片，同时采用的是相对路径，所以这里的相对起点就是 HTML 网页)

1、同级路径：

html 复制代码

同级指的就是 HTML 网页和目标图片在同一级目录里。对于同级路径的使用，我们只需要在 src 中写入目标图片的名称即可。
<img src="01.jpeg" alt="" />

2、下级路径：

html 复制代码

下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个  /  来向下进行穿透查找。
<img src="aa/01.jpeg" alt="" />    <!--html只是文件，没有下一级。找html的同级目录aa，在同级目录aa的下级-->

3、上级路径：

html 复制代码

图片在 html 文件的上级目录里， 时我们需要使用 ../ 来向上回退进行查找。
<img src="../01.jpeg" alt="" />

注：

①上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的查找。

② / 表示向下级查找，可以无限级穿透。 .../ 表示向上级返回，同样可以无限级返回。

html 复制代码

图片和html不是同级路径，也不是下一级路径。 
<img src="../../aa/01.jpeg" alt="" />

八、表单-双标签

8.1 表单基本介绍

表单就是一种在互联网上用于收集用户信息的一种结构，在 HTML 当中事先定义好一个标签来完成这件事。
标签名称叫 form ，它是一个双标签，我们称之为表单域。

html 复制代码

<form action="" method=""></form>   <!--在body中写-->

<form action="#" method="get">
    用户名：<input type="text" name="username">   <!--输入用户名-->
    密码框：<input type="password" name="mima">   <!--输入密码-->
    <br /><br />                 <!--换2行-->
    <input type="submit">        <!--提交-->
</form>


<form action="#" method="post">
    用户名：<input type="text" name="username" />   <!--输入用户名-->
    密码框：<input type="password" name="mima" />   <!--输入密码-->
    <br /><br />                 <!--换2行-->
    <input type="submit" />        <!--提交-->
</form>

1、form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之为表单域。

2、form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备了很多的表单标签。这些标签里使用最多的一个叫 input 。

3、action 属性值：表示将当前表单中的数据提交到哪些。在研发阶段一般用#或者空着不写。

4、method 属性值：表示当前表单中的数据以何种方式提交到网站后台。最常见的就是 get 和 post 。

get 表示将当前数据通过 URL 地址进行提交。明文传输，相对不安全；
POST 方式就是指将数据写在 HTTP 请求的请求体当中( )。

8.2 表单元素-文本输入、提交、选框等

form 标签只负责定义具体的表单整体，它里面如果想要收集用户数据，就必须再有一些能够让用户进行输入填写的模块，此时 HTML 当中就定义许多的表单标签来让用户完成输入。最常见的表单标签就是 Input ，因为标签名称都叫 input ，所以 HTML 当中就设置通过 type 属性来进行区分。

如果想要将某些数据提交到后台，那么这些表单元素必须写在form标签对中。

html 复制代码

1 文本输入框： <input type="text" /> 

2 密码输入框: <input type="password " /> 

3 提交按钮： <input type="submit" /> 

4 单选框： <input type="radio" /> 

5 复选框: <input type="checkbox" />     <!--复选框：选择之后可以取消-->

6 文本域: <textarea rows="行数" cols="列数"></textarea> 

7 下拉框：
	<select> 
		<option value="">选项 1</option> 
		........... 
	</select> 

8 重置按钮： <input type="reset" /> 

9 普通按钮: <input type="button" value="按钮" /> 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <!--vaule可以添加在所有的表单元素身上。只不过有的表单元素不做展示；
     一般起作用的vaule属性常见于用户可以手动输入文本内容的表单元素 -->

    用户名：<input type="text" />    <!--输入用户名-->
    <br /><br />                 <!--换2行-->
    密码框：<input type="password" />               <!--输入密码-->
    <br /><br />                 <!--换2行-->
    单选框：
        <input type="radio" name="gender" /> 男
        <input type="radio" name="gender" /> 女
    <br /><br />                 <!--换2行-->
    复选框：
        <input type="checkbox" /> 学习
        <input type="checkbox"  /> 打球
    <br /><br />                 <!--换2行-->
    
    文本域：
    <textarea name="" id="" cols="30" rows="10"></textarea>   <!--30列，10行-->
    <br /><br />                 <!--换2行-->

    下拉菜单：
    <select name="" id="">
        <option value="">选项1</option>   <!--写在标签对中，是给用户通过界面查看的-->
        <option value="">选项2</option>   <!--写在vaule，是给后台看的-->
    </select>
    <br /><br />                 <!--换2行-->

    重置按钮：
    <input type="reset" value="点我重新设置">
    <br /><br />                 <!--换2行-->

    普通按钮：
    <input type="button" value="按钮" />

    <br /><br />                 <!--换2行-->
    <input type="submit" value="点击提交" />        <!--提交-->
</form>

</body>
</html>

8.3 表单元素注意细节

1、name 属性：form 表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名称都叫 input，此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题，此时为了区分哪个数据属于什么样的表单项。我们就人为的在 input 身上设置 name 属性。这样一来数据到达后端之后就会变成以下格式： username="syy" pwd="123" gender="男"...

2、value: 它的作用就是定义某些表单元素的默认显示内容（文本输入框、提交按钮、重置按钮、普通按钮）

3、checked: 这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。

4、selected：这也是一个属性值等于属性名的属性，添加在下拉选项身上实现某个选项被默认选中。