软件测试零基础自学笔记_web基础

最新推荐文章于 2024-05-06 16:09:09 发布

Nicooo-929

最新推荐文章于 2024-05-06 16:09:09 发布

阅读量265

点赞数

分类专栏：软件测试

本文链接：https://blog.csdn.net/qq_36569690/article/details/115484124

版权

软件测试专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言，是web开发的基本技术

HTML结构

<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>

<BODY>
	主体部分
</BODY>
</HTML>

标签一般成对出现，第一个标签是开始标签，第二个标签是结束标签。

显示中文

需要在<head> 标签中加入 <meta charset="UTF-9">

HTML元素

指的是从开始标签到结束标签之间的全部代码，是HTML语言的基本部分。
空的HTML元素，没有内容的HTML元素被称为空的HTML元素。<br>就是一个空元素。

HTML元素属性

为HTML元素提供附加信息，格式：<开始标签属性名=“属性值”> <结束标签>。
一定要添加到开始标签中。
例如：

<h1 align="center">This is heading 1 </h1>
<!--标题居中-->

常用基本标签

html 基础标签
 html常见基础标签大汇总
 HTML常用标签详解

表格

表格由<table>标签来定义，<tr>定义行，<td>定义列，<td>管理单元格内的数据，创建一个表格需要三个标签全定义才可以创建成功。

<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>

<BODY>
	<table border="1" width="200px" heigth="150px">
		<caption>表名</caption>
		<tr>
			<td align="center">test1</td> <!--居中-->
			<td bgcolor="ponk">test2</td> <!--背景色-->
		</tr>
		<tr>
			<td>test3</td>
			<td>test4</td>
		</tr>
		<tr>
			<th>test5</th>  <!--<th>是特殊的列标签，单元格内文字加粗居中-->
			<th>test6</th>
		</tr>
	</table>

</BODY>
</HTML>

表单

用于搜集不同类型的用户输入，最常见典型的表单是注册页面。是一个包含表单元素的区域。采用<form>表单标签定义。

<form Action="url" Method="*" >
	<inpout> </input>
	……
</form>

表单属性

action当用户点击按钮时，表单内容会被传送到另一文件。action属性定义了目标文件的文件名，由动作属性只想的这个文件会对接收到的输入数据进行相关处理。
method告诉浏览器如何将编码后的数据发给服务期。其值可以为get和post
get将数据直接附在表单的action URL之后，这两者之间问号进行分割。
post直连服务器，然后将html表单的值发送给WEB服务期中，没有数值长度限制。

表单三个要点

表单控件
动作属性
方法属性

表单控件

文本输入框、单选按钮、复选框

input根据type可分为文本输入框、单选按钮、复选框、按钮。

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>

	<BODY>
		<from>
		<!--------------文本输入框----------------->
			用户名：<input type="test" name="wenben" maxlength="10" size="40"/>
			<!--输入框  ID  最大输入长度 输入框长度--> 
			密码：<input type="password" name="pwd" maxlength="10" size="44"/>
			<!--密码框  ID  最大输入长度 输入框长度--> 
		<!--------------单选按钮----------------->
			性别：<input type="radio" name="sex" value="nan" checked="checked"/>男
			<input type="radio" name="sex" value="nv"/>女
			<!--单选按钮 ID 返回值 显示值 默认值 --> 
		<!--------------多选框----------------->
			多选框：
			<input type="checkbox" name="01" value="001" />第一个
			<input type="checkbox" name="02" value="002" />第二个
			<input type="checkbox" name="03" value="003" />第三个
			<input type="checkbox" name="04" value="004" />第四个
			
		</from>
	</BODY>
</HTML>

按钮

一共三个按钮，分别是普通按钮，重置按钮和提交按钮。需要结合js来使用。

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>

	<BODY>
		<from action="url" method="get">
		<inpout type="button" name="btn" value="普通按钮"/>
		<inpout type="reset" name="re" value="重置按钮"/>
		<inpout type="submit" name="sub" value="提交按钮"/>
		</from>
	</BODY>
</HTML>

提交按钮需要用到from中的action 和method属性。

下拉列表

Select下拉列表可以用option定义多个选项。

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>

	<BODY>
		<from>
		下拉列表选择一个数字：
		<select name="sel">
			<option selected="selected">001</option>
			<!--设置默认值 --> 
			<option>002</option>
			<option>003</option>
			<option>004</option>
			<option>005</option>
		</from>
	</BODY>
