一.页面导入样式时，使用link和@import有什么区别？
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。
二.HTML全局属性(global attribute)有哪些（包含H5）？
全局属性：用于任何HTML5元素的属性
accesskey:设置快捷键
class:为元素设置类标识
contenteditable:指定元素内容是否可编辑
contextmenu:自定义鼠标右键弹出上下文菜单内容（仅firefox支持）
data-*:为元素增加自定义属性
dir：设置元素文本方向（默认ltr；rtl）
draggable:设置元素是否可拖拽
dropzone:设置元素拖放类型（copy|move|link,H5新属性，主流均不支持）
hidden:规定元素仍未或不在相关
id:元素id，文档内唯一
lang:元素内容的语言
spellcheck:是否启动拼写和语法检查
style:行内css样式
tabindex:设置元素可以获得焦点，通过tab导航
title:规定元素有关的额外信息
三.HTML5的文件离线储存怎么使用，工作原理是什么？
原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
怎么用：
首先，在html页面头部加入一个manifest的属性:
然后书写cache.manifest文件：
四. 简述超链接target属性的取值和作用
_blank:打开一个全新窗口并显示内容
_parent:在上一级的窗口显示内容
_self:在原来的窗口显示内容
_top:在浏览器的整个窗口显示内容，忽略掉所有的框架结构
五. label都有哪些作用？并举相应的例子说明
label通常用来关联一个表单控件
单击关联标签激活input，需给input一个id属性，给label一个for属性，设为同一个值
六.iframe框架都有哪些优缺点？
优点：重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
技术易于掌握，使用方便，可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
缺点：会产生很多页面，不容易管理
对浏览器搜索引擎不友好
多框架的页面会增加服务器的http请求
七.浏览器内多个标签页之间的通信方式有哪些？
1.借助 cookie, localStorage(sessionStorage 在某些场景下并不能跨标签，必须要原页面的 a 标签的 target=_blank 才行)。这些只要在同一个域名下就可以进行通信和数据的共享
2.借助 window.postMessage API 来进行消息的传递
八.常见的浏览器内核都有哪些？
目前主流的内核有以下 4 个：
Trident: 由微软开发，即我们熟知的 IE 内核
Gecko: 使用 C++ 开发的渲染引擎，包括了 SpiderMonkey 即我们熟悉的 FireFox
Presto: Opera 使用的内核
Webkit: 前端使用最多的 Chrome 和 Safari 使用的内核
九.为什么HTML5只需要写就可以？
因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML 因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写，就完全让浏览器自我发挥，会变成怪异模式。
HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 来规范浏览器的渲染行为。
十.title与h1的区别、b与strong的区别、i与em的区别？
title 是 网页标题标签
h1 是文本标签 默认与word的h1相似为最大的标题显示
b 为文本加粗标签 与word的加粗功能相似
strong 为强调语气， 也是为文本加粗 与b标签是有不同
i 标签为斜体 常用于阿里图标 和图片
em 标签为 斜体 用于文本斜体较多
十一.元素的alt和title有什么区别？
alt属性定义了图像的备用文本描述，只能用在、和元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。alt是替代图像作用而不是提供额外说明文字的。使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
title是全局属性，可以用在所有HTML元素上，包含了表示咨询信息文本，和它属于的元素相关。把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。
十二.你认为table的作用和优缺点是什么呢？
优点：特定的布局时，可以很块完成布局。
缺点：结构比较繁杂，相对于目前比较流行的布局来讲。如flex，div+css，grid等
作用：以前用来布局和展示表格，现在一般只用来展示表格
十三.说说你对html中的置换元素和非置换元素的理解
置换元素（Replaced Element）
简单来说，置换元素可以设置宽 高,他们有自己的属性，和inline-block有一样的属性
主要是指 img、input、textarea、select、object 等这类默认就有 CSS 格式化外表范围的元素。
浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如：浏览器根据标签的src属性显示图片。根据type属性决定显示输入框还是按钮
非置换元素（non-Replaced Element）:
就是除了 img、input、textarea、select、object 等置换元素以外的元素。
内容直接展示给浏览器。例如标签，标签里的内容会被浏览器直接显示给用户
十四.请描述HTML元素的显示优先级
在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
表单元素:
文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等
非表单元素
链接（a），div, table, span 等等
有窗口元素比无窗口元素的优先级高
有窗口元素
select元素，object元素，以及frames元素等等
无窗口元素
大部分html元素都是无窗口元素
十五.谈谈你对input元素中readonly和disabled属性的理解
相同点：都会使文本框变成只读，不可编辑。
不同点：
1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。
2.disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！
3.disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。
十六.js放在html的和有什么区别？
浏览器解析html从上往下执行，放在head先执行js了，会造成dom树还没有生成就执行js。
十七.关于标签的enctype属性你有哪些了解？
application/x-www-form-urlencoded(也是默认格式)
application/x-www-form-urlencoded编码类型会将表单中发送到服务器之前都会进行编码(空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值)，数据编码成键值对的形式，当表单的action为post时，它会把form数据封装到 http body 中，然后发送到服务器；当表单的action位get时，它会把表单中发送的数据转换成一个字符串(如：a=1&b=2&c=3)并使用?连接到 url 后面。在不指定 enctype 属性时 application/x-www-form-urlencoded 是默认属性。
multipart/form-data
它不对字符进行编码，在使用包含文件(如图片、mp4等文件)上传控件的表单时必须使用该值
text/plain
数据以纯文本格式进行编码，空格转换为 “+” 加号，但不对特殊字符编码
十八.说说你对属性data-的理解
data- 属性是H5新增的自定义属性，也可以用来存储值。我个人用的不多，这个data- 属性倒是和vue中的v-bind 功能相似， 自定义属性，绑定数据。也和上面说的一样可以通过js进行获取使用
十九.
请说说<script>、<script async>和<script defer>的区别
<script> : 加载的时候是同步的会阻塞后面代码的执行，加载立即执行。
<script async>: 异步加载，加载和执行是并行的。
<script defer>: 异步加载，需等到所有文档加载完才执行。
二十.解释下你对GBK和UTF-8的理解？并说说页面上产生乱码的可能原因
GBK 是中国的中文字符，包含了简体汉字和繁体汉字。而 UTF-8 表示了全球国家通过的一种编码，如果需要做多语言或者国际化的时候，最好采用 UTF-8 来进行编码。
由于 UTF-8 包含了多种语言，也因此其占用的空间会比较大一些。
而网页产生乱码往往是因为编码与解码不匹配造成的。一般我们会在 标签中的 content 设置 charset 来决定网页采用的编码。如果引用的文件为其他格式，则会出现无法解释或者解释不对的字符，即乱码问题。
二十一.说说你对标签的理解
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。
Meta ： 即 **元数据（Metadata）**是数据的基本信息。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以我们称之为“ 元数据 ”。
二十二.网页上的验证码是为了解决什么问题？
防止机器行为，确定是人为操作，比如登陆、发帖等。
保护服务器，比如12306买票的时候，各种抢购的时候。
二十三.DOM和BOM有什么区别？
DOM 是 Document Object Model 的缩写。即文档对象模型，遵循 W3C 制定的标准。其本质就是 DOM 元素。
我们最早使用的 document.getElementById 获取到的对象就是 DOM 对象。利用 JS 操作某个 DOM 的颜色、形状、大小都是对 DOM 元素的操作。
在代码上可以理解为 document 开头的方法和属性。
BOM 是 Browser Object Model 的缩写。即浏览器对象模型，这并没有一套规定标准，每个浏览器都有自己的实现。但事实上在大部分主要的功能上都已经形成默契。
BOM 主要操作浏览器的行为，比如 navigator,location,history,storage 都为 BOM 的操作。其根对象是 window，可以理解为 winodw 开头的方法。
借用一张图片来表示 DOM 和 BOM 的关系就是，DOM 在 BOM 之内。
二十四.html和html5有什么区别呢？
H5定义html标签是简化了许多
增加了许多语义化的标签，从而更利于seo
增加了许多新功能，如canvas、video、SVG
二十五.Standards模式和Quirks模式有什么区别？
最大区别还是盒模型的解释吧
标准盒模型：元素实际宽度=margin2+border2+padding2+width
怪异盒模型：元素内容宽度=width-margin2-border2-padding2
二十六.HTML与XHTML二者有不同
XHTML 标签必须关闭
XHTML所有标签必须小写
XHTML标签必须正确嵌套
二十七.说说你对cookie和session的理解
cookie是一种基于客户端（浏览器）的会话技术
特点：
cookie存储数据在客户端浏览器。
浏览器对于单个cookie的大小有限制(4kb) ，对同一个域名下的总cookie数量也有限制(20个)。
作用：
cookie一般用于存出少量的不太敏感的数据。
在不登录的情况下，完成服务器对客户端的身份识别。
session是服务端的会话技术，在一次会话的多次请求间共享数据，Session是保存在服务端的，有一个唯一标识，在服务端保存Session的方法很多，可以通过内存、数据库、文件都有，集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群。
特点：
session用于存储一次会话的多次请求的数据，存在服务器端。
session可以存储任意类型，任意大小的数据。
区别session与Cookie：
session存储数据在服务器端，Cookie在客户端。
session没有数据大小限制，Cookie有。
session数据安全，Cookie相对于不安全
二十八.html5都有哪些新的特性？移除了哪些元素？
新增特性
canvas
svg
video
drag & drop
localStorage/sessionStorage
语义化标签: header/nav/section/article/footer
input 类型: date/datetime/email/range
移除元素
applet
big
font
frame/frameset
二十九.xml与html有什么区别？
1.html不区分大小写，xml区分大小写
2.html可以没有闭合标签，xml必须有闭合标签
3.html可以拥有不带值的属性名，xml中所有的属性必须带值
4.html是用于显示数据，xml主要用于描述，存放数据
三十.说说你对WEB标准和W3C的理解与认识？
web标准指的是要符合ECMA和W3C的规范
W3C是对CSS、JS、XML、HTML等的规范和标准。为了更方便使用者和开发者
三十一.Form表单是怎么上传文件的？你了解它的原理吗？
简单来说就是把文件转化成字节流，然后使用http进行传输，后端接受后在把二进制转化成原先的文件格式。
在HTML表单中，可以上传文件的唯一控件就是。
当一个表单包含时，表单的enctype必须指定为multipart/form-data（表明表单需要上传二进制数据），method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。multiple="multiple"说明可以同时上传多个文件
也可以使用文件编码传输，可以把图片转化成base64格式然后进行传输，到了服务器之后直接解码base64
三十二.From表单提交时为什么会刷新页面？怎么预防刷新？
因为早期网页交互模型只能是浏览器提交数据给服务器，服务器做出响应重新返回一个页面，浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的 API，更没有前端路由管理的概念，所以表单提交跳转页面是广泛接受的方案。
不想刷新可以使用 JS 拦截 form 的 onsubmit 事件，阻止掉浏览器的默认行为，然后用 ajax/fetch 和后台交互。另一个偏方是使用 iframe 作为 form 的 target，不过 JS 处理方面不如让浏览器别管自己全手动发请求来得简单。
三十三.HTML5中新添加的表单属性有哪些？
新的form属性
autocomplete
novalidate
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
新的input属性
新类型：color，date，email，month，number，range，search，tel，time，week。
新属性：autocomplate，autofocus，list，placeholder
三十四.渐进式渲染是什么？
渐进式渲染指在做浏览器兼容时，先兼容最低版本，保证基本功能，然后再在高级浏览器上做优化
三十五.src、href、link的区别是什么？
使用的地方不同，src一般用于表示图片源，js源。 。href一般在标签中使用，表示跳转地址。link一般用于引入css。
三十六.什么是html的字符实体？
在HTML中，某些字符是预留的，这些预留字符必须被替换为字符实体.。 如： < >
三十七.写出html提供的几种空格实体
不换行空格
半角空格
全角空格
窄空格
零宽不连字
零宽连字
三十八.HTML5如果不写<! DOCTYPE html> ，页面还会正常工作么？
页面添加了<! DOCTYPE html>说明该页面采用了W3C标准，如果不加则页面会根据浏览器自身的解析标准来解析，这可能会导致页面在不同的浏览器呈现出不同的效果。
三十九.favicon.ico有什么作用？怎么在页面中引用？常用尺寸有哪些？可以修改后缀名吗？
作用：favicon 也叫收藏夹图标，我们经常从网页标签中看到这个图标，但它的作用往往不仅如此，favicon的存在能够让我们更加容易区分浏览器收藏夹中的内容。并且favicon 在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。
强烈推荐使用后缀名.ico，对浏览器的支持范围广，一个.ico文件可以同时满足多个尺寸的需求。
常用尺寸：1616 3232 48*48。
引用方法：
将图片 favicon.ico 放到 static 文件夹下 (用 vue-cli 搭建的Vue项目)
然后在 index.html 中添加：
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
四十.在a标签上的四个伪类执行顺序是什么？
link
hover
active
visited
四十一.说说你对HTML5的img标签属性srcset和sizes的理解？都有哪些应用场景？
sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel=“icon”)，才能使用该属性。
srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。可以适应不同屏幕，加载不同大小的图片。
四十二.HTML5的应用程序缓存与浏览器缓存有什么不同？
1.浏览器缓存针对单个文件,H5离线缓存针对整个应用
2.H5缓存断网还能用,浏览器缓存断网就用不了
3.H5缓存核心是applicationCache对象,浏览器缓存核心是cache-control
四十三.简述下HTML的快捷键属性是哪个？并举例说明有什么用？
accesskey属性目前是h5标准中的一个全局快捷键访问属性，通过在任意元素上注入accesskey属性值，在浏览器中触发相应的快捷键，即可实现对相应元素的focus或click；
四十四.在新窗口打开链接的方法是什么？那怎么设置全站链接都在新窗口打开？
1.通过设置target="_blank"即可实现链接在新窗口打开；
2.在head中为base元素设置target="_blank"即可为所有的链接设置默认的打开方式为新窗口打开；
四十五.a标签下的href="javascript:void(0)"起到了什么作用？说说你对javascript:void(0)的理解？
void关键字在js的含义为执行一个表达式，但不会返回任何值（即undefined）；因此void(0)语句相当于执行表达式0，然后不返回任何值；
综上，href="javascript:void(0)"的作用是点击链接后不发生任何行为，常用于阻止页面刷新或跳转
四十六.iframe的使用场景有哪些？
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。
四十七.举例说明你对ol和ul标签的区别？它们的运用场景分别是什么呢？
ol 为有序列表，ul 为无需列表。浏览器默认会给这两个加上不同的样式。ol 的列表前会添加序号；而 ul 的列表前则是圆点。我们可以通过 list-style-type 来改变样式。
ol 和 ul 有语义上的区别，对于确实有顺序关系的我们应该使用 ul。
四十八.请描述下元素的href和src有什么区别？
href 只是建立一个与目标地址的关系。比如 link,a。浏览器读到 href 的时候不会暂停解析（link 中由于是 CSS 相关，在生成 Render Tree 的时候可能需要等待）。
src 相当于把指定的资源潜入到标签中。因此需要有下载、编译、执行这个过程。在这个过程走完前，浏览器的页面加载和渲染会被暂停。因此才会有把 script 标签放到 body 最后、img 标签的 src 等页面加载后在替换成真正的 src（懒加载）等操作。
四十九.HTML5标准提供了哪些新的API？你有用过哪些？
两个选择器API
document.querySelector()
document.querySelectAll()
地理定位API
getCurrrentPosition()
多媒体API
<video></video>
<audio></audio>
拖放
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div draggable="true" ondragstart="drag(event)"></div>
文件
window.requestFileSystem()
XHR2
var xhr = new XMLHttpRequest();
xhr.open("POST", "@Url.Action("Upload")")
本地存储API
localStorage
sessionStorage
canvas
<canvas id="myCanvas" width="200" height="100">
svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
五十. Doctype有什么作用？你知道有多少种Doctype文档类型吗？
1、 Doctype的作用
文档类型声明，作用是防止浏览器在渲染html文档时，切换到我们称之为怪异模式（兼容模式）的渲染模式。
2、Doctype文档类型的种类
（1）在 HTML 4.01和XML 中有三种<!DOCTYPE> 声明
Strict是不包括展示性和废弃的属性 以及框架集framset
transitional 包括展示性和废弃属性 不包含框架集
framset 在transitional 基础上包括框架集
（2）在 HTML5 中只有一种：
在 HTML5中，DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。
五十一.行内元素、块级元素、空(void)元素分别有哪些？
块级元素：div、ul、li、ol、dd、dt、dl、h1~h6、p
行内元素：a、b、img、span、button、em
空元素：img、input、br
五十二.请描述一下cookies、sessionStorage和localStorage的区别？
Cookies
网站为了对用户身份做标识而存储在本地的数据。在同源的http请求中会被一同发送，因此会占用网络带宽。最大大小4KB。以前每个域名支持20个，新版本的增加到50个。生命周期为设置的过期时间，若不设置则到关闭浏览器为止。
localStorage
HTML5新增的，不会将数据自动发送到服务器，仅存储在本地，并且会永久存储，除非用户主动删除，不然不会过期或者自动清除。
sessionStorage
有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段）。
webStorage在不同浏览器的最大大小不同，因此一般以5M为上限较为安全。
五十三.说说HTML中的标签有什么作用？
它告诉浏览器这是一个HTML文档
它标识了文档开始和结束的位置
它是最外层的标签
五十四.有好多网站不常用table和iframe这两个元素，知道原因吗？
iframe
坏处：
是一个单独的容器，因此不会应用全局的CSS样式
会和网页共用域名连接池，因此可能由于iframe占用了连接数导致加载阻塞
搜索引擎爬虫不易爬取，不利于SEO
相比直接操作DOM元素，使用iframe更耗费资源
好处：
可以用其展示广告，可以避免由于添加广告而网站被爬虫拒绝收录的情况
table
坏处：
table的内容会等内部的所有内容加载完成才会显示，比基于div+css实现的表格布局加载速度慢。
会导致网页语义发生错误，不利于无障碍功能
改动内部内容会造成整个table重绘，消耗更多资源
好处：
前期广泛用于后台管理系统，由于普通的后台管理系统大多都是表格布局，基于table编程难度低
且面向内网的管理系统对性能要求没那么高
五十五.什么是svg？说说svg有什么运用场景？
SVG是可缩放的矢量图形，是用XML来定义的图像。
五十六.举例说明HTML5的Canvas元素有什么用途？
做页面特效: 粒子效果
画常见的图形: 矩形,圆形
在画布中插入文字,图片
五十七.请描述下application cache的更新过程？
application cache需要一个manifest attribuate来链接cache manifest文件。这个功能可以离线储存，降低page loading时间。这个cache.manifest文件主要包含三个部分：1.cache需要离线储存的内容 2.network只有online才能看见的内容 3. fallback 知道基本概念以后，更新过程主要分为5步：
当浏览器第一次遇到含有manifest attribuate网页，浏览器会根据cache.manifest下载需要储存的内容生成第一版application cache
之后的浏览加载cache里有的话，浏览器会从application cache里拿，而不是从server里拿。同时浏览器还要去跟window.applicationCache检查自己的文件是否为最新的。
如果是最新的，浏览器就会给application cache发送noupdate，更新完毕。
如果不是，会把新版清单里的所有文件通过 applicationCache.add()放入创建一个临时的cache
检索完毕以后会自动放到application cache
五十八.请说说Canvas和SVG图形的区别是什么？
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
五十九.精灵图和base64如何选择呢？
精灵图
优点
将多个图像加载请求合并为一个请求
弊端
难以维护和更新
增加内存消耗
base64
优点
将多个图像加载请求合并为一个CSS文件请求
轻松更新生成文件
弊端
base64编码比原始二进制表示大约大25%
IE6或IE7不支持
六十.你知道什么是锚点吗？它的作用是什么？怎么创建一个锚点？
基于window对象，查找dom对应id的元素就是锚点。操作该元素组成的dom，用js改变视图层。在HTML中定义id，用document.queryselector找到该元素，既可以视作锚点。
六十一.触发form表单自动提交的方式有哪些？
在表单的onsubmit事件提交
在input或者button标签的点击事件里提交
六十二.canvas默认画布的尺寸是多大？怎样设置才能不会变形？
canvas 不设置宽高时默认为 300 * 150。使用 CSS 设置 canvas 的宽高会按比例缩放我们设置的值，从而导致变形。
所以为了防止变形，我们可以选择直接在 canvas 标签中设置宽高，也可以使用 javaScript 进行设置。
六十三.如何刷新浏览器的应用缓存？
当你直接点击浏览器的刷新按钮或者F5刷新时，浏览器会忽略强缓存，必定向服务器发起请求，但是如果服务器返回304则会继续使用本地缓存。
当点击Ctrl+F5 浏览器会忽略一切缓存（cache-control:no-cache），向服务器发起请求，并且一定会使用服务器的返回来渲染页面。
六十四.HTML5的服务器(server-sent event)发送事件有什么应用场景？
1.邮箱: 实时获取新邮件
2.后台性能监控: 实时更新监控数据
3.天气预报: 实时更新天气信息
六十五.说说你对HTML5的keygen标签的理解，它的作用是什么？
是为了方便生成密钥材料和提交作为 HTML form 的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统。按照预想， 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。
六十六.form标签定义请求类型和请求地址分别是哪个属性？
请求类型：enctype
请求地址：action
六十七.如何实现应用缓存？说说你对manifest的理解
应用缓存：自己网上找的资料，对代码层面通过代码逻辑和缓存策略，实现对页面，图片等资源的缓存。可以将数据存在文件系统或内存中，减少数据库查询和读写瓶颈，提高响应效率。
manifest的理解 : 带有manifest标签的html文档，用于离线浏览。文档缓存manifest的地址可以是一个文件，也可以是一个链接地址。
六十八.请说说<pre>和<code>标签的区别？
pre标签是块级元素，code标签是行内元素
pre的内容保留换行符和空格，code的内容不保留
单行代码用code，多行代码用pre
六十九.请说说viewport是什么？在什么时候下使用？有什么作用？
1.是什么：viewport 是用户网页的可视区域
2.什么时候用：多用于移动端，也可以用在支持类似“固定到边缘”等特性的桌面浏览器。
3.什么作用：移动端的浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比物理屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
七十.input的onblur和onchange事件区别是什么？
onchange是指值改变并且失去焦点时触发的事件
onblur失去焦点时就触发，不管值有没有改变
七十一.说说你对small标签的认识，有哪些应用场景？
HTML 中的元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本
七十二.你有使用过HTML5的output吗？说说它的作用是什么？
兼容性：Internet Explorer 8 以及更早的版本不支持 标签。
属性：for form name
用法：与input标签，form标签联合使用
作用：在form监听oninput事件绑定关联的input值计算方法，输出计算结果。
七十三.xpath和dom有什么区别？
xpath是用于在XML文档中查找信息的语言
DOM是HTML的结构，对应的解析语言是JavaScript
七十四.前端路由指的是什么？它有什么好处？它有哪些方式可以实现呢？
前端路由指的是什么？
前端路由一般用在单页应用(SPA),是利用地址栏URL的变化，动态的替换页面中的DOM
它有什么好处？
后端路由需要刷新页面，SPA模式下的前端路由不需要刷新页面
除了Ajax外，完全的本地加载，提高响应速度
前后端代码更好的解耦
它有哪些方式可以实现呢？
hash
利用url HASH值的变化，监听hashchange事件，来替换DOM节点
支持老旧的IE浏览器
History API
监听popstate事件，利用pushStateAPI，同时进行DOM替换，实现前端路由
需要服务器的特殊配置(一般配置除了接口之外的get请求都指向index.html),不然会请求到服务器定向的资源
七十五.meta的属性有哪些组成？说说它们的分别有什么作用？
charset
此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。
http-equiv
content-language 指定页面使用的默认语言
content-security-policy 它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
default-style 这个属性指定了在页面上使用的首选样式表.
name
author 就是这个文档的作者名称，可以用自由的格式去定义。
description 其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
generator 包含生成页面的软件的标识符。
keywords 包含与逗号分隔的页面内容相关的单词。
referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。
七十六.Shadow DOM和Virtual DOM有什么区别？
Shadow DOM
Shadow DOM是浏览器提供的一个可以允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。
Virtual DOM
虚拟DOM是由js实现的避免DOM树频繁更新，通过js的对象模拟DOM中的节点，然后通过特定的render方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。
七十八.什么是Data URI？
Data URLs，即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。
data:text/html,
一个会执行 JavaScript alert 的 HTML 文档。
七十九.你知道HTML什么是单闭合标签和双闭合标签吗？为何要分为这两种呢？
单闭合标签其实很好理解，在我看来应该说是自闭合标签，比如之类的，双闭合标签就比如
双闭合标签
，至于为什么要这么分，我觉得是因为单闭合标签自己本身就有一定的含义没有content只有特定的属性而双闭合标签提供给了开发者可以自定义的content。两者对比单闭合标签往往是功能方面的，双闭合标签往往是内容方面的。八十.HTML的标签区分大小写吗？属性名区分大小写吗？
标签不区分大小写，属性名区分大小写
八十一.HTML5的哪些新特性是令你最兴奋的？
1.标签结构化
比如：article、footer、header、nav、section这些新标签，不仅通俗易懂，而且使我们整体的结更加完整、明了。
2.canvas绘画
比如：一些图表（自己百度一些案例即可朋友圈的一些H5页面
l3.ocalStorage（本地离线存储 ）
可以长期存储数据，浏览器关闭后数据也不会丢失
特点：数据(只存储字符串)可以永久存储，没有时间限制、大小限制在5M
4.sessionStorage存储数据在关闭浏览器自动删除，具体区别请看第37题，它们的区别
影音 video和 audio 元素
5.表单的控件：date、time、email、url、search等
6.websocket通信（聊天室）：常问，面试官设置场景，解决需求
7.webworker(专用线程)
八十二.网站首页有大量的图片，加载很慢，要是你，你该怎么去优化呢？
1.icon 等小图片推荐使用雪碧图；
2.类似于相册那种 使用分页加载/懒加载。
八十三. 你有用过HTML5的requestAnimationFrame吗？它运用的场景有哪些呢？
requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画，不需要自行设置刷新时间
用法跟setTimeout/setInterval类似，也有对应的cancelAnimationFrame用于取消
八十四.htm、html、shtml三者有什么区别呢？
htm与html，shtm与shtml区别仅在于一个“l”。
而html与shtml区别于在shtml支持SSI指令，就是在文件里加了一段，旨在将"info.htm"的内容拷贝到当前的页面中，当访问者来浏览时，显示两个页面的内容
八十五.HTML5如何唤醒APP？
有以下几种方式
URL Scheme：最常见
Intent: // ：Android
Universal Link ： iOS， 通过传统的 HTTP 链接即可打开 APP
唤醒途径
iframe的src
a标签的src
window.location
八十六.png8和png24有什么区别呢？
PNG 8：PNG 8中的8，其实指的是8bits，相当于用28（2的8次方）大小来存储一张图片的颜色种类，28等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0 ~ 255),G(0 ~ 255),B(0 ~ 255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
八十七.主框架如何与iframe通信？如何解决跨域？
1.主域相同，子域不同，可以设置在两个页面都设置document.domain = ‘xxx.com’然后,两个文档就可以进行交互。
2.主域和子域都不同，则可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
接受消息: 监听message事件
八十八.请举例说明关于html的引用标签有哪些？
blockquote标签
引用
cite属性，没有浏览器支持，规定引用来源
margin-start margin-end 有边距
q标签
短引用
会自动加上after``before伪元素，自动加上引号
八十九.举例说明a标签的作用都有哪些？
1.外部链接：外部页面链接需要一个完整的网页的地址
2.本地链接：在同一个项目中，href的指向为相对路径
3.瞄点链接：方便读者浏览网页
九十.说下cookie都有哪些缺点？
存储量小
明文传输，可篡改，不安全
同域的每个请求都会请求，耗费带宽
不能跨域
客户端没有getCookie/setCookie的api，存取复杂
九十一.你知道p标签和br标签两者的区别是什么吗？
block 块级元素，br 内联元素；
block 能被 css 修改，br 不能；
block 非单标签元素，br 是；
block 换行靠的是块级元素特性，br 换行靠的可能是类似 \n 的渲染规则
九十二.你有使用过picture标签吗？说说它有哪些运用场景
运用场景：
1、针对不同的media条件裁剪或修改图像
2、遇到浏览器不支持的特定格式时，提供不同的图像格式。
九十三.HTML5中required属性有什么应用场景？
required是input 中的属性，用来规定提交前必须填入字段的功能，所以可以运用在某些注册的必填或者问卷调查的必填项内
九十四.canvas怎么解决图片和文字模糊的问题？
模糊问题的根源是dpr的不同导致
解决思路: canvas视图尺寸相同的情况下，canvas画布放大dpr倍，最终画出来的图片相当于缩小了dpr倍，然后通过ctx.scale(dpr,dpr)还原大小
九十五.TML5对元素内容进行拼写检查用的是什么属性呢？
使用的是：spellcheck 属性
内容可编辑可以使用：contenteditable 属性
九十六.wbr和br标签的区别是什么？
wbr规定在文本的何处进行添加换行符，而br是整行换行
九十七.关于缓存你了解多少？
HTTP缓存机制
强缓存：浏览器直接从本地缓存获取数据，不与服务器进行交互
协商缓存：浏览器发送请求到服务器，服务器判断是否可以使用本地缓存
九十八.说出至少十条你理解的html规范
标签名和属性推荐用小写
标签都需闭合，不管是单标签还是双标签
双标签不宜使用单标签闭合方式
属性值需双引号
img 标签需加上 alt
img 标签推荐加上固定宽高
html 和 body 标签最好不好
部分字符推荐转义，比如 <
link 写在 head 内，script 写在 body 内最末
不推荐使用已废弃的标签和属性名，比如 marquee center 等
九十九.解释下为什么说html嵌套级别不宜过多
1.影响代码阅读性。
2.降低浏览器渲染性能。
3.不利于维护。
一百.网站的响应式和自适应有什么区别？
响应式：有多套UI,不同大小的设备加载不同的UI。
自适应：一套UI,根据屏幕大小缩放尺寸。
一百零一.如何保证表单安全？
到目前为止，HTML表单是最常见的攻击媒介(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。
跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给用户或另一个
XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。
CSRF攻击类似于XSS攻击，因为它们以相同的方式攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将特权升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。
XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站为其用户提供的信任。
为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该处理用户提供的数据，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML