HTML

HTML简介：

HTML是一个超文本的标记语言，做出来的是一个静态的网页

HTML含有许多的标签可以使用，HTML是全是标签组成的，以下介绍常用的HTML标签

a标签：

<a></a> a标签一般用于超链接的跳转 <a href =" #"></a>，# 可以用于防止跳转出去，当然，也可以写入想要跳转的页面或者其他网页

br标签：

<br/> 一般是自闭标签，一般用于换行

nbsp：

&nbsp; 一般用于空一格

标题标签：

h1         h2          h3         h4         h5         h6

分别是字号从大到小h1-h6，其中h1的字体最大，h6的字体最小

列表标签：

列表标签分为两种，一种是有序列表标签ol

<ol>

<li></li> 可以多个li标签

</ol>

一种是无序列表标签ul

<ul>

<li></li> 可以多个li标签

</ul>

图片标签：

一般 #的位置是用来写入图片位置的

<img src = " #" />

输入标签：

<input type="text" />                        文本输入框：可以输入文本信息    
<input type="password" />              密码输入框：可以自动隐藏密码
<input type="radio"/>                       单选框：可以单选 
<input type="number" />                  数字输入框：可以输入数字
<input type="week" />                      日期输入框：输入日期，可以选择
<input type="checkbox" />               多选框：可以选择多个或者全选
<input type="button"/>                     按钮：设置一个按钮，可以用于点击

<input type="hidden"/>                     隐藏：设置value，可以隐藏内容                        

按钮标签：

定义一个按钮，# 表示按钮的名字，这个是什么按钮，用来标识的

<button type="button" > #</button>

表单标签：

注意：很多小伙伴们把form写成from，这是一个容易写错的地方，表单标签一般用于提交数据到后端程序中

表单标签有两种提交方式：

一种是get提交：get提交可以在网页中显示出提交的数据，很好使用，但是不安全

一种是post提交：post提交可以隐藏网页中的值，一般提交方式都为post方式提交

<form></form>

表格标签：

<table>

<tr> <th>表头</th> </tr>

<tr> 表格的行 </tr>

<tr> <td>表格的列</td></tr>

</table>

其他标签：

<div>块元素</div>

<span>行元素</span>

<p>行元素：要比正常的行元素多空间</p>

音频标签：

可以插入音频，在 # 处写入音频地址

<audio src=" # "></audio>

视频标签：

可以插入音频，在 # 处写入视频地址

<video src=" # "></video>

css

css简介：

css是一门修饰HTML的技术，是为了让网页变得美观，同样也是静态的，其中包含了5中比较好用的选择器方便我们使用

标签名选择器：

顾名思义，就是直接写这个标签的名字然后进行增强属性值

class选择器：

class选择器是可以多选的，可以在多个标签处定义class选择器，在增强属性的时候更改的是被class选择器定义了的标签

id选择器：

id选择器是唯一的，是高效的，也就是说id只有一个，想要查询，在使用的时候肯定是最快的，所以高效

分组选择器：

分组选择器是可以多个选择器一起使用，例如：class选择器，id选择器，class选择器一起使用，中间需要使用逗号隔开即可

属性选择器：

选中这个标签中的一个属性进行属性增强，如果其他标签也有相同属性，也会增强，那么需要更加细致的写清属性，例如：input 标签中的 type=text 这个属性，标明了标签是input，其中属性时text，如果有其他input，属性也是text的就会一起修改，如果没有就只修改这一个

盒子模型：

盒子模型是css的重点，其中的内边距和外边距，很容易让人搞混淆，所以我们需要把所有的元素都当做是一个个的盒子，外边距是指，标签与标签之间，内边距是指标签里的距离，指当前标签

js

js简介：

js的全称是JavaScript，是一种修饰HTML动态的工具，通过前面两种静态网页修饰已经使网页变得更加美观了，但毕竟是静态网页，无法动起来，那么这就需要用到js了，它可以用于每个标签之间产生关联和进行数据前后端或者是数据库交互，功能非常强大

js语法：

js是一门单独的语言，也是含有非常丰富的api，与java很相似

js基本类型：

js基本类型分为两大类：原始类型和引用类型

js原始类型分为5个：number        string        boolean        null        undefined

分别就是：数字类型        字符串类型      布尔类型        空值        未赋值

数字类型：包含了整数和小数，统称为数字类型

JS的变量：

在全局中js的变量可以用 var 表示，var 由于是弱语言，可以包含所有的类型，也就是说所有的类型都可以用var变量来赋值，count表示常量

在局部js的变量中可以用let表示，但就仅仅只能在那一个地方使用，超出了范围就不能继续使用了

js的运算符：

js中的运算符与java类似

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=, =，!, > ，< ，>=，<=

位运算符: & ， |

逻辑运算符: &&，||

前置逻辑运算符: ! (not)

三元运算符: a?b:c

js结构顺序：

在js中也是有结构顺序的，与java类似，也是从头到尾，从左往右的顺序结构来执行顺序的

js判断结构：

if（）{}单分支结构

if（）{}else{}多分支结构

if（）{}else（）{}else{}嵌套分支结构

js选择语句：

switch（）{

case " ":" ";brack;

}

js循环语句：

for(;;){}循环语句

js数组：

动态创建数组

var a = new [];

静态创建数组

var a = [1,"a",null]；

js函数：

与java相似，函数指的就是 java中的方法

用function来使用

方式1：

function text1(){};

创建函数后需要调用函数才能使用函数里面的

text1();

方式2：

var text1:function(){};

内置对象:

在js中存在的对象，不用创建，直接使用调用

window.onload()             在浏览器加载完整个html后立即执行!
window.alert("text")                 提示信息会话框
window.confirm("text")             确认会话框
window.prompt("text")             键盘输入会话框
window.event                        事件对象
window.document                    文档对象

DOM：

document.write() 动态向页面写入内容

document.getElementById(id) 获得指定id值的元素

document.getElementsByName(name) 获得指定Name值的元素

获取对象: window.document
调用方法: 
        getElementById("元素的id的属性的值")--返回1个元素
        getElementsByName("元素的name属性的值")--返回多个元素(用数组)
        getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
        getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容

json：

json是一种轻量级的数据交换格式

前端--后端  就是用json的形式交互的

保存的格式是以  "key":"value" 的格式保存的

单个json数据：{"key":"value"};

多个json数据：[{"key":"value"},{"key":"value"}];

复杂json数据：“data”:[{"key":"value"},{"key":"value"}];

ajax:

实现页面局部刷新，少量数据传输

console：

用于调试网页，例如：

consol.log();        输出打印到控制台

console.warn();        输出打印到控制台（警告语句）

Vue

vue:渐进式框架，组件化开发，是一个轻量级的MVVM框架，可以实现双向绑定

简单案例：

<html>

<div id = "app">{{msg}}</div>

<script src="vue.js"></script>

<script>

new Vue({

        "el":"#app",

        "data":{

        "msg":"hello Vue!"

}

});

</script>

</html>

以上一个简单案例可以在网页上通过msg的key显示msg的value

MVVM：

m：指的是要展示的数据

v：指的是数据的渲染区

vm：指的是在创建vue时的"data"内容

高级用法：v-命令：

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

v-if：判断语句，如果符合判断语句，语句执行，否则不执行

v-for：循环语句，v-for 指令可以绑定数组的数据来渲染一个项目列表

v-on：@click为v-on:click的缩写        单击事件

v-cloak：实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题，需要在css上设置标签选择器，写入display:none;隐藏功能

Vue组件：

Vue组件是一个非常强大的工具，可以用来封装属性和方法，重复使用，自定义标签名