1、HTML5新增内容以及移除属性
语义标签：nav footer header section article aside等
各种类型的inpu：number time email 等
图画：canvas
存储：localstorage 和sessionstorage
音频audio和视频video
移除的：
具有样式的标签：如em等
还有iframe
2、XHTML和HTML5区别
1、XHTML 要求正确嵌套
2、XHTML 所有元素必须关闭
3、 XHTML 区分大小写
4、 XHTML 属性值要用双引号
5、XHTML 用 id 属性代替 name 属性
6、XHTML 特殊字符的处理
3、文档开头的声明有什么用
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
HTML5规范：<!DOCTYPE html>
4、各种节点的操作
节点的创建:document.createElement(tagName)
将创建的节点，追加到某个父节点下:父节点.appendChild(elementObj)
移除某个节点：父节点.removeChild(elementObj)
替换某个节点：父节点.replaceChild(elementObj)
在父节点中，将新节点插入到目标节点之前：父节点.insertBefore(新节点,目标节点)
克隆一个节点:源节点.cloneNode(true)
传入true表示克隆源节点以及源节点的所有子节点；
传入false或不传，表示只克隆当前节点，而不克隆子节点。
查看属性节点：.getAttribute("属性名");(可用来设置属性)
设置属性节点：.setAttribute("属性名","属性值");
注意事项：.setAttribute() 在老版本IE中会存在兼容性问题，可以使用.符号代替。
【查看/设置文本节点】
.innerHTML: 取到或设置一个节点中的HTML代码。
.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。
层次节点操作
.childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
.children： 获取当前节点的所有元素子节点（不包含文本节点）
.parentNode: 获取当前节点的父节点。
.firstChild： 获取第一个子节点，包括回车等文本节点；
.firstElementChild： 获取第一个元素节点。 不含文本节点
.previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
.attributes: 获取当前节点的所有属性节点。 返回数组格式。
5、行内元素和块级元素有哪些？空元素有哪些？
行内元素：span button input textarea img a
块级元素：div form table h1 h2 h3 ul li dl
常见的空元素： <br> <hr> <img> <input> <link> <meta>
6、页面导入样式时，使用link和@import有什么区别？
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。(link不阻塞页面加载 @import阻塞)
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
7、浏览器常见内核
IE：Trident
safari:webkit
chrome:webkit->Blink
firefox:Gecko
8、对HTML语义化的理解
简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
10、请描述一下cookies，sessionStorage和localStorage 的区别？
https://www.cnblogs.com/pengc/p/8714475.html
image.png
11、页面的onload事件和jQuery的事件的区别
window.onload比jQuery的onready后执行，onload是在所有资源包括图片资源加载完成之后执行。而onready在DOM结构绘制完毕后就执行，不必等到加载完毕。
onload只执行最后一个而onready可以执行多个。
编写个数不同：window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。 $(document).ready()可以同时编写多个，并且都可以得到执行
12、iframe有那些缺点？
*会产生很多页面，不容易管理。
*代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
*很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
*iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
13、Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
14、如何实现浏览器内多个标签页之间的通信?(阿里)
①调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。
②cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
15、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。
https://www.jianshu.com/p/7e11c1f32a48
16、div+css 的布局较 table 布局有什么优点？
*table标签被严格地定义为存放数据的一个区域，而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。
*table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。
*table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。
*table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。
*div+css布局方便SEO 而table不利于
17、简述一下 src 与 href 的区别。
src用于替换当前元素就是要将元素下载下来，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内
href用于在当前文档和引用资源之间确立联系相当于建立一个快捷方式。页面解析到这里的时候就会并行下载资源并且不会停止对当前文档的处理
18、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新技术，新鲜事物）
科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。 Facebook、Ebay 等知名网站已经开始测试并使用 WebP 格式。
在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%
19、盒模型
ie盒模型：width = width+padding+margin+border（我常用的）
标准盒模型：width = width(不包括padding margin border)
可使用border-sizing来设置
20、为什么要初始化样式？
21、BFC 是什么?（Block Formatting Context），会形成bfc的哪些元素
BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。
在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题
BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用
哪些元素会生成BFC？
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
23、js获取元素属性 包括内联的样式 以及IE
获取内联样式：odiv.style.width
获取非内联样式：
ie浏览器： oDiv.currentStyle[attr];
非ie浏览器：getComputedStyle(oDiv, false)[attr];
网友评论