1 Html
1.1 基础标签 - 用来搭建简单的原型界面使用1.2 图片 音频 视频标签1.3 超链接1.4 关于资源路径1.5 列表标签1.6 表格标签1.7 表单 form
1.7.1 form标签属性1.7.2 from 标签中 type 属性不同的取值可以向后端传递的不同内容 1.8 注意区分列表标签 表格标签 表单标签 2 Css
2.1 Css 导入的三种方式2.2 选择器
2.2.1 概念2.2.2 选择器分类 3 Javascript
1、Javascript 可以做什么？2、Javascript 引用方式3、Javascript 基础语法
书写语法输出语句变量数据类型运算符流程控制语句函数 4、Javascript 常用对象
ArrayString自定义对象 5、BOM
WindowHistoryLocation 6、DOM
获取 Element 对象常见 HTML Element 对象的使用 BOM DOM 对象的概念理解7、事件监听
事件绑定 - 两种方式绑定 推荐使用第二种常见事件 8、表单验证
代码实现 9 正则表达式
编写一个正则表达式
1 Html 1.1 基础标签 - 用来搭建简单的原型界面使用 1.2 图片 音频 视频标签三个不同的向html 界面中添加不同图片，视频，音频文件的标签以及相关属性：
img：定义图片
src：规定显示图像的 URL（统一资源定位符）
height：定义图像的高度
width：定义图像的宽度audio：定义音频。支持的音频格式：MP3、WAV、OGG
src：规定音频的 URL
controls：显示播放控件video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定视频的 URL
controls：显示播放控件
1.3 超链接
点我有惊喜
href：指定访问资源的URLtarget：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
1.4 关于资源路径
./ 表示当前路径 ../ 表示上一级路径 ../../ 表示上两级路径1.5 列表标签
table ：定义表格
border：规定表格边框的宽度
width ：规定表格的宽度
cellspacing：规定单元格之间的空白tr ：定义行
align：定义表格行的内容对齐方式td ：定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数th：定义表头单元格
action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。method ：规定用于发送表单数据的方式
method取值有如下两种：get：默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
post：
浏览器会将数据放到http请求消息体中
请求参数无限制的
1.7.2 from 标签中 type 属性不同的取值可以向后端传递的不同内容
列表：一个竖着排列的列表
表格：正常使用的多行多列的表格
表单标签：用来给服务器提交一定数据的标签
选取标签，给选定的标签给定样式
2.2.2 选择器分类id 选择器 只能选择一个类选择器 在标签中的 class 属性中给定一个名字，所有拥有该属性的标签的样式都会发生改变； 3 Javascript 1、Javascript 可以做什么？
1、实现动态的交互
2、改变图像的 src 属性值
3、进行表单验证
都是使用
内部脚本
不在 body 的任意数量任意位置的标签
一般放在 的后面，改善用户体验
外部脚本文件
使用 src 属性进行引用即可
1、区分大小写
2、封号可以加或者不加
3、注释：
// 单行
多行
4、{} 代码块
输出语句在浏览器中的表现形式为警示款弹出，HTML 界面 以及浏览器控制台输出
变量使用 var 关键字即可
var test = 20;
test = “hello”;
Javascript 是一种弱类型的语言，一个变量可以保存几种数据类型
var 是一个全局变量 {} 里面的变量 在 {} 里面可以访问到的’
let 不允许重复声明，并且作用于只是在{} 里面的
const 声明常量之后，无法修改
数据类型使用 typeof 可以获取数据类型
alert(typeof age);
Javascript 里面 ‘’ 里面也是可以写多个字符的 与 “” 效果是一致的；
运算符== 与 === 之间的区别 var age = 20; var age1 = "20"; alert(age == age1) true == 1、查看类型是不是相同，类型不同进行类型转换 2、再去比较数值是否是一致的 === 1、判断类型是不是一致的，不是一致的，直接返回 false 2、类型一样的才会进行数值的比较
类型转换：
其他数据类型转换为 number 1、String 按照字符串的字面值进行转换，字面值不是数字转换为 NaN 2、booean true 转换为 1 false 转换成为 0 其他类型转换为 boolean 1、number 0 和 NaN 转换为 false 其他转换为 true 2、string 空字符串转换为 false 其他转换为 true 3、null 直接转换为 false 4、undefined 直接转换为 false
小结
ifswitchforwhiledo…while 函数
在定义函数的时候，() 里面是不需要写参数的额数据类型的；
Javascript 里面函数只有两个参数，但是可以传递三个参数，你可以传递，但是没有接收，一般函数定义几个，自己调用即可即可；
4、Javascript 常用对象 Array
Java 里面的数组是确定长度，确定数据类型的，之间的关系需要明白；
没有赋值的数组索引显示的是 undefined；
一个数组里面是可以同时存在多种数据类型的；
push 方法：数组中添加元素；
splice 方法： 删除数组中的元素；
trim() 方法在进行字符串拼接的时候，可以过滤掉中间多余的空格
调用的时候，直接使用对象.属性的方式即可；
Browser Object Model （浏览器对象模型）
Navigator 对象 Screen 对象使用的较少
主要学习
Windowconfirm 带有确定按钮的对话框
根据是否确定的选择，确定执行的逻辑；
定时器：每隔一段时间，执行一段代码；
setTimeout 在一定的时间间隔内执行一个函数，只会执行一次
setInterval 在一定的时间间隔后执行一个函数，只是会执行一次函数
setTimeout(function (){//执行一次
alert("hello")
},1000)
setInterval(function (){// 执行多次
alert("hello")
})
案例演示：切换灯泡，一闪一闪，使用循环改变
History就是浏览器里面的前进以及后退两个按钮
Locationlocation.href = "https://www.baidu.com";6、DOM
封装的思想就是将文档中的各个部分封装成为不同的对象，方便开发使用
Javascript 可以使用 DOM 来操作 HTML
所谓的操作 HTML 就是改变 HTML 的内容，样式等
改变 HTML 元素的内容改变 HTML 元素的样式（CSS）对 HTML DOM时间作出反应添加和删除 HTML 元素
获取 Element 对象 常见 HTML Element 对象的使用查阅文档，使用相关的方法进行 HTML 的操作即可
BOM DOM 对象的概念理解BOM DOM (Browser Object Model) (document Object Model)
document Object Model（文档对象模型），就是把「文档」当做一个「对象」来看待。
Browser Object Model（浏览器对象模型）,即把「浏览器」当做一个「对象」来看待。
在 DOM 中，文档中的各个组件（component），可以通过 object.attribute 这种形式来访问。一个 DOM 会有一个根对象，这个对象通常就是 document。
而 BOM 除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如问题描述中的 navigator（导航条）、history（历史记录）等等。
在这种 「XOM」的模型中，最应该理解的就是 Object Model。Object Model 就表示你可以通过像操作对象一样，来操作这个 X。
对象：
在编程领域中，对象就是指的一种拥有具体数据（Data）并且具有（并不总是）特定行为（Behavior）的东西。例如，一个人 ，就可以看做一个对象。人的年龄、性别、身高、体重就是上文说的具体「数据」，通常将对象拥有的具体数据称作对象的「属性（Attribute）」；而人吃饭，睡觉，行走等能力，就是上文所说的「行为」，通常，我们把对象的行为称作对象的「方法（Method）」。另外，对象是可以嵌套的，也就是是说，一个对象的属性也可以是对象。
上文所说的「像操作对象一样」，最主要就是指访问对象的属性和调用对象的方法。对象的属性可以通过 object.attribute 这种形式来访问，对象的方法可以通过 object.method(arguments) 这种形式来调用。
对应到 DOM 中，document 这个根对象就有很多属性，例如 title 就是 document 的一个属性，可以通过 document.title
访问；document 对象也有很多方法，例如 getElementById，可以通过 document.getElementById(nodeId) 调用。
事件与时间监听之间的关系
比如按钮点击之后，执行相关的代码，就是按钮的绑定；
事件绑定 - 两种方式绑定 推荐使用第二种 常见事件onblur 文本输入框失去焦点
onfocus 获得焦点
8、表单验证为什么进行表单验证？
防止用户的错误输入，在前端就进行验证，减少后端的数据判断压力；
需要完成的操作：
1、输入框失去焦点的时候，验证输入的内容是否是符合要求的；
2、当点击注册按钮的时候，判断输入框的内容是否符合要求，不符合要求的话阻止其进行表单提交；
欢迎注册
欢迎注册
已有帐号？ 登录
9 正则表达式
什么是正则表达式？
定义了字符串的组成规则
{m,n} 至少 m 个，最多 n 个
网络上面的垃圾邮件可能使用正则表达式，爬个人邮箱，然后发送垃圾信息；
前面的符号和后面的符号可以搭配使用，前面表示输入的是什么样子的字符，后面表示的是输入字符的个数；
编写一个正则表达式Javascript
// 规则：单词字符，6~12
var reg = /^w{6,12}$/;
var str = "abcccc";
var flag = reg.test(str);
alert(flag);
数字字母下划线组成的 6 ~ 12 位字符
/^w{6,12}$/
手机号码的正则表达式
/^[1]d[10]$/