</HTML>

文本域

<textarea> 文本域 </textarea>

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>

	<BODY>
		<from>
		大声说出你的想法：<br><br>
		<textarea name="tt" cols="40" rows="30">
		</textarea> 
		<!--名字  长 宽 --> 
		</from>
	</BODY>
</HTML>

H5提供的新的表单类型

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>

	<BODY>
		<from action="url" method="get">
			选取颜色：<input type="color" />
			<!--取色器 --> 
			日期1：<input type="date"/>
			日期2：<input type="datetime"/>
			日期3：<input type="datetime-local"/>
			邮件：<input type="email"/>
			时间：<input type="time"/>
			周：<input type="week"/>
			月：<input type="month"/>
			输入数：<input type="number" max="20" min="0" step="2" value="4" />
			<!--数字选择器  最大数 最小数 选择步长  默认值-->
			地址：<input type="url" />
			<!--前面要加上https:// -->
			提交按钮：<input type="submit" name="sub" value="提交"/>
		</from>
	</BODY>
</HTML>

CSS

通过CSS样式表解决HTML标签的外观样式单一的问题，实现内容与样式的分离，方便团队开发。

基本格式

<STYLE type="test/css" >
	关键词{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3；}
	……
</STYLE>

通过标签选择器

借助<STYLE>标签实现样式；其中关键词为标签选择器。

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<STYLE type="test/css" >
			P{color:red;font-size:30px;font-family:隶书；}
			
			……
		</STYLE>
	</HEAD>

	<BODY>
	<P>我是一句有修饰的话</P>
	</BODY>
</HTML>

通过类选择器

建立类选择器实现样式，为元素添加类属性，再将类设置CSS样式

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<STYLE type="test/css" >
			.test{color:red;font-size:30px;font-family:隶书；}
			
			……
		</STYLE>
	</HEAD>

	<BODY>
	<P class="test">我是一句有修饰的话</P>
	</BODY>
</HTML>

注意

当标签选择器和类选择器冲突时，类选择器会覆盖标签选择器的样式。

常用的样式属性

字体属性

font-size 字体大小
font-family字体类型
font-style 字体样式
color 设置或检索文本的颜色
text-align 文本对齐

背景属性

background-color设置背景颜色
background-image设置背景图片
background-repeat设置图片的平铺方式

<!--------------设置背景颜色----------------->
<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<STYLE type="test/css" >
			body{background-color:pink；}
			p{background-color:red；}
			ins{background-color:yellow；}
			h1{background-color:green；}
			……
		</STYLE>
	</HEAD>

	<BODY>
	<P>我是P</P>
	<ins>我是ins</ins>
	<h1>我是h1</h1>
	</BODY>
</HTML>

<!--------------设置背景图片----------------->
<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<STYLE type="test/css" >
			body{background-image:url( )；background-repeat:repeat-y;}
			<!--图片沿Y轴方向平铺-->
			……
		</STYLE>
	</HEAD>

	<BODY>

	</BODY>
</HTML>

行内样式表

样式表的修饰只针对某行来进行，将style作为属性在看待

<开始标签 style="属性名1:属性值1；属性名2:属性值2；">

实例：

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
	</HEAD>
	<BODY>
		<p>我是P</p>
		<p style="color:red;fornt:30px;">我是修饰过的P</p>
	</BODY>
</HTML>

外部样式表

使用外部样式表文件(.css)使一个网站中多个页面的样式保持一致

连接方式

链接(LINK)外部样式表
导入(@import)外部样式表

外部样式表.CSS文件：

body{background-image:url( )；background-repeat:repeat-y;}
h1{background-color:red；}
p{background-color:green；}

链接(LINK)外部样式表

使用LINK标签
HTML文件：

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<link href="css/外部样式表.CSS" rel="stylesheet" type="text/css"/>
		<!--链接CSS文件   得到所有浏览器的支持  固定-->
	</HEAD>
	<BODY>
		<h1>我是h1</p>
		<p>我是P</p>
	</BODY>
</HTML>

导入(@import)外部样式表

使用@import
HTML文件：

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<style type="text/css">
			@import "css/外部样式表.CSS";
		</style>
	</HEAD>
	<BODY>
		<h1>我是h1</p>
		<p>我是P</p>
	</BODY>
