小王搞测试-12

最新推荐文章于 2024-06-27 14:57:56 发布

hello976-

最新推荐文章于 2024-06-27 14:57:56 发布

阅读量159

点赞数

分类专栏：小王学测试文章标签： linq p2p html

本文链接：https://blog.csdn.net/hello976/article/details/123579630

版权

小王学测试专栏收录该内容

14 篇文章 1 订阅

订阅专栏

01 HTML技术
- HTML基本标签
  - HTML (Hyper Text Markup Language超文本标识语言)
    - 是一种用来制作超文本文档的简单标记语言。
    - 用HTML编写的超文本文件称为HTML文件，也称Web文件。
    - HTML是Web开发的基本技术。
  - HTML文件的基本结构
  - HTML标签
    - HTML标记标签通常被称为HTML标签(HTML tag).
    - HTML 标签是由尖括号包围的关键词，比如<html>
    - HTML标签通常是成对出现的，比如<b>和</b>
    - 标签对中的第一个标签是开始标签，第二个标签是结束标签
    - 开始和结束标签也被称为开放标签和闭合标签
  - HTML元素
    - HTML元素指的是从开始标签到结束标签的所有代码，是HTML语言的基本部分。
    - HTML文档由嵌套的 HTML元素构成。
    - 空的HTML元素
      - 没有内容的HTML元素被称为空元素。
      - 空元素是在开始标签中关闭的。
      - <br>(定义换行的标签)就是没有关闭标签的空元素。
  - HTML元素属性
    - HTML 元素可以设置属性
    - 属性可以在元素中添加附加信息
    - 属性一般描述于开始标签
    - 属性总是以名称/值对的形式出现，比如：name="value"。
  - 常用基本标签
    - 标题:<h1> - <h6>
    - 段落:<p>
    - 换行:<br>
    - 链接:<a>图像:<img>
    - 注释:
    - 嵌入元素(声频、视频): <embed src=“文件名”>
    - HTML定义了一些文本格式的标签，可以改变字体样式。
      - <b>粗体bold
      - <big>定义大号字
      - <small>定义小号字
      - <em>定义着重文字
      - <i>斜体italic
      - <del>文字当中划线表示删除
      - <ins>文字下划线表示插入
      - <sub>下标
      - <sup>上标
      - 字体、字号标签<font>
  - 表格
    - 表格由 <table> 标签来定义。
    - 每个表格均有若干行（由 <tr> 标签定义），
    - 每行被分割为若干单元格（由 <td> 标签定义）。
    - 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- 表单元素
  - HTML表单用于搜集不同类型的用户输入。最常见最典型的表单：注册页面。
  - 表单是一个包含表单元素的区域。
  - 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
  - 表单使用表单标签 <form> 来设置:
    - <form action="url" method='*'>
      .
      <input> </input>
      .
      </form>
  - 表单的三个要点
    - 动作属性Actions
    - 方法属性Method
    - 表单控件Form Controls
  - 表单控件
    - 通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作
    - input:根据type可分为
      - 文本输入框:用户名/密码 Type= "text”/ “password"
      - 单选按钮:Type="radio"
      - 复选框:Type= "Checkbox"
      - 按钮: Type="button"
    - Select:下拉列表,用option定义多个选项
  - 动作属性
    - 当用户单击确认按钮(即提交表单)时，表单的内容会被传送到另一个文件。
    - 表单的动作属性定义了目的文件的文件名。
    - 由动作属性指向的这个文件通常会对接收到的输入数据进行相关的处理。
  - method属性
    - Method属性告诉浏览器如何将编码后的数据发给服务器。
    - 其值为get或者post.
      - get:浏览器会将数据直接附在表单的 action URL之后。这两者之间用问号进行分隔
      - post.直接连接服务器，然后将html表单中的值发送给WEB服务器。这种方式是没有字符长度限制的。
  - HTML5表单-新的input类型
    - color用于选取颜色
    - date从一个日期选择器选择一个日期datetime选择一个日期(UTC时间)
    - datetime-local选择一个日期和时间(无时区).
    - email包含e-mail地址的输入域
    - month选择一个月份
    - number包含数值的输入域
      - 属性值
        描述
        
        max number 规定允许的最大值
        min number 规定允许的最小值
        step number 规定合法的数字间隔
        value number 规定默认值
    - time选择一个时间
    - url包含URL地址的输入域，在提交表单时，会自动验证url域的值。
    - week选择周和年
