一、html
1.1、概念、作用、特点
概念：hyper text markup language，超文本标记语言。以特定的标签在浏览器中呈现不同的视图效果。
超文本：在文本中除了编写字符内容之外，还可以有图片，表格，列表，表单，多媒体等资源。
标签：也叫标记：是由
<>和一个单词组成的符号，这个符号可以被浏览器识别并呈现出对应的视图。任何一个浏览器都具有解析html的引擎，但是不同内核的浏览器解析能力不同。
作用：在页面中呈现用户数据
特点：
1.html文件都是以
.html或者.htm结尾 2.html文件是由浏览器解释运行的
3.html页面中的内容都是以标签出现的
4.html页面中由头部标签
<head>和主体标签<body>组成 head标签：用于配制当前页面，例如：标签页的标题，字符集，刷新频率，页面作者，页面敏感字，当前页面引入的css和js文件等
body标签：用于呈现用户数据，呈现页面中的各种内容的
1.2开发工具
常见的工具：
1.webStorm
2.vsCode
3.dw
4.HBuilder，HBuilderX
1.3、常用标签
显示标签、表单标签、布局标签、功能标签、框架标签
标签的分类：
分类方式一：
1.单标签：只有开始标记
<img>,<br>,<hr>,<input> 2.双标签：由开始标记和结束标记组成
<p></p>,<div></div>,<from></from>,<a></a>分类方式二：
1.行内标签：可以与其它标签在同一行
2.块级标签：独占一行，上下自动换行
注释：
<!--注释的内容-->，快捷键command + /
1.3.1、显示标签
文本标签：font
属性：
1.size：大小，范围：1～7，默认为3
2.color：颜色
1.颜色单词
2.#rrggbb
图片标签：img
属性：
1.src：显示图片的路径
2.alt：图片无法加载时的提示内容
3.title：鼠标悬浮在图片上的提示内容
4.width：宽度
5.height：高度
注：单独设置宽或者高，图片会等比例缩放
音频标签：audio
属性：
1.src：音频的路径
2.coutrols：表示控制
3.autoplay：表示自动播放
视频标签：video
属性：
1.src：视频的路径
2.coutrols：表示控制
3.autoplay：表示自动播放
4.width：宽度
5.height：高度
1.3.2、功能标签
超链接标签：a
属性：
1.href：跳转到的目标地址
2.target：设置新页面的打开方式，取值：
_self（在当前页面跳转（默认））、_blank在新的网页中打开同页面内的跳转步骤：
1.在目标位置的标签中添加id属性并赋值
2.在起始位置的a标签中的href属性中写上
#目标位置的id值返回顶部：href中写
#
下拉菜单标签：select
属性：
1.size：设置下拉列表中的可见选项个数
配合子标签来使用：option
文本域标签：textarea
也叫多行文本框
属性：
1.rows：显示的行数
2.cols：显示的列数
1.3.3、布局标签
标题标签：h1，h2，h3，h4，h5，h6，h7
特点：自动加粗
换行标签：br
水平线标签：hr
段落标签：p
属性：
1.width：宽度
2.height：高度
列表标签：ul无序列表，ol有序列表
属性：
1.type：
1.有序列表：i，l，a，A，1（默认）
2.无序列表：square，circle，disc（默认）
配合子标签：li列表项
列表嵌套：将一个列表作为另一个列表的列表项内容
表格标签：table
属性：
1.border：边框
2.height：高度
3.width：宽度
4.cellpadding：单元格的内边距
5.cellspacing：单元格的外边距
配合子标签：tr表格行，td单元格
不规则表格：colspan：跨列，rowspan：跨行
div标签（块级标签）
span标签（行内标签）
1.3.4、表单标签
标签名：form，用于接收用户输入内容并可以提交到服务器的标签
form属性：
1.action：用于明确当前表单的数据提交到哪里
2.method：用于设置提交方式
1.get：提交的数据会拼接在地址栏上，封装在请求行（默认）
2.post：提交的数据不会拼接在地址栏上，会对提交的数据进行封装，封装在请求体
输入域标签：input，它可以显示多种表单的输入视图组件效果，它通过type属性来区别不同的输入属性
input属性：
1.type：取值
1.text：文本框（默认）
2.password：密码框
3.radio：单选框
4.checkbox：复选框
5.button：普通按钮
6.submit：提交按钮
7.reset：重置按钮
8.image：图片标签
9.file：文件选择
10.date：日期标签
11.time：时间
12.datetime：日期和时间
13.color：颜色选择
2.value：
1.用在按钮相关的标签上，value属性值就是按钮上的文本
2.用在输入框相关的标签上，value属性值就是输入框中的内容
3.用在输入框、单选框、复选框上，value属性还是提交到服务器的值
3.name：
1.用在输入框、单选框、复选框上，当点击提交按钮时，标签中name属性的值与value属性的值会形成键值对，格式：
name=value 2.在单选框中，name属性还可以让多个不同的单选框具有互斥性
4.id：标签的唯一标识
5.placeholder：输入框中的提示信息
6.required：输入框中必须输入内容，否则不能提交
7.disabled：该标签不可用
8.readonly：输入框中的内容只读，不能写入
9.checked：单选框和复选框的默认选中状态
注：
1.reset重置按钮，只能重置它所在的表单，并且重置表示还原到默认初始状态
2.有button标签，它在表单中就是提交按钮，它在表单外就是普通按钮
3.通过label标签，可以使点击文字就相当于点击标签的效果
<input type="radio" name="gender" value="男" id="nan"> <label for="nan">男</label>
二、css
2.1、概念、作用
css：cascading style sheet，层叠样式表
作用：用于美化页面
对于不同的标签来说，相同样式的设置方法各不相同，因此要记忆每一种标签各自的样式写法非常繁琐，所以css的出现统一了所有标签所有样式的设置方式
2.2、css语法
css的注释：
/* 注释内容 */
方式一：内连样式，将样式作为标签的属性来写
<标签 style = "样式名：样式值；样式名：样式值；..."></标签>方式二：内部样式表，在head标签中写style标签，在style标签中写样式，格式如下
选择器{ 样式名：样式值； 样式名：样式值； ... }方式三：外部样式表。
1.创建css文件，在css文件中写样式，写法同内部样式表
2.再在需要使用该样式文件的页面中的head标签中通过link标签引入
<link rel="stylesheet" href="css样式表所的路径">
2.3、选择器
通过指定的模式定位到指定的元素
2.3.1、id选择器
为指定id的标签添加样式的
步骤：
1.为指定的标签添加id属性值
2.通过#id值设置样式
#id{ 样式名：样式值； 样式名：样式值； ... }
2.3.2、元素选择器
为指定元素添加样式
元素名{ 样式名：样式值； 样式名：样式值； ... }
2.3.3、类选择器
为指定class值的标签添加样式
步骤：
1.为指定标签添加class属性值
2.通过
.class设置样式.class属性值{ 样式名：样式值； 样式名：样式值； ... }
2.3.4、通配符选择器
为页面中的所有标签设置样式
*{ 样式名：样式值； 样式名：样式值； ... }
2.3.5、属性选择器
为指定属性名或者指定属性值的标签设置样式
选择器[属性名]{ 样式名：样式值； 样式名：样式值； ... }选择器[属性名="属性值"]{ 样式名：样式值； 样式名：样式值； ... }选择器[属性名="属性值"][属性名="属性值"]...{ 样式名：样式值； 样式名：样式值； ... }
2.3.6、子代、后代选择器
子代：
选择器1 > 选择器2{ 样式名：样式值； 样式名：样式值； ... }后代：
选择器1 (空格) 选择器2{ 样式名：样式值； 样式名：样式值； ... }
2.3.7、分组选择器
选择器1，选择器2，选择器3...{ 样式名：样式值； 样式名：样式值； ... }
2.3.8、伪类选择器
选择器：模式{ 样式名：样式值； 样式名：样式值； ... }模式：
1.link：超链接的默认状态
2.visited：超链接被访问过的状态
3.active：鼠标按住标签
4.hover：鼠标悬浮在标签上
注：以上选择器的顺序必须是（爱恨原则 l v h a） link、visited、hover、active
2.3.9、nth-of-type选择器（xn+y）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ border: 1px solid black; height: 50px; } li:nth-of-type(4n+1){ background: red; } li:nth-of-type(4n+2){ background: yellow; } li:nth-of-type(4n+3){ background: blue; } li:nth-of-type(4n+4){ background: green; } </style> </head> <body> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </body> </html>xn+y：从第y个开始，每隔（x-1）个
2.4、盒子模型
研究的是标签的外边距、内边距以及边框
2.4.1、外边距
标签与标签之间的距离
样式属性：
margin1.margin：npx 表示4个方向的外边距都是npx 2.margin：npx mpx 表示上下外边距是npx，左右外边距是mpx 3.margin：apx bpx cpx dpx 表示上右下左边距 4.margin-left：左外边距 5.margin-right：右外边距 6.margin-top：上外边距 7.margin-bottom：下外边距注：两个标签如果上下外边距相对，他们之间的外边距取较大值；两个标签的左右外边距相对，他们之间的距离是两个外边距之和
2.4.2、内边距
标签中的内容与标签边框之间的距离
样式属性：
padding1.padding：npx 表示4个方向的内边距都是npx 2.padding：npx mpx 表示上下内边距是npx，左右内边距是mpx 3.padding：apx bpx cpx dpx 表示上右下左边距 4.padding-left：左内边距 5.padding-right：右内边距 6.padding-top：上内边距 7.padding-bottom：下内边距
2.4.3、边框
边框由边框的颜色、粗细、样式组成，设置时它们三者的先后顺序是任意的
样式属性：
border边框中的样式：solid（实线）、dotted（点划线）、dashed（虚线）、double（双划线）
1.border：npx 颜色 样式; 2.border-top: npx 颜色 样式; 3.border-bottom: npx 颜色 样式; 4.border-left: npx 颜色 样式; 5.border-right: npx 颜色 样式; 6.border-width:边框粗细 7.border-style:边框样式 8.border-bottom-width：下边框粗细 9.border-bottom-style：下边框样式 ...
圆角边框：
border-radius1.border-top-left-radius：左上 2.border-bottom-left-radius：左下 3.border-top-right-radius：右上 4.border-bottom-right-radius：右下
2.5、定位
样式属性：
position,必须和top、bottom、left、right配合使用position属性取值：
1.static：静态定位（默认）
2.relative：相对定位，相对于默认位置的定位
3.absolute：绝对定位, 相对于整个页面的定位
4.fixed：固定定位，固定在整个页面中不会随着页面位置的变化而变化
2.6、浮动
样式属性：
float，取值：left，right清除浮动：
clear，取值：left，right，both<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> li{ margin-left: 20px; float: left; } ul{ list-style: none; } </style> </head> <body> <ul> <li>登陆</li> <li>注册</li> <li>订单</li> <li>我的</li> <li>会员</li> </ul> <div style="clear: left;"></div> <font>默认位置</font> </body> </html>
三、js
3.1、概念和特点
js：Java script
作用：提供了页面的交互效果，提高了用户体验
特点：
1.基于对象
2.脚本语言
3.弱类型的，Java是强类型的
js中定义变量时，格式都是:
var 变量名;变量的类型由赋的值决定 4.安全的，不能操作文件（硬盘）
3.2、语法
方式一：内嵌式，在head标签中写script标签，在script标签中编写js代码
方式二：外联式
1.创建一个js文件,在js文件中编写代码
2.在要使用该js文件的页面中通过head标签中的script标签中的src属性引入该文件
注：以上两种方式不要混用，如果混用了只有引入资源的js代码有效
3.3、基本语法
3.3.1、注释
单行注释：
// 注释内容多行注释：
/* 注释内容 */
3.3.2、变量
关键字：
var定义的格式:
//先定义后赋值 var 变量名； 变量名 = 值； // 定义的同时赋值 var 变量名 = 值；注：
1.js中变量的类型由赋的值来决定
2.定义变量时，如果没有写var，这个变量就是全局变量
3.3.3、运算符
算术运算符
+、-、*、/、%、++、--
赋值运算符
=、+=、-=、/=、%=、*=
关系运算符
>、>=、<、<=、!=、 ==：数据值的比较、 ===：数据值和类型的比较
逻辑运算符
&&、||、!
位运算符
&、|、^
三元运算符
条件表达式 ？ 表达式1 ： 表达式2
3.3.4、流程控制
判断结构
if(){ } if(){ }else{ } if(){ }else if(){ }...{ }else{ }分支结构
switch(表达式){ case 值1: break; case 值2: break; case 值3: break; ... }循环结构
for(;;){ } while(){ } do{ }while();
3.4、数据类型
1.字符串：string
2.数值：number
3.布尔：boolean
4.数组：Array
5.函数：Function
6.正则：Regexp
7.undefined：未定义，定义了变量但是没有赋值，这个变量的值就是undefined
8.null：没有对象（对象为空）
3.5、函数
关键字：
function函数：封装了一个功能运行时所需的若干条语句
格式：
function 函数名(参数列表){ 方法体 }
函数的参数：
1.形式参数：形参，在定义方法时的参数
2.实际参数：实参，在调用方法时的参数
注：
1.形参不能写
var 2.同名方法，后定义的方法会覆盖先定义的
函数的返回：通过
return关键字返回方法的结果return作用：
1.结束方法
2.返回结果
关键字：
this，表示触发指定事件的标签对象
匿名函数：
格式：
function(){ 方法体 }如何调用匿名函数：通过标签的事件属性来使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var btn = document.getElementById("b"); btn.onclick = function() { alert(666); } } </script> </head> <body> <button id="b">按钮</button> </body> </html>
3.6、数组
特点：
1.长度可以变化
2.同一个数组可以存储任意类型的数据
数组的定义：
1.var 数组名 = new Array(长度); 2.var 数组名 = new Array(元素，元素2，元素3...); 注：var a = new Array(3);表示创建了一个长度为3的数组 3.var 数组名 =[元素，元素2，元素3...];注：如果数组下标越界，结果是undefined
常见操作：
1.数组名.length 2.数组名[下标]数组遍历：
1.for in 遍历：
for(var i in 数组名){ } 2.其它遍历跟Java雷同
常用方法：
1.push(...var);//放任意个元素，在数组后放入 2.join(String); 3.unshift(...var);//插入若干个元素在数组起始位置 4.splice(); 1.splice(x,0,y);//将y插入到数组的x下标中 2.splice(x,n,y);//从下标为x开始n个元素用y替换 3.splice(x,y);//从下标x开始删除y个元素
3.7、字符串
创建：
var str1 = "xxx"; var str2 = new String("xxx");属性：
str.length常用方法：
1.indexOf(string,number);//number表示从哪个位置开始往后找 2.indexOf(string); 3.lastIndexOf(string,number);//number表示从哪个位置开始往前找 4.lastIndexOf(string); 5.charAt(); 6.substring(number);//从指定位置截取到最后 7.substring(number1,number2);//从number1截取到number2（含头不含尾） 8.substr(number);//从指定位置截取到最后 9.substr(number1,number2)；//从number1截number2个（含头不含尾） 10.toUpperCase();//转成大写 11.toLowerCase();//转成小写正则表达式：
匹配：
字符串.match("^正则$")，如果字符串符合规则，就返回字符串，如果不符合，则返回nullvar s = "132100148113489498484"; var b = s.match("^1[3-9][0-9]{9}$"); alert(b);切割：
字符串.split("^正则$")var ip = "192.168.11.2"; var arr = ip.split("\."); alert(arr.length);替换：
字符串.replace("^正则$",新字符串)var str = "你好好啊，好心人"; var r = new RegExp("好+"); alert(str.replace(r,"*"));
3.8、正则表达式
创建正则对象：
1.var reg = new RegExp("正则"); 2.var reg = /正则/; 注：第一种方式，参数中的正则表达式必须由一对单引号或双引号扩起来，第二种方法，"//"中的正则一定不能用单引号或双引号扩起来常用方法：
.test()，使用正则表达式对象判断参数字符串是否符合规则，返回布尔值
边界匹配器：
^：行的开头
$：行的结尾
3.9、Math
静态属性：
1.Math.PI 2.Math.E静态方法：
1.pow(number,number); 2.max(number,number); 3.min(number,number); 4.sqrt();//开根号 5.round();//四舍五入 6.floor(); 7.ceil(); 8.random(); 9.abs();//绝对值
3.10、Date
创建日期对象：
var date = new Date();常用方法：
1.setFullYear(); 2.setMonth(); 3.setDate();
3.11、事件
点击时间：
1.onclick //单击事件 2.ondblclick //双击事件页面加载事件：
1.onload //页面加载事件（在页面加载完毕后自动触发）焦点事件：
1.onfouce //获取焦点 2.onblur //失去焦点鼠标事件
1.onmouseover/enter //鼠标移入 2.onmouseleave/out //鼠标离开 3.onmousemove //鼠标移动 4.onmousedown //鼠标点击，鼠标的左右键都能触发，onclick只有鼠标左键才可以触发 5.onmouseup //鼠标按住释放时触发，鼠标的左右键都能触发键盘事件：
1.onkeydown/press //键盘按下 2.onkeyup //按键弹起表单事件：
1.onsubmit: //由表单中的提交按钮触发，事件写在表单上
3.12、BOM
Browser Object Model 浏览器对象模型
3.12.1、window对象
window对象：表示打开的浏览器窗口
获取window对象，所有浏览器都支持window对象，它是浏览器的内置对象，在js代码中可以直接使用，使用window对象调用属性和方法window都可以省略
常用属性：
// 通过window对象获取其它BOM对象 1.window.location 2.window.navigator 3.window.screen 4.window.history 5.window.document1.window.name //当前浏览器窗口的名字 2.window.status //当前浏览器窗口的状态栏（已经过期） 3.window.closed //获取当前窗口是否关闭的布尔值常用方法：
// 弹窗相关 1.window.alert(参数): //警告框 2.window.confirm(): //确认框，根据点击确认与否返回布尔值 3.window.prompt(参数，default): //输入框，default可以不写，点击取消返回null，点击确认返回输入的内容// 打开和关闭窗口 1.window.open(地址);//打开指定地址的页面窗口 2.window.close();//关闭当前窗口// 定时器（延时/循环任务） 1.window.setTimeout(函数,时间); //表示在指定时间到达后执行函数，时间的单位是毫秒 2.window.clearTimeout(定时器编号); //清除定时器 3.window.setInterval(函数,时间); //表示每隔指定时间到达后执行函数，时间的单位是毫秒 4.window.clearInterval(定时器编号); //清除定时器
3.12.2、location对象
表示定位
获取：
window.location属性和方法：
1.location.href: //用于设置跳转的目标地址 2.location.reload(): //刷新当前页面
3.12.3、history对象
用于访问指定的上一页、下一页
获取：
window.hietory方法：
1.go(number) 参数： +n：表示前进n个网页 -n：表示后退n个网页 2.back() //后退 3.forword() //前进
3.12.4、screen对象
表示显示网页硬件设备的屏幕，它是一个只读对象，它收集了硬件屏幕的相关信息，我们通过screen来获取这些信息
属性：
1.screen.width 2.screen.height 3.screen.deviceXDPI //获取水平方向上每一英寸像素点（仅IE支持） 4.screen.deviceYDPI //获取垂直方向上每一英寸像素点（仅IE支持） 5.screen.availWidth 6.screen.avaieight // DPI:屏幕、硬件每英寸的物理像素点
3.12.5、navigator对象
它包含了浏览器相关的信息
获取：
window.navigator属性：
1.navigator.appVersion 2.navigator.appName 3.navigator.appCodeName 4.navigator.cookieEnable
3.13、DOM
Document Object Model 文档对象模型
DOM树：对于一个网页文件来说，我们可以将它类比成一棵树，将html标签看成树根，文档所有标签都可以理解成这棵树上的树枝或树叶
通过DOM树结构，我们可以从根标签有序的获取、操作其中的每一个子标签
相关术语：
**·**节点：元素、元素中的属性、元素中的文本内容统称为节点
**·**属性：标签的属性
**·**元素：标签
DOM的核心对象：
document
document对象表示一个网页文档，提供了对网页中元素操作的属性和方法获取：
window.document
3.13.1、DOM属性
1.document.all //获取所有元素 2.document.images //获取所有图片 3.document.links //获取所有链接 4.document.forms //获取所有表单 5.document.body //获取body标签对象 6.document.URL //获取当前页面的地址 7.document.cookie //
3.13.2、DOM方法
获取元素节点：
1.document.getElementById(); 2.document.getElementsByTagName(); 3.document.getElementsByClassName(); 4.document.getElementsByName();创建元素节点：
1.document.createElement(标签名); 2.document.createTextNode(string); //创建文本节点添加元素节点：
1.对象.appendChild(); 2.对象.setAttribute(属性名，属性值); 3.对象.getAttribute(属性名); 4.对象.removeAttribute(属性名);删除元素节点：
1.removeChild(对象); 2.对象.remove();获取子元素节点：
1.childNodes 2.children