HTML
1、HTML5的Web存储对象有两个，分别是sessionStorage和localStorage
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览，也就是用户浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
这两者的区别：sessionStorage为临时保存，而localStorage为永久保存
2、当HTML页面加载完毕时触发的事件是onload（）
3、localStorage和cookie的区别
Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器自动会将Cookie以key/value保存到某个目录下的文本文件内，下次请求同一网站时也会自动发送该Cookie给服务器，即添加在请求头部（前提是浏览器设置为启用cookie）。Cookie就是个小型文件（浏览器对cookie的内存大小是有限制的-------用来记录一些信息）
Cookie一般是由服务器端生成，localStorage存储在客户端,不参与服务器通信
4、HTML5中可以使用data-*自定义属性
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
5、
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
<!DOCTYPE html> 告诉浏览器当前页面使用h5版本解析
6、alt与title的区别
- alt是在图片不能正常加载时候显示的提示语
- title属性是鼠标划上去显示的内容
7、form元素的enctype属性
-
enctype属性在get请求中会被忽略，在post请求中才有效 -
application/x-www-form-urlencoded表示会对特殊字符进行转义 -
text/plain以文本的形式进行编码，不会对特殊字符进行编码 -
multipart/form-data向服务器发送二进制文件的时候有用，例如提交文件！！！
8、阻止事件冒泡
preventDefault() 阻止事件默认行为
stopPropagation() W3C标准的阻止冒泡
cancelBubble() ie的阻止冒泡
CSS
1、padding: 0 12px 20px 12px; 中的4个值按顺序代表的方向是什么（）
上右下左
2、display:none、visibility:hidden、opacity:0 的区别
display:none:对应的元素不会在文档流中占据位置
visibility:hidden:虽然元素隐藏,但是对应的元素会在文档流中占据空间
opacity:0以透明度隐藏,对应元素的事件监听器还会触发
3、选择器
4、当一个元素设置为flex布局时，其子元素会自动变成block元素
Javascript
1、描述一下脚本<script>放在<head>和放到<body>底部的区别
放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。
放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。
例外情况：脚本中没有访问<body>元素的情况下，两种加载方式效果一致。
2、正则表达式语法
使用字面量来创建正则表达式 语法：var 变量=/正则表达式/匹配模式
匹配模式参数：
- 'i'：忽略大小写
- 'g'：全局匹配模式
正则表达式语法
|:或者[]：[]里的内容也是或的关系，[ab]==a|b[a-z]：任意小写字母[A-Z]：任意大写字母[A-z]：任意字母[0-9]：任意数字[^]：除了{n}：正好出现n次{m，n}：出现的次数在[m-n]这这个范围{m,}：出现m次以上，包括m+：至少一个，相当于{1，}*: 0个或多个，相当于{0，}?：0个或1个，相当于{0，1}^：表示开头$：表示结尾.：表示任意字符
在正则表达式中使用\作为转义字符
\.：表示.\\：表示\\w：任意字母、数字、下划线，相当于[A-z0-9_]\W：除了字母、数字、下划线，相当于[^A-z0-9_]\d：匹配一个任意的数字，相当于[0-9]\D：匹配一个非数字字符，相当于[^0-9]\s：匹配任何空白字符，包括空格、制表符、换页符等等。相当于[\f\n\r\t\v]\S：匹配任何非空白字符。相当于[^\f\n\r\t\v]。\b：匹配一个单词边界，也就是指单词和空格间的位置。例如，'er\b'可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'\B：匹配非单词边界。'er\B'能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'
3、事件捕捉与事件冒泡
以下前端代码的运行结果是（）
<div id="box1">
<div id="box2">
content
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click', () => {
console.log('box1 true');
}, true);
box1.addEventListener('click', () => {
console.log('box1 false');
}, false);
box2.addEventListener('click', () => {
console.log('box2 true');
}, true);
box2.addEventListener('click', () => {
console.log('box2 false');
}, false);
</script>
box1 true, box2 true, box2 false, box1 false
addEventListener的第三个参数true和false分别代表时间发生在捕捉阶段和冒泡阶段
事件捕捉：事件从最不精确的对象（document对象）开始触发，然后到最精确的对象
事件冒泡：事件按照从最精确的对象到最不精确的对象（document对象）的顺序触发
addEventListener(type,callback,useCapture)事件的触发阶段
事件捕捉--->事件冒泡
其中userCapture参数
true表示在事件捕捉时触发false表示在事件冒泡时触发
单击content
开始事件捕捉，document->…->box1->box2;触发了useCapture为true的事件
输出box1 true box2 true
开始事件冒泡，box2->box1->…->document;触发了useCapture为false的事件
输出box2 false box1 false
网络编程
1、常用的HTTP状态码
- 2XX 成功
200 ok（请求成功）204 no content（请求成功，但是没有结果返回）206 partial content（客户端请求一部分资源，服务器成功响应，返回一范围资源）
- 3XX 重定向
301 move permanently（永久性重定向）302 found（临时性重定向）303 see other（该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET方法定向获取请求的资源）304 not modified（该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况）307 temporary redirect（临时重定向。该状态码与302 found 有着相同的含义。尽管302标准禁止POST变换成GET）
- 4XX 客户端错误
400 bad request（请求报文存在语法错误）401 unauthorized（发送的请求需要有通过HTTP认证（BASIC认证、DIGEST认证）的认证信息）403 forbidden（请求被服务器拒绝了）404 not found（服务器上无法找到请求的资源）
- 5XX 服务器错误
500 internal server error（服务端执行请求时发生了错误）503 service unavailable（服务器正在超负载或者停机维护，无法处理请求）
2、写出HTTP、HTTPS、FTP、SSH的默认端口号
- HTTP（超文本协议）：80/8080
- FTP（文件传输）：21
- HTTPS：443
- SSH（安全登录）：22
