Html
1.小demo，图片，有序无序标签
2.输入框input标签，超链接，顶部跳转
3.表格标签
4.form标签-提交数据
只有form标签才能提交数据
5.提交数据三个要求：
1.form2.提交按钮3.name属性
*注: name属性相同可以指定选择一个性别框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rqDePBcW-1639577280204)(https://s2.loli.net/2021/12/06/RvF9JTeCoqWIyB8.png)]
6.提交数据的两种方式：get和post
get：是mothod的默认值，把数据在地址栏显示，不安全。
post：解决了get提交的问题
7.method，action
method指定数据提交方式
action指定java程序的访问方式
后面接地址，提交后跳转 action=“http://baidu.com”
#-代表不跳转
8.div,p，span
div-块标签
p-段落
span-行
9.音频，视频
10.value，checked
给value设置值可以在地址栏保存对应的值，
解决单选多选都提交on的问题，给学历添加value，优化
checked可以默认选中
css
修饰html网页的一种技术
css分类
**1.行内css：**一行代码添加css修饰
**2.内部css：**指在head标签中使用style标签，添加css的代码
**3.外部css：**指单独生成.css文件，里面写css代码，哪个网页需要就引入哪个网页。
语法：
选择器{属性名：属性值；属性名：属性值；属性名：属性值；}
学习重点：
1.选择器有哪些
2.属性名
测试css出现的位置
测试css的选择器
css的特殊语法，可以选中元素
分类：基本选择器（标签名选择器，类选择器，id选择器）+ 高级选择器（分组选择器，属性选择器）
基本选择器：标签名，class，id选择器
id官方说不能相同，是为了高效，但是相同是可以用的
高级选择器：分组选择器，属性选择器
盒子模型*********
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
JS
js是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。只能在浏览器中运行，
**基于对象：**它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
**事件驱动：**在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
**脚本语言：**在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
特点和优势
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
js出现的位置
行内js，内部js，外部js
基本数据类型
包括:number string boolean null undefined
(1) 数值类型-number
在JS中，数值类型只有一种，就是浮点型。
在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。
(2) 字符串类型-string
在JS中，字符串是基本数据类型。
在JS中，字符串直接量是通过单引号或者双引号引起来。
var str1 = "Hello…";
var str2 = 'whxnb';;
alert(str1);
JS的变量
(1) 在JS中是通过 var 关键字来声明一个变量
var a=1; alert(a);
var x=true; alert(x);
var y=10.8; alert(y);
(2) 在JS中声明的变量是不区分类型的， 可以指向任意的数据类型。
5/2–》2.5
跟Java不一样
==只比较值，===比较类型和值
局部定义变量-let
js数组
可以存放各种类型，数组长度随时可变
js函数
返回值
js内置对象（api）
自定义对象
(1)方式一：
声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = “张飞”; p1.age = 18;
设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }
(2)方式二:都不用new 直接写
还可以简化一下：
JSON
JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
把前后端的数据进行交互。
JSON数据:
var a =’ “firstName” : “John” ’
JSON 对象:
var a = ‘{ “firstName”:“John” , “lastName”:“Doe” }’
JSON 数组:
var a = ‘[{ “firstName”:“Bill” , “lastName”:“Gates” },{ “firstName”:“George” , “lastName”:“Bush” }]’;
json转js
js转json
DOM
是由js提供 的技术，用来像CSS的选择器一样，使用JS提供的一套API，就可以选种网页中的各种元素。
会把HTML网页翻译成一个Document文档。
Document对象
–获取对象: window.document
–调用方法:
getElementById(“元素的id的属性的值”)–返回1个元素
getElementsByName(“元素的name属性的值”)–返回多个元素(用数组)
getElementsByClassName(“元素的class属性的值”)–返回多个元素(用数组)
getElementsByTagName(“元素的标签名的值”)–返回多个元素(用数组)
write()–向文档写 HTML 表达式 或 JavaScript 代码
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容
练习
Vue
概述
是一个轻量级的 MVVM的框架
特点:
1, 综合了HTML CSS JS 技术
2, 渐进式的框架: 按需配置, vue.js + ???
3, 优化了DOM操作网页元素的方式, 使用了CSS的选择器
**使用步骤:**记住这个步骤！！！
-
在网页中引入 vue.js 文件
-
获取vue数据，数据渲染区
-
准备数据，将被数据渲染区获取
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIKOklhK-1639577280227)(https://s2.loli.net/2021/12/11/nq5ugjtahMQd8f9.png)]
MVVM（面试必问）
是Vue框架的一种设计思想,实现代码间的松耦合.
基础语法
不用在data里写内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rnwmiWci-1639577280230)(https://s2.loli.net/2021/12/11/nMVUqt1ZOdcI3bD.png)]
调用函数
注意 ： {{}}里面写要被“替代”的元素，要打印的文字写{{}}外面
可以简写：
对象：
对象里多个属性，用数组【】
data的另外两种方式：
Vue指令
在标签上当一个属性来用
v-model双向绑定
通过vmmodel，修改v的值，也会把m的值给修改，再返回给v
v-html
v-html可以解析标签，v-text不行
v-cloak闪现
v-if
v-for
循环获取数据
v-for=“o in hobby”： o是数组里的数据，下面会直接输出数组里的所有元素
v-on （click）
v-bind
解析变量值
Vue组件
vue最强大的功能之一，扩展了HTML的标签
组件系统可以让我们用独立重复的小组件来搭建大型应用
全局组件
Vue.component(tagName,options)
调用
小王的理解：Vue.component 就是个M，VM把他们两个连起来
注意：template里面的元素需要有标签包起来！！！，
顺序也要注意！！！！！！要先创建全局组件！！！
可以被多个Vue对象调用，封装了前端的代码，提高了复用性
也可以创建两个，共用那一个全局组件，只要加一个标签就行
全局组件可以提高代码的复用性
局部组件
Vue路由
根据用户即将访问的请求方式，决定交给 那个组件来处理这次请求
Vue的Ajax
异步访问，局部刷新
获取jason串里的数据
动态显示
Vue进阶
先把脚手架搭好，然后打开路径中目录
1.创建一个person的vue项目
2.把刚才的vue导入APP.vue
