什么是HTML
HTML是一门语言，所有的网页都是用HTML这门语言编写的，HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器来解析，HTML标签都是预定义好的。
W3C标准：网页主要由三部分组成
结构：HTML
表现：CSS
行为：JavaScript
基础标签
| <h1>-<h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体（face）、字体尺寸（size）、字体颜色（color） |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| <br> | 定义折行 |
| <hr> | 定义水平线 |
html表示颜色：
1.英文单词：red，pink，blue......
（值1，值2，值3）：值的取值范围：0~255
3.#值1值2值3：值的范围00~FF（十六进制）
图片、音频、视频标签
| <img> | 定义图片 |
| <audio> | 定义音频 |
| <video> | 定义视频 |
img：定义图片
src：规定显示图像的URL（统一资源定位符）
height：定义图像的高度
width：定义图像的宽度
audio：定义音频。支持的音频格式：Mp3，WAV，OGG
src：规定音频的URL（统一资源定位符）
controls：显示播放控件
video：定义视频。支持的视频格式：Mp4，Webm，OGG
src：规定视频的URL（统一资源定位符）
controls：显示播放控件
尺寸单位：
：像素
2.百分比：<body>的百分比
资源路径：
1.绝对路径：完整路径
2.相对路径：相对位置关系
超链接标签
<a> 定义超链接，用于链接到另一个资源
href：指定访问资源的URL
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
列表标签
| <ol> | 定义有序列表 | type：设置项目符号， 不赞成使用， 使用样式取代他 |
| <ul> | 定义无序列表 | |
| <li> | 定义列表项 |
表格标签
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
table：定义表格
border：规定表格边框的宽度
width：规定表格的宽度
collspacing：规定单元格之间的空白
tr：定义行
align：定义表格行的内容对齐方式
td：定义单元格
rowspan：规定单元格可横跨的行数
colspan：规定单元格可横跨的列数
布局标签
| <div> | 定义HTML文档中的一个区域部分，经常与css一起使用 |
| <span> | 用于组合行内元素 |
表单标签
表单：在网页中主要负责数据采集功能，使用<form>标签定义表单
表单项（元素）：不同类型的input元素、下拉列表、文本域等
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
form：定义表单
action：规定当提交表单时向何处发送表单数据，url
method：规定用于发送表单数据的方式
get：浏览器会将数据直接附在表单的action URL之后，大小有限制，默认值
post：浏览器会将数据放到http请求消息体中，大小无限制
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| hidden | 定义隐藏的输入字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| button | 定义可点击按钮 |
什么是CSS
CSS是一门语言，用控制网页表现，CSS(Cascading Style Sheet)：层叠样式表
CSS导入方式
css导入HTML有三种方式：
1.内联样式
在标签内部使用style属性，属性值是css属性键值对
<div style = "color:red">Hello CSS~</div>2.内部样式
定义<style>标签，在标签内部定义css样式
<style type = "text/css">
div {
color:red;
}
</style>3.外部样式
定义link标签，引入外部的css文件
<link rel = "stylesheet" href = "">div{
color:red;
}CSS选择器
概念：选择器是选取需设置样式的元素（标签）。
1.元素选择器
元素名称{color：red；}
div{color:red;}选择器
#id属性值{color：red；}
#name{color:red;}
<div id = "name"> hello css </div>3.类选择器
.class属性值{color：red；}
.cls{color:red;}
<div class = "cls"> hello css </div>什么是JavaScript
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。JavaScript和Java是完全不同的语言，不论概念还是设计，但基础语法类似。
JavaScript引入方式
1.内部脚本：将JavaScript代码定义在HTML页面中
在HTML中，JavaScript代码必须位于<script>与</script>标签之间
<script>
alter("hello js");
</script>提示：
在HTML文档中可以在任意地方防止任意数量的<script>，一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示。
2.外部脚本：将JavaScript定义在外部JavaScript文件中，然后引入HTML页面中
外部文件：
引入外部js文件 <script src = "../js/"></script>
注意：
外部脚本不能包含<script>标签
<script>标签不能自闭合
JavaScript基础语法
书写语法
1.区分大小写
2.每行结尾的分号可有可无
3.注释：
单行注释：//注释内容
多行注释：/*注释内容*/
4.大括号表示代码块
输出语句
使用()写入警告栏
使用()写入HTML输出
使用()写入浏览器控制台
变量
JavaScript中用var关键字（variable的缩写）来声明变量
var test = 20;
test = "张三"
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
1.组成字符可以是任意字母、数字、下划线或美元符号
2.数字不能开头
3.建议使用驼峰命名
注意：
作用域是全局变量，变量可以重复定义
ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量只在let关键字所在的代码块有效，且不允许重复声明。
ECMAScript6新增了const关键字，用来声明一个只读的常量，一但声明，常量的值就不能改变
数据类型
JavaScript中分为原始类型和引用类型
5种原始类型：
number：数字（整数、小数、Not a Number）
string：字符、字符串、单双引皆可
boolean：true、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
运算符
==
1.判断类型是否一样，如果不一样，则进行类型转换
2.再去比较其值
===：全等于
1.判断类型是否一样，如果不一样，直接返回false
2.再去比较其值
类型转换
其他类型转为number：
：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN，一般使用ParseInt
：true转为1，false转为0
其他类型转为boolean：
：0和NaN转为false，其他转为true
: 空字符串为false，其他为true
：false
：false
函数
函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键字进行定义，语法为：
function functionName（参数1，参数2...）{
要执行的代码
}
注意：形式参数不需要类型，因为JavaScript是弱类型语言，返回值也不需要定义类型，可以在函数内部直接使用return返回即可
function add(a,b) {
return a+b;
}
调用：函数名称（实际参数列表）；
let result = add（1,2）；
方式二：
var functionName = function （参数列表）{
要执行的代码
}
var add = function（a，b） {
return a+b；
}
调用：js中，函数调用可以传递任意个数参数
let result = add（1,2,3） 多的不接收
JavaScript对象
Array
JavaScript Array对象用于定义数组
定义：
var 变量名 = new Array（元素列表）；//方式一
var 变量名 = [元素列表];//方式二
访问：
arr[索引] = 值；
注意：js数组类似于java集合，长度类型都可变。
属性：length：数组中元素的个数
方法：push：添加方法
splice：删除方法（从哪删，删几个）
String
var 变量名 = new String（s）；//方式一
var 变量名 = s；方式二
属性：length 字符串的长度
方法：charAt() 返回指定位置的字符
indexof() 检索字符串
trim() 去除字符串前后两端的空白字符
自定义对象
var 对象mingcheng={
属性名称1：属性值1，
属性名称2：属性值2，
...
函数名称：function（形参列表）{}
...
}
BOM
Browser Object Model 浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成：
window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window
获取：直接使用window，其中window可以省略
("abc")
属性：获取其他BOM对象
history 对History 对象的只读引用
navigator 对Navigator 对象的只读引用
screen 对Screen 对象的只读引用
location 用于窗口或框架的Location对象
方法：
alert() 显示带有一段消息和一个确定按钮的警告框
comfirm() 显示带有一段消息以及确定按钮和取消按钮的对话框
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式（循环执行）
setTimeout() 在指定的毫秒数后调用函数或计算表达式（只执行一次）
History 历史记录
获取：使用获取，其中window可以省略
.方法();
history.方法();
方法：
back() 加载history列表中的前一个URL
forword() 加载history列表中的下一个URL
Location 地址栏对象
获取：使用获取，其中window可以省略
.方法();
location.方法();
属性：
herf 设置或返回完整的URL
DOM
Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象。
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM就能对HTML进行操作了
改变HTML元素的内容
改变HTML元素的样式（css）
对HTMLDOM事件作出反应
添加和删除HTML元素
DOM是w3c（万维网联盟）的标准
DOM定义了访问HTML和XML文档的标准
w3cDOM标准被分为了3个不同的部分：
1.核心DOM：针对任何结构化文档的标准模型
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
DOM:针对XML文档的标准模型（核心DOM的子集）
DOM：针对HTMl文档的标准模型（核心DOM的子集）
Image : <img>
Button :<input type = 'button'>
获取Element
获取：使用Document对象的方法来获取
：根据id属性值获取，返回一个Element对象
：根据标签名获取，返回Element对象数组
：根据name属性值获取，返回Element对象数组
：根据class属性值获取，返回Element对象数组
事件监听
事件：HTMl事件是发生在HTML元素上的“事情”，比如：
按钮被点击
鼠标移动到元素之上
按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定：
方式一：通过HTML标签中的事件属性进行绑定（HTML语言与js语言混杂）
<input type = "button" onclick = "on()">
function on() {
alert("我被点了");
}方式二：通过DOM元素属性绑定
<input type = "button" id = "btn">
("btn").onclick = function(){
alert("我被点了");
}
常见事件
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
正则表达式
概念：正则表达式定义了字符串组成的规则
定义：
1.直接量：注意不要加引号
var reg = /^\w{6,12}$/;
2.创建RegExp对象
var reg = new RegExp("^\\w{6,12}$");
语法：
| ^ | 表示开始 |
| $ | 表示结束 |
| [] | 代表某个范围内的单个字符，比如：[0-9]单个数字字符 |
| . | 代表任意单个字符，除了换行和行结束符 |
| \w | 代表单词字符：字母、数字、下划线，相当于[A-Za-z0-9_] |
| \d | 代表数字字符：相当于[0-9] |
量词：
| + | 至少一个 |
| * | 零个或多个 |
| ？ | 零个或一个 |
| {x} | x个 |
| {m，} | 至少m个 |
| {m，n} | 至少m个，最多n个 |
方法：
test（str）：判断指定字符串是否符合规则，返回true或false