</HTML>

JS

JavaScript是一种具有面向对象能力的、解释性的程序设计语言。是基于对象和事件驱动并具有相对安全性的客户端脚本语言。

基于对象提供好了很多对象，可以直接拿来使用
事件驱动html实现静态效果，JavaScript实现动态效果
js的作用操作HTML和CSS

语言特点

松散型他的变量不必具有一个明确的类型
解释型不需要编译，直接解释执行
基于对象可以直接使用JS已经创建的对象
安全性不允许访问本地硬盘，不能将数据写入到服务器上
跨平台JS依赖于浏览器，与操作系统无关

核心构成

核心 ECMAScript
组织制定js语法、语句和函数
文档对象模型 DOM
浏览器对象模型 BOM

开发工具集

代码编辑器：Hbuilder、Notepad++等
浏览器：谷歌、IE、火狐等

编写

在html文件中

可以在<head></head>中写也可以在<body></body>中写。

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<script language="JavaScript">
			//单行注释
			//让页面弹出“hello world”
			alert("hello world01");
		</script>
	</HEAD>
	<BODY>
		<script language="JavaScript">
			//单行注释
			//让页面弹出“hello world”
			alert("hello world02");
		</script>
	</BODY>
</HTML>

先执行<head></head>中的再执行<body></body>中的。

在外部文件中

创建外部文件（.js）,在html文件中<head></head>引用

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<script language="JavaScript" src=".js后缀的文件路径">
		alert("我是不会执行的");
		</script>
		<script language="JavaScript">
		alert("我是会执行的");
		</script>
	</HEAD>
	<BODY>
	</BODY>
</HTML>

当一个Scirpt标签引用了外部的js文件，script在这个标签中如果还存在js代码，是不会执行的。新建一个script标签内的js代码是会执行的。
每行结尾的分号可有可无，但是推荐写上分号。

标识符

第一个字符必须是一个字母、下划线(_)或一个美元符号($)
其他字符可以使字母、下划线、美元符号或者数字
不能和关键字、保留字等预留标识符冲突

语法

注释

单行注释

