我是一名正在找实习工作的前端小白 不晓得具体怎么准备实习 所以准备了这个 其实里面的知识我基本都知道点 但是不全 所以做了个总结 共同进步
sessionStorage:不在不同浏览器窗口敏感词享。
盒模型主要分为两类:W3C标准盒子模型和IE盒子模型,
标准模型-width与height按照content宽高计算,而IE模型-width与height则按照content+padding+border计算
在编写页面代码的时候应该尽量使用标准的W3C盒子模型,可在页面中声明DOCTYPE类型,将页面设置为"标准模式"
box-sizing:content-box; // 标准盒模型
box-sizing:border-box; // IE盒模型
空元素(没有内容的html元素)有:br、meta、hr、link、input、img
块级元素 h1~h6 div p ul、li、dl、dt、dd
内联元素 a span b img select input label button textarea
给select绑定onchange事件
<select id="select" onchange="getValue()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<script>
function getValue(){
console.log(document.getElementById('select').value)
}
</script>
1.visibility,其子元素也会继承此属性,若设置visibility:visible,则子元素会显示
dispaly:none不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了
2.visibility不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
3.在css3的transition中支持visibility属性,但是不支持display,display:none的时候,页面文档流中将不会存在该元素,display:block的时候,文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示
repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。)
当客户端发送请求给服务端,在等待服务端响应的请求时,客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
当客户端发送给服务端请求时,在等待服务端响应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率
水平居中最常见的方法是在外面在嵌套一个div 设置margin:0 auto
五种基本类型: Undefined、Null、Boolean、Number和String。
1中复杂的数据类型————Object,Object本质上是由一组无序的名值对组成的。
Object、Array和Function则属于引用类型
http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份
一、MVC(Model-View-Controller)
MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)
二、MVVM(Model-View-ViewModel)
如果说MVP是对MVC的进一步改进,那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应view。
px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不会因为其他元素的尺寸变化而变化;
em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
alt属性的实质是通过文字来代替图片的内容在图片加载不出来的时候,而title属性的实质是对图片的描述或者注释
用最恰当的标签来标记内容
比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗。能够实现这种效果的方法有很多,比如用CSS样式进行渲染。这样的效果看起来像是一个标题,但是他对浏览器来说,只是一个被渲染过的文本,无法知道他是一个标题。若要让浏览器知道他是一个标题,应该用hx标签来进行标记。从这个例子可以总结出: 语义化的HTML文档,不关心内容的显示效果。 说的通俗一点: 标题脱了CSS这层外衣,它还是一个标题
好处:提升搜索引擎优化(SEO)的效果;即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构,使HTML结构变的清晰,有利于维护代码和添加样式
补充:块里可以含行.也就是div块里可以有span;但是内联元素内不能包含块元素;
1.<a href="javascript:;">百度</a>
2.<a href="javascript:void(0)">百度</a>
3.为 a 标签绑定一个点击事件,事件的返回值为 false ,这样 a 链接就不会跳转。
4.<a id="test" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
//声明并获取element
var test = document.getElementById("test");
//阻止默认事件函数
function stopDefault(e) {
if (e && e.preventDefault)
e.preventDefault();
else
window.event.returnValue = false; //兼容IE
}
// e.preventDefault();阻止默认事件(不支持IE),IE中用window.event.returnValue = false; 阻止默认事件
</script>
脱离标准文档流的几种方式:float 绝对定位 固定定位
浮动脱离了标准文档流,会导致父元素高度塌陷,后面元素会挤到浮动元素下方,造成布局错乱(子元素浮动 且父元素没有设置高度,本来的父元素由子元素的高度决定,子元素浮动 父元素高度塌陷)
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)添加无意义标签,语义化差
2.父级添加overflow属性(父元素添加overflow:hidden/overflow:auto)(不推荐)内容增多的时候容易造成不会自动换行导致内容被隐藏掉
3.使用after伪元素清除浮动(推荐使用)
4给父元素添加高度不推荐 不利于后期维护
注意 浮动元素一定是块级元素 如果给有个内联元素加上浮动 他会自动变成块级元素 其实没有使用display:block
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;/*去掉小圆点*/
}
.nav li{
width: 100px;
height: 40px;
float: left;
border: 1px solid #000;
}
.content{
width: 500px;
height: 300px;
background-color: pink;
}
.clear_float::after{
/*只需要给浮动元素的父容器添加上这个类就可以了: clear_float*/
display: block;/*把::after设置成块级元素*/
content: "";/*想让伪类起作用, 必须添加这个属性*/
clear: both;
// 给一个元素添加一个::after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子. 是第一种方法的升级 没有直接添加一个元素
}
</style>
<div class="header">
<ul class="nav clear_float">
<li>导航 1</li>
<li>导航 2</li>
<li>导航 3</li>
</ul>
</div>
<div class="content"></div>
<nav>表示导航
<header>表示页眉,也就网页的头部
<footer>表示页脚,网页的底部
<section>表示区块,建议用在内部有标题的区块
<article>表示文章、内容、评论、帖子、博客等
<aside>表示侧边栏,如文章的侧栏
<address>表示联系人信息的区块
<hgroup>表示对网页或区段的标题进行组合
<keygen>表示给表单添加一个公钥
<menu>菜单列表
<audio>表示音频内容
<video>表示视频
<source>表示定义媒体资源
<output>用于不同类型的输出
有利于SEO;在没有CSS的时候能够清晰的看出网页的结构,增强可读性;
便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力
for(i=0;i<10;i++){setTimeout(function(){console.log(i)},10)}
10个10输出
父传子 父组件通过bind指令传递给子组件,子组件通过props接收
子传父 子组件通过$emit触发自定义事件 可以携带参数,在父组件中监听这个事件
bus总线
首先在由vue-cli搭建起来的项目中的main.js创建一个事件总线,也就是中转站,作为通信的桥梁。核心代码如下:
// 建立中转站,实现组件与组件之间的传值
let bus = new Vue()
Vue.prototype.bus = bus
methods: {
btnMessage() {
this.bus.$emit("ReceiveMessage", this.message)
}
}
mounted() {
let self = this;
this.bus.$on("ReceiveMessage", function(item) { self.name = item; })
}
vuex状态管理模式
ajax2方法执行放在ajax1的success回调函数中
white-space:nowrap;
overflow:hidden;
text-overflow:ellipisis;
主要包括以下4个阶段:创建,挂载,更新,销毁
1、beforeCreate(创建前)
在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建
2、created(创建后)
data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
created用于获取后台数据
3、beforeMount(载入前)
4、mounted(载入后)
mounted用于dom挂载完后做一些dom操作
5、beforeUpdate(更新前)
6、updated(更新后)
页面显示的数据和data中的数据已经保持同步了,都是最新的
7、beforeDestroy(销毁前)
只是进入了销毁阶段,并没有真正被销毁,beforeDestroy用户清除定时器以及解绑事件等,
8、destroyed(销毁后)
还没有真正被销毁
假如keep-alive包裹了组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,在切换到组件B,这时组件A的deactivated的生命周期函数会被触发;在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了
跨域,指的是浏览器不能执行其它网站的脚本,如果不是同源页面,就不会执行
解决方法:jsonp jsonp只支持get请求,不支持postr请求
原理:ajax请求受同源策略影响,不允许进行跨域请求,而script标签的src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务器不再返回json格式的数据,而是返回一个调用某个函数的js代码,再src进行了调用,实现了跨域
2.代理 写后端接口
3.php修改Header请求头
header(‘Access-Control-Allow-Orign:’)//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);
1.使用箭头函数
2.箭头函数肋部使用’_this=this’
3.使用apply.call.bind
4.new实例化一个对象
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
function f(n){
//大于数组长度时,取数组长度
if(n>31)n=31;
var number=[];
while(n){
//随机数的选取方法31为所需的数组长度
var num=Math.floor(Math.random() * 31)+2;
//数组查重的方法
if(number.indexOf(num)<0){
number.push(num);
n--;
}
}
console.log(number.sort());//用于观察数组
console.log(number)
}
f(32)//只能取到数组长度的数组
//[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 2, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 3, 30, 31, 32, 4, 5, 6, 7, 8, 9]
//Math.floor() 返回小于或等于一个给定数字的最大整数。
//Math.random() 函数返回一个浮点, 伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括1(排除1)
1.var let const
var声明的变量具有变量提升,且全局可用
let声明的变量是块级作用域,避免了变量提升
const声明的变量不可重复申明,只在块级作用域类作用,不存在变量提升,
变量提升:在加载程序之前,浏览器会做一些准备工作,变量、函数表达式,默认赋值为undefined;
for循环计数器就适合使用let
var a = 1;
(function () {
alert(a);
var a = 2;
})()//undefined
执行顺序:
Var a;
Alert (a);
Var a=2;
var a = 1;
(function(){
alert(a);
let a = 2;
})();//a is not defined
//因为变量没有提升,所以执行到alert(a)的时候a还是未定义状态,而且因为let只在块级作用域里起作用,所以外部的a也取不到。
2.for of 遍历数组
简洁很多;
可以用break来终止整个循环,或者continute来跳出当前循环,继续后面的循环;
结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型
var arr= [1,2,3,4,5];
for(let value of arr){
if(value ==3){
//终止整个循环
break;
}
console.log(value); //1 2
}
3.解构赋值
4.Symbol Map Set
5.箭头函数
用户体验好,快,内容改变不需要重新加载整个页面;
没有页面之间的切换,就不会出现“白屏现象”
缓存组件,防止二次渲染,这样会大大的节省性能
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
rem是根据HTML根元素大小而定
什么是适配 实现页面再不同设备上等比
rem适配原理:改变了一个元素在不同设备上占据的css像素的个数
优点:可以使用完美视口
缺点:计算设计图上的px值到rem的转换比例麻烦
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
window.onload=function(){
var styleNode = document.createElement('style');
var w = document.documentElement.clientWidth/16+"px";
styleNode.innerHTML="html{font-size:"+w+" !important;}"
document.head.append(styleNode);
};
您有收获吗?
希望我没有浪费您的时间。
谢谢您的耐心阅读。
如有错误或者补充及时更正。