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

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告诉浏览器如何将编码后的数据发给服务期。其值可以为getpost
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中的actionmethod属性。

下拉列表

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值