html是超文本标记语言(Hyper Text Markup Language)的简写,标准通用标记语言下的一个应用。HTML不是一个编程语言,而是一种标记语言,是网页制作的必备。可包含图片、音乐、视频、链接、程序等非文本元素。
专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业天坛街道免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。DOCTYPE是document type的缩写,它并不是html的标签,它是一种标记语言的文档类型声明,意在告诉浏览器当前HTML是用什么版本编写的。览器要通过哪一种规范(DTD)解析文档(比如HTML或XHTML规范)。
css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
盒模型也叫框模型 (Box Model),包含元素内容(content)、内边距(padding)、边框(border)、外边距(margin)。计算一个盒子的宽高:content+padding+border。
1.px(表示像素,是绝对单位。不会因为其他元素的尺寸变化而变化,页面按照精确像素展示)
2.pt(磅 Points,是一种绝对单位,是物理长度单位,等于 1/72 寸。它的取值范围和 px 类似)
3.em(相对于当前对象内文本的字体大小,如,body的font-size:12px;则body内部的子元素而言,1em=12px)
4.rem(相对于根元素字体大小的单位,也是一个相对单位,和em有点类似,只不过一个计算的规则依赖根元素一个依赖父元素)
5.vh(布局视口高度的1/100)
6.vw(布局视口高度的1/100)
什么时候需要清除浮动,清除浮动的方法有哪些?
当子元素设置了float属性之后,并且父元素没有设置宽高,是由子元素撑起来的,则会导致父元素的宽高坍塌,这个时候需要清除浮动。
方法:1、父元素设置属性overflow:hidden || auto
2、子元素最后一个元素添加clear:both 3、父级定义伪类:after和zoom {display:block;clear:both;content:"",visibility:hidden;height:0} {zoom:1} 4、父级定义height 5、父级也一起浮动
1、transform
.children{
position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%)
}
2.flexbox
.parent{
display:flex; justify-content:center; align-items: center;
}
3.当子元素宽高固定,父元素宽高不为0时
.parent{
height:200px;
}
.children{
width:100px; height:100px; position:absolute; top:50%; left:50%; margin: -50px 0 0 -50px;
}
1、标签选择器(body、p等)
2、类选择器(class="box")
3、ID选择器(id="app")
4、全局选择器(*{})
5、组合选择器(.header .header_box)
6、后代选择器(.#header ul li)
7、群组选择器(.box .header .content)
8、继承选择器( p p)
9、伪类选择器(link visited active hover)
10、字符串匹配的属性选择符(^ $ * 分别对应开始、结尾、包含)
11、子选择器(p>p)
12、css相邻兄弟选择器(p+p)
优先级:
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性
每个选择器的权值:
行内样式 1000
ID选择器 100
class选择器 10
HTML标签选择器 1
sass: 是一款强化css的辅助工具,它在css语法的基础上变量、嵌套、混合、导入等高级功能,可提高开发效率。
sass有两种语法格式,首先是scss,是在css3的语法基础上进行拓展,所有css3语法在scss中都是通用的,同时加入sass的特色功能。此外,scss也支持大多数css hacks写法以及浏览器前缀写法,以及早期的IE滤镜写法,这种格式以.scss作为拓展名。
另一种也是最早的sass语法格式,被称为缩进格式(Indented Sass)通常简称“sass”,只是与scss相比个别地方采取了不同的表达方式。
使用:
定义变量($width:5rem #box{width:$width})
混合器 (@Minxin class {
border-radius:5px; background:#f00;
}
.box{
@include class
}
具体更多用法参考文档sass官方文档。
1、js有哪些数据类型:
原始数据类型 - String Number Boolean Undefined null
对象类型 - Array Function Object
null和undefined的区别 - undefined是一个特殊值,通常不是变量尚未赋值。null是在计算机中具有保留的值,用于指示指针不引用有效对象。可以把undefined作为空的变量,null看做是空的对象。
原始类型和引用类型的区别 - 基本类型指的是保存在栈内存中的简单数据段,
引用类型指的是那些保存在堆内存中的对象,意思是,变量中保存的实际上是只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象。
访问的方式也不同 - 基本类型是按值访问,操作也是他们的实际保存的值,
引用类型是按引用方式访问,当查询时,我们需要先从栈中读取内存地址,然后再找到保存在堆内存中的值。
复制的类型也不同 - 基本类型变量的复制,从一个变量向另一个变量复制时,会在栈中创建一个新值,然后把值复制到新变量分配的位置上。
引用类型复制,复制的是存储在栈中的指针,将指针复制到栈中为新变量分配的空间中,而这个指针副本和原指针执行存储在堆中的同一个对象;复制结束后,两个变量实际上引用同一个对象,因此改变其中一个,讲影响另一个。
2、如何理解prototype,什么时候用prototype
在javascript中,所有的对象都是Object的实例,并且会继承Object.prototype的属性和方法,那么,Object.prototype是所有对象的爸爸。我们在创建对象时,就会有一些已经定义好的属性,在定义函数时候,这个预定义的属性就是prototype,是函数的一个属性,是一个指向对象的指针。而定义一个普通对象时候,会生成一个__proto__,指向的是对象的构造函数prototype。
js中构造函数和实例之间有着微妙的关系,构造函数通过定义prototype来约定其实例的规格,再通过new来构造实例,他们的作用就是产生对象。通过new构造对象的特点是,obj的prototype指向了构造器的prototype属性。
什么时候用prototype呢?
使用prototype的好处是不会产生额外的内存,所有实例化后的对象都会从原型上继承这个方法,相当于公共方法,就是一个子类拥有父类的某些特性,又可以给自己添加一些独立的属性,而且不会影响父时使用prototype。
prototype通常来解决一个问题:对象的创建比较耗费资源,例如,对象创建的时候需要访问数据库、读取外部文件、需要使用网络。这些都是比较耗费时间和内存的。
写一个prototype小栗子:
function Parent(name){ this.drink = function(){ return 'I Can Drink\t' + name } } let parent = new Parent('red wine') console.log(parent.drink())//I Can Drink red wine function Person (name, age) { Parent.call(this,'beer') this.name = name; this.age = age; } Person.prototype.sayName = function() { return this.name } let person = new Person('sunny', 18) let person1 = new Person('cherry',28) console.log(person.sayName()) // sunny console.log(person1.drink())// I Can Drink beer
3.什么是闭包、使用场景有哪些、闭包会引起什么问题
概念:闭包就是一种可以重复使用变量而且不会造成全局变量污染的机制,它是一种特殊的对象。
它由两部分组成:函数以及创建该函数的环境。而环境是由闭包创建时在作用域中的任何局部变量组成。可以用来定义私有属性和方法。
小栗子:
function sum(){ let x = 1,y = 2; function res(){ //闭包 return x + y } return res //闭包函数 } let result = sum(); result() // 3
从上面的这个简单的闭包例子可以看出,在外部函数的内部创建一个内部函数。并且内部函数读取着外部函数作用域中定义的局部变量,而内部函数又作为外部函数的返回值。所以总结一下:闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。
使用场景:需要设计私有变量和方法的时候。
举栗子:
function Person() { let name = 'sunny' this.getName = () => name } let person = new Person; person.name //undefined person.getName() // sunny
闭包引起的问题:正常情况下,一个函数的作用域和其所有变量在函数执行后都会被销毁,但是在创建一个闭包后,这个函数会一直保存,直到闭包不存在为止。也就是闭包函数会一直保存着父函数的执行期上下文。这样就会造成内存泄露。
举个栗子:
const handleDom = () => { let dom = document.getElementById('#el'); let id = dom.id; dom.onclick = () => { console.log(id) } dom = null; }
上面这个函数中的闭包函数里保存着一个HTML元素,这就意味着这个元素无法销毁,所以我们应该在操作完元素之后要主动销毁。
还有一个场景是缓存机制,栗子在下面:
(() => { let num = 0; setInterval(() => { console.log(num++); }, 1000) })() // 1 2 3 4 5 6 ....
这个就验证了是吗的说法:闭包函数会一直拿着外部函数的变量,并且不会销毁,所以会一直用着加1之后的最新值。
4.什么是浅拷贝和深拷贝?怎么实现一个深拷贝?
在这之前要先理解一下js的基本类型和引用类型的区别:
基本类型:直接存储在栈中的数据(String、Number、Boolean、Undefined、Null)
引用类型:是把该对象的引用地址存储在栈中,对象里的数据放在堆中(Array、Function、Object)
浅拷贝:只拷贝一层,不会拷贝对象的子元素,相当于直接赋值。
深拷贝:会克隆出一个对象,数据是相同的,但是引用地址不同。
举栗子说明:
let person = { name:'sunny', age:13, sayName:function(){ console.log(this.name) } } let person1 = person; console.log(person1) //和person的相同 person1.name = 'cherry' console.log(person1.name) //cherry console.log(person.name) //cherry
因为是引用的用一个地址,所以person1的改变也修改person的值;
深拷贝:
es6的 "..."可以实现一个深拷贝,其实也说不上深拷贝, 如果对象里面包含引用类型,也会失败。
let obj = { name:'sunny', age: 30, arr: [1,2,3,4] } let obj1 = obj // console.log(obj1) // obj1.name = 'cherry' // console.log(obj1) let copyObj = { ...obj } copyObj.name = 'cherry' copyObj.arr[0] = 8 console.log(copyObj) console.log(obj)//obj的arr被改变了 ,但是基本类型没有受到影响
深拷贝实例:
const deepClone = (val) => { let res; if (val && Array.isArray(val)) { res = []; val.forEach((item) => { res.push(deepClone(item)); }); } else if (typeof val === 'object' && val !== null) { res = {}; for (let key of Object.keys(val)) { res[key] = deepClone(val[key]); } } else { res = val; } return res; }
以上就是前端的基础知识巩固的详细内容,更多请关注创新互联其它相关文章!