HTML

1.src和herf的区别

src是会将指向的资源下载并应用到文档内，并且解析时会暂停其他资源的下载和处理，因此js脚本大多放在底部。

herf是指向网络资源所在的位置，建立和当前元素的连接(不会下载并应用到文档内)，解析时时并行下载资源不会停止对当前文档的的处理，因此建议使用link的方式加载css而不是@import，这也就是webpack配置代码分包时对css进行单独分包，再link到html中。

2.HTML语义化的理解

<header><nav><section><main><article><aside><footer>

对机器和开发者友好，有利于seo

3.script中defer和async的区别

共同点：都是异步加载外部js脚本文件，都不会阻塞页面解析

不同点：

默认是会阻塞页面解析，需要停下来加载文件和解析文件。

defer是异步的同时加载文件，等页面其他都加载好后最后解析文件。并且多个defer属性能够按照加载顺序执行。

async是异步的同时加载文件，然后立即停下其他的，进行js文件的解析，当该js文件解析完成后再进行其他未完成的解析，使用async无法保证执行顺序

4常用的meta标签

<meta charset="UTF-8">

<meta name="keywords" content="关键词">

<meta name="description"  content="页面描述内容">

<meta http-equiv="refresh" content="0;url=‘重定向地址’">

<meta name="viewport" content="width=device-width或者数值,height=device-height或者数值,initial-scale=初始缩放比例数值，maximum-scale=最大缩放比例数值，minimum-scale=最小缩放比例,user-scalable=yes或者no（是否允许用户缩放）"

<meta name="robots(搜索引擎索引方式)" content=“index(文件将被检索),follow(页面上的链接可以被查询),noindex(文件将不被检索),nofollow(页面上的链接不可以被查询),all(文件将被检索，且页面上的链接可以被查询),none(文件将不被检索，且页面上的链接不可以被查询)”

5html5的更新

语义化标签

媒体表audio、video、source

表单类型email、url、number、search、range、color、time、date、datatime-loacal、week、month

表单属性placeholder、autofocus、autocomplete、required、pattern、multiple、form

表单事件oninput、oninvalid(验证不通过时触发)

进度条、度量器progress

dom查询操作document.querySeletor(可以是标签、类、id)、document.querySeletorAll()

web存储localStorage、sessionStorage

拖放draggable：dragstart()开始拖放触发、darg()正在拖放触发、dragenter()拖进某个元素时触发、dragover()拖进在某个元素时触发、dragleave()拖出元素的时候触发、drop()目标完全接收被拖放元素时触发、dragend()拖放结束时触发

canvas通过js绘制2d图像，是逐像素渲染的，依赖分辨率，不支持事件，可以.png和.jpg保存图像，适合图像密集型游戏

svg可伸缩矢量图，不依赖分辨率，改变尺寸质量不会有损失，使用xml格式定义图形，所以是由dom的，可以添加js事件,适合有大型渲染区域的应用程序如地图app，复杂度高会减慢渲染速度，所以不适合游戏

geolocation

6.img的srcset属性作用

<img src="image-128.png" srcset="image-128.png 128w,image-256 256w,image-512.png 512w" sizes="(max-width:360px) 340px,128px" />

srcset是设置不同屏幕密度展示对应的图片，w单位是图片质量

size是设置图片的尺寸零界点，上述的意思是默认展示128px,屏幕可视区大于360px则展示340px

7行内元素有哪些，块级元素有哪些，空元素有哪些

行内元素<a><b><span><img><input><select><strong>

块级元素<div><ul><ol><li><dl><dt><h1>...<p>

空元素即没有内容，没有闭合标签<br><hr><img><input><input><meta>

8web worker

9离线储存

10iftame优点缺点

优点用来加载速度比较慢的内容如广告、使脚本可以并行下载、实现跨子域通信

缺点会阻塞主页面的onload事件、无法被搜索引擎索引识别、产生多个页面不易管理

10label的作用是什么，如何使用

当用户选择label标签是，浏览器会自动将焦点转到和label标签相关的表单控间上

<label for="mobile">Number:</label><input type="text" id="mobile"/>

<label>Date:<input type="text"/></label>

11head标签作用，其中什么标签不可少

head可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等，可以在里面使用的标签有<base><link><meta><script><style><title>，其中title是必不可少的元素