1、html

一、html语义化

定义：语义化是根据内容结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅代码的同时，让浏览器的爬虫和机器更好的解析javascript

做用：
一、有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来肯定上下文和各个关键字的权重
二、语义化的HTML在没有CSS的状况下也能呈现较好的内容结构与代码结构
三、方便其余设备的解析
四、便于团队开发和维护
css

注意：
一、尽量少的使用无语义的标签 div 和 span
二、在语义不明显时，既可使用 div 或者 p 时，尽可能用 p, 由于 p 在默认状况下有上下间距，对兼容特殊终端有利
三、不要使用纯样式标签，如:b、font、u 等，改用 css 设置
四、须要强调的文本，能够包含在 strong 或者 em 标签中(浏览器预设样式，能用CSS 指定就不用他们)，strong 默认样式是加粗(不要用 b)，em 是斜体(不用i)
五、使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和通常单元格要区分开，表头用 th，单元格用 td
六、表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途
七、每一个 input 标签对应的说明文本都须要使用 label 标签，而且经过为 input 设置id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来
html

html5新标签:
一、article: 定义文档内的文章
二、footer: 页脚
三、header: 页眉
四、section: 定义文档中的章节
五、dialog: 定义对话框或窗口
六、canvas: 可被用来经过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画html5

二、canvas相关

使用前需先得到上下文环境，暂不支持3djava

经常使用api：
一、fillRect(x, y, width, height)实心矩形
二、strokeRect(x, y, width, height)空心矩形
三、fillText('杀死那个河南人'，200, 200)实心文字
四、strokeRect('杀死那个河南人', 200, 200)空心文字
算法

新版本兼容低版本:
一、ie9 以前版本经过 createElement 建立 html5 新标签
二、引入 html5shiv.jscanvas

三、svg和canvas的区别

一、canvas是h5提供的新的绘图方法
二、svg已经有了十多年的历史 canvas画图基于像素点，是位图，若是进行放大或缩小会失真
三、svg基于图形，用html标签描绘形状，放大缩小不会失真
四、canvas须要在js中绘制，svg在html绘制
五、canvas支持颜色比svg多
六、canvas没法对已经绘制的图像进行修改、操做，svg能够获取到标签进行操做
小程序

四、html5新特性

HTML5主要是关于图像，位置，存储，多任务等功能的增长。
一、拖拽释放(Drag and drop) API
二、语义化更好的内容标签(header,nav,footer,aside,article,section) 音频、视频API(audio,video)
三、画布(Canvas) API
四、地理(Geolocation) API
五、本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除
六、表单控件，calendar、date、time、email、url、search
api

五、如何处理HTML5新标签的浏览器兼容问题

IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持 HTML5新标签，固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架数组

六、说说 title 和 alt 属性

一、两个属性都是当鼠标滑动到元素上的时候显示
二、alt 是 img 的特有属性，是图片内容的等价描述，图片没法正常显示时候的替代文字。
三、title 属性能够用在除了base，basefont，head，html，meta，param，script和title以外的全部标签，是对dom元素的一种相似注释说明

七、HTML全局属性(global attribute)有哪些

class :为元素设置类标识
data-* : 为元素增长自定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，文档内惟一
lang : 元素内容的的语言
style : 行内 css 样式
title : 元素相关的建议信息

八、

2、CSS

一、让一个元素水平垂直居中，到底有多少种方案?

二、浮动布局的优势?有什么缺点?清除浮动有哪些方式?

浮动布局简介

当元素浮动之后能够向左或向右移动，直到它的外边缘碰到包含它的框或者另一个浮动元素的边框为止。元素浮动之后会脱离正常的文档流，因此文档的普通流中的框就变现的好像浮动元素不存在同样。

优势

这样作的优势就是在图文混排的时候能够很好的使文字环绕在图片周围，由于浮动元素会脱离网页文档，与其余元素发生重叠，可是，不会与文字内容发生重叠。另外当元素浮动了起来以后，它有着块级元素的一些性质例如能够设置宽高等，但它与inline-block仍是有一些区别的，第一个就是关于横向排序的时候，float能够设置方向而inline-block方向是固定的;还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就没法撑起父元素，会形成父级元素高度塌陷。

清除浮动的方式

1）添加额外标签

<div class="parent"> //添加额外标签而且添加clear属性
  <div style="clear:both"></div> //也能够加一个br标签
</div>
复制代码

2）父级添加overflow属性，或者设置高度

<div class="parent" style="overflow:hidden">//auto 也能够 //将父元素的overflow设置为hidden
  <div class="f"></div>
</div>
复制代码

