841天 南柯一梦

忠于理想 面对现实

初级前端必须要学习的12个知识点,你都会了吗?

发布于 5个月前 / 826 次围观 / 1 条评论 / 编程开发 / 南柯一梦

1、清除浮动有哪些方式?比较好的方式是哪一种?

  1. 父级div定义height
  2. 结尾处加空div标签clear:both
  3. 父级div定义伪类:after和zoom
  4. 父级div定义overflow:hidden
  5. 父级div定义overflow:auto
  6. 父级div也浮动,需要定义宽度
  7. 父级div定义display:table
  8. 结尾处加br标签clear:both

比较好的是第3种方式,好多网站都这么用。

2、box-sizing常用的属性有哪些?分别有什么作用?

box-sizing:content-box|border-box|inherit;
  1. content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)
  2. border-box:元素指定的任何内边距和边框都将在已经设定的宽度和高度内进行绘制。通过从已经设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3、HTML5 为什么只需要写 <!DOCTYPE HTML>?

  1. HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
  2. HTML4.0基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

4、介绍一下对浏览器内核的理解

主要分成两部分:渲染引擎和JS引擎
  1. 渲染引擎(Layout Engineer或Rendering Engine):负责取得网页的内容(HTMLXML、图像等等)整理信息(例如加入CSS等等),以及计算网页的显示方式,然后会输出至显示器或打印机,浏览器的内核不同,对于网页的语法解释也会有所不同,所以渲染的效果也会不同,所有网页浏览器,电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
  2. JS引擎(能够将 Javascript代码处理并执行的运行环境):解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎

5、简述一下HTML语义化的理解

用正确的标签写正确的代码。
  1. HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器搜索引擎解析;
  2. 即使在没有样式CSS的情况下也可以以一种文档格式显示,并且是容易阅读的;
  3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  4. 便于阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

6、HTML5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTMLHTML5?

HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  1. 绘画Canvas
  2. 用于媒体介绍回访的video和audio元素
  3. 本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失
  4. SessionStorage的数据在浏览器关闭后自动删除
  5. 语义化更好的内容元素,比如article、footer、header、nav、section
  6. 表单控件,calendar、date、time、email、url、search
  7. 新的技术webworker、websocket、Geolocation

IE8/IE7/IE6支持通过Document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签的默认样式。

当然也可以直接使用成熟的框架,比如Html5Shim

<!--[if lt IE 9]>
<![endif]-->

7、JS有哪些内置对象?

JS的全称为JavaScript(JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能)

数据封装类对象

Object、Array、Boolean、Number和String

其他对象

Function、Arguments、Math、Date、RegExp、Error

8、eval是做什么的?

我们在做开发的时候尽量避免使用eval函数,它的功能是把对应的字符串解析成JS代码并执行,这对于网站来说是不安全的,而且非常消耗服务器的性能当遇到一个eval函数时,它会执行两次,一次解析成JS语句,一次用于执行。

由JSON字符串转换为JSON对象的时候可以用eval

var obj=eval('(+ Str +)')

9、DOM怎样添加、移除、移动、复制、创建和查找节点

创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
craeteTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild() //添加一个新的节点
removeChild() //移除一个节点
replaceChild() //替换对应的节点
insertBefore() //在已有的节点前插入一个新的节点
查找
getElementsByTagName() //方法可返回带有指定标签名的对象的集合
getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括ID等于Name值)
getElementByiD() //方法可返回对拥有指定 ID 的第一个对象的引用

10、new操作符具体干了什么呢?

  1. 创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型
  2. 属性和方法被加入到this引用的对象中
  3. 新创建的对象由this所引用,并且最后隐式的返回this

11、call() 和 apply() 的区别和作用?

apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。

例如:

fucntion.apply(this,[1,2,3]);

call()的第一个参数是上下文,后续是实例传入的参数序列。

例如:

function.call(this,1,2,3);

12、null和undefined的区别?

null是一个表示"无"的对象,转换数值时为0;undefined是一个表示"无"的原始值,转换数值时为NaN。

undefined:

  1. 当变量被声明了,但没有赋值时,就等于undefined
  2. 调用函数时,应该提供的参数没有提供,该参数就等于undefined
  3. 对象没有赋值的属性,该属性的值为undefined
  4. 函数没有返回值时,默认返回undefined

null:

  1. 作为函数的参数,表示该函数的参数不是对象
  2. 作为对象原型链的终点
未显示?请点击刷新
  1. 5个月前 (12-13)
    @

    [blockquote]滴!学生卡!打卡时间:下午1:12:34,请上车的乘客系好安全带~[/blockquote]