1.1Web基础知识
1.2Web相关的名词：
1、world wide web(万维网)：我们可以理解为是基于http协议和超文本传输语言的信息交换系统。
2、网站：我们可以将网站理解为是在上述的信息交换系统内用来临时存放和交流信息的一个平台（该平台就是由网页组成）
3、http协议：我们可以认为是用来规定不同的网站之间或者不同的客户端与服务器之间如何进行数据交换的一种规则。
4、超文本传输语言：不仅仅只能传文字的语言，超越文本（图片、声音、视频），我们称之为HTML
5、url：我们可以将url理解为是在输入在浏览器地址栏中的那串字符。http://www.hao123.com:80(通过url打开的是网页，而网页就是用html来编写的)
6、网页的本质就是一个html格式的文件（网页是用html来编写的，用户看到的是界面，开发看到的是源码）
1.3HTML基本介绍
一、定义
HTML就是HyperText Markup Language,在国内我们称之为叫超文件标记语言。
二、HTML发展过程
1、html1.0--->html5.0
2、W3C这个组织专门来制定HTML语言的标准
3、浏览器生产厂商他们生产的浏览器，前端编写的是HTML代码，而用户看到的是最终的网页，所以浏览器的任务就是将HTML代码“渲染”成用户可以看到的图形界面。
三、HTML的作用：当下HTML主要作用就是用来编写网页
1.4Hbuilder与网页初始
下载程序
创建一个web程序
边开发边修改模式
1.5网页的骨架
一、什么是网页的骨架
对于任何页面来说它们的源代码里都会有一些必须存在的相同的模块，我们将这个模块称之为网页骨架
二、骨架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
welcome to anji test
</body>
</html>
注：
1、<!DOCTYPE html>这句话的作用是用来告诉浏览器当前的文档类型是html
2、<html></html>被称之为网页中的根标签，最大的一个标签
3、<head></head>网页的头部内容，里面最常规的做法就是设置字符编码已经网页标题
4、meta它就是用来定义信息的一个标签，可以设置字符集，关键字，描述性文字。
5、<title></title>设置网页的标题，它里面的内容会显示在浏览器的标签页上。
6、<body></body>网页的主体标签，就相当于浏览器的白色窗口
1.6HTML标签与语法
1、HTML标签：HTML是一门语言，可以用来编写网页。但是如果我们想在浏览器上看到某些具体的效果那么就应该有相应的标签与之对应。
2、HTML标签语法：我们在使用HTML标签编写网页的过程当中必须遵守某些规则才能够达到最终的想要的结果，这种规则就是我们所谓的语法。
3、HTML标签分类：
（1）双标签
<双标签名称></双标签名称>
<html></html>等等
（2）单标签
<单标签名称 />
4、标签嵌套
<标签1><儿子></儿子></标签1>
<标签1><儿子></标签1></儿子>
1.7常见的HTML标签
1.标题标签：所谓的标题就是定义当前网页的模块标题，在HTML当中定义了六个标题标签
格式：
<h?>标题内容</h?>【？表示从1-6的数字，一个网页当中要求只能出现一个h1标签】
2、段落标签
<p>段落内容</p>
3、换行标签
<br />
4、空格符号： 在utf8编码下三个空格相当于一个汉字
5、版权号@：©
6、引号："
7、小于号：<
8、大于号：>
9、注释：它的作用就是将内容展示在源代码，但是不会在网页里展示。
<!--这里写注释的内容-->
1.8图片标签
常见的图片格式介绍
*.jpg类型
优点：体积小，比较清晰
缺点：有损压缩，画面失真
适用场合：网页图片
制作工具：photoshop
*.gif类型
优点：支持internet标准，支持无损耗压缩和透明度，很流行
缺点：支持有限的透明度，效果不如别的图像
适用场合：网页图片
制作工具：photoshop
*.swf类型
优点：体积小，便于网络传输
缺点：制作麻烦
适用场合：网页动画
制作工具：flash
*.bmp类型
优点：支持24位颜色深度，兼容性好
缺点：不支持压缩，容量大
适用场合：桌面墙纸
制作工具：制作工具：photoshop
<img src="" />
1、img标签是在HTML当中定义好的一个单标签，它的作用就是用来在网页中插入一张图片
2、src就是img标签的属性，一个标签可以有多个属性，属性名与标签名之间用空格隔开
3、属性名和属性值用等号连接，属性值可以写在单引号里面单引号和双引号都可以
4、如果属性值是纯数字，那么引号也可以省略
1.9常见的图片属性
1、width/height：用来定义图片的宽度和高度，默认单位不写是px。
2、Title:它里面的写的内容会再鼠标悬停再图片上方时显示出来
3、Alt：当图片不能正常加载显示的时候会将alt里面的文字展示出来
4、Border:设置当前图片的边框
1.10超链接标签
一、超链接是什么：超链接的作用就就在点击之后完成页面跳转效果。
二、超链接标签
<a href="目标网页地址">文字</a>
1、a是HTML当中定义好的一个双标签，专门用啦实现页面的跳转
2、空链接的实现方式就是在href属性值当中设置#
1.10路径
一、定义
在计算机当中我们可以将路径理解为是用来查找某个资源所走过的路，例如D:\BaiduNetdiskDownload
二、路径的介绍
一般情况下我们将路径认为的分为二类：绝对路径+相对路径
1、绝对路径：一般以盘符为起点去查找某个资源：E:\周口教学(重要)\安吉软件测试\1.测试基础\1\adv_2.jpg
一般不建议使用
2、相对路径：一般就是以当前文件【网页文件】为起点，去查找资源【图片】
三、相对路径的使用
1、同级路径：同级指的就是网页文件与图片在一级目录下，此时我们只需要在路径中写入目标文件的名称即可。
<img src="1.jpg">
2、下级路径：下级指的就是图片在网页文件中的下级目录中，此时我们需要先找到与网页同级用来存放图片的目录，然后再使用/来 进行向下查找
<img src="img/2.jpg">
3、上级路径：上级指的就是图片在网页中文件的上级目录中。此时我们需要时../符号先进行目录的回退然后查找
<img src="../3.jpg">
1.11表单基本介绍
一、定义
表单就是在Web网页上用来收集用户数据，并且将数据提交到后台的一个HTML模块，在HTML里专门定义了一个formde标签，我们称之为表单域
格式
<form action="" method="">
表单域里的内容
</form>
二、表单域属性介绍
1、HTML当中通过form标签来定义表单域，它只相当于一张白纸，用户在在它上面填写数据（通过其他表单元素实现）
2、当用户填写完数据之后点击提交按钮，数据就会自动的提交到目标地址，这个地址就是写在action属性值里
3、method属性值里填写的就是数据提交的方法，最常见的是get post二种方法
注：
1、action里面可以为空或者用#来用于数据提交测试
2、get方法提交的数据会显示在url地址后面，有数据大小限制
3、post方法提交的数据会写在http协议请求体当中，没有数据大小限制（后期可以通过抓包查看）
三：常见的表单元素
input类
<input type="类型值">
1、text：用来表示文本框输入
2、submit：提交按钮
3、password:表示密码框
4、radio:单选框【如果要实现单选的效果，则必须将选项的name值设置成相同的】
5、checkbox: 多选框
6、reset:重置按钮
7、button:普通按钮
非input类
1、文本域
<textarea cols="列数" rows="行数"></textarea>
2、下拉框
<select>
<option value="" selected>选项名称</option>
...
</select>
四：常见表单元素的细节
1、一组单选按钮要达到选中其中的一个效果，需要给多个选项设置相同的name属性
<input type="radio" name="gender" value="111" />男
<input type="radio" name="gender" value="111" />女
单选按钮默认选中某个选项可以设置checked=checked属性
<input type="radio" name="gender" checked="checked" />男
2、复选框
复选框的默认选中某个选项同样可以设置成checked=checked
<input type="checkbox" checked="checked" />篮球
3、下拉框
下拉框默认选中某个下拉选项可以设置selected=selected
<select name="">
<option value="选项1">选项1</option>
<option value="选项2" selected="selected">选项2</option>
<option value="选项3">选项3</option>
</select>
4、上述的checked与selected属性在设置的时候属性值与属性名是一样的，所以对于这类属性在设置的时候可以只写属性值就可以了
例如： <input type="checkbox" checked />篮球
五：表格
定义表格：
<table>
</table>
定义行：
<tr></tr>
定义列：
<td></td>
colspan="n",n表示跨多少列
rowspan="n",n表示跨多少行
六：CSS引入
web标准的内容就是指结构、样式、行为三者分离
1、HTML:网页的结构指的就是利用HTML语言搭建的网页框架（毛坯）
2、CSS:网页的样式指的就是利用CSS语言对HTML结构进行美化（装修）
3、JS(javascript):网页行为指的就是利用js语言让网页可以理解用户操作行为
css定义
css在国内称之为层叠样式表||级联样式||样式表
css的使用步骤
1、在body中事先定义HTML结构（网页）
2、在head标签里，title标签写一对style标签，用于书写css代码
3、依据相应的css语法规则，在style标签中定义Css语句
选择器类型{属性名:属性值；...}
....
选择器类型：
1、标签选择器，标签名{...}
2、类选择器，.类名{...}通过标签class属性来选择类，class="类名1，类名2..."
3、id选择器，#id{...}通过id属性来选择id="id"
文本属性
font-size,字体大小
font-family:字体类型
font-style:字体样式
color:颜色
text-align:文本对齐方式
背景属性：
background-color,背景颜色
background-img,背景图片 url(图片路径)
特殊样式（超链接）
a:link{...},未访问过链接样式表
a:visited{...},访问过的链接样式
a.hover{...},鼠标悬停链接样式
a.active{...},点击链接样式
样式表的三类应用方式
1、内嵌样式
<head>
<style type="text/css">
样式规则
</style>
</head>
2、行内（嵌入）样式表
3、外部样式表
先要创建一个CSS文件，将style标签内的样式内容写在css文件中（style标签不需要写），通过link标签在html的head中对css文件进行引用
（<link href="css文件路径" rel="stylesheet type="textcss">）
<div>:标记层标签
层属性：
position,层坐标（absolute以整个页面为参照物）
left:层到页面（参照物）左边距离
top:层到页面（参照物）上边距离
width:层宽度
height:层高度
z-index:层级，层级有小到大
音频标签
<audio autoplay loop controls>
<source src="****.mp3" />
...
</audio>
注：audio是一个H5中新增的双标签，可以用来在网页当中加载一段声音资源
视频标签
<video autoplay loop controls>
<source src="***.mp4">
...
</video>
注：video是一个H5中新增的双标签，可以用来在网页当中加载一段视频资源
javascript:内置式脚本语言，弱类型，被应用于HTML
基本结构：
<body>
<script type="text/javascript">
...;
</script>
</body>
javascript数据类型
整数123
实数12.3
字符串“abc”
布尔trure false
对象
空值
未定义
变量申明：
var 变量名
运算符：
单目运算（一元运算），！、++、--
双目运算（二元运算），+、-、*、/、%、<、>、<=、>=、==、!=、&&、||
判断奇数和偶数条件：任何数%2要么是1或者是0，是0就是偶数，是1就是奇数
数组
数组声明
var 数组名 = new Array(元素,...);
var 数组名 = new Array(数组长度);
var 数组名 = new Array();
var 数组名 = [元素,...];
注：数组的下标从0开始
条件语句：
if(条件){
执行语句;
}
else if(条件) {
执行语句;
}
...
else {
执行语句;
}
switch(表达式) {
case 值1:
执行语句;
break;
case 值2:
执行语句;
break;
...
default:
执行语句;
}
来源：CSDN
作者：金朝阳
链接：https://blog.csdn.net/JCY58/article/details/103760856