doctype的作用是什么？
DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行，来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对css代码甚至javascript的解析 文档解析类型：
backCompat: 怪异模式，浏览器使用自己的怪异模式解析渲染页面（没用DOCTYPE声明，则默认为怪异模式）CSS1Compat: 标准模式， 浏览器使用W3C标准解析页面近乎标准: 介于怪异模式和标准模式之间，基本被淘汰（IE8浏览器）
这三种模式的区别是什么？
backCompat(怪异模式) 模拟比较旧的浏览器行为CSS1Compat(标准模式) 按照HTML和CSS定义的进行渲染近乎标准 会用一种表单元格尺寸的怪异行为（和IE7单元格布局一致）
HTML、XHTML、XML的区别是什么
HTML(超文本标记语言): 在html4.0之前HTML显示先后才有标准，导致HTML比较混乱和松散XML(可扩展标记预言): 主要用于数据存储和结构，可扩展XMHTL(可扩展超文本标记语言): 基于html和xml，W3C为了解决html混乱问题而生，并基于此诞生了html5,开头加入<!DOCTYPE html>的做法因此而来，加了就是标准模式，比价就是兼容混乱的html
data-属性
HTML的数据属性，用于存储元素中的额外信息，可以通过js访问拿到 定义属性名的尽量使用小写，因为大写字母会被解析成小写，导致jquery的data方法获取不到数据，然而使用js的getAttribute方法不会有这个问题
HTML语义化
语义化就是用恰当语义的html标签，让页面具有良好的结构和含义。 语义化好处如下：
对开发者友好： 用语义标签，增加可读性，更好的看出网页的结构，方便开发和维护搜索引擎更加容易抓取和索引
HTML5和HTML4区别
第一行新增文档类型声明<!DOCTYPT html>新的解析顺序，不再基于SGML新增元素： section，time， video， progress， aside， canvas， command， details， footer , header ，source， output， navinput元素新增类型： date ，email，url等等移除元素： applet,basefont,big,font,frame,frameset,isindex,tt新的属性： charset(用于meta标签，描述文档编码格式)，async和defer(用于script标签，都是异步加载， defer加载完毕后并不会立即执行，而是等文档被解析完毕后执行，async是脚本加载完毕后立即执行) ping(用于a和area)全域属性：id, tabindex, repeat
常用的meta标签
meta标签由name和content两个属性来定，来描述一个网页HTML文档的属性，例如做的、日期、事件、网页描述、关键词、页面刷新，除了一些html标准规定了一些让大家共同使用，开发者也可以自定义name
charset: 用于描述文档的编码格式<meta charset="UTF-8">http-equiv: 相当于http的文件头，设置http的缓存过期时间，如下代码<meta http-equiv="expires" content="Wed, 20 Jul 2020 17:01:34 GMT">viewport 控制视口大小和比例<meta name="viewport" cntent="width=device-width,initial-scale=1,maximum-scale=1">apple-mobile-web-app-status-bar-style 自定义工具栏的颜色<meta name="apple-mobile-web-app-status-bar-style" content="black">
src和href的区别
- src是指向外部资源的位置，指向的内容会嵌入到文档当前标签所在的位置，在请求src资源时,会将其指向的资源下载并应用到文档内，例如js脚本、img图。当浏览器解析到该元素时，回暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，因此js脚本一般会放到文档的底部。
- href是指向网络资源所在位置的超链接，用来建立和当前元素或者文档之间的连接，当浏览器识别到它指向的文件时，不会停止对当前文件的处理
img标签的srcset作用
可以设计响应式图片，我们可以使用属性srcset和size来提供更多额外的资源图象。picture标签也有类似的作用
- srcset定义了我们允许浏览器选择的图像集和每个图像集的大小
- sizes通过媒体条件（屏幕尺寸和像素密度)来选择最佳尺寸图片
几种前端的存储方式
- cookie: 方便（请求头自带cookie）、兼容性好，缺点是大小只有4K
- localStorage: html5加入的以键值对为标准的方式，永久性存储，大小为5M
- sessionStorage: 和localStorage类似，页面关闭后会被清理
- Web SQL: 本地数据库存储方案（2010年已被W3C废弃）
- IndexedDB: NoSQL数据库，被正式纳入html5标准的数据库存储方案，用键值对进行存储，可以快速读取操作
DNS预解析，提升页面加载速度,可以在html的header中加如下代码
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://baidu.com" />
预解析的实现： a. 用meta标签来告知浏览器, 当前页面要做DNS预解析 b.在页面的header标签中使用link标签来强制进行DNS预解析
需要注意的是: dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数
http资源请求自动改为https,可以在header中加如下代码
<meta http-equiv ="Content-Security-Policy" content="upgrade-insecure-requests">
以下内容来自：Content Security Policy 入门教程 CSP(Content-Security-Policy)的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。 两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段,还有一种就是通过以上的meta标签。
