前端面试必备基本知识点--HTML5篇

HTML篇

HTML5新增的标签有那些

答案解析：

• 内容元素:header、footer、section、aside、nav、section
• 表单控件：datalist、color、date、time、email、search
• 多媒体元素：audio、video、embed
• 控件元素：websoket、webworker

怎么理解语义化标签，有什么好处

答案解析：

语义化的html就是让正确的标签做正确的事情，能够便于开发者阅读和写出更加有效的代码，以及有利于SEO优化，让网络爬虫更好的解析。

• 在没有css的时候也能够清晰的看出网页的结构，增强可读性
• 有利于SEO,有利于搜索引擎爬虫更好理解我们页面，从而获取到更多有效信息，提示网页的权重
• 便以团队之间的开发维护，语义化的html更加易于阅读

html文件在不同的浏览器的差异

答案解析：

相同的代码在不同的浏览器可能表现出来的样式有差异的原因就是：浏览器的渲染引擎，（浏览器内核包括两个部分：渲染引擎和JS引擎），去负责解析网页语法、渲染绘制页面。常见的差异有：

• 不同浏览器的标签默认的margin、padding不同
• 有些浏览器图片的默认有间距
• 在有些浏览器中块级属性标签float后，又有横向margin情况下，ie6的margin更大
• 设置最小高度min-height(小于10px),在ie6、ie7、遨游高度会超出设置的高度

web worker是什么？适用在什么场景

答案解析：

当我们使用 web worker 去new出的一个对象相当于是在页面上的一个子线程，它可以用来去执行一些容易阻塞进程、消耗时间的复杂运算的代码。其产生的原因是因为 我们都知道浏览器js的执行是单线程，页面上的js的执行会阻塞到浏览器的响应，非常影响到用户的体验，由此我们就提出js的事件循环机制，异步请求数据等解决方案，但是在实质上也没有改变单线程执行本质，而web woker的出现就解决了这个·问题，但是也不是等同于后台意义的多线程，本质是让我们将数据刷新和页面渲染两个动作拆开执行。

使用场景

• 需要大量数据计算时，可以解决js在处理数据导致UI渲染阻塞的问题

 onmessage() 属性 //来绑定开始工作需要执行的函数
 postMessage() //来停止工作

canvas和svg的区别

答案解析

两者都是用于浏览器绘制图形的，但是两者的本质不同。

canvas

• 由js所绘制的2D图形，是逐像素进行渲染的，所以也十分依赖分辨率
• 一旦位置发生变化、则引发重绘
• 不支持事件处理器
• 能够以.png 或者.jpg的格式保存图像

svg

• 由xml所绘制而成的2D图形，svm的dom中的每个元素都是可以附加js事件处理器
• 每个svm图形都是可以看做是对象，某些属性发生变化也能重现图形
• 不支持分辨率

什么是

答案解析：

DOCTYPE是HTML网页的一个标准，必须处在HTML文档的第一行，告知浏览器的解析器用什么文档标准解析；

• 怪异模式：浏览器按照自己的模式进行解析渲染页面
• 标准模式：浏览器按照w3c的标准进行解析渲染

meta标签

答案解析：

提供页面一些元信息（名称/值对），添加一些核心关键词， 有利于seo搜索引擎优化。提供的属性有name、content、http-equiv、scheme.其中name可以取的值有：autor、description、keywords，对应内容在content填充；http-equiv可以取到的值有：set-cookie、content-type、expirse、refresh

src和href的区别

答案解析：

• src:是指外部资源的位置，指向的内容会嵌入到文档标签所在的位置，请求src指向的资源会将其下载并应用到文档内，例如js文件、img等，浏览器在加载的过程中也会暂停执行其他资源的下载和处理。直到将该资源加载、编译、执行完成。
• href:是指向网络资源所在位置，一般用于锚点和链接之间的连接，一般使用在超链接

defer和async的区别

答案解析：

• defer：表示后续文档的加载和渲染与js脚本的加载是并行进行的（异步），js的脚本执行是需要等到文档所有元素解析完成之后，DOMContentLoaded之前。（加载异步，执行同步）
• async: 表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行。 （加载与执行都异步）

window.load 和DOMContentLoaded的区别

DOM完整的解析过程

1、 解析HTML结构
2、 加载外部脚本和样式表文件
3、 解析并且执行脚本代码 //js文件
4、 DOM树构建完成  //DOMContentLoaded
5、 加载图片等外部文件
6、 页面加载完毕 //load

触发情况：

1. 当onload 事件触发，页面上的dom、样式表、脚本、图片都以及加载完
2. 当DOWContentLoaded 事件触发时，仅当dom加载完成。

