软件测试的学习之路-----基本的 HTML

一：常见DOS命令

1. 切换盘符
   具体盘符名称：
   

2. 返回上一级或根目录
   cd … 返回上一级
   cd / 返回根目录
   
   

   注意：
   (1). cd ：change directory 的首字母缩写，表示切换目录的意思
   (2). cd 命令不可以切换盘符
   (3). 根目录指：某个盘符的一级目录
   (4). 命令语句一定都是在 英文输入法 下面书写的，命令和参数之间往往都用 空格 隔开

3. 列表展示某个目录下内容
   dir

4. 目录及相关操作
   (1)．新建目录： md 路径
   (2)．新建文件： echo “内容”>文件名称，通过这种方法间接得到一个文件
   (3)．删除目录： rd 路径 【默认情况下只能删除空目录，如果想连带它里的文件一起删除则 需要设置 /s 参数】
   (4)．删除文件： del 文件名称
   注意：
   A. md 只能新建目录
   B. rd 默认只能删除空目录
   C. 参与与命令之间一定要用空格
   D. 如果 del 后面直接写的不是文件，而是一个目录，那么它就会将这个目录下的所有文件都删除（ 前提是我们选择 Y ）

5. 文件复制和剪切命令
   (1).copy 被复制文件路径 将这个文件复制到哪里
   copy aa/aa.txt c:\test\bb.txt [ 将目录 aa 下在的 aa.txt 文件，复制 到 c 盘 test 目录下，同时将名称修改为 bb ]
   注意：
   A. 复制操作语句，我们可以分为三段，第一段就是命令 copy ，第二段就是被复制文 件的在地，第三段可以指明将当前文件复制到哪里，三段之间都要用空格隔开
   B. 第三段可以省略，省略之后的结果就是会将相应的文件直接复制到我们的当前所在 位置。
   (2).move 被剪切文件所在地 将这个文件剪切到哪里
   注意：
   A.对于剪切操作来说 必须要进入到想要操作文件所在目录去执行命令
   B.第三段用来指明目标所在地的部分不能省略。

二：Web基本介绍

(1). web 就是 world wide web 的缩写，称之为全球广域网，俗称 www。
(2). 我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。
(3). 网站我们可以认是由多个网页组合在一起而形成一种服务。
(4). web 前端就是来负责一个网站当中前台网页里的内容。
(5). 网页就是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含 文字 图 片 超链接 声音 视频…（ 网页本质就是一个 html 文件 ）

三：HTML基本介绍

1. 定义
   HyperText markup language 超文本标记语言，其中的超指：它能表达的内容不仅仅只是文字。
2. HTML 语言发展历史
   1．在互联网最初的时候是没有 HTML 的，我们只能通过网络传输最简单的文字内容
   2．随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字 内容之外的语言—HTML1.0
   3．在最初的时候就是 html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5

四：HTML网页骨架

(1). 网页是我们通过 HTML 语言来书写。
(2). 因为我们需要使用 HTML 语言来书写网页所以我们要有相应的书写代码工作。 ( 用Hbuilder写代码 )
(3). 在我们使用 HTML 语言去书写网页的过程我们会发现有一些结构是默认必须存在的， 这个结构我们就叫做 网页骨架

注意：
<1>. DOCTYPE html : 向浏览器声明当前的文档是 Html 类型。
<2>. html ： 它是网页当中最大的一个标签，我们称之为：根标签
<3>.head : 网页头的部，它里面的内容是写给浏览器看的。
<4>. meta : 如果有 charset 那就表示在设置当前网页的显示编码
<5>. title： 网页的标题，它里面的内容会在浏览器的标签页上显示
<6>. body： 网页主体，它里面的内容会显示在浏览器的空白区域内。

五：Hbuilder工具使用

1. 设置主题
   Hbuilder软件里找
   工具-----视觉主题设置

2. 设置字体
   工具-----视觉主题设置----如下图
   

六：HTML语法和标签基本介绍

1. html标签
   所谓的标签就是 HTML 语言的发明者人为定义好的一些"单词"，它就相当于我们汉语中的字。