3）创建伪类选择器清除浮动(推荐)

//在css中添加:after伪元素
.parent:after {
/* 设置添加子元素的内容是空 */
  content: '';
/* 设置添加子元素为块级元素 */
  display: block;
/* 设置添加的子元素的高度0 */
  height: 0;
/* 设置添加子元素看不见 */
  visibility: hidden;
/* 设置clear:both */
  clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>
复制代码

三、使用display:inline-block会产生什么问题?解决方法?

问题复现

问题: 两个display:inline-block元素放到一块儿会产生一段空白。
如代码:

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<style>
.container { width: 800px; height: 200px;
}
.left {
font-size: 14px; background: red; display: inline-block; width: 100px;
height: 100px;
}
.right {
font-size: 14px; background: blue; display: inline-block; width: 100px;
height: 100px;
}
    </style>
  </head>
<body>

 
<div class="container">
  <div class="left">
左
</div><div class="right"> 右
  </div>
</div>

<div class="container">
      <div class="left">
左
      </div>
      <div class="right">
右
      </div>
    </div>
  </body>
</html>
复制代码

效果以下:

产生空白的缘由

元素被当成行内元素排版的时候，元素之间的空白符(空格、回车换行等)都会被浏览器处理，根据 CSS中white-space属性的处理方式(默认是normal，合并多余空白)，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的状况下，空白符占据必定宽度，因此inline-block的元素之间就出现了空隙。

解决办法

1）将子元素标签的结束符和下一个标签的开始符写在同一行或把全部子标签写在同一行

<div class="container">
  <div class="left"> 左 </div><div class="right"> 右 </div>
</div>
复制代码

2）父元素中设置font-size: 0，在子元素上重置正确的font-size

.container{ width:800px; height:200px; font-size: 0;}
复制代码

3）为子元素设置float:left

.left{
float: left; font-size: 14px; background: red; display: inline-block; width: 100px;
height: 100px;
} //right是同理
复制代码

四、布局题:div垂直居中，左右10px，高度始终为宽度一半

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div 中有一个文字A，文字须要水平垂直居中。

思路一:利用height:0; padding-bottom: 50%;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .outer_wrapper {
            margin: 0 10px;
            height: 100%;
            /* flex布局让块垂直居中 */
            display: flex;
            align-items: center;
        }

        .inner_wrapper {
            background: red;
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 50%;
        }

        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="outer_wrapper">
        <div class="inner_wrapper">
            <div class="box">A</div>
        </div>
    </div>
</body>

</html>
复制代码

强调两点:

1）padding-bottom到底是相对于谁的?

答案是相对于父元素的width值。那么对于这个out_wrapper的用意就很好理解了。 CSS呈流式布局，div默认宽度填满，即100%大小，给out_wrapper设置margin: 0 10px;至关于让左右分别减小了10px。

2）父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的?

相对于父元素的(content + padding)值, 注意不含border 延伸:若是子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是 content, IE盒模型是content+padding+border。

思路二: 利用calc和vw

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .box {
            margin-left: 10px;
            /* vw是视口的宽度， 1vw表明1%的视口宽度 */
            width: calc(100vw - 20px);
            /* 宽度的一半 */
            height: calc(50vw - 10px);
            position: absolute;
            background: red;
            /* 下面两行让块垂直居中 */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">A</div>
    </div>
</body>

</html>
复制代码

3、javascript

4、框架

React
Vue

5、Typescript

6、算法

一、两个数不使用四则运算得出和

1)按位与
8 & 7 // -> 0
// 1000 & 0111 -> 0000 -> 0
每一位都为 1，结果才为 1
2)按位或
8 | 7 // -> 15
// 1000 | 0111 -> 1111 -> 15
其中一位为 1，结果就是 1
3)按位异或每一位都不一样，结果才为 1
8 ^ 7 // -> 15
8 ^ 8 // -> 0
// 1000 ^ 0111 -> 1111 -> 15 // 1000 ^ 1000 -> 0000 -> 0
从以上代码中能够发现按位异或就是不进位加法

这道题中能够按位异或，由于按位异或就是不进位加法，8 ^ 8 = 0 若是进位了，就是 16 了，因此咱们只须要将两个数进行异或操做，而后进位。那么也就是说两个二进制都是 1 的位置，左边应该有一个进位 1，因此能够得出如下公式 a + b = (a ^ b) + ((a & b) << 1) ，而后经过迭代的方式模拟加法

答案：

function sum(a, b) {<br>
    if (a == 0) return b<br>
    if (b == 0) return a<br>
    let newA = a ^ b<br>
    let newB = (a & b) << 1<br>
    return sum(newA, newB)<br>
}
复制代码

