软件测试工程师-HTML

HTML

1、常见命令
命令语句是在英文输入法下面书写的,命令和参数之间往往用空格隔开。

①切换盘符——具体盘符名称:
盘符:对应的盘名称
根目录:具体的某个盘符的一级目录。

②返回上一级和返回根目录
change directory(cd):返回目录,只能切换子目录,不能切换盘符。
cd …:返回上级目录
cd /:返回根目录
dir:列表展示某个目录下的内容
根目录指的是某个盘符的一级目录

③切换目录
cd切换子目录的时候,只能在当前盘符下进行查找

④目录及文件相关的操作命令
(1)创建目录:md(make directory) 路径
(2)新建文件:在DOS中没有直接可以新建文件的命令,可间接获得一个文件。——echo 内容>文件名称
(3)删除目录:rd(remove) 路径,默认只能删除空目录。
如需连带删除目录里的文件,则需通过rd /s 目录名称来删除。
(4)删除文件:del 文件名称
注:md只能新建目录;rd默认只能删除空目录;参数与命令之间一定要有空格;如果del后面直接写的不是文件,而是一个目录,你们它会将这个目录下的所有文件都删除

练习:
(1)在C盘下新建一个test目录:
默认可能不在C盘根目录,所以先要cd /回到c的根目录
cd /——回到C盘
cls——清屏
md test
(2)在test目录下新建aa、bb两个子目录
先通过cd命令进入到text目录;使用md命令新建两个子目录
cd text——进入到test文件夹下
md aa
md bb
(3)在aa目录下新建a.txt文件
通过cd先进入到aa里面;通过echo语法新建一个文件
cd aa
echo 今天星期天>a.txt
(4)在test目录下新建test.txt
通过cd返回到test目录下,执行echo新建文件
cd …
echo text>test.txt
(5)最后删除整个text目录
进入到test内部,先通过del将每个目录都清空,使用rd命令把清空后的目录删除
cd …
rd test
del test
cd test
rd bb
cd aa
dir
del a.txt
cd …
rd aa
cd …
rd test

⑤文件的拷贝和剪切(移动)
拷贝:copy 被复制文件的路径 将这个文件复制到哪里
copy aa/aa.txt c:\test\bb.txt——将目录aa下在的aa.txt文件复制到c盘test目录下,同时将名称修改为bb.txt
复制操作语句可以分为3段:第一段是命令copy;第二段就是被复制文件的位置;第三段可以指明将当前文件复制到哪里,三段之间要用空格隔开;第三段可以省略,省略后的结果就是会将相应的文件直接复制到我们的当前所在位置。

剪切:move 被剪切文件所在地 将这个文件剪切的路径;需要先进入到当前文件所在的目录,需要指定移动的路径。

练习:
(1)在C盘根目录下新建test目录
(2)在test目录中新建aa子目录
(3)在aa子目录当中新建a.txt文件
(4)要求将a.txt复制一份放到test目录下,同时名称修改为b.txt
(5)将aa中的a.txt剪切到test目录下

2、web基本介绍
①web——world wide web,全球广域网,俗称www。
②web——网站服务。
③网站——多个网页组合在一起而形成的一种服务。
④web前端负责一个网站当中前台网页里的内容。
⑤网页就是由前端工程师使用HTML语言编写而成的一种文件,里面包含文字、图片、超链接、声音、视频……(网页本质就是一个HTML文件)

3、HTML基本介绍
①定义:HyperText makeup Language——超文本标记语言。
②HTML语言发展史:最初没有HTML,只通过网络发送简单的文字→可以表达文字之外的语言HTML1.0→XHTML1.0(过渡)—XHTML2.0(放弃)—HTML5

4、HTML网页骨架
①网页是通过HTML语言来书写的;
②要有相关的书写代码工具(HBuilder);

网页骨架:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

DOCTYPE——document type——文档类型
<!DOCTYPE html>——使浏览器明白,将来按照什么样的语法来解析代码。

html是我们网页当中最大的标签,称为根标签。

head网页的头,在它里面我们会放置给浏览器看的一些信息。
head里默认有两个子标签,meta如有charset就表示在设置当前网页的显示编码;title是网页的标题,它里面的内容会在浏览器 的标签页上显示。

body网页主体里面包含的内容会显示在浏览器的空白区域内。