使用双斜线开头(//)，在"//"后面的文字即为注释内容，仅仅注释本行内容，换行无效。

多行注释

使用/*开头，以*/结尾，在两者之间的内容均为注释内容。

声明变量

使用var运算符

var user="nicooo"     //正确
var number=1         //正确
int a=0             //错误

声明规则

第一个字符必须是一个字母、下划线(_)或一个美元符号($)
其他字符可以使字母、下划线、美元符号或者数字
不能和关键字、保留字等预留标识符冲突

声明多个变量

var a,b,c,d;
var e=1,f=2,g=3;

全局变量和局部变量

变量分为全局变量和局部变量，在函数体外声明的变量为全局变量，无论有没有var修饰。在函数内部声明的未用var进行修饰的变量也为全局变量。
在函数体内声明，并用var修饰的变量为局部变量。

变量的作用域

变量的作用域指的是变量的使用范围。
全局变量，作用于整个代码的变量。
局部变量，只作用于定义的函数体内。

数值类型

数值型Number

整数：
123//十进制
0123//八进制，以0开头
0x123//十六进制，以0x开头
浮点型：整数部分加小数部分组成，只能用十进制来表示，不过可以使用科学计数法
3.1415926 //标准形式的浮点数
3.14E9 //采用科学计数法来表示，代表的是3.14乘以10的9次方

字符串型

字符串型数据是使用单引号或者双引号括起来的一个或多个字符

布尔型

布尔型数据只有ture和false两个。在js中可以使用整数0代表false，使用非零整数来代表ture。

转义字符

以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。
\b退格
\n换行
\tTab符
\r回车
\'单引号
\'' 双引号
\\ 双反斜杠

空值

null 用于定义空的或者不存在的引用

var a=null;

未定义值

已经声明但是没有赋值的变量,undefined是关键字，用来表示未定义值。

var a;
alert(a);

查询数据类型

typeof用于查看变量的数据类型

var a=10;
alert(typeof(a));

运算符

赋值运算符

//简单运算符
a=b；
//复合运算符
a+=b;	//相当于a=a+b
a-=b;	//相当于a=a-b
a*=b;	//相当于a=a*b
a/=b;	//相当于a=a/b
a%=b;	//相当于a=a%b
a&=b;	//相当于a=a&b
a|=b;	//相当于a=a|b
a^=b;	//相当于a=a^b

函数

声明方法

function 函数名(输入参数){
	函数体；
	return 返回参数；
}

if语句

与大多数编程语言一致，在此不再赘述。

if(expression){
	//expression为真时执行
}

switch语句

与c中一致，在此不在赘述。

switch(expression){
	case judgement1:statement1:break;
	case judgement2:statement2:break;
	……
	default:defaultstatement;
}

for语句

与大多数编程语言一致，在此不再赘述。

for(initialize;test;increment){
	statement;
}
//例子
var sum=0;
for(i=1;i<10;i++){
	sum+=i;
}
slert("总和为："+sum);

while语句

与大多数编程语言一致，在此不再赘述。

while(expression){
	statement
}
//例子
var sum1=0;
car i=100;
while(i<=1){
	sum1+=i;
	i++;
}
alert("while总和为:"+sum1);

do-while语句

do-while循环时先执行一次循坏，再判断条件是否成立。所以不管条件成立与否，至少能够执行一次。

匿名函数

声明

var add=function(a,b){
			var sub=a-b;
		};
//通过变量名调用函数
add(10,20);

//匿名函数作为其他函数的参数使用
function test(func){
	func();
}
test(funcition(){
		document.write("hello");
	});
//上面的传参实质的工作原理：
*var func = function(){
				document.write("hello");
			}

全局函数

eval函数

执行js代码（如果字符串时一个js代码，使用方法直接执行）

var str="slert('1234')";
eval(str);

encodeURI()编码decodeURI()解码

var s="测试中文123abc";
var bianma=encodeURI(s);
var ss="%E6";
var jiema=decodeURI(ss);

isNaN函数

判断是否为数字，是数字返回false，不是数字返回ture

事件

常用事件

在这里插入图片描述

事件处理

事件处理程序可以使任意的JS语句，通常使用函数来对事件进行处理。

在HTML中绑定

<HTML>
	<HEAD>
		<meta charset="UTF-9">
		<TITLE>网页标题</TITLE>
		<script language="JavaScirpt">
			//声明一个函数
			function test(){
				alert("我被点击了");
			}
		</script>
	</HEAD>
	<BODY>
		<form>
			<input type="button" value="按钮" onclick="test()"/>
		</form>
	</BODY>
</HTML>

在JavaScript中绑定

<input type="button" name="save" id="save" value="保存"/>
<script language="javascript">
	var bt_save=document.getElementById("save");
	bt_save.onclick=function(){
		alert("保存按钮被点击");
	};
</script>

正则表达式

是一个描述字符模式的对象，使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
主要用来验证客户端的输入数据。用户填完表单单击按钮后，表单就会被发送到服务器，在服务器端通产会用PHP、ASP.NET等服务器脚本进行进一步处理。

正则表达式的创建

var objExp=/\d/;

正则表达式的判定

使用test()方法进行模式匹配，如果搜索到匹配的字符返回ture,搜索不到返回false

var objExp=/\d/;
objExp.test("abc");

使用esec（）方法进行模式匹配，当没有搜索到匹配字符时返回null，当搜索到时返回包含正则表达式相匹配的字符串。

cookie

cookie的组成

cookie是由名/值对行程的文本，其组成为：name=value。

dociment.cookie='user=值;[expires=失效时间;path=访问路径;domain=域名访问;secure=安全的https限制通信]'
//中括号中值可选的  name=value时必选
//向本地磁盘写入cookie
document.cookie='用户名'；
alert(document.cookie);

cookie局限性

每个特定的域名下最多生成20个cookie（根据不通的浏览器有所不同）
cookie最大大约4096字节（4k），为了更好的兼容性，一般不超过4095字节
储存在客户端的文本文件，所以特别重要和敏感的数据不建议保存在cookie

Nicooo-929

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件测试零基础自学笔记_web基础

HTML超文本标记语言，是web开发的基本技术HTML结构<HTML><HEAD><TITLE>网页标题</TITLE></HEAD><BODY> 主体部分</BODY></HTML>标签一般成对出现，第一个标签是开始标签，第二个标签是结束标签。显示中文需要在<head> 标签中加入 <meta charset="UTF-9">HTML元素指的是从开始标签
复制链接

扫一扫