前端知识梳理

HTML

HTML5 的新特性

语义化更好的标签（header、nav、footer、aside、article、section）

音频、视频 API （audio、video）

画布（canvas）和 SVG

地理定位

拖拽释放

本地离线存储

表单控件：calendar、date、email、url、search、range。

xhtml和html的区别

XHTML 是更严格更纯净的 HTML 代码（xhtml比html更加规范）。

最主要的不同：

XHTML 元素必须被正确的嵌套。

XHTML 元素必须被关闭。

标签名必须用小写。

XHTML 文档必须有根元素。

`<meta>` 标签

<meta> 标签永远位于 head 元素内部。

<meta> 标签用来描述一个HTML网页文档的属性。

<meta> 对搜索引擎的作用：最重要的是对Keywords和description的设置，提高页面的搜索点击率。如：

1
2

<meta name="keywords" content="政治,经济, 科技,文化, 卫生, 情感，心灵，娱乐，生活，社会，企业，交通">
<meta name="description" content="政治,经济, 科技,文化, 卫生, 情感，心灵，娱乐，生活，社会，企业，交通">

什么是 Canvas？

是一个在 HTML5 页面添加了 canvas 元素的一个矩形区域的画布。

canvas 元素使用 JavaScript 在网页上绘制图形。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

`css` `js`文件放置位置和原因

css 和 js 的正确摆放均是为了提高页面的加载效率。

css应该放置在head中，用 style 标签引入。
因为页面渲染时，只有相应的 DOM Tree 完成后才开始之后的布局（layout）并将页面显示。

js 则应该放在 body 标签内的尾部。因为 js 会阻塞其后内容的加载和呈现。
为避免 js 阻塞其后内容，可根据具体要求设置参数 async（HTML 5）和 defer。

CSS

盒模型，box-sizing

CSS 盒模型包括标准模型和 IE 模型，区别在于 IE 盒模型的 content 包括 border 和 padding 。

1	box-sizing: border-box \|\| content-box(default)

当使用 border-box 时，页面将采用 IE 模式计算分析。

当采用 content-box（默认） 时，页面采用标准模式计算分析。

CSS 3 新特性

过渡（transition）

动画（animation）

形状转换（transform）

选择器、多背景、rgba

盒子阴影（box-shadow）

边框（border-radius 和 border-image）

弹性布局（Flex）

媒体查询

用 CSS 隐藏页面的5种方法

opacity:从 0.0 （完全透明）到 1.0（完全不透明）。

visibility:hidden （会占据页面上的空间）。

display:none （不会占据页面空间）。

position:absolute; top:-9999px; left:-9999px;将元素移出可视区。

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

水平居中和垂直居中

水平居中：

1
2
3

1. textalign:center;

2. margin:0 auto;（元素要有固定宽度值）

垂直居中

https://www.w3cplus.com/css/vertically-center-content-with-css

1	1. line-height:/元素高度的值/;

Flex 布局

.box {
  display: flex;
  justify-content: center;（横轴居中）
  align-items: center;（纵轴居中）
}

浮动引起的问题和解决办法

问题：

父元素无法被撑开，影响与父级元素同级的元素；
与浮动元素同级的非浮动元素会紧随其后；
如果该浮动元素不是同级第一个浮动的元素，则它之前的元素也应该浮动。

清除浮动：

使用 css 样式中的 clear:both;来解决上述的 2 和 3；
浮动外部元素；
设置 overflow 为 hidden 或者 auto；

CSS引入的方法有哪些

外链式<link href="1.css" type="text/css" rel="stylesheet" />

内嵌式<style type="text/css"></style>

导入式<style>@import url(1.css)</style>

行内式<div style="width:200px;background:red;"></div>

外链式方便多个网页同时使用一个样式表。

内嵌式速度快，但是改版麻烦，可以减少HTTP请求。

导入式不好用，因为页面首先加载，然后导入样式表，页面在 1s~2s 内会有没有样式表的情况，然后突然有了样式。
因为link引用CSS时，在页面加载时同步加载；而@import在页面加载完后才开始对对应CSS进行加载。

行内式通常用于开发时候的临时测试，语义不清晰，不能使用。

行内元素和块级元素

行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素为“文本流元素”。span、a、em、b、u、i。

块级元素能设置宽度和高度，但不能并排显示。div、h1~h6、ul、li、p、section、header

BFC

BFC 浅析

JS

基本类型和引用类型

基本类型

JavaScript 中有 6 中基本数据类型：Null、Undefined、Boolean、String、Number、Symbol
基本类型的值不可变
基本类型的比较是他们值的比较
基本类型存放在栈内存里的

引用类型

引用数据类型：Object 、Array 、Function 、Date 、RegExp。以上统称为 Object 类型。
引用类型的值可变

引用类型的比较是引用的比较

var obj1 = {};    
var obj2 = {};   
console.log(obj1 == obj2);    // false
console.log(obj1 === obj2);   // false
因为 obj1 和 obj2 分别引用的是存放在堆内存中的2个不同的对象，故变量 obj1 和 obj2 的值（引用地址）也是不一样的。

引用类型的值是保存在堆内存（Heap）中的对象

DOM 事件类

闭包

闭包：能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

学习 JavaScript 闭包

详解 JS 闭包

下列JavaScript代码执行后，依次alert的结果是：

(function test( ){
  var a=b=5;
  alert(typeof a);   //number
  alert(typeof b);   //number
})()
alert(typeof a);  //undefined 有var 的声明
alert(typeof b)   //number   没有var声明

JS 中的 this

在 Java 等面向对象的语言中，无论哪种情况，this 关键字的含义是明确且具体的，即代指当前对象。

但是在 JavaScript 中，this 的含义要丰富的多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。

详解 JS 中的 this 关键字

原型相关

原型链

当从一个对象那里调用属性或方法时，如果对象自身不存在这样的属性或方法，就回去关联自己的prototype对象那里寻找，直到查找到顶级对象，如果还没有，就会返回undefined。

prototype

每个函数都有一个prototype属性。

_proto_

这是每一个JavaScript对象(除了 null )都具有的一个属性，叫proto，这个属性会指向该对象的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

每个原型都有一个 constructor 属性指向关联的构造函数。

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。