msn131420的博客

css和h5介绍

css基础

html知识

JavaScript学习

一、认识VuejsVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动二、Vuejs安装方式--3种使用一个框架，我们第一步要做什么呢？安装下载它安装Vue的方式有很多：方式一：直接CDN引入你可以选择引入开发环境版本还是生产环境版本<!-- 开发

变量和数据类型一、什么是变量 通俗的讲：变量，是用来存储数据的容器，并且是可以变化的。 保温杯里泡枸杞 ，变量里面存数据。 枸杞难挡岁月催，杯里再换点当归：枸杞 -> 当归。二、变量的使用 2.1 基本使用--2步走变量的使用分为两步：1 声明变量并指定类型 2 给变量赋值。 第一步：声明变量并指定类型 let age: number;第二步：给变量赋值 age = 18解释： 使用等号（=）来给变量 age 赋值。.

一、TypeScript 概述1.1 JavaScript 是什么JavaScript（缩写：JS）是一种运行在客户端（比如：浏览器）中的编程语言。 当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。JavaScript 的运行环境：1 浏览器 2 Node.js。 Node.js 让 JavaScript 摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。 其他： 微信小程序、微信小游戏 等等。 总结：JavaScript 既能运行在 浏览器 中，也可以.

一、ES6 简介1.1什么是 ES6 ?ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。1.2为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码二、ES6 的新增语法2.1...

正则表达式一、正则表达式概述1.1 什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等 。其他语言也会使用正则表达式，本阶段我们主

JavaScript 面向对象一、面向对象编程介绍1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程 POP(Process-oriented programming)面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：将大象装进冰箱，面向过程做法。面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。1.3 面向对象编程 OOP (Object Oriented .

一、什么是lessless 是一个 css 扩展，让 css 变成支持变量，嵌套等操作的 css 语言 可以去Less官方文档去学习 less 可以在浏览器端使用也可以在服务端使用 在浏览器端使用CDN：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script> 引入 并且需要告诉浏览器我们写的是 less 代码：<style type="less"..

一、响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同。屏幕下，看到不同的页面布局和样式变化。 平时我们的响应式尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768p

rem适配布局我们来看几个问题：页面布局文字能否随着屏幕大小变化而变化？ 流式布局和flex布局主要针对于宽度布局，那高度如何设置？ 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？一、rem 基础 rem 单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24pxrem的优势：父元

一、flex 布局体验 1.1 传统布局与flex布局建议： 1. 如果是PC端页面布局，我们还是传统布局。 2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.2 初体验1. 搭建HTML结构 <div> <span>1</span> <span>2</span> <span>3</span> </div>...

一、移动端基础1.1 浏览器现状国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手 机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2 手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重。 Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。 .

一、css3现状浏览器支持程度差，需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛二、2D 转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换（transform）你可以简单理解为变形移动：translate 旋转：rotate 缩放：scale 2.1 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。2.2 2D 转..

一、ajax概述1.1 AJAX 简介AJAX 全称为Asynchronous JavaScript AndXML，就是异步的JS 和XML通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式1.2 XML 简介--现在被json给取代了XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都.

jQuery 事件一、jQuery 事件注册单个事件注册语法：element.事件(function () {})$('div').click(function () { 事件处理程序 })其他事件和原生基本一致。比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等二、jQuery 事件处理2.1 事件处理 on() 绑定事件on() 方法在匹配元素上绑定一个或多个事件的事件处理

jQuery 入门一、jQuery 概述1.1 JavaScript 库仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能

一、本地存储1. 本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经 常性在本地存储大量的数据，HTML5 规范提出了相关解决方案。2.本地存储特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储二、window.sessionStorage

一、BOM 概述1.1 什么是 BOMBOM = Browser Object Model 浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 windowBOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分1.2 BOM 的构成BOM 比 DOM 更大，它包含 DOM。...

一、Web API 基本认知 1、js基础和Web APIs两个阶段的关联性1.1 js的组成JS基础学习ECMAScript基位语法为后面作铺垫，Web APIs是JS的应用（dom和bom），大量使用Js基础语法做交互效果。2、API 和 Web API2.1 APIAPI(Application Programming Interface，应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问...

一、JavaScript 对象1、对象1.1 什么是对象？现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。1.2 为什么需要对象保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？ 例如，将“张三疯”的个人的信息保存在数组中的方式为：var arr = [‘张三疯’, ‘男', 128,154];JS 中

一、JavaScript数组1、数组的概念--数组与变量关系问：之前学习的数据类型，只能存储一个值。如果我们想存储班级中所有学生的姓名，那么该如何存储呢？答：可以使用数组(Array)。数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。问：什么是数组呢？答：数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。// 普通变量一次只能存储一个值var num = 10; // 数组一次可

一、JavaScript变量1、变量概述1、 什么是变量白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。2、 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。2、变量的使用--2步变量在使用时分为两步： 1. 声明变量 2. 赋值1. 声明变量// 声明变量 var age; // 声明一个 名称为..

一、编程语言1.编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 从事编程的人员，就是程序员。 但是一般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农”， 或者 “程序猿”/ “程序媛”注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。

一、HTML5 的新特性1.新增语义化标签HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 **IE9+ 以上版本的浏览器**才支持，如果不考虑兼容性问题，可以大量使用这些新特性。注意：只需要关注开发常用的新特性即可。以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div><div class=“nav”&.

一、精灵图1.为什么需要精灵技术一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称 CSS Sprites. CSS 雪碧）。 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了 2.精灵图使用（原理）使用精灵图的核心：...

一、定位 1.为什么需要定位提问： 以下情况使用标准流或者浮动能实现吗？ 1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以： 1. 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 2.定..

一、盒子模型1. 盒子模型 页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.1.1 看透网页布局的本质网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质： 就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成--4部分组成CSS 盒子模型本质上是一个盒子.

一、Emmet 语法 Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.1. 快速生成HTML结构语法 1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div> 2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 3. 如果有父子级关系的标签，可以用 > 比如 ul &g

一、CSS 简介CSS 的主要使用场景就是美化网页,布局页面的.1. HTML 的局限性HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。2. CSS-网页的美容师CSS是层叠样式表（Cascading Style Sheets）的简称。CSS 也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小..

一、table表格标签 1. 表格的主要作用 表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。简单来说表格不是来布局的，而是来展示数据的。2. 表格的基本语法--表格由三部分组成1. <table> </table> 是用于定义表格的标签。 2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。 3. &...

一、html常用标签1、标签语义 学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。 根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。2、标题标签 <h1> - <h6>（重要）为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即<h1>-<h6>。单词为 head 简写，从 h1-h6 依据重要性递减。...

一、网页的相关概念1、什么是网页?2、什么是HTML?3、网页的组成？