html知识查缺补漏

一. 相对路径

“./”：代表目前所在的目录。

“…/”：代表上一层目录。

以”/”开头：代表根目录。
1、文件在当前目录

 Page2.html访问Page2Image.jpg

 <img src=”./Page2Image.jpg”>或者<img src=”Page2Image. jpg”>

2、文件在上一层目录

      Page1.html访问Image下的Image.jpg

      <img src=”../Image/Image.jpg”>

      Page2.html访问Image下的Image.jpg

      <img src=”../../Image/Image.jpg”>

3、文件在下一层目录

 Page1.html访问Site2文件夹下的Page2Image.jpg

      <img src=” ./Site2/Image.jpg”><img src=” Site2/Image.jpg”>

4、根目录表示法,任何页面访问Image下的Image.jpg图片

      <img src=”/Image/Image.jpg”>

二、img
是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置 width 和 height 的值来设置图片的宽和高。

<img
  src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
  alt="程序员"
  title="你好啊"
  width="700px"
  height="600px"
/>

三、input 的name和id , label标签，datalist标签
https://blog.youkuaiyun.com/xiao_seven/article/details/80248996
https://blog.youkuaiyun.com/zjjian1989_0611/article/details/7798946?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
1.id就像唯一的身份证号码，name就像是名字，可以重复，如果需要绑定，就要用id
2.可以使标签内的区域指向label标签for属性指代的对象的事件。
无label标签: 文本
有label标签:
文本
有label标签的这一段，点击标签中的文本，可使多选框聚焦。
3.datalist与select相比，输入是会出现提示
四、javaScript
构造函数的prototype对象默认都有一个construtor属性，指向prototype对象所在的函数

function F() {}
console.log(F.prototype.constructor === F);

通过构造函数得到的实例对象内部会包含一个指向构造函数的prototype对象的指针_proto_

function F() {}
var a = new F();
console.log(a.__proto__ ==F.prototype);

原型链

function Student() {}
Student.prototype.sayHi = function () {
	console.log('Hi');
};

JSON 是 JavaScript 的一个子集，但 JSON 是独立于语言的文本格式

{
  "students": [
    { "firstName": "san", "lastName": "zhang" },
    { "firstName": "si", "lastName": "li" },
    { "firstName": "wu", "lastName": "wang" }
  ]
}

常用内置对象：
Array对象：
concat()/join()/pop()/push()/reverse()/shift()/unshift()/slice()/splice()/sort()/toString()
String对象：
charAt()/charCodeAt()/slice()/indexOf()/toString()/toLowerCase()/toUpperCase()/replace()/split()
Date对象：
Date()/getDate()/getDay()/getMonth()/getFullYear()/getHours()/getSeconds()/getMilliseconds()
Math对象：
abs(x)/round(x)/sqrt(x)/ceil(x)/floor(x)/sin(x)/cos(x)/tan(x)/acos(x)/asin(x)/atan(x)/exp(x)/pow(n,m)/log(x)/max(a,b)/min(a,b)/random()
BOM的顶级对象window以及常用操作方法
对话框：
alert()/prompt()/confirm()
页面加载时间：
onload/onunload()
定时器：
setTimeout()/setInterval()/clearTimeout(timeId)

var timerId = function(setTimeout {function(){
	console/log('Hello');
} ,1000),

五、text,动画，跨列

图片：子绝父相

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。
flex布局：
display:flex;设置为弹性布局
flex-direction定义排列方向:row|row-reverse|column|column-reverse
justify-content沿着主轴线对齐：flex-start|flex-end|center|space-between|space-around（重要）
align-item在侧轴方向对齐方式：flex-start|flex-end|center|baseline|stretch（重要）
flex-wrap换行方式：nowrap|wrap|wrap-reverse|initial|inherit
align-content
align-self
flex



display:

max-width:随窗口变小而改变来适应
charAt(2) 从字符串由index找值 / toUpperCase() 转为大写 / substr(start,length)截取字符串

=赋值 ==比较值（先转换为相同类型再比较 null=undefined) ===比较值和类型

px
em 1em=16px;(font-size=0.65->1em=10px),相对于父元素来说的
rem 在html设置font-size=0.65, 相对于html来说的，不会造成混乱。

querySelector()返回选择器的第一个元素，静态的/ querySelectorAll()返回所有的 nodelist
getElementsByTagName()动态的 htmllist

默认背景图片的起始位置为padding的位置
background-repeat:no-repeat;
background-origin:content-box;//设置起始位置为内容
background-origin:-50px 0;//再向左边移动50px;

防抖函数，与上一次时间执行大于规定时间再执行，节流函数，规定时间内执行一次
document.onscroll

js是单线程
回调函数被称为钩子函数，异步，轮询

