Front-End
前端开发工程师面试宝典！ （本文部分有转载，不定期更新！） [图片上传失败...(image-bec086-1541439668979)]
本仓库是我整理的前端常见面试题，大部分由我整理，其中个别部分参考网上其他资料，感谢！
本资料仅供大家学习参考使用！欢迎大家Star和提交issues。
NO.1 README
NO.2 简历经验分享
NO.3 angular常见问题
NO.4 前端面试宝典第一版
NO.5 前端笔记版本第二版
NO.6 前端笔记版本第三版
NO.7 前端笔记版本第四版
NO.8 vue常见问题
欢迎大家一起交流提高
前端需要注意哪些SEO
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
- 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
web开发中会话跟踪的方法有哪些
- cookie
- session
- url重写
- 隐藏input
- ip地址
<img>的title和alt有什么区别
-
title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。 -
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
doctype是什么,举例常见doctype及特点
-
<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写 -
<!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令 - 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
- 在HTML4.01中
<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容 - HTML5不基于SGML，所以不用指定DTD
什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构
css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息
为什么需要语义化：
- 去掉样式后页面呈现清晰的结构
- 盲人使用读屏器更好地阅读
- 搜索引擎更好地理解页面，有利于收录
- 便团队项目的可持续运作及维护
HTTP method
- 一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可
- GET是最常用的方法，通常用于请求服务器发送某个资源。
- HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分
- PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它
- POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
- TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
- OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
- DELETE请求服务器删除请求URL指定的资源
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
- 在浏览器地址栏输入URL
- 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
- 如果资源未缓存，发起新请求
- 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
- 检验新鲜通常有两个HTTP头进行控制
Expires和Cache-Control：- HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
- HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 浏览器解析URL获取协议，主机，端口，path
- 浏览器组装一个HTTP（GET）请求报文
- 浏览器获取主机ip地址，过程如下：
- 浏览器缓存
- 本机缓存
- hosts文件
- 路由器缓存
- ISP DNS缓存
- DNS递归查询（可能存在负载均衡导致每次IP不一样）
-
打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
- 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
- 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
- 客户端发送ACK=Y+1， Seq=Z
- TCP链接建立后发送HTTP请求
- 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
- 主动方发送Fin=1， Ack=Z， Seq= X报文
- 被动方发送ACK=X+1， Seq=Z报文
- 被动方发送Fin=1， ACK=X， Seq=Y报文
- 主动方发送ACK=Y， Seq=X报文
- 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
- 如果资源可缓存，进行缓存
- 对响应进行解码（例如gzip压缩）
- 根据资源类型决定如何处理（假设资源为HTML文档）
- 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
-
构建DOM树：
- Tokenizing：根据HTML规范将字符流解析为标记
- Lexing：词法分析将标记转换为对象并定义属性和规则
- DOM construction：根据HTML标记关系将对象组成DOM树
- 解析过程中遇到图片、样式表、js文件，启动下载
- 构建CSSOM树：
- Tokenizing：字符流转换为标记流
- Node：根据标记创建节点
- CSSOM：节点创建CSSOM树
-
根据DOM树和CSSOM树构建渲染树:
- 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）
script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none - 对每一个可见节点，找到恰当的CSSOM规则并应用
- 发布可视节点的内容和计算样式
- 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）
-
js解析如下：
- 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
- HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
- 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
- 当文档完成解析，document.readState变成interactive
- 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
- 浏览器在Document对象上触发DOMContentLoaded事件
- 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
- 显示页面（HTML解析过程中会逐步显示页面）
如何进行网站性能优化
-
content方面
- 减少HTTP请求：合并文件、CSS精灵、inline Image
- 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
- 避免重定向：多余的中间访问
- 使Ajax可缓存
- 非必须组件延迟加载
- 未来所需组件预加载
- 减少DOM元素数量
- 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
- 减少iframe数量
- 不要404
-
Server方面
- 使用CDN
- 添加Expires或者Cache-Control响应头
- 对组件使用Gzip压缩
- 配置ETag
- Flush Buffer Early
- Ajax使用GET进行请求
- 避免空src的img标签
-
Cookie方面
- 减小cookie大小
- 引入资源的域名不要包含cookie
-
css方面
- 将样式表放到页面顶部
- 不使用CSS表达式
- 使用<link>不使用@import
- 不使用IE的Filter
-
Javascript方面
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
- 合理设计事件监听器
-
图片方面
- 优化图片：根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小并且可缓存
-
移动方面
- 保证组件小于25k
- Pack Components into a Multipart Document
什么是渐进增强
渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:
- 所有浏览器都必须能访问基本内容
- 所有浏览器都必须能使用基本功能
- 所有内容都包含在语义化标签中
- 通过外部CSS提供增强的布局
- 通过非侵入式、外部javascript提供增强功能
- end-user web browser preferences are respected
javascript跨域通信
同源：两个文档同源需满足
- 协议相同
- 域名相同
- 端口相同
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
- 如果是log之类的简单单项通信，新建
<img>,<script>,<link>,<iframe>元素，通过src，href属性设置为目标url。实现跨域请求 - 如果请求json数据，使用
<script>进行jsonp请求 - 现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
- 内部服务器代理请求跨域url，然后返回数据
- 跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部
Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源
javascript有哪几种数据类型
六种基本数据类型
- undefined
- null
- string
- boolean
- number
- symbol(ES6)
一种引用类型
- Object
什么闭包,闭包有什么用
闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
- 函数本身作用域。
- 闭包定义时的作用域。
- 全局作用域。
闭包常见用途：
- 创建特权方法用于访问控制
- 事件处理程序及回调
应用程序存储和离线web应用
HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。
1.为html元素设置manifest属性:<html manifest="myapp.appcache">，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确
2.manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头
3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源， 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：
客户端存储localStorage和sessionStorage
- localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
- 同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档。
- Storage对象通常被当做普通javascript对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key
cookie及其操作
- cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
- 通过读写cookie检测是否支持
- cookie属性有名，值，max-age，path, domain，secure；
- cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器cookie有效期
- cookie作用域通过文档源和文档路径来确定，通过path和domain进行配置，web页面同目录或子目录文档都可访问
- 通过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串如下
- 读取document.cookie获得'; '分隔的字符串，key=value,解析得到结果
document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值
// 来设置cookie，同样的方法可以用来改变有效期
// 设置max-age为0可以删除指定cookie
//读取cookie，访问document.cookie返回键值对组成的字符串，
//不同键值对之间用'; '分隔。通过解析获得需要的值
javascript有哪些方法定义对象
- 对象字面量：
var obj = {}; - 构造函数：
var obj = new Object(); - Object.create():
var obj = Object.create(Object.prototype);
===运算符判断相等的流程是怎样的
- 如果两个值不是相同类型，它们不相等
- 如果两个值都是null或者都是undefined，它们相等
- 如果两个值都是布尔类型true或者都是false，它们相等
- 如果其中有一个是NaN，它们不相等
- 如果都是数值型并且数值相等，他们相等， -0等于0
- 如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
- 如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等
==运算符判断相等的流程是怎样的
- 如果两个值类型相同，按照===比较方法进行比较
- 如果类型不同，使用如下规则进行比较
- 如果其中一个值是null，另一个是undefined，它们相等
- 如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
- 如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较
- 如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
- 其他所有情况都认为不相等
对象到字符串的转换步骤
- 如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
- 如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
- 否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError
对象到数字的转换步骤
1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
3. 否则，throws a TypeError
<,>,<=,>=的比较规则
所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:
- 如果操作数是对象，转换为原始值：如果valueOf方法返回原始值，则使用这个值，否则使用toString方法的结果，如果转换失败则报错
- 经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的16位unicode值的大小）
- 否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较
+运算符工作流程
- 如果有操作数是对象，转换为原始值
- 此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接
- 否则：所有操作数都转换为数字并执行加法
函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组
- arguments所有函数中都包含的一个局部变量，是一个类数组对象，对应函数调用时的实参。如果函数定义同名参数会在调用时覆盖默认对象
- arguments[index]分别对应函数调用时的实参，并且通过arguments修改实参时会同时修改实参
- arguments.length为实参的个数（Function.length表示形参长度）
- arguments.callee为当前正在执行的函数本身，使用这个属性进行递归调用时需注意this的变化
- arguments.caller为调用当前函数的函数（已被遗弃）
- 转换为数组：<code>var args = Array.prototype.slice.call(arguments, 0);</code>
DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容
- DOM事件包含捕获（capture）和冒泡（bubble）两个阶段：捕获阶段事件从window开始触发事件然后通过祖先节点一次传递到触发事件的DOM元素上；冒泡阶段事件从初始元素依次向祖先节点传递直到window
- 标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event对象作为参数，event.target为触发事件的对象，handler调用上下文this为绑定监听器的对象，event.preventDefault()取消事件默认行为，event.stopPropagation()/event.stopImmediatePropagation()取消事件传递
- 老版本IE事件监听elem.attachEvent('on'+type, handler)/elem.detachEvent('on'+type, handler)：handler不接收event作为参数，事件信息保存在window.event中，触发事件的对象为event.srcElement，handler执行上下文this为window使用闭包中调用handler.call(elem, event)可模仿标准模型，然后返回闭包，保证了监听器的移除。event.returnValue为false时取消事件默认行为，event.cancleBubble为true时取消时间传播
- 通常利用事件冒泡机制托管事件处理程序提高程序性能。
W3C标准万维网联盟标准。
- 万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：
- 结构(Structure)
- 表现（Presentation）
- 行为（Behavior）
- 对应的标准也分三方面：
- 结构化标准语言主要包括XHTML和XML，
- 表现标准语言主要包括CSS，
-
行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
网页通过W3C标准的步骤：
- 图片的alt=""属性必须每张图片都加上,而且对齐属性用CSS来定义。不加不能通过XHTML1.0验证。
- 每个文档必须加上DTD声明
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type。
- RSS的XML通过时其中的域名地址必须与检测的地址一致,否则报错.
- 标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);
- 同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。
<div id="a1">111</div> <div id="a1">222</div>
如果不用W3C来检测的话，在CSS设计里是允许这样做的。 那是程序的角度不能相同，CSS上是可以相同的! 之前就是相同的产生问题，后面就改成类引用了!(简单的说就是id必须要是单一的不能重复 如果重复就使用class)
- 不可以省略双引号或者单引号
- 标签之间不可错位嵌套。
<div class="CaseDetaListSS">
原文链接：
<a href='/html/cases/cases_61.html'>
官方网站
</div>
</a>
不允许这样。
- 所有标签必须都使用小写
- FLASH的标签代码中不能含有,必须采用其它的方法实现。
- 所有的标签中含有的属性必须有值(官方的说法)。
- 标签必须配对完成,单标签必须以/关闭
- JS和CSS外部引入文件必须加上类型定义:
<script type="text/javascript"></script>
<style type='text/css'></style>
- 所有的样式全部写在外部文件。用类名定义。在使用的地方引用。
- 页面上的一些特殊字符必须用HTML代码来标识.如“&”写成“&“
| 显示结果 | 说明 | Entity Name | Entity Number |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于 | < |
< |
| > | 大于 | > |
> |
| & | &符号 | & |
& |
| " | 双引号 | " |
" |
| x | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
HTML5的备忘录
HTML5是现在前端开发人员必备技能。
HTML本来不会活过21世纪的。网页规范的制定者W3C组织，早在1998年就已经对HTML撒手不管了。W3C把未来都寄托在XHTML这个更具现代特色的后续规范上，XHTML被视为HTML的严肃整洁版，但XHTML举步维艰。当XHTML举步维艰的时候，有那么一群人(来自欧朋(OPera)/火狐(fireFox)/苹果(safari)的一些具有开发者自行组建了WHATWG(Web Hypertext Application Technology Working Group超文本应用技术工作组))开始寻找新的解决方案，这就奠定了HTML5的的前身。
HTML5诞生于2004年
HTML5的规范正式公布于2014年
首先是HTML5的结构
-
文档类型声明
<!DOCTYPE HTML> //相比于html4除去了约束和版本号
SGML HTML XML 之间有什么关系？
SGML:（标准通用标记语言）
SGML 是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。
现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，
例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。
XHTML创建于XML，他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD
总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML
因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，
用来定义用于解析目标DTD
HTML5:（超文本标记语言）
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，
这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
XHTML
xhtml与html严格意义上其实没什么区别，xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的，
因为xml的解析语法过于苛刻，简单一句话就是：只要网页中出现一处错误，则浏览器停止解析。
XML:（可扩展标记语言）
自定义XML+XSLT=>HTML，最常见的文档型应用之一。XML存放整个文档的XML数据，然后XSLT将XML转换、
解析，结合XSLT中的HTML标签，最终成为HTML，显示在浏览器上。典型的...
xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
Canvas和SVG 异同
相同:
1 都是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具
2 这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，
可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准
3 都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点
不同:
1 Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
2 Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。
绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
3 Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p
空元素：<br> <hr> <img> <link> <meta>
页面导入样式时，使用link和@import有什么区别？
1）link属于XHTML标签，而@import是css提供的；
2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
4）link方式的样式的权重高于@import的权重。
html5 新增和移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性，新增元素：
1）内容元素：article、footer、header、nav、section
2）表单控件：calendar、date、time、email、url、search
3）控件元素：webworker，websockt，Geolocation
移除元素：
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
处理兼容问题有两种方式：
1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2）使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。
如何区分 HTML 和 HTML5？
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，遵守dtd约束
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而HTML5却只有简简单单的声明，方便记忆。只需要DOCTYPE来规范浏览器的行为
<!DOCTYPE html>
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
html5有哪些新特性
canvas(画布)
audio 定义音频内容
video 定义视频（video 或者 movie）
地理定位
web存储 :localStorage
拖拽控制: draggable="true" 使元素可拖动，把 draggable 属性设置为 true ：
表单
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。
请解释一下什么是语义化的HTML。
1 含义:内容使用特定标签，通过标签就能大概了解整体页面的布局结构（在什么情况下我可以使用这个标签才合理）
2 为什么使用语义化标签?
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有css样式情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3 html语义标签
p 段落
strong和em 加粗 (但strong字面含义更强 推荐 见名知意 也是语义化标签的含义之所在)
ul 有序列表用
ol 无序列表用...
4 html5 新增语义话标签
1)header(页眉): 标签:定义文档的页面组合，通常是一些引导和导航信息
2)footer(页脚): 标签:定义 section(章节) 或 document 的页脚。
3)nav(导航): 标签:导航链接放在nav标签里。
4)article(文章): 装载显示一个独立的文章内容 内层的artilce对外层的article标签有隶属的关系
<article>
<h1>文章标题</h1>
这是一篇文章
<article>评论1...</article>
<article>评论2...</article>
</article>
5)section(章节): 使用内部article去定义区域或者把分组内容放到区域里
<section>
<h1>章节一</h1>
<p>详细内容...</p>
</section>
<section>
<h1>章节二</h1>
<p>详细内容...</p>
</section>
6)mark(标记): 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签....
7)<aside>：代表页面的侧边栏内容
总结:1 让对方知道你清楚语义化标签含义
2 让对方知道你清楚为什么用语义化标签
5 让对方知道你了解html5新增了一些语义化标签(举几个语义化标签就行不用全说 因为实际开发也不一定用 )
是否是新手 回答问题就能听出来 新手问啥答啥 老鬼 会测出一堆相关问题 这也是他们为什么能聊那么长时间
DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?
1）<!Doctype>作用是告诉浏览器 我的html使用的那个版本的html协议写的 让浏览器按照声明的协议执行
2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3）混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
iframe有那些缺点？
iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的复用性。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，
会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，
所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
总结:分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。
常见兼容性问题？
1）png24位的图片在IE6浏览器上出现背景；
解决方案是：做成PNG8；
2）浏览器默认的 margin 和 padding 不同。
解决方案是：加一个全局的*{margin:0;padding:0;}来统一。
3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
浮动IE产生的双倍距离 #box{float:left;width:10px;margin:0 0 0 100px;}
这种情况下IE6会产生200px的距离。
解决方法：加上_display：inline，使浮动忽略
4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
使用获取常规属性的方法来获/取自定义属性：getElementbyId("#box").Attributes["属性名"]
Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性。
5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none;解决
7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；
解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
支持HTML5新标签
1)IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；
2)当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，
这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行
document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
简述一下src与href的区别：
href: <link href=”common.css” rel=”stylesheet”/>
是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src: <script src =”js.js”></script>
是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，
例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，
直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
这也是为什么将js脚本放在底部而不是头部。
浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko内核
Safari：webkit内核 (苹果浏览器)
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
HTML5 中如何嵌入音频？
HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：
<audio controls>
<source src=”jamshed.mp3″ type=”audio/mpeg”>
Your browser does’nt support audio embedding feature.
</audio>
HTML5 中如何嵌入视频？
HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
<video width=”450″ height=”340″ controls>
<source src=”jamshed.mp4″ type=”video/mp4″>
Your browser does’nt support video embedding feature.
</video>
HTML5 存储类型有什么区别？
HTML5 能够本地存储数据，在之前都是使用 cookies。
HTML5 提供了下面两种本地存储方案：
localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
HTML5 标准提供了哪些新的 API？
HTML5 提供的应用程序 API 主要有：
Media API
Text Track API
Applocation Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie:
Cookie是在你浏览网页的时候，网站服务器放在客户端（Client End，就是你的电脑）里面的一个小小的TXT文件。
这个文件里面存储了一些与你访问的这个网站有关的一些东西，当你下一次访问这个网站的时候，
Cookie就会记住你上次访问时候的一些状态或者设置，让服务器针对性的发送页面的相关内容。
Cookie里面包含的信息并没有一个标准的格式，各个网站服务器的规范都可能不同，但一般会包括：
所访问网站的域名（domain name），访问开始的时间，访问者的IP地址等客户端信息，访问者关于这个网站的一些设置等等
sessionStorage:
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
localStorage:
用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别:
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，
并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便 cnd：服务器
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
img的alt与title有何异同？ strong与em的异同？
alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，
并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
优雅降级: 观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，
并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”
的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强: 观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。
这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在
知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
介绍一下 CSS 的盒子模型？
1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）
可继承的样式：
font-size font-family color, UL LI DL DD DT
不可继承的样式：
border padding margin width height
载入样式以最后载入的定位为准;
优先级为: !important > id > class > tag ； important 比 内联优先级高
如何居中div？
给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200px; margin:0 auto; }
如何居中一个浮动元素？
确定容器的宽高 宽500 高300的层，设置层的外边距(走自己的一半 1/2宽高)
.div{width:500px;height:300px;margin:-150px 0 0 -250px;
position:relative;background:green；left：50%；top：50%}
css3有哪些新特性？
CSS3 实现圆角（border-radius:8px;），
阴影（box-shadow:10px）,
对文字加特效（text-shadow）,
线性渐变（gradient），
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜
增加了更多的 css 选择器 多背景 rgba
display:inline-block 什么时候会显示间隙？
display:inline-block布局的元素在chrome下会出现几像素的间隙，
原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，
即inline-block布局的元素在编辑器里不在同一行，即存在换行符，
因此这就是著名的inline-block“换行符/空格间隙问题”。
如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。
如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。
1.给 li 写font-size:0
2.把li标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，
适用与例如<a></a><a></a>这样简单的结构
3.把li的标签改成这样的写法
<li>
<span>...</span>
</li><li>
<span>...</span>
</li>
移除空格，使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing
什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括
元素的内容（content）
元素的内边距（padding）
元素的边框（border）
元素的外边距（margin）
四个部分。
box-sizing: border-box;/*无论是加 border 还是padding 盒子的总体大小都不会改变*/
这四个部分占有的空间中，有的部分可以显示相应的内容，
而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
px和em的区别
px: 的值是固定的，指定是多少就是多少，计算比较容易。
em: 得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。
所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
rem: 是相对于根元素文字大小的一个尺寸单位；
例如：html{font-size：50px;} div{font-size:0.5rem;}/*div中字体大小为：25；
rgba() 和 opacity的透明度效果有什么不同?
opacity作用于元素, 以及元素内所有的内容.
raba()只作用与元素的颜色或背景色(子元素不会继承透明度效果)
css设置dom元素不显示浏览器可视范围
基本方式:
1 display:none
2 visibility:hidden
技巧性:
3 宽高0
4 透明度0
5 z-index:-100
6 定位出浏览器可视范围
行内node与块级node区别 行内node是否可以设置padding和maring
行内:display:inline 同站一行
宽高 内外边距的top/bottom都不可以设置, 但是 内外边距的left/right可以设置
块级:display:block 独占一行 可以设置 可以设置宽高 内外边距...
行内块:inline-block 拥有内在尺寸 可设置宽高 单依然不会自动换行
行内快标签: input,img,button,texterea,label
去除a标签跳转效果
<a href ="javascript:return false;">这个链接不能点击 </a>
<a href ="javascript:volid(0);">
css那些属性可以继承
可以: font-size, font-family, color, ul, li, dl, dd, dt
不行: border, padding, margin, width, height
css优先级算法如何计算
!important > id > class > 标签
!important 比 内联优先级高
*优先级就近原则 样式定义最近者为准
*以最后载入的样式为准
1：直接设置 color：red;
2：十六进制方式 color：#00ff;
3: rgb设置 color：rgb(0-255,0-255,0-255); red green blue
4: rgba color:rgba(0-255,0-255,0-255,0-255,0.1);
css有3种书写方式
1 ：外联式：：新建css 内部引用 <link href="css 文件路径" rel=""> （主要写法 推荐）
1）：该写法影响范围比较广，整个站点
2）：完全实现了html结构与样的分离（代码可维护性比较好）
2 ：内嵌式 ：在头部的style 中书写
1）：只会影响当前页面样式的改变
2）：没有实现html结构与样式的完全分离
3 ：行内式写法 ：直接在标签内些style
1）：影响只有当前标签
2）：没有实现html结构与样式的分离
css的特性：
1 层叠行： 当同一个标签（权重一样）的样式发生冲突的时候，最后定义的样式会将前面定义的样式覆盖掉（层叠性）。
与样式定义的顺序有关，和样式调用的顺序无关
2 继承性：标签之间的关系属于嵌套关系 可以被继承的属性：有关文字的相关属性都可以被集成 如 颜色 大小 行高 字体
注意：1 a标签不能直接使用父元素中的文字颜色。
2 标题标签不能直接使用父元素中的文字大小。
伪类 ：用来向选择器定义样式或添加特定的效果.常用的伪类还有focus nth-child等
1 a:link {属性: 值;} 设置a标签默认样式
2 a:visited {属性: 值;} 链接访问过后的样式
3 a:hover {属性: 值;} 鼠标移动到超链接上的样式
4 a:active {属性: 值;} 链接激活状态下的样式
注意:link :visited :hover :active（L oVe H A te顺序）爱 与 恨
(顺序书写) 可以解决 a标签在四种状态中出现的小问题
5 a:focus{属性: 值;} 获取光标焦点的样式
6 :first-child 向元素的第一个子元素添加样式
7 :last-child 向元素的最后一个子元素添加样式
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素；
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素；
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素；
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素；
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素；
:enabled :disabled 控制表单控件的禁用状态；
:checked 单选框或复选框被选中。
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）：
输入地址
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
10.浏览器发送异步请求
Overflow的用法
1 overflow：hidden 将超出盒子部分的内容隐藏
2 overflow：scorll 添加滚动条
3 overflow：auto 自适应
定位(position) : 定位的元素常与具体的方位名称配合使用 left top right bottom
1 静态定位(static)
页面中的标准流下的盒子，都是静态定位的盒子
2 绝对定位(absolute) （看脸型） ---- 脱标------ 不占位 ----- 实现模式转换
1 父元素没有设置定位，子元素设置绝对定位，子元素是以浏览器左上角为基准设置定位。
2 父元素设置了定位，子元素设置绝对定位会以父元素左上角为基准设置定位
3 元素设置了绝对定位后，该元素不占位置（脱离标准流）
4 绝对定位可以实现模式转换
3 相对定位 (relative) （自恋型）---- 未脱标------ 占位 ----- 不能实现模式转换
1 如果一个元素设置了相对定位，那么该元素会以自己原来的位置为基准设置定位
2 设置了相对定位的元素，该元素占位置（没有脱标）
3 设置了相对定位的元素，不能实现模式转换
4 一般情况下，设置子绝父相
4 固定定位(fixed) ---- 脱标------ 不占位 ----- 实现模式转换
1 设置了固定位的元素 只会看浏览器的左上角
2 设置了固定位的元素 脱离了标准流 不占位置
3 固定定位的元素实现了模式转换
Z-index(层级)
1 元素与元素之间的层级关系
2 在css2中，只有定位的元素才有z-index
3 默认情况下，定位的元素z-index的值auto (0) Z-index可以取正数还可以取负数。
特点:
1 如果两个元素都设置了定位，那么后面定位的元素会覆盖前面定位的元素（后来居上）
2 如果想让一个盒子压另一个盒子，可以设置z-index值。
3 如果元素的父元素设置了z-index值，那么程序会以父元素的z-index值为准
vue生命周期钩子
1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed
js跨域请求的方式，能写几种是几种
1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）
5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求
对前端工程化的理解
开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具
js设计模式
总体来说设计模式分为三大类：
创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模
iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
css容易混淆属性
text-indent: 2em; /* 设置首行缩进两个汉字 Logo优化内容移除*/
text-align: center; /* text-align给块级元素设置，其文本会水平居中 */
text-decoration: none; /*去掉下划线*/
font-style: italic ; /* 文字斜体显示*/
font-weight: 700; /* 文字加粗显示*/
line-height: 20px; /* 设置文字的行高*/
line-break: normal; /*应用日文文本的默认换行规则*/
list-style: none; /* 去除列表前面的图标*/
disabled:true; /*禁用文本框*/
disabled:false; /*解禁文本框*/
outline-style: none; /* 去掉输入框的默认轮库线*/
overflow: hidden; /*1 触发元素的bfc(格式化上下文) 解决外边距塌陷问题
2 将多余部分隐藏 可设置 水平 垂直方向的如 ： overflow-x: hidden; overflow-y: hidden;
3 给父元素这是 可以清楚浮动
* * */
overflow: auto; /*给添加滚动条 可设置水平 */
overflow：hidden； /*超出的部分隐藏 */
visibility：hidden； /*元素隐藏 该属性隐藏元素后，元素占位置*/
display：none: ; /*元素隐藏 隐藏元素不占位置*/
display: block; /*显示元素*/
display: inline; /* 转化为 行*/
display: block; /* 转化为 块*/
vertical-align: baseline /*只对img/img4和表格起作用*/
vertical-align: middle; /*垂直居中对齐*/
border-collapse: collapse; /* 合并边框 与 表格属性中的 cellspacing="0" 一样*/
white-space: nowrap; /*将行内快元素在一行上显示*/
备注：
前端的路上我们一起携手共进！如果转载，请标注本链接地址。
网友评论