对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现、行为。其中结构由HTML标签组成；表现则是由css样式表组成；行为则是指页面和用户具有一定的交互，同时使得页面结构或者b表现发生变化，即为js组成。

web标准将三部分独立分开，使其模块化。但是有结构或者表现变化则使得三者界限不清晰，所以这个时候就提出了W3C，对web标准提出了规范化的要求：

1. 标签闭合、标签字母小写、不乱嵌套，提高搜索机器人搜索机率。
2. 使用外链css和js脚本。是结构、表现、行为分为三块，符合规范，同时也能提高页面渲染速度，提升用户体验。
3. 样式也要尽量少用行间样式，使得结构与表现分离，标签id和class的命名尽量见文知义，使得代码维护更加简单。

用过到的浏览器内核讲一下

浏览器内核分为两部分：渲染引擎和JS引擎

• 渲染引擎：负责获取网页内容，以及计算网页显示方式，浏览器内核不同对于网页的语法解释也是不同，所以渲染结果会有差异。
• JS引擎：解析和执行js来实现网页的动态效果。

浏览器对应的内核

• IE: trident内核
• Firefox : gecko内核
• Safari ： webkit内核
• Chrome : Blink（基于webkit）

iframe的优缺点以及应用场景

iframe标签是框架的一种形式，创建包含另一个文档的内联框架，用来包含别的页面的。

优点：

• iframe可以把嵌入网页原样展现出来
• 实现模块分离，便于更改，并且提高代码的可重用性
• 重载页面时不会重载整个页面

缺点：

• 样本和脚本需要额外链入，增加页面额外请求次数
• 代码复杂，会不利于搜索引擎解读，影响到搜索引擎优化，不利于网站排名
• 多数小型移动设备无法完全显示框架，设备兼容性较差
• iframe阻塞页面加载，影响网页加载速度

应用：

• 跨域通信：document.domain + iframe 的设置
• 使用HTML5的postMessage，然后在目标窗口接收数据

  targetWindow.postMessage(data, targetOrigin) //data为需要传递的数据
  window.addEventListener('message',function(evt.data){
      // doing 
  }, false) //evt.data 为传递过来的数据

了解过websocket吗

答案解析：

websocket协议为web应用客户端和服务端之间提供全双工通信 持久化协议，和http都协议同属于应用层

特点如下：

• 服务端可以主动向客户端推送信息，客户端也可以向服务端发送信息，实现真正的平等对话，属于服务器推送的一种
• 没有同源限制
• 数据格式比较小，性能开销小，通信十分高效
• 与http协议有着很好兼容性，在握手阶段也是采用http协议，默认端口也是80和443
• 协议标识符是ws

说下判断链表是否有环的思路

• 可使用哈希表存储每一个遍历过的链表的结点，每次遍历判断是否已经存过该的结点（hash存是因为查询速度比较快）
• 使用快慢指针，使用快指针走两步，慢指针走一步，如果存在环则一定会相遇

2、圣杯布局和双飞翼布局是什么？怎么实现的？

都是用来解决两边顶宽，中间自适应的三栏布局，中间栏放在文档流中并且优先渲染。

• 圣杯布局： 中间div设置padding,左右两边div使用浮动float:left 结合相对定位

    


    

        
我是中间部分
        
我是左侧部分
        
我是右侧部分
    

• 双飞翼布局： 中间div设置margin，并且创建子div用于放置内容

    



    

        

            
我是中间部分
        
        
我是左侧部分
        
我是右侧部分
    

参考链接

form表单详解

• form表单属性

属性	值	描述
accept	MIME_type	规定通过文件上传来提交的文件类型
target	_blank/_parent/_self/_top	打开url的方式
enctype		表单发送到服务器前的编码方式
method	get/post	表单发送请求的方式
action	url	表单发送的url

enctype的三个选项

1. multipart/form-data 默认不对字符编码，以二进制的方式发送数据，可用于文件上传
2. application/x-www-form-urlencoded 在发送前编码所有字符
3. text/plain 空格转换为'+',不对特殊字符编码

• form表单常用控件
  input的type类型

button、checkout、file、submit、hidden、reset、image

其中hidden是隐藏作用域，在用户页面是没有展示的，在表单中插入隐藏域目的是在于收集或者发送信息，在用户点击提交表单时，隐藏域的信息也被一起发送到服务器。

innerHTML 和 outerHTM区别

• innerHTML会获取从对象的初始位置到终止位置的全部内容，不包括html标签。
• outerHTML除了包括innerHTML之外的全部内容，还会包括对象标签本身