5、hbuilder工具使用
①设置主题:工具——视觉主题设置
②设置字体:
在这里插入图片描述
③默认情况下,我们电脑里都会自带些字体,如果想要安装其他字体,只需要将想要安装的字体拷贝到系统字体目录下即可(一般是在C:\Windows\Fonts文件夹内)

6、HTML语法和标签基本介绍
①HTML标签——HTML的语言发明者定义好的单词,相当于汉语中的字。
②语法——定义这些字应该如何去解析或者书写的规则。
③HTML中的常用标签及基本语法
(1)人为的将HTML标签分为单标签和双标签两种
<标签名称></标签名称>——双标签,成对出现
<标签名称 />
(2)常见标签
标题标签——在HTML中人为的规定了六种标题,分别为h1-h6,均为双标签。在一个网页中,只允许出现一个h1。
段落标签——p,双标签
换行标签——br,单标签
空格——&nbsp;
(3)标签书写语法
在HTML中允许多个标签互相嵌套使用,但不允许交叉嵌套。

7、图片标签——<img src="地址"/>
注意:
①img是一个单标签,作用是可以在网页中插入图片。
②src是img标签的属性,它里面的值称之为属性值,具体用来表现想要加载的图片存放在哪。
③标签可以有属性,属性名与标签名之前用空格隔开。
④属性名与属性值之间用单等号进行连接。
⑤一个标签可以有多个属性,之间都用空格隔开。

图片常见的属性:
①src——设置图片所在位置。
②alt——当图片加载失败时显示的文字。
③width、height——分别用来设置图片的宽、高,如果只设置了高度或者宽度,另外一边会自动缩放。
④title——当鼠标悬停在上面的时候会显示它里面的文字。

8、链接标签
①语法——<a href="目标地址">内容</a>
②作用——可以实现在当前页面向新页面进行跳转的操作。
③属性——target这个属性可以设置新页面在哪个窗口打开,当值为_blank的时候可以在新窗口中打开;href的属性值设置为#时,可以设置为空链接的时候,当用户点击时不会发生跳转。

9、路径
所谓的路径我们可以看做是在程序代码中用来查找某个具体的资源所走过的路。
①绝对路径——以盘符为起点来进行查找,或者就是一个绝对URL地址。在实际工作中不建议使用。
②相对路径——相对于某一个已知的文件为起点进行资源的查找。
③相对路径的用法——人为的将相对路径分为3种:同级路径、上级路径、下级路径。
同级路径:同级指的是HTML网页和目标图片在同一级目录里,对于同级路径的使用,我们只需要在src中写入目标图片的名称即可。
下级路径:图片在HTML文件的下级目录中。此时我们需要用一个 / 来向下进行穿透查找。
上级路径:图片在HTML文件的上级目录中。此时我们需要用一个 …/ 来向上回退进行查找。
注:上述的路径规则适用于其他类型资源的查找;/表示向下级查找,可以无限级穿透; …/表示向上级返回,同样可以无限级返回。

10、表单的基本介绍
表单:一种在互联网上用于收集用户信息的一种结构。在HTML中事先定义一个标签来完成这件事。标签名称叫form,双标签,我们称之为表单域。
<form action="" method=""></form>
注:①form表单就是HTML中定义好的一个用来表示整个表单结构的双标签,我们称之为表单域
②form默认就是一张白纸,如果想让它收集用户的相关信息,HTML又准备了很多表单标签,这种标签里使用最多的一个叫input
③action属性值表示将当前表单中的数据提交到哪里
④method属性值表示以什么样的方式来提交当前表单中的数据。最常见的就是get、post。其中get方式就是讲数据在URL中进行提交,这种方式是明文的,相对不安全。post方式就是指将数据写在HTTP请求的请求体当中。

11、常见的表单元素
form标签只负责定义具体的表单整体,如果想要收集表单信息,就必须有一些能够让用户输入填写的模块,此时HTML中就定义了许多的表单标签来让用户完成输入,最常见的表单标签就是input。因为表单都叫input,所以通过设置type属性进行区分。
①文本输入框:<input type="text" />
②密码输入框:<input type="password" />
③提交按钮:<input type="submit" />
④单选框:<input type="radio" />
⑤复选框:<input type="checkbox" />
⑥文本域:<textarea rows="行数" cols="列数"></textarea>
⑦下拉框:

<select >
  <option value="">选项一</option>
</select>

⑧重置按钮:<input type="reset" />
⑨普通按钮:<input type="button" value="按钮"/>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值