HTML&CSS
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox
JavaScript:
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript
其他:
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
盒模型 —— 外边距、内边 ...
Coding
未读JavaScript的组成
JavaScript 由以下三部分组成:
ECMAScript(核心):JavaScript 语言基础
DOM(文档对象模型):规定了访问HTML和XML的接口
BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
基本数据类型:undefined、null、boolean、number、string、symbol
引用数据类型:object、array、function检测浏览器版本版本有哪些方式?
根据 navigator.userAgent // UA.toLowerCase().indexOf(‘chrome’)
根据 window 对象的成员 // ‘ActiveXObject’ in window介绍JS有哪些内置对象?
数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Arguments、Math、Date、RegExp、Error
ES6新增对象:Symbol、Map、S ...
12345function Food( getName=function()( alert()) return this}
1234567891011121314 Foo. getName=function () alert (2) Foo. prototype getName=function()f alert(3)) var getName= function ((alert(4) function getName()( alert(5)) 请问以下的输出结果分别是什么: Foo. getName) getName( Foo().getName( get Name()( new Foo. getNamel) I new Foo().getName() new new Foo().getNamel)5
语义化
HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构
css命名的语义化是指:为html标签添加有意义的class
为什么需要语义化:
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面,有利于收录
便团队项目的可持续运作及维护
简述一下你对HTML语义化的理解?
用正确的标签做正确的事情。
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
Doctype作用?标准模式与兼容模式各有什么区别?
<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中 ...
http状态码有那些?分别代表是什么意思?
12345678910111213141516171819简单版 [ 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求,但尚未处理 301 Moved Permanently 请求的网页已永久移动到新位置。 302 Found 临时性重定向。 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。 304 Not Modified 自从上次请求后,请求的网页未修改过。 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。 401 Unauthorized 请求未授权 ...
123456789101112var arr = [1,4,6,9,11,15,18], key = 10function t(arr,key){ for(var i in arr){ if(arr[i] > key){ return arr.splice(i,0,key) }else{ return arr.push(key) } } return arr}
123456789101112131415161718var a = [1,12,312,132,132,13,21,3]1. 冒泡function mp(arr){ for(var i = 0; i < arr.length - 1; i++){ for(var j = 0; j < arr.length -i; j++){ if(a[j] < a[j-1]){ var temp = a[j]; a[j] = a[j-1]; a[j-1] = temp } } } return arr}2. 二分
123456789101112131415161718function ef(arr){ for(var i = 1;i < arr.length -1; i++){ var k = arr[i], low = 0, high = i - 1; while(low <= ...
display: none 与 visibility: hidden 的区别12345678910相同:它们都能让元素不可见区别: display:none 会让元素完全从渲染树中消失,渲染的时候不占据任何空间; visibility:hidden 不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见 display:none 是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示 visibility:hidden 是继承属性,子孙节点消失由于继承了 hidden,通过设置 visibility: visible可以让子孙节点显式 修改常规流中元素的 display 通常会造成文档重排。修改visibility属性只会造成本元素的重绘 读屏器不会读取 display:none元素内容,会读取 visibility:hidden 元素内容
css hack原理及常用hack12345- 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。- 常见的hack有 - 属性h ...
this 的三种常用方法1234567891011121314151.函数调用 指向全局对象 例如: function a(){ this.x = 1 } a()或者 var x = 10; function a(){ this.x = 0 } a() x = 0 这时候 this 指向 window
1234567891011121314151617181920212223242526272829302.对象方法调用 function t(){ console.log(this.x) } var p = {} p.x = 10 p.m = t p.m() // 10 3.作为构造函数调用 function a(){ this.x = 10 ; console.log(this.x) } var ...
Coding
未读flex:弹性盒子父元素设置为 : display:flex;如果是内联元素可以设置为:display: inline-fiex
属性:flex-direction : 设置主轴的方向
1参数 有 row(设置主轴水平方向起点在左边),row-reverse(设置主轴水平方向,起点在右边),column(设置主轴垂直方向起点在上边),,column-reverse(设置主轴垂直方向起点在下边)
flex-warp: 定义换行情况
1参数:nowrap (没有任何操作),wrap(换行,第一行在上面),wrap-reserse(换行,第一行在上面,换行的在上面)
flex-flow
1参数:nowrap, flex-direction,flex-wrap
justify-content : 定义项目在主轴上的对齐方式
1参数:flex-start(默认,左对齐),flex-end(右对齐),center(居中),space-between(两端对齐,中间等距离间隔),space-around(每个项目之间等宽间隔)
align-item : 定义交叉轴上的对齐方式
1参数: flex ...