简历知识树

HTML5 & CSS3

• 标签语义化:语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签，如

<header>: 通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。
<nav>: 表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。
<aside>:所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。一般使用在页面、文章的侧边栏、广告、友情链接等区域。
<footer>:一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。
<article>:表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。
<section>:

• float布局：本意是让文字围绕图片，float是脱离文档流
• flex布局:

• 容器(container)：

1. flex-direction: row | row-reverse | column | column-reverse; 决定主轴的方向
2. flex-wrap: nowrap | wrap | wrap-reverse; 定义，如果一条轴线排不下，如何换行。
3. flex-flow: flex-direction || flex-wrap; 是flex-direction属性和flex-wrap属性的简写形式
4. justify-content: flex-start | flex-end | center | space-between | space-around;
5. align-items: flex-start | flex-end | center | baseline | stretch;

• baseline:项目的第一行文字的基线对齐。
• stretch:(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• 项目(item)：

1. order: 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2. flex-grow: 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。将剩余空间按glex-grow值比例分配。
3. flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
4. flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || flex-basis
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性

• keyframes:MDN 菜鸟教程
• translation：MDN
• transform: 菜鸟教程

ECMAScript（JavaScript）

• ECMAScript
• 异步与单线程
• 作用域链与闭包
• 原型链与继承
• 面向对象
• 解构赋值:ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
• Set 和 Map 数据结构:

Set:ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Map:ES6之前，JS对象中的键只能是字符串，ES6加入了Map数据结构，扩大了键的范围，各种类型的值（包括对象）都可以当作键。

DOM/BOM

• Document Object Model（文档对象模型），就是把「文档」当做一个「对象」来看待。
• Browser Object Model（浏览器对象模型）,即把「浏览器」当做一个「对象」来看待。
• 在 DOM 中，文档中的各个组件（component），可以通过 object.attribute 这种形式来访问。一个 DOM 会有一个根对象，这个对象通常就是 document。
• BOM 除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如navigator（导航条）、history（历史记录）等等。

JQuery

熟悉 jQuery 的常用 API，能使用 jQuery 类库进行常规网站开发。 jQuery中文文档

1. 选择器

• 基本选择器

  

• 层级选择器

  

• 过滤选择器

  

• 筛选选择器(方法)

  

2. 常用API

• addClass() 给元素添加class
• removeClass() 给元素去除class
• 三种选择器： 元素 id 类
• 使用jQUery改变HTML元素的css样式：选择器.css("属性","值");
• 使用jQUery设置元素不可用： $("#target1").prop("disabled",true);
• jQuery使用text()改变文本内容
• remove()： 删除一个html元素
• appendTo()：移动html元素
• clone()方法拷贝元素，移动元素就是剪切，拷贝元素就是复制,所以应该就是clone一个，然后移动过去。$("#target5").clone().appendTo("#left-well");
• parent(): 操作父级元素
• children(): 操作子级元素
• target:nth-child(n) CSS选择器索引操作元素: $(".target:nth-child(2)").addClass("animated bounce")

3. 更多的常用API

Vue.js

• 能使用 Vue.js 完成常见需求，理解 Vue.js 的父子组件间的通信原理。
• 能使用 Vue-Router 制作前端路由；能使用 vuex 进行状态管理。

HTTP与浏览器

• 了解 HTTP 基础知识，了解常见状态码含义，能够根据请求查看响应。
• 理解客户端缓存、同源策略，以及常用的跨域方法。
• 了解浏览器运行机制和页面加载的整个过程。

前端工程化

• 使用过 WebPack、Rollup、Parcel 等前端打包工具，能够进行基础的使用。
• 能在项目中使用 Less、Sass、Stylus 等预处理器，提高编程效率。
• 了解基本的前端安全，性能优化等知识，并能在项目中加以实践。

面试中的题

1. 常见的块级元素标签和内联元素标签

• 块级元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
• 内联元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

2. flex布局的好处

• 可以简便、完整、响应式地实现各种页面布局。
• 很容易实现垂直居中
• flex实现各种布局

3. vue的优点，与其他两大框架的区别,其他两大框架是干什么的

• 三个框架的优缺点

5. meta 标签要能默写
   <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
6. ul li 去除默认样式

ul,li{
    list-style-type:none;
}

7. es 和 js 的关系
   JavaScript 是脚本语言。ECMAScript 是它所基于的规范。通过阅读 ECMAScript 规范，你将学会如何创建脚本语言。通过阅读 JavaScript 文档，你将学习如何使用脚本语言。
8. es不兼容怎么办 新出的ES6，有些浏览器还不支持，我们可以使用babel等语法解析转换工具，将ES6语法转换为ES5语法。但是ES6部分目前未能转化。
9. 如何确认用户处于登陆状态/点登陆状态发维持

• vuex
• 如图：

  

10. 再总结一下自己的项目
11. vue 项目搭建的基础步骤
12. html + css + style 如何引入
13. 原声js 与 三大框架的关系
14. 了解自己平时用的工具

• node.js
• webpack
• vue
• vscode

1. 别不把VScode不当IDE

• gitbash
• FSCapture.exe
• chrome 控制台