2. 语法
   语法就是用来定义这些 “单词” 应该如何去解析或者书写的规则。
3. 常见标签及基本语法
   (1)．我们人为的将 HTML 标签分为 双标签 和 单标签 二种
   双标签：<标签名称></标签名称> [在英文输入法下输入]
   单标签：<标签名 />
   (2)．常见的标签：
   <1>.标题标签 :在 html 当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网页当中，我们只允许出现一个 h1。
   <2>.段落标签：p 双标签
   <3>.换行标签： br 单标签
   <4>.空格：&nbsp；
   (3)．标签书写语法
   在 HTML 当中允许多个标签互相嵌套使用，但是不允许交叉嵌套。

七：图片标签

2. 图片常见的属性
   (1)．src： 设置图片所在位置
   (2)．alt： 当图片加载失败的时候会显示它里面的文字
   (3)．width/height: 设置图片宽 和 高，如果只设置了宽度或者高度，那么另外一边会 自动缩放。
   (4)．title: 当鼠标悬停在图片上的时候会显示它里面的文字

八：链接标签

1. 语法
   
2. 作用
   可以实现在当前页面向新页面进行跳转的操作
3. 属性
   1．target 属性：可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开
   2．href 的属性值设置为 # 的时候，可以设置为空链接，它的作用是：当用户点击的时候不会发生跳转

九：路径

所谓的路径可以看做是在程序代码中用来查找某个具体的资源所 "走"过的路。例如：
C:\Program Files (x86)\DingDing

1. 绝对路径
   绝对路径一般是以盘符为起点来进行查找 ，或者就是一个绝对的URL地址 。 https://www.baidu.com/img/bd_logo1.png ，但是在实际工作中，不建议大家使用绝对路径。
2. 相对路径
   相对路径就是相对某一个已知的文件为起点进行资源的查找。

十：相对路径用法

路径是一个通用的存在，在实际工作中 相对路径使用的频率是最高的。人为的将相对路径分为三种：同级路径、下级路径、上级路径。 (以查找图片为例的含义就是我们要在一个 HTML 网页中插入一张 HTML 文件之外的图片， 同时采用的是相对路径，所以这里的相对起点就是 HTML 网页)

1. 同级路径：指HTML 网页和目标图片在同一级目录下。对于同级路径的使用，只需要在 src 中写入目标图片的名称即可。
2. 下级路径：指图片在 html 文件的下级目录中。此时我们需要使用一个 / 来向下进行穿透查找。
3. 上级路径： 图片在 html 文件的上级目录里时，需要使用 …/ 来向上回退进行查找
   注意：
   (1). 上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的查找。
   (2): / 表示向下级查找，可以无限级穿透。 …/ 表示向上级返回，同样可以无限级返回。

十一：表单基本介绍

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

<form action="" method=""></form>

注意：

• form 标签是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之 为表单域
• form默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备 了很多的表单标签。这些标签里 使用最多的一个叫 input
• action 属性值表示将当前表单中的数据提交到哪里
• method 属性值表示以什么样试来提交当前表单中的数据。最常见的就是 get post。其中 get 方式就是指将数据在 URL中进行提交，这种方式是明文。所以相对不安全。而POST 方式就是指将数据写在 HTTP 请求的请求体当中

十二：常见表单元素

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

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="">选项一</option></select>
8. 重置按钮：<input type="reset" />
9. 普通按钮:<input type="button" value="按钮" />

十三：表单元素注意细节

1. name 属性：form 表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名称都叫 input,此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题,此时为了分别哪个数属于什么样的表单项。人为的在input 身上设置 name 属性。这样一来数据到达后端之后就会变成以下格式：username=“syy” pwd=“123” gender=“男”…
2. value: 作用是定义某些表单元素的默认显示内容（ 文本输入框、提交按钮、重置 按钮、普通按钮 ）
3. checked: 这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。
4. selected：这也是一个属性值等于属性名的属性，添加在下拉选项身上实现某个选项被默认选中。

十四：欢迎查看下篇文章：软件测试的学习之路 ----- 神奇的 CSS

软件测试的学习之路 ----- 神奇的 CSS