前端知识点大集锦

tina390

于 2018-03-20 13:46:22 发布

阅读量332

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/tina390/article/details/79623320

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html+css部分

DOCTYPE的作用是什么?

doctype位于文档最前面,处于<html>标签之前,用来告知浏览器该用什么文档类型规范来解析这个文档.

HTML语义化

用正确的标签做正确的事.

HTML语义化让页面的内容结构化,便于浏览器、搜索引擎解析;

利于SEO优化;

便于阅读维护理解.

行内元素有哪些?块级元素有哪些?空元素有哪些?

行内元素 : a、span、img、input、select、i...

块级元素 : h1~h6、p、ul、li、ol、div...

空元素 : br、hr、img、input、link、meta...

引入样式的方式

行内样式

<div style="color:red></div>

2.内嵌式

<head>
    <style type="text/css">
        ...此处写css样式
    </style>
</head>

3.导入式(导入式会在整个网页加载完后在加载css样式)

<style type="text/css">
     @import "index.css";
</style>

4.连接式

<link href="index.css" rel="stylesheet" type="text/css"/>

页面引入样式时,@import和link的区别

@import是等页面加载完毕后才加载, 是css提供的,css2.1以下浏览器不支持.

link是在页面加载时同时加载.属于XHTML标签,无兼容性支持试用js改变样式.

盒模型

盒模型有两种:

IE盒模型:IE的content部分包含了border和padding;
标准W3C盒模型(内容(content)、填充(padding)、边界(margin)、边框(border))

CSS优先级

!important>行内>id选择器>类选择器>标签选择器>通配符>继承

为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异.

H5新特性有哪些?

新增的语义化标签:header、footer、nav、section、article
表单控件:calendar、date、time、email、search
绘画canvas
用于媒介回放的video和audio元素
本地离线存储:localstorage、sessionStorage
新的技术:webworker、geolocation

H5新标签的兼容性

直接使用成熟的框架(html5shim框架)

<!--[if it IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

说说你对this的理解

this是一个关键字,他代表函数运行时自动生成的一个内部对象,只能在函数内部使用.

1.this作为一个纯粹的函数调用this指向全局对象(window)

//直接打印
console.log(this); //window

//function声明函数
function bar () {
    console.log(this);
}
bar();     //window

//function声明函数赋给变量
var bar = function (){
    console.log(this);
}
bar();    //window

//自执行函数
(function (){
    console.log(this);
})();   //window

2.作为对象的方法调用this指向调用的对象

var person = {
    run: function () {
        console.log(this)
    }
}
person.run();    // person

3.作为构造函数被调用this指向新的对象(new会改变this的指向)

//不使用new指向window
function Person (name) {
    console.log(this) // window
    this.name = name;
}
Person('tom');

//使用new
function Person (name) {
      this.name = name
      console.log(this) //people
      self = this
  }
  var people = new Person('tom')
  console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people

原生js的window.onload与Jquery的$(document).ready(function(){}),$(function(){})有什么不同?

1.执行的时间不同

window.onload:必须等页面内包括图片的所有元素都加载完毕后才能执行.

$(document).ready(function(){})是dom结构绘制完毕后执行,不需要等到加载完毕后才执行

2.编写个数不同

window.onload:不能同时编写多个,如果有多个该方法,只能执行一个.

$(document).ready(function(){})可以同时编写多个,并且都能执行.

3.简写

window.onload无简写

$(document).ready(function(){})可以简写成$(function(){})

JavaScript常见的内置对象

arguments 函数参数集合
array 数组
Boolean 布尔对象
date 日期时间
error 异常对象
function 函数构造器
math 数学对象
number 数值对象
object 基础对象
regexp 正则表达式对象
string 字符串对象

例举三种显示类型转换和2种隐式转换

显示 : toString()、string() 转换成字符串

Number()、parseInt()、parseFloat() 转换成数字

Boolean() 转换成布尔类型

隐式 : 拼接字符串 ==、!=

cookie、sessionStorage和localStorage的区别

cookie:储存容量小,只有4k左右,解析麻烦,可以在多窗口共享.

sessionStorage:储存容量大,约4M,生命周期为关闭浏览器窗口,同一窗口下数据可以共享.

localStorage:储存空间大,月20M,永久生效,除非手动删除,可以在多窗口共享.

post与get的区别

get : 存储内容有限;

安全性相对较低,请求的数据会显示在地址栏;

在做数据查询的时候或提交一些不紧要信息时建议用get.

post : 请求需要加密和解密的过程,相对安全,在做数据增删改的时候建议用post,文件上传只能用post.

什么是预加载?

预加载是指在网页全部加载完毕之前,在页面优先显示一部分内容,以提高用户体验.

如何实现数组去重

//  利用ES5的indexOf方法
function dupRemove(arr){
    //创建一个新的空数组
    var tmp = [];
    //判断tmp数组中是否存在arr中的元素,如果没有就添加进去
    for(var i = 0;i <= arr.length; i++){
        if(tmp.indexOf(arr[i]) == -1){
            tmp.push(arr[i]);
        }
    }
    return tmp;
}