没那么难的软件测试3目录.png
文件路径
具体资源所在的位置，有绝对路径和相对路径之分。
一、绝对路径
从根目录开始完整描述文件位置的路径。由于灵活性不足导致使用场景很少。
二、相对路径
相对于当前文件，目标文件的所在路径。常用的相对路径表示，当前路径（同级路径）：.，上一级目录：../，下一级目录：/
- 同级路径：与使用资源的文件在同一个目录下
- 下级路径：与使用资源的文件所在文件夹的里面的文件夹里（emmm,感觉自己没有在说人话），就是说在子文件夹里…
- 上级路径：与使用资源的文件的文件夹同级，即是在其上一级目录
表单
一、from表单域
仅声明包裹的内容为需要提交的表单信息，内部需要使用表单元素提供用户输入信息
<from action="#" method="post">
用户名：<input type="text" name="username">
<br/>
密码：<input type="password" name="password">
<br/>
<input type="submit">
</from>
二、表单属性
action：表单提交目标地址
method：已哪种方式提交表单信息到服务器后台，常见提交方式GET，POST
GET方式：将数据拼接在网址URL中，消息明文传输，一般用于非敏感信息
POST方式：将数据写在HTTP请求体中进行传输。
三、常见的表单元素
| 表单元素 | type属性 | 作用 | 语法格式 | 注释 |
|---|---|---|---|---|
| input | text | 文本输入框 | <input type="text" /> |
|
| password | 密码输入框 | <input type="password" /> |
||
| submit | 提交按钮 | <input type="submit" value="点击提交"/> |
||
| radio | 单选框 | <input type="radio" name="sex" checked="checked"/> |
name属性：将相同name的单选框分为一组，同组内的单选框只能选一个 checked="checked"表示默认选择项 |
|
| checkbox | 复选框 | <input type="checkbox"/> |
支持checked属性 |
|
| reset | 重置按钮 | <input type="reset" value="点击重置"/> |
还原表单内容到默认状态 | |
| button | 普通按钮 | <input type="button" value="点击"/> |
||
| textarea | 文本域 | <textarea name="" rows="" cols=""></textarea> |
rows行数 cols列数 | |
| select | 下拉框 | <select name=""><option value="" selected>选项内容</option></select> |
注：
- 只有定义在from表单域内的表单元素才能提交信息至服务器后台
-
name属性除单选按钮，用于后台区分表单选项数据，后台接收到的数据为一系列键值对 -
value定义表单元素的默认显示内容 - 在属性名和属性值相同的情况下，可以省略属性值的书写，如
checked="checked"可简写为checked，selected="selected"可简写为selected
CSS
web标准
由W3C组织制定的一系列规范网页书写的要求。
Web标准：要求结构、样式、行为相分离。
- 结构：通过HTML标签搭建网页内容
- 样式：使用CSS语言对结构进行美化修饰
- 行为：采用JavaScript进行交互逻辑处理
CSS基本使用
级联样式表、层叠样式表、样式表，作用是用来修饰网页中的HTML元素
常见存放位置，head标签里title标签下，基本的格式如下，
<style type="text/css">
/*CSS中的注释*/
/*选择器{
/* 需求中的具体CSS样式;
/*}
</style>
通过CSS的选择器，找到对应修饰的元素，添加样式
CSS选择器：CSS中定义用来选中某些元素的固定语法。分为简单选择器和复杂选择器
简单选择器
标签名选择器
会选中当前网页中所有同名标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<style type="text/css">
/* 宽度200像素，高度200像素，背景绿色 */
p{
color: white;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>应用了CSS样式的p标签</p>
<p>第二个应用了CSS样式的p标签</p>
</body>
</html>
类名选择器
解决同名标签设置不同样式的场景，多个类名之间使用空格隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<style type="text/css">
/* 宽度200像素，高度200像素，背景绿色 */
.aa{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<h4 class="aa">类选择器示例</h4>
<p class="aa">应用了CSS样式的p标签</p>
</body>
</html>
ID选择器
仅对单一元素进行选择，ID全局唯一。使用多次时，虽然有效果，但不建议使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<style type="text/css">
/* 宽度200像素，高度200像素，背景绿色 */
#aa{
color: white;
width: 200px;
height: 200px;
background-color: salmon;
}
</style>
</head>
<body>
<p id="aa">应用了CSS样式的p标签</p>
<p>第二个没有CSS样式的p标签</p>
</body>
</html>
类名和ID值命名规则
- 不能使用数字开头
- 不能包含中文(使用有实际效果，但不这样使用)
- 除
-和_，不能包含特殊字符 - 尽量见名知意
Tips
- 标签名选择器和类名选择器默认是一次性选择多个，ID名选择器一次只能选中一个元素
- 一个标签可同时包含类名和ID名，且对应的属性值可以相同
网友评论