二、冒泡排序

冒泡排序的原理以下，从第一个元素开始，把当前元素和下一个索引元素进行比较。若是当前元素大，那么就交换位置，重复操做直到比较到最后一个元素，那么此时最后一个元素就是该数组中最大的数。下一轮重复以上操做，可是此时最后一个元素已是最大数了，因此不须要再比较最后一个元素，只需要比较到 length - 1 的位置。

function checkArray(array) {
  if (!array || array.length <= 2) return
}

function swap(array, left, right) {
  let rightValue = array[right]
  array[right] = array[left]
  array[left] = rightValue
}

function bubble(array) {
  checkArray(array);
  for (let i = array.length - 1; i > 0; i--) {
    // 从 0 到 `length-1` 遍历
    for (let j = 0; j < i; j++) {
      if (array[j] > array[j + 1]) swap(array, j, j + 1)
    }
  }
  return array;
}
复制代码

时间复杂度: 等差数列，去掉常数项后为O(n*n)

三、插入排序

有点像冒泡排序的逆向操做。冒泡排序是从最后一个开始排，插入排序是从第一个开始排

function checkArray(array) {
  if (!array || array.length <= 2) return
}

function swap(array, left, right) {
  let rightValue = array[right]
  array[right] = array[left]
  array[left] = rightValue
}

function sort(arr) {
  for(let i = 1; i < arr.length; i++) {
    for(let j = i -1; j >= 0 && arr[j] > arr[j + 1]; j--) {
      swap(arr, j, j + 1)
    }
  }
  return arr
}
复制代码

时间复杂度: 等差数列，去掉常数项后为O(n*n)

四、选择排序

选择排序的原理

遍历数组，设置最小值的索引为 0，若是取出的值比当前最小值小，就替换最小值索引，遍历完成后，将第一个元素和最小值索引上的值交换。如上操做后，第一个元素就是数组中的最小值，下次遍历就能够从索引 1 开始重复上述操做。

function selection(array) { checkArray(array);
for (let i = 0; i < array.length - 1; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
      minIndex = array[j] < array[minIndex] ? j : minIndex;
    }
    swap(array, i, minIndex);
  }
  return array;
}
复制代码

时间复杂度: 等差数列，去掉常数项后为O(n*n)

7、小程序

8、浏览器

一、浏览器每帧执行动做

首先须要处理输入事件，可以让用户获得最先的反馈；
接下来是处理定时器，须要检查定时器是否到时间，并执行对应的回调；
接下来处理 Begin Frame（开始帧），即每一帧的事件，包括 window.resize、scroll、media query change 等；
接下来执行请求动画帧 requestAnimationFrame（rAF），即在每次绘制以前，会执行 rAF 回调；
紧接着进行 Layout 操做，包括计算布局和更新布局，即这个元素的样式是怎样的，它应该在页面如何展现；
接着进行 Paint 操做，获得树中每一个节点的尺寸与位置等信息，浏览器针对每一个元素进行内容填充；
到这时以上的六个阶段都已经完成了，接下来处于空闲阶段，能够在这时执行 requestIdleCallback 里注册的任务；

前端笔记

1、html

一、html语义化

二、canvas相关

三、svg和canvas的区别

四、html5新特性

五、如何处理HTML5新标签的浏览器兼容问题

六、说说 title 和 alt 属性

七、HTML全局属性(global attribute)有哪些

八、

2、CSS

一、让一个元素水平垂直居中，到底有多少种方案?

二、浮动布局的优势?有什么缺点?清除浮动有哪些方式?

浮动布局简介

优势

缺点

清除浮动的方式

1）添加额外标签

2）父级添加overflow属性，或者设置高度

3）创建伪类选择器清除浮动(推荐)

三、使用display:inline-block会产生什么问题?解决方法?

问题复现

产生空白的缘由

解决办法

1）将子元素标签的结束符和下一个标签的开始符写在同一行或把全部子标签写在同一行

2）父元素中设置font-size: 0，在子元素上重置正确的font-size

3）为子元素设置float:left

四、布局题:div垂直居中，左右10px，高度始终为宽度一半

思路一:利用height:0; padding-bottom: 50%;

强调两点:

1）padding-bottom到底是相对于谁的?

2）父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的?

思路二: 利用calc和vw

3、javascript

4、框架

5、Typescript

6、算法

一、两个数不使用四则运算得出和

二、冒泡排序

三、插入排序

四、选择排序

选择排序的原理

7、小程序

8、浏览器

一、浏览器每帧执行动做

二、