- 样式表的三种形式
  - 内部样式表
  - 行内（嵌入）样式表
  - 外部样式表

02 CSS

为什么需要CSS样式表
- HTML标签的外观样式比较单一
  - 颜色只有黑白
  - 字体类型和大小无变化
- 样式表的作用相当于华丽的衣服
- 样式表能实现内容与样式的分离，方便团队开发

样式表的基本语法

样式表的基本结构

样式规则
- p{color:blue;font-size:20px;font-family:隶书";}

常用的样式属性

文本属性	font-size	字体大小
	font-family	字体类型
	font-style	字体样式
	color	设置或检索文本的颜色
	text-align	文本对齐
背景属性	background-color	设置背景颜色
	background-image	设置背景图像
	background-repeat	设置一个指定的图像如何被重复	repeat-x
			repeat
			no-repeat
			repeat-y

行内(嵌入)样式表
- 样式表的修饰只针对某行来说
- <开始标签 style =“属性名1:属性值1;属性名2:属性值2...”> </结束标签>
外部样式表
- link外部样式表
  - <head>
    
    <link href="text/css"rel="stylesheet" type="text/css" >
    
    </head>
  - 三步
    - 创建样式表文件newstyle.css
    - 把样式文件和网页绑定
    - 浏览查看各网页
- 导入(@import)外部样式表
  - <head>
    
    <style type="text/css">
    
    @ import"newstyle.css";
    
    </style>
    
    </head>

03JavaScript基本语法

JavaScript

JavaScript是一种具有面向对象能力的、解释型的程序设计语言。
主要目的
- 验证发往服务器端的数据
- 增加Web互动
- 加强用户体验度等。
基于对象:提供好了很多对象，可以直接拿过来使用
事件驱动: html做网站静态效果，javaScript实现动态效果
客户端:专门指的是浏览器
JS的作用:操作HTML和CSs
特点
- 松散型:JavaScript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。
- 解释型:不需要编译。浏览器直接解释执行。
- 基于对象:我们可以直接使用JS已经创建的对象。Math String
- 安全性:不允许访问本地硬盘，不能将数据写入到服务器上。
- 跨平台:js依赖于浏览器本身，与操作系统无关

Java与JavaScript区别

	Java	JS
JavaScript和Java没有任何关系，属于两门编程语言
开发公司	Sun公司开发的，现在是oracle公司	Netscape【网景公司】公司开发的
对象	面向对象的【new】	基于对象的
数据类型	强类型语言【每种变量都有确定的数据类型】例如: int i = "10”;	弱类型语言【变量的类型由值决定】例如: var i = 10; varj = “10”;
执行过程	需要现编译成字节码文件，然后再执行	只需解析就可以执行

JavaScript核心
- 1.核心(ECMAScript)
  - ECMA:欧洲计算机协会【类似中国足协，比较正规的组织】由ECMA组织制定的js语法，语句，函数..
- 文档对象模型(DOM)
  - Document Object Model:文档对象模型
- 浏览器对象模型(BOM)
  - Broswer Object Model,浏览器对象模型
开发工具集
- 代码编辑器：HBuilder、Notepad++等
- 浏览器：谷歌浏览器、火狐浏览器、IE浏览器、IETest工具等

如何在网页中写JavaScript代码
- 在页面中直接嵌入JavaScript
  - <script language="javascript">
    js程序
    </script>
  - js代码可以插入在<head></head>标签中间，也可以放在<body></body>
    标签中间。
  - 最常用的是放在<head></head>
- 引入外部的JavaScript
  - 如果脚本比较复杂或者是同一段代码被很多页面所使用，则可以将这些脚本代码放置在一个单独的文件中，该文件的扩展名是js，然后再需要使用该代码的web页面中链接该javascript文件即可。
  - <script language="javascript" src=".js后缀的文件路径"></script>
  - 一般写在<head></head>中间比较好
  - 在.js后缀的文件中，不需要使用<script></script>标签对括起来。
  - <body οnlοad="函数名()">表示的是加载页面时调用函数，函数是定义在.js后缀的文件中。

JavaScript的语法与关键字

JavaScript语法
- js的变量区分大小写
  - username userName 这是两个不同的变量
- 每行结尾的分号可有可无，如果语句的结束处没有分号，那么js会自动将这行代码的结尾作为语句的结尾。
  - alert("Hello World");
  - alert("Hello World")
- 标识符
  - 所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式规则组合起来的一或多个字符:
    - 第一字符必须是一个字母、下划线( )或一个美元符号($)。
    - 其他字符可以是字母、下划线、美元符号或数字。
    - 不能把关键字、保留字、true、 false和null作为标识符。
  - 例如: myName、book123等
- 注释
  - 单行注释//
    - 单行注释使用双斜线"//"开头，在"//"后面的文字即为注释内容，注释的内容在代码执行过程中不起作用。
    - var now=new Date(;//获取日期对象
  - 多行注释
    - 多行注释以"/*"开头，以"*/"结尾，在两者之间的内容为注释内容,在代码执行过程中不起任何作用。
    - /*
      *功能:获取当前日期
      *作者: tony
      function getClock(){
      //内容
- 定义变量时至使用var运算符。
  - var username= "tom";正确
  - var age=30;正确
  - int age=30;错误
- 使用大括号标签代码块
  - { //代码}被封装在大括号内的语句按照顺序执行。

JavaScript中的关键字

关键字不能用作变量名、函数名以及循环标签

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

JavaScript的数据类型

数值型Number	整型	123 //十进制 0123 //八进制，以0开头 0x123 //十六进制，以0x开头
数值型Number	浮点型	整数部分加小数部分组成，只能用十进制表示，可科学计数法 3.1415926 //标准形式的浮点型 3.14E9 //科学计数法，3.14×10的9次方
字符串型	使用单引号或者双引号括起来的一个或者多个字符。 a' 'Hello World' ”a" "Hello World" 单引号包含双引号:'大家好，我叫"tom" 双引号包含单引号: "大家好，我叫'tom"
布尔型	布尔（逻辑）只能有两个值：true 或 false。
转义字符	以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。	\b 退格 \n 换行 \t Tab符 \r 回车符 \' 单引号 \" 双引号 \\ 反斜杠
空值	null 用于定义空的或者不存在的引用 var a=null;
未定义值	已经声明但没有赋值的变量	var a; alert(a); undefined是关键字，用来代表未定义值

变量的定义与使用
- 变量的命名规则
  - 变量名由字母、数字、下划线组成，但是不能以数字开头。
  - 不能使用JavaScript中的关键字。
  - 严格区分大小写。username userName
- 变量的声明
  - var variable;
  - 可以使用一个var声明多个变量
    - 比如var now,year,month,date;
  - 可以在声明变量的同时对它进行赋值，也就是初始化。
    - var now= " 2015-10-10",year=”2015 ,month="10' ,date="10";
  - 如果只是声明了变量，没有赋值，那么该变量的默认值是undefined
  - JavaScript是弱类型，声明的时候不需要指定变量的类型，变量的类型将根据变量的值来确定。
  - 全局变量的声明
    - 在函数体外声明的都是全局变量。无论是否有var声明。
    - 在函数体内部使用var声明的变量是局部变量，不使用var声明直接赋值的变量是全局变量。
      var quanju= 123;//这是全局变量
      //如给个尚未声明的变量赋值时, JS会自动使用该变量创建一个全局变量。
      quanju1 = " abc";//这也是全局变量
      function test(){
      var quanju3 ="aaaaa";//这是局部变量
      quanju2= "12345";//这也是全局变量
      test2();
      }
      function test2({
      alert(quanju2);
      }
- 变量的作用域
  - 变量的作用域是指变量在程序中的有效范围。
  - 全局变量:定义在所有函数之外，作用于整个代码的变量。
  - 局部变量:定义在函数体内，只作用于函数体内的变量。

运算符的应用

赋值运算符	=	x=y
	+=	x+=y //x=x+y
	-=	x-=y //x=x-y
	*=	x=y //x=xy
	/=	x/=y //x=x/y
	%=	x%=y //x=x%y
	&=	x&=y //x=x&y
	\|=	x\|=y //x=x\|y
	^=	x^=y //x=x^y
算术运算符	+	加法
	-	减法
	*	乘法
	/	除法
	%	取模（余数）
	++	自增
	--	自减

04JavaScript流程控制语句
- 流程控制之if、switch语句
  - if条件判断语句
    - if(expression){
      //expression为true的时候执行里面的内容
      }
    - if(expression){
      //expression为true的时候执行里面的内容
      }else{
      //expression为false的时候执行里面的内容
      }
    - if(expression1){
      //expression1为true的时候执行里面的内容
      }else if(expression2){
      //expression2为true的时候执行里面的内容
      }else if(expression3){
      //expression3为true的时候执行里面的内容
      }else{
      //这个else可有可无。如果有的话，则上述条件
      //都不满足的时候执行else
      }
  - switch语句
    - switch(expression){
      case judgement1:statement 1:break;
      case judgement2:statement2:break;
      ...
      default:defaultstatement;
      }
- 流程控制之for、while、do-while语句
  - for循环
    - 根据判断条件执行对应的语句块
    - for (语句 1; 语句 2; 语句 3)
      {
      被执行的代码块
      }
    - 语句1（代码块）开始前执行
      
      语句 2 定义运行循环（代码块）的条件
      
      语句 3 在循环（代码块）已被执行之后执行
  - while循环
    - while (条件)
      {
      需要执行的代码
      }
  - do-while循环
    - do
      {
      需要执行的代码
      
      while (条件);
05函数的定义与调用
- 函数的定义
  - function functionName([parameter1,paraere2.){
    statments;
    [return expression;]
    }
  - function是必须要写的，因为这是定义函数的关键字。
  - functionName是函数名，必须要写，而且在同一个页面中，函数名是唯一的。并且区分大小写。
  - parameter:可选参数，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255个参数。
  - statements:必选参数，这是函数体，用于实现函数功能的语句。
  - expression:可选参数，用于返回函数值。expression可以是任意的表达式、变量或常量。
- 函数的调用
  - 直接使用函数名
    - 函数名(实参)；
    - var i=account(10,5);
  - 匿名函数
    - var 变量名= function(参数列表){
      函数体
      return返回值【可有可无]】;
      }
    - 说明
      - 可以将匿名函数作为其他函数的参数使用
      - 定义匿名函数可以完成某些一次性的事件[DOM中的事件]
  - 全局函数
    - 全局函数不属于任何一个对象，直接写名称使用即可
    - 识别字符串中的js代码: eval
      //执行js代码(如果字符串是一个js代码，使用方法直接执行)
      var str = "alert('1234')";
      //alert(str);//alert('1234)
      //将str直接当做js代码使用
      eval(str);
      document.write(" <hr/> ");
    - 对字符进行编码：encodeURI
    - 对字符进行解码：decodeURI
    - 判断是否为数字：isNaN
    - 类型转换：parseInt

06事件和正则表达式

什么是事件
- HTML 事件是发生在 HTML 元素上的事情
- 当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

常见的事件

onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件处理的方式
- 事件处理程序是用于响应某个事件而执行的处理程序。事件处理程序可以是任意
  的JavaScript语句，通常使用函数来对事件进行处理
- 第一种方式，在HTML中绑定:
  < script language= "javascript" >
  function save(){
  alert("保存按钮被点击");
  }
  </script>
  < input type= "button" name= "save" value= "保存" οnclick= "save()"/>
- 第二种方式，在JavaScript中绑定:
  ①<input type= "button" name= "save" id= "save" value= "保存'/>
  <script language= "javascript">
  ②var bt save= document.getElementByld("save" );
  bt_save.onclick = function(){
  alert("保存按钮被单击");
  };
  </script>
  第二种方法要注意先执行①，才能执行②。

正则表达式组成

正则表达式(regular expression)是一个描述字符模式的对象。使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

方括号	[abc]	查找方括号之间的任何字符。
	[0-9]	查找任何从 0 至 9 的数字。
	(x\|y)	查找任何以 \| 分隔的选项。
元字符	\d	查找数字。
	\s	查找空白字符。
	\b	匹配单词边界。
	\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。
量词	n+	匹配任何包含至少一个 n 的字符串。
	n*	匹配任何包含零个或多个 n 的字符串。
	n?	匹配任何包含零个或一个 n 的字符串。

字符类
量词
指定匹配位置
选择匹配符	\|

正则表达式判断方法
- 使用 test()
  - test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
- 使用 exec()
  - exec() 方法用于检索字符串中的正则表达式的匹配。
  - 该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。