一、窗口加载事件123window.onload = function () {};或;window.addEventListener("load", function () {});
1. window.onloadwindow.onload : 窗口（页面）加载事件，当页面完成加载后直接触发事件，就调用的处理函数
有了 window.onload，就可以把 JS 代码放到页面元素的任何地方，因为 onload 是页面加载完成后才调用的函数
页面有多个 window.onload 时，以最后一个为准
12345678910111213141516<script> // onload 可以使 函数在 页面加载完成后再执行，所以可以使JS 代码放到页面的任何位置 window.onload = function () { var but = document.querySelector('button'); but.addEventListe ...
一、 网页偏移量 offset 系列
offset ： 网页偏移量，动态获取 该元素的 位置及大小等
注意：
获取元素距离带有定位父元素的位置
获取元素自身的大小（宽度和高度）
返回 的数值没有单位
常用属性：
属性
作用
element.offsetParent
返回作为该元素的带有定位的父级元素，如果父级都没有定位，则返回 body
element.offsetTop
返回元素 相对带有定位的，父元素上方的偏移
element.offsetLeft
返回元素 相对带有定位的，父元素左边框的偏移
element.offsetWidth
返回自身包括 padding 、 边框 、 内容区的宽度（不带单位）
element.offsetHeight
返回自身包括 padding 、 边框 、 内容区的高度（不带单位）
123456789101112131415161718192021<div class="father"> <div class="son"></di ...
一、动画1. 动画的原理
获得盒子当前位置
让盒子在当前位置加上 1 个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
意此元素需要添加定位， 才能使用 element.style.left
12345678var div = document.querySelector("div");var timer = setInterval(function () { if (div.offsetLeft >= 400) { // 停止动画 本质是停止定时器 clearInterval(timer); } div.style.left = div.offsetLeft + 1 + "px";}, 30);
2. 动画函数的封装12345678910111213141516 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft ...
–、 安装 Vue1. 本地引用安装 — Vue.js (vuejs.org)
1<script src="../lib/vue.js"></script>
2. 外部引用1<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
二、 模板语法1. 插值语法
功能：用于解析标签体内容。
语法：
123456// xxx是js表达式，{ { xxx; }}
可以直接读取到 data 中的所有属性。
1. 文本12345678910<div id="app">{{ message }}</div><script> var app = new Vue({ el: "#app", data: { message: " ...
一、 组件1. 非单文件组件Vue 使用组件的三大步骤：
创建组件使用 Vue.extend(options) 创建组件注意：
el 不好写
data 必须写成函数
123456789101112131415//第一步：创建student组件const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: "张三", age: 18, }; },});
注册组件
局部注册：靠 new Vue 的时候传入 components 选项
全局注册：靠 Vue.c ...
一、html5 标签1. 语义标签
header : 头部标签
<nav> : 导航标签
<article> : 内容标签
<section> : 定义文档某个区域
<aside> : 侧边栏标签
<footer> : 尾部标签
注意：
这种语义化标准主要是针对 搜索引擎 的
这些标签可以多次使用
在 ie9 中，需要把这些标签转换为块级元素
2. 多媒体标签
<audio> ：音频标签， 尽可能使用 mp3 格式的文件
<video> ： 视频标签，尽可能使用 mp4 格式的文件
1. 视频标签（video）
标签
描述
video
定义一个视频
source
定义多种媒体资源
track
定义在媒体播放器文本轨迹
123456/* 解决兼容性问题 */<video width="320" height="240" controls> <source src="movie.mp4" t ...
1. 标题标签 <h1> to <h6>123456789101112131415<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>这是 1 级标题</h1> <h2>这是 2 级标题</h2> <h3>这是 3 级标题</h3> <h4>这是 4 级标题</h4> <h5>这是 5 级标题</h5> <h6>这是 6 级标题</h6> </body></html>
2. 段落 标签 <p> 、 换行 标签 <br />12345678910111213<!DOCTYPE html><html> ...
一、 CSS 语法 及 注释1. 语法CSS 规则有两个主要部分，一个 选择器 和 一个或多个 声明：
选择器：指定 CSS 规则适用于 HTML 页面中的哪个元素。
声明：决定了元素在网页上的格式。
每个声明都包含一个属性和一个值，这些值和值之间用冒号（:）分隔并以分号（;）结尾，并且声明组用花括号括起来{}。
注意： 虽然 CSS 属性名称和许多属性值都不区分大小写。但是 CSS 选择器是区分大小写，例如：.maincontent与.mainContent是两个不同的 class 类选择器，是区分大小写的。
2. 注释CSS 注释以开头/*，以结束*/
12345/* 这是一段注释 */p { font-size: 18px; text-transform: uppercase;}
二、 基础 选择器选择器是 CSS 最重要的方面之一，因为它们用于选择网页上的元素，以便可以设置样式。
1，基本选择器语法
选择器
类型
功能描述
*
通配选择器
选择文档中所有 HTML 元素
E
元素选择器
选择指定类型的 HTML 元素
#id
I ...
一、 字体属性
属性
含义
说明
font-size
大小
常用单位 px，默认为 16px，
font-family
字体
多个字体时要用“，”隔开，两个单词以上字体名要用引号
font-weight
粗细
正常字体 400，加粗 700，没有单位
font-style
样式
italic 为 斜体，normal 为正常字体
font
简写
顺序不能更改，大小和字体不能省略
1. 字体 font-family
font-familyCSS 属性允许您设置文本内容的字体系列名称，字体使用的优先级列表。
font-family属性可以包含多个字体名称作为后备字体，字体之间用 “，”隔开
如果字体系列的名称超过一个单词，它必须用引号引起来，像"Times New Roman"
123p { font-family: "Microsoft YoHi", Arial， Helvetica；;}
2. 字体大小 font-size
font-size属性设置元素文本内容的字体大小，在浏览器中默认的 ...
一、CSS 引入方式
样式表
优点
缺点
使用方法
控制范围
外部样式表
结构与样式完全分离
需要引入
头部 link 标签引入
多个页面
内部样式表
结构与样式部分分离
没有彻底分离
头部 style 标签中
一个页面
行内样式表
书写方便，权重高
结构样式混乱
标签中
一个标签
1. 内部样式表
内部样式表： 将样式写在 HTML 页面 hand 标签的 style 标签中
123456789101112131415<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { text-indent: 32px; } </style> </head> <body> <div>三生三世十里桃花，一心一意百 ...
