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>
答案解析：
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
触发情况：
- 当
onload事件触发，页面上的dom、样式表、脚本、图片都以及加载完 - 当
DOWContentLoaded事件触发时，仅当dom加载完成。
对WEB标准以及W3C的理解与认识?
web标准简单来说可以分为结构、表现、行为。其中结构由HTML标签组成；表现则是由css样式表组成；行为则是指页面和用户具有一定的交互，同时使得页面结构或者b表现发生变化，即为js组成。
web标准将三部分独立分开，使其模块化。但是有结构或者表现变化则使得三者界限不清晰，所以这个时候就提出了W3C，对web标准提出了规范化的要求：
- 标签闭合、标签字母小写、不乱嵌套，提高搜索机器人搜索机率。
- 使用外链css和js脚本。是结构、表现、行为分为三块，符合规范，同时也能提高页面渲染速度，提升用户体验。
- 样式也要尽量少用行间样式，使得结构与表现分离，标签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结合相对定位
<!DOCTYPE html>
<html>
<head>
<style>
.middle {
float: left;
height: 300px;
width: 100%;
padding: 0px 200px;
}
.left {
float: left;
height: 300px;
width: 300px;
position: relative;
margin-left: -100%;
left: -300px;
}
.right {
float: left;
height: 300px;
width: 300px;
position: relative;
margin-right: -300px;
right: -300px;
}
</style>
</head>
<body>
<div class='box'>
<div class='middle'>我是中间部分</div>
<div class='left'>我是左侧部分</div>
<div class='right'>我是右侧部分</div>
</div>
</body>
</html>
- 双飞翼布局： 中间div设置margin，并且创建子div用于放置内容
<!DOCTYPE html>
<html>
<head>
<style>
.center {
float: left;
width: 100%;
height: 300px;
}
.middle{
margin:0px 300px;
height: 300px;
}
.left {
float: left;
height: 300px;
width: 300px;
margin-left: -100%;
}
.right {
float: left;
height: 300px;
width: 300px;
margin-right: -300px;
}
</style>
</head>
<body>
<div class='box'>
<div class='center'>
<div class='middle'>我是中间部分</div>
</div>
<div class='left'>我是左侧部分</div>
<div class='right'>我是右侧部分</div>
</div>
</body>
</html>
form表单详解
- form表单属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | 规定通过文件上传来提交的文件类型 |
| target | _blank/_parent/_self/_top | 打开url的方式 |
| enctype | 表单发送到服务器前的编码方式 | |
| method | get/post | 表单发送请求的方式 |
| action | url | 表单发送的url |
enctype的三个选项
-
multipart/form-data默认不对字符编码，以二进制的方式发送数据，可用于文件上传 -
application/x-www-form-urlencoded在发送前编码所有字符 -
text/plain空格转换为'+',不对特殊字符编码
- form表单常用控件
input的type类型
button、checkout、file、submit、hidden、reset、image
其中hidden是隐藏作用域，在用户页面是没有展示的，在表单中插入隐藏域目的是在于收集或者发送信息，在用户点击提交表单时，隐藏域的信息也被一起发送到服务器。
innerHTML 和 outerHTM区别
-
innerHTML会获取从对象的初始位置到终止位置的全部内容，不包括html标签。 -
outerHTML除了包括innerHTML之外的全部内容，还会包括对象标签本身
