vuex的基础
1,状态管理(共享)
缓存数据==>内存， 只要刷新页面，数据就丢了
订单，详情等，，，不适用vuex缓存数据
用于
非父子通信的问题
缓存后端数据，提高用户体验
注意：
vuex只能有一个store,
为了防止多人修改，我们切割成子store, 再合并成唯一一个大的store对象
模块写法
import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
}, // "全局"状态
mutations:{
},//唯一修改状态的地方
//异步处理
actions:{
},
// 对上面的“全局状态”进行数据处理， 类似于vue中的计算属性
getters:{
},
modules:{
cinema,
tabbar
}
})
export default store
const module = {
namespaced:true, //命名空间
state :{
cinemaList:[]
},
actions:{
store.commit("setCinemaList",res.data.data.cinemas) //支持传参
},
mutations:{
setCinemaList(state,data){
console.log("setCinemaList",data)
state.cinemaList = data
}
},
getters:{
topDataList(state){
//state形参s， vuex自动调用时候，传来值
return state.cinemaList.slice(0,5)
}
}
}
export default module
import createPersistedState from "vuex-persistedstate"; //在index.js页面加入这个插件
// 加入下面的代码
const store = new Vuex.Store({
plugins: [createPersistedState({
reducer(val){
return {
user: val.user
}
}
})]
————————————————
版权声明：本文为CSDN博主「m0_46436313」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46436313/article/details/104572076
中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。
需求背景：
手机购买页面，在购买流程中，可以选择手机的颜色及输入购买数量，同时页面有两个展示区域，分别向用户展示刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次购买的数量，按钮将被禁用并显示库存不足，反之按钮可以点击并显示放入购物车。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中介者模式 购买商品</title>
</head>
<body>
选择颜色：
<select id="colorSelect">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
输入购买数量：
<input type="text" id="numberInput">
您选择了颜色：<div id="colorInfo"></div><br>
您输入了数量：<div id="numberInfo"></div><br>
<button id="nextBtn" disabled>请选择手机颜色和购买数量</button>
</body>
<script>
// 最初级的写法
var colorSelect = document.getElementById('colorSelect'),
numberInput = document.getElementById('numberInput'),
colorInfo = document.getElementById('colorInfo'),
numberInfo = document.getElementById('numberInfo'),
nextBtn = document.getElementById('nextBtn');
var goods = {
'red': 3,
'blue': 6
}
colorSelect.onchange = function(){
var color = this.value,
number = numberInput.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if(number > stock){ //当前选择数量大于库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
numberInput.oninput = function(){
var color = colorSelect.value,
number = this.value,
stock = goods[color]
colorInfo.innerHTML = color;
if(!color){
nextBtn.disabled = true;
nextBtn.innerHTML = '请选择手机颜色';
return;
}
if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量';
return;
}
if(number > stock){ //当前选择数量大于库存量
nextBtn.disabled = true;
nextBtn.innerHTML = '库存不足';
return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
</script>
</html>
在上个示例中，对象间联系高度耦合，只是两个输入框还好，但如果有多个的话，相互联系就非常复杂了，此时就要考虑用到中介者模式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>中介者模式 购买商品</title> </head> <body> 选择颜色： <select id="colorSelect"> <option value="">请选择</option> <option value="red">红色</option> <option value="blue">蓝色</option> </select> 选择内存： <select id="memorySelect"> <option value="">请选择</option> <option value="32G">32G</option> <option value="16G">16G</option> </select> 输入购买数量： <input type="text" id="numberInput"> 您选择了颜色：<div id="colorInfo"></div><br> 您选择了内存：<div id="memoryInfo"></div><br> 您输入了数量：<div id="numberInfo"></div><br> <button id="nextBtn" disabled>请选择手机颜色、内存和购买数量</button> </body> <script> var goods = { 'red|32G': 3, 'red|16G': 0, 'blue|32G': 1, 'blue|16G': 6 } //引入中介者 var mediator = (function(){ var colorSelect = document.getElementById('colorSelect'), memorySelect = document.getElementById('memorySelect'), numberInput = document.getElementById('numberInput'), colorInfo = document.getElementById('colorInfo'), memoryInfo = document.getElementById('memoryInfo'), numberInfo = document.getElementById('numberInfo'), nextBtn = document.getElementById('nextBtn'); return { changed: function(obj){ var color = colorSelect.value, memory = memorySelect.value, number = numberInput.value, stock = goods[color + '|' + memory]; if(obj == colorSelect){ //如果改变的是选择颜色下拉框 colorInfo.innerHTML = color; }else if(obj == memorySelect){ memoryInfo.innerHTML = memory; }else if(obj == numberInput){ numberInfo.innerHTML = number; } if(!color){ nextBtn.disabled = true; nextBtn.innerHTML = '请选择手机颜色'; return; } if(!memory){ nextBtn.disabled = true; nextBtn.innerHTML = '请选择手机内存'; return; } if(!number){ nextBtn.disabled = true; nextBtn.innerHTML = '请填写手机数量'; return; } if( ( (number-0) | 0 ) !== number-0 ){ //用户输入的购买数量是否为正整数 nextBtn.disabled = true; nextBtn.innerHTML = '请输入正确的购买数量'; return; } if(number > stock){ //当前选择数量大于库存量 nextBtn.disabled = true; nextBtn.innerHTML = '库存不足'; return; } nextBtn.disabled = false; nextBtn.innerHTML = '放入购物车'; } } })() colorSelect.onchange = function(){ mediator.changed(this) } memorySelect.onchange = function(){ mediator.changed(this) } numberInput.oninput = function(){ mediator.changed(this) } //以后如果想要再增加选项，如手机CPU之类的，只需在中介者对象里加上相应配置即可。 </script> </html>在实际开发中，还是要注意选择利弊，中介者对象因为包含对象间交互的复杂性，所以维护成本可能也会较高。在实际开发中，最优目的还是要快速完成项目交付，而非过度设计和堆砌模式。有时对象间的耦合也是有必要的，只有当对象间复杂耦合确实已经导致调用与维护难以为继，才考虑用中介者模式。
————————————————
版权声明：本文为CSDN博主「一期一会」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34832846/article/details/85989945
弹性布局（Flex）
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
下面是一些弹性布局的基本语法：
两部分：
1. 语法是添加到父容器上的
display : flex;（弹性盒子的标志哦！！！）
flex-direction: row; 布局的排列方向 （主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
flex-wrap : nowrap; 是否进行换行处理。
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配，两边没宽。
space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。
space-evenly :每个flex子项两侧空白间距完全相等。
align-items : 每一行中的子元素上下对齐方式。
stretch;默认值，flex子项拉伸
flex-start;容器顶部对齐
center;容器居中对齐
flex-end;容器底部对齐
align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。
2. 语法是添加到子容器上的？
order : 排序(值越大越后)
0：默认值 eg:1234
1：放在后面 eg:1342
-2：放在前面 eg:2134
flex-grow : 扩展 ( 想看到扩展的效果，必须有空隙 )
0 : 默认值 , 不去扩展
0.5：占空隙的一半
1 : 去扩展 , 会把空白区域全部沾满
（ 注：子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）
flex-shrink : 收缩
正常默认值是1
0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。
flex : 一种复合写法
flex-grow flex-shrink flex-basis
flex:1;
flex : 1 1 0
flex:0;
flex : 0 1 0
algin-self: 跟align-items操作很像，区别就是只是针对某一个子项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
img{display: block;}
.box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
.box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}
.box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box2 div:nth-of-type(1){align-self: flex-start;}
.box2 div:nth-of-type(2){align-self: flex-end;}
.box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
.box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
.box3 div:nth-of-type(1){align-self: flex-start;}
.box3 div:nth-of-type(3){align-self: flex-end;}
.box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
.box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
.box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
.box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}
#box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid;
perspective: 500px;perspective-origin: right top;}
#box .main{position: relative;width: 150px;height: 150px;margin: 125px;
transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
#box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;}
#box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
#box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
#box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
#box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
#box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}
#box:hover .main{transform:rotateY(360deg);}
</style>
</head>
<body>
<div id="box">
<div class="main">
<div class="box1">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box5">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
<div class="box6">
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
<div>
<li></li>
<li></li>
</div>
</div>
</div>
</div>
</body>
</html>
注：默认情况下，在弹性盒子中的子元素的左右排列的。
注：
水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
注：弹性布局中用的频率比较多的语法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
注：弹性布局的优势是做一维布局，网格布局的优势是做二维布局。
下面是弹性布局骰子案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} img{display: block;} .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;} .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;} .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box2 div:nth-of-type(1){align-self: flex-start;} .box2 div:nth-of-type(2){align-self: flex-end;} .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;} .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;} .box3 div:nth-of-type(1){align-self: flex-start;} .box3 div:nth-of-type(3){align-self: flex-end;} .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;} .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;} .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;} #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; perspective: 500px;perspective-origin: right top;} #box .main{position: relative;width: 150px;height: 150px;margin: 125px; transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;} #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;} #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);} #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);} #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);} #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);} #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0; width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);} #box:hover .main{transform:rotateY(360deg);} </style> </head> <body> <div id="box"> <div class="main"> <div class="box1"> <div></div> </div> <div class="box2"> <div></div> <div></div> </div> <div class="box3"> <div></div> <div></div> <div></div> </div> <div class="box4"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box5"> <div> <li></li> <li></li> </div> <div> <li></li> </div> <div> <li></li> <li></li> </div> </div> <div class="box6"> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> <div> <li></li> <li></li> </div> </div> </div> </div> </body> </html>实际效果：
————————————————
版权声明：本文为CSDN博主「GLINLIND」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/GLINLIND/article/details/104572530
javascript中window.open()与window.location.href的区别
window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新
location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面
window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页
而window.open 是 window 对象的方法，是用来打开一个新窗口的函数
// 打开新页面
// 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗
window.open('./index.html');
// 在原窗口打开新页面
window.location.href＝"./index.html";
window.open()详解
window.open ('page.html', 'newwindow', 'height=100, width=400,
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
参数解释： 三个参数
window.open 弹出新窗口的命令；
‘page.html’ 弹出窗口的文件名；
‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar=no 是否显示菜单栏，yes为显示；
scrollbars=no 是否显示滚动栏，yes为显示；
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
常用的js返回与刷新页面
在此用a标签举例
前言：
做网页项目时想要背景是动态的，推荐两个我觉得比较可以的js动态背景。
随鼠标的移动而移动的线条，具体效果看图：
你焦点在哪，那么那里的线条就会汇聚到你的焦点处。
用法：将js声明到body内即可，我是放置在body底部的
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
1
可以鼠标点击产生字的，如图：
用法和第一个类似，不过在这个js文件前得先引入jquery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠标 */
var a_idx = 0;
jQuery(document)
.ready(
function($) {
$("body")
.click(
function(e) {
var a = new Array("@健身",
"@学习", "@机车",
"@摄影", "@自由",
"@考研", "@自律",
"@独立", "@厨艺",
"@橘子", "@交友",
"@爱媳妇", "@爱家人");
var $i = $("<span></span>")
.text(a[a_idx]);
a_idx = (a_idx + 1)
% a.length;
var x = e.pageX, y = e.pageY;
$i
.css({
"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
"top" : y - 20,
"left" : x,
"position" : "absolute",
"font-weight" : "bold",
"color" : "rgb("
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ","
+ ~~(255 * Math
.random())
+ ")"
});
$("body").append($i);
$i.animate({
"top" : y - 180,
"opacity" : 0
}, 1500, function() {
$i.remove();
});
});
});
</script>
这里使用的是cdn形式的jquery即不用将jq放入本地文件再引入，直接访问网络上的jq即可，还有就是点击产生的字可以自行修改。
————————————————
可以自定义一个file选择文件的按钮：
思路为：
用定位将自定义的按钮遮住原来的选择文件按钮，
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
（对此，label可实现）
eg:
html:
css样式：
结果图：
点一下，就可以弹出选择文件的文件夹啦！
文章目录
一、HTML的概述
标签的嵌套缩进
如图所示<html>为外层标签，称为父元素，<head>和<body>为内层标签，称为子元素。其中<head>与<body>又互称为兄弟元素
<!DOCTYPE html>
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明没有结束标签。
<!DOCTYPE> 声明对大小写不敏感。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!doctype html>
我们学习的是HTML5，所以我们不过多对HTML4的声明做过多解释。
如果上述对<!doctype html>的概述不清楚的话，
那记住以下两点即可，1. 不分大小写，2.在HTML的网页<html>标签之前加上<!doctype html>就可以啦。
图示为 HTML DOM树，DOM：Document Object Model（文档对象模型）
2. 标签、属性
一个标签可能有多个属性，属性先后与顺序无关
“=” 为赋值符号
属性与属性之间用空格隔开
附：补充上一节课网站和网页的笔记：
HTML网页的编码为 utf-8
网站可以理解成一个文件夹，而网页就是一个个的文件
网页的文件后缀常见的有：htm、html、jsp、php、asp
网站的文件结构通常包含 images文件夹，css文件夹，js文件夹，
一个简单的网页，的文件目录通常由 images、css、js，作用顾名思义，就是存放相对应的文件资源
附：img标签的详细介绍
<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上来说，图像并不会插入到HTML页面中去，而是通过 src的值(URL) 链接到HTML页面上的，<img>标签的作用是为被引用的图像创建占位符。
<img>标签常用的属性有src、alt、width、height、title
src和alt为 img 标签的必需元素。
话不多说，看图，为你们讲解代码。
看网站的演示图和代码图，想必大家都很清楚了吧。
（为了更直观的看到效果，我写了div和div的样式，1px粗的红色实线边框，这里的代码以后再具体详解）
title和alt 的区别别，体现在 第 11 行和第 14 行，想必大家就能看出来了吧
i. alt 属性是在图片不能正常显示时出现的文本提示。
ii. title 属性是在鼠标在移动到元素上的文本提示。
width和height的作用，用来规定图像的宽度和高度，单位为 像素（px）
src路径，由于我的文件夹结构为 index.html文件和 images 文件夹。
所以 src 的路径为 src="images/图片.后缀"，即src="URL"
URL即（Uniform Resource Locator,统一资源定位符，在WWW上，每一信息资源都有统一的且在网上唯一的地址。
简单的理解URL，就是网址，地址
如果图片路径引用错误，都会导致网页中的图片无法正常显示！ 如，第 14 行和第 20 行代码。
以上为img标签的常见用法。在我们写网页的时候，建议img写上 src、alt、width、height这四个属性，是否需要 title 具体看网站的功能。
以上就是，第二课、Web前端开发之HTML基础的全部内容了，感谢阅读
————————————————
版权声明：本文为CSDN博主「MineChen」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MineSu/article/details/104549536
引言
现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！
vue是渐进式框架
vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理
当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj设置了一个myname属性，当访问obj.myname属性会执行get方法
},
set (data) {
// 当修改myname属性会执行set方法
// data会得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺点： {
1：无法监听es6的set，map变化
2：无法监听class类型的数据
3：属性的新增和删除也无法监听
4：数组元素的新整和删除也无法监听
}
html5+css3实现2D-3D动画效果实例
主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。
文章目录
html5+css3实现2D-3D动画效果实例
2D变换
3D变换
2D中应用实现案例
3D中应用实现案例
css3动画
2D变换
是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸.
1
2
*2d对下面面坐标系简单分析如下：
（1）.默认状态下，x轴是水平的，向右为正。
（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴
下面首先需要了解2D、3D中的功能函数：
位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变
2D中应用实现案例
位移 translate()
效果图：
position: absolute;
left: 20px; top: 40px;
transition: 2s;/*过渡时间*/
transform: translateY(-320px);
.box3:hover .box3_h2{
transform: translateY(0px);
}
<!-- 盒子3：实现位移 -->
<div class="box3 box">
<img class="img_3" src="../16/images/3.png" alt="">
<div class="box_mm"></div>
<h2 class="box3_h2">Taylor Swift</h2>
<p class="box3_p1">I'm so glad you made time to see me. How's life,
tell me how's your family? I haven't seen them in a while.
You've been good, busier then ever.
We small talk, work and the weather Your guard is up and I know why...</p>
</div>
————————————————/* 公共样式 */ .box{ width:350px; height: 300px; position: relative; transform: 1s; margin: 20px 20px; float: left; } img{ display: block; width: 350px; height: 300px; } /* 鼠标滑过覆盖上方的白色部分 */ .box_mm{ width:350px; height: 300px; transform: 1s; background-color: #fff; position: absolute;/*设置定位，挡住box，*/ top: 0; opacity: 0;/*透明，0全透明*/ } h2{ font-size: 20px; } /* 盒子3 */ .box3{ overflow: hidden; } .img_3{ transition: 2s; } .box3_h2{ color: #fff; position: absolute; left: 20px; top: 40px; transition: 2s;/*过渡时间*/ transform: translateY(-320px); } .box3_p1{ font-size: 14px; width: 320px; position: absolute; left: 20px; bottom: 80px; transition: 2s; opacity: 0; } /*交互样式*/ .box3:hover .img_3{ transform: translateY(-10px); } .box3:hover .box3_h2{ transform: translateY(0px); } .box3:hover .box3_p1{ transform: translateY(-50px); opacity: 1; }
著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。
调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。
WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表（只选取最热门的项目）。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
CSS 圆角
by Webmonkey
标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。
垂直居中
by michael lascarides
针对 block 对象的更容易的垂直居中设置。（div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者）
兼容所有主流浏览器的 CSS 2.1 与 CSS 3
by Erik
能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。
更好的嵌入字体
by Webmonkey
不要 sFIR, 不要图片，要真正的字体。
CSS 变量
by Jeffrey Jordan Way, via css-tricks.com
能定义诸如色彩值一类的变量
更好地支持 100% height
by JLR
设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。
可重复使用变量
by Neal Lindsay
比如:
@var mycolor = #0080FF
h1 { color: mycolor; }
div.containbox { border: 1px mycolor; }
浏览器一致性与定义顺序
by JML
浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。
一句话复原
by Chris Pitzer
很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：
body { clear-default-styles:true; }
图形旋转与反转
by Stephen Bell
在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：
img .horiz { rotate:90; }
成组的 CSS 简化定义
by Volkan Görgülü, via css-tricks.com
如:
改为:
渐变
by Anonymous
以避免一条线一条线地实现渐变。
定位计算
by Anonymous
不使用 JavaScript 而是直接在 CSS 中实现：
left: ID1.Left + ID1.Width + 2px;
网格布局
by Kurt Krumme
table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型？
div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷（比如垂直居中，比如在 IE 中的众多 BUG），如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
使用 image 作 border
by Anonymous
应当可以用 image 作为 border，如：
border-right: url('image.png')
支持多个背景图
by Brad
这个 CSS 功能非常有用，有了这个功能，完美实现 CSS 圆角就变得十分简单了。
所有浏览器支持统一标准
by Anonymous
这里特指 IE<8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。
以上来自cb。大师们的期望果然很独特，相当多的期望也非常有用，如果实现了，Web开发就是多么轻松愉快的一件事情啊！比如变量、清除定义和定位计算，是我认为非常有用的。目前IE下可以用一些IE特有的表达式，但用起来太复杂。
还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3
————————————————
版权声明：本文为CSDN博主「前端基础开发」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/html886/article/details/104582007
蓝蓝设计的小编 http://www.lanlanwork.com