Vue和React

不同点：

id选择器和类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
id=""

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点".“号显示：
class=”"

line-height 设置行高（ px % normal 数字）

border-collapse: 设置表格边框是否设置为合并单一的边框 （collapse / separate)

Math.floor(Math.random()*4) 取整

window.getComputedStyle(con, null)[‘top’]; 取出con的top属性值

**confirm()**方法用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。

$(document).ready(function{}) : ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。

方便经常用的 document.getElementById(id) 的书写方便：
function $(id) {
return document.getElementById(id);
}

$(document).ready(function(){
$(“p, button, h1”).click(function(event){
$(“div”).html(“通过 " + event.target.nodeName + " 元素触发。”);
});
});

Vue.config.productionTip = false 阻止启动生产信息
Async await异步
find函数
let item=result.find(item => item.type === 0)
toFixed(2)保留两位小数

filter函数：
var oldArray = [1,2,3,4,5,6,7,8,9,10];
var newArray = oldArray.filter(function(val){return val<6;});

javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。
href：URL 规定链接的目标 URL。
这个a标签的话就是指点击后跳转到百度首页
点击后是不会跳转的，一般用于开发时页面还未完成。

监听：
watch:{
$route:“getAllGoods”
},
当路由跳转时监听这个方法，调用这个方法

if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …mentDid = this.route.query.did}

JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

res.json([body]):发送一个json的响应。

token+jwt
签名，验证 用户

全局守卫
第一步：
在配置路由的文件
{path:’/user’,
name:‘user’,
component:User,
meta:{
auth:true //需要守卫
}}
第二步：
在main.js中
router.beforeEach((to,from,next)=>{
//用户未登录，跳转到登录界面
to.matched则只需要给较高一级的路由添加requiresAuth即可，其下的所有子路由不必添加。
if(to.matched.some(record=>record.meta.auth))=>{
next({
path:’/login’,
query:{
redirect:to.fullPath
}
})
}else{
//放行
next();}
})
https://blog.youkuaiyun.com/heshuaicsdn/article/details/88020796

commonjs和es的导入导出
commonjs:
const sum = require(’./add.js’)
module.exports = {
name: ‘haha’
};
(或者：exports.name=‘haha’)
ES6 Module的导入
import { add } from ‘./add.js’
export default {
name: ‘calculator’,
add: function(a, b) {
return a + b;
}
};
继承
1、原型链继承：每一个AO对象都有一个prototype，返回对象类型原型的引用，所以可以给它赋值一个对象，就可以实现简单的原型链继承。只要任意一个子类改变了父类对象的属性，那所有对象都会受到影响。
Bird.prototype = new Animal();
2、原型冒充继承：把父类的构造函数拿过来执行一遍
Animal.apply(this, arguments);this.fly = function(){
alert(“我会飞”);
}
var pigeon = new Bird();
3、复制继承：把父类所有的属性和方法复制过来
var pigeon = new Bird();
pigeon.extend(new Animal());
4、ES6标准类的继承
class Bird extends Animal {
constructor(name){
super(name);
this.type = “小鸟”;
}
}
性能优化
防抖，节流，图片懒加载，扁平化store，组件懒加载
Vue全家桶
一、vue-cli 二、vueRouter 三、vuex 四、Axios 五、搭配UI框架如：iview、vant、elementUI
前端数据请求

Vue项目运行流程
1 加载public的 index.html(什么都没有），
2 加载App.vue的import代码来引入组件（页面内容），
3 main.js 把App挂载到id=‘app’ (createApp(App).mount("#app")😉
4 加载App.vue export default里面的内容(调用组件）

prompt,eval,delegate
eval(‘2+2’),可以强制计算
name=prompt(“Please enter your name”,"")，显示提示框，前一个值是显示内容，后一个是默认内容
$(document).ready(function(){
$(“div”).delegate(“button”,“click”,function(){
$(“p”).slideToggle();
});
});
ajax请求

//php来请求数据xml/json文件的数据
btn.onclick=function(){
	type:"get",
	url:"  .php",
	data:"act=get&page="+number,
	success:function(){
		var res=xhr.responseXML | 
//当请求json数据
var res = xhr.responseText  
var obj=JSON.parse(res)

};
	error:function(xhr){
		alert(xhr.state);}
}

delegate
delegate() ：委托函数，方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
为指定元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$(“div”).delagate(“button”,“click”,function(){
$(“p”).slideToggle();
})

trriger
trriger函数：激活函数，rigger() 方法触发被选元素的指定事件类型
$(document).ready(function(){
$(“input”).select(function(){
$(“input”).after(“文本被选中！”);
});
$(“button”).click(function(){
$(“input”).trigger(“select”);
});