### 前端基础
#### HTTP和HTTPS
HTTP（超文本传输协议）是互联网上应用最为广泛的一种网络协议，是用于从服务器传输超文本到本地浏览器的传输协议。HTTPS（超文本传输安全协议）是HTTP的安全版本，它通过SSL/TLS提供加密处理数据、验证对方身份以及数据完整性保护。
#### TCP三次握手
TCP三次握手是指建立一个TCP连接时，客户端和服务端必须总共发送三个包以确认连接的建立。简单来说，就是"SYN-ACK-SYN-ACK"的过程。
#### TCP和UDP的区别
TCP提供面向连接的、可靠的字节流服务；而UDP提供无连接的、尽最大努力交付的不可靠的用户数据报服务。
#### WebSocket的实现和应用
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向客户端发送信息。常用于聊天应用、实时通知等场景。
#### HTTP请求的方式
HTTP请求包括GET、POST、PUT、DELETE等方法。HEAD方式与GET方法类似，不过服务器在响应中只返回头部信息，不返回实际内容。
#### Web Quality（无障碍）
无障碍即Web Accessibility，指网页内容能够被所有人访问，特别是有视觉、听觉等障碍的用户。
#### BOM属性对象方法
BOM（浏览器对象模型）包含了一些浏览器窗口相关的属性和方法，如`window`对象的`open()`和`close()`等。
#### HTML5 Drag API
HTML5拖放API允许用户通过拖拽操作来交互。通过调用`dragstart`, `drag`, `dragend`, `drop`等事件来处理拖放操作。
#### HTTP/2.0
HTTP/2.0是HTTP协议的最新版本，它改进了数据传输的效率，支持服务端推送等新特性。
#### 状态码补充
400（Bad Request）表示请求无效，401（Unauthorized）表示未授权，403（Forbidden）表示禁止访问。
#### Fetch发送两次请求的原因
Fetch API可能因为CORS策略或其他中间件配置问题导致某些情况下发送两次请求。
#### Cookie、sessionStorage、localStorage的区别
Cookie通常用于存储少量信息，由服务器设置并发送到客户端，随着HTTP请求发送。sessionStorage用于存储一个会话期的数据，生命周期为页面会话期间。localStorage用于长期存储，除非被手动清除，否则信息会一直保存。
#### WebWorker
WebWorker允许在浏览器后台运行脚本，不干预用户界面的操作。
#### HTML语义化标签
语义化标签指的是那些能够清晰地表达其内容和目的的HTML标签，例如`<header>`, `<footer>`, `<article>`等。
#### iframe的使用和缺点
iframe标签用于在当前页面嵌入另一个页面，但使用过多会影响页面加载速度，并且不利于SEO。
#### Doctype的作用及区分
DOCTYPE声明用于告诉浏览器使用哪种HTML或XHTML规范。严格模式与混杂模式的区别在于浏览器是否使用标准的渲染方式。
#### Cookie防范XSS攻击
可以通过设置HttpOnly属性来防止JavaScript访问Cookie，从而防范XSS攻击。
#### Cookie和Session的区别
Cookie是存储在客户端的小型文本文件，而Session是存储在服务器端的会话信息。二者常用于用户状态管理。
#### RESTFUL概括
RESTFUL是一种利用HTTP协议的规则设计Web API的风格，其核心原则是使用HTTP方法对资源进行操作，从而实现无状态的接口设计。
#### Viewport和移动端布局
viewport标签可以控制页面在移动设备上的布局，是移动端开发中的关键。
#### click在iOS上300ms延迟的原因及解决
iOS Safari浏览器中click事件有300ms的延迟，主要是为了判断用户是否进行了双击缩放操作。通过设置viewport的meta标签或使用FastClick库可以解决。
#### EventListener参数
addEventListener是JavaScript中用于给指定元素添加事件监听器的方法，其参数包括事件名称、事件处理函数和一个布尔值。
#### Cookie、SessionStorage、LocalStorage区别
这三种是浏览器端存储机制，但使用场景和存储时长不同。Cookie受域的限制，大小有限，并且随每次HTTP请求发送；sessionStorage在页面关闭时会被清除；localStorage通常用于长期存储。
#### HTTP状态码
HTTP状态码用以表示客户端请求的结果。常见的状态码包括200（成功）、301（永久重定向）、302（临时重定向）等。
#### HTTP请求头
HTTP请求头包含多种信息，如Accept, Accept-Encoding, User-Agent等，它们向服务器告知客户端请求的信息和偏好。
#### 缓存控制
缓存控制涉及强缓存和协商缓存，其中强缓存通过Expires或Cache-Control实现，协商缓存则通过Etag和If-None-Match实现。
#### HTTP/2.0特性
HTTP/2.0带来了很多改进，包括多路复用、服务器推送、首部压缩等。
#### 浏览器输入URL到页面渲染全过程
整个过程包括DNS解析、建立TCP连接、发送HTTP请求、服务器处理请求、浏览器解析HTML和CSS生成DOM树和渲染树，然后进行布局和绘制。
#### HTML5新元素
HTML5引入了许多新的元素，如`<article>`, `<section>`, `<aside>`等，用来改进文档的结构和语义。
#### CSS
#### CSS盒模型
CSS盒模型描述了元素所占据空间的计算方式，由内容、内边距、边框和外边距组成。
#### 0.5px的线绘制方法
在支持视网膜屏的设备上，用CSS直接绘制0.5px的线是不可能的，因为像素点是整数。不过可以使用transform属性将线缩放到50%大小，从而模拟出0.5px的效果。
#### Link标签和Import标签的区别
link标签用于加载样式表，import标签用于CSS @import规则，引入其他样式表。二者的主要区别是link标签在页面加载时同时加载样式，而import需要在CSS文件被加载解析后才能加载。
#### Transition和Animation的区别
transition是CSS的过渡效果，用于改变元素状态时的平滑过渡；而animation则是使元素按一定时间执行一个动画序列。
#### Flex布局
Flex布局提供了一种更加高效的方式来布局、对齐和分配容器内的项目空间，即使它们的大小未知或是动态变化的。
#### BFC（块级格式化上下文）
BFC是一个独立的渲染区域，浮动、绝对定位、溢出的内容都会创建新的BFC。
#### 垂直居中的方法
CSS实现垂直居中有多种方法，如使用Flexbox、Grid布局、使用transform属性等。
#### JS动画和CSS3动画的差异性
CSS3动画通常比JavaScript动画更高效，因为它是浏览器硬件加速的，但JavaScript动画提供了更高的灵活性和控制力。
#### 块元素和行元素
块级元素在显示时会独占一行，而行内元素则不会。
#### 多行元素的文本省略号
可以通过设置CSS的`text-overflow`, `white-space`, `overflow`属性来实现多行文本的省略效果。
#### Visibility=hidden, Opacity=0, Display=None的差别
visibility: hidden使得元素不可见但仍然占据空间；opacity: 0使元素完全透明但仍占据空间；display: none使得元素从文档流中消失，不占据任何空间。
#### 双边距重叠问题（外边距折叠）
在块级格式化上下文中，相邻的两个块级元素的垂直方向上的外边距会发生重叠。可以用BFC或设置`overflow: auto`等方法解决。
#### Position相关属性
Position属性包括static、relative、absolute、fixed和sticky，它们用来控制元素在页面上的位置。
#### CSS动画实现
CSS动画可以通过@keyframes定义关键帧，然后通过animation属性将动画应用到元素上。
#### 图片在容器中居中的方法
图片在容器中居中可以通过设置图片为块级元素并使用`margin: auto`来实现。
#### 元素垂直居中的方法
元素垂直居中可以通过多种CSS技术实现，包括使用Flexbox、Grid布局，或者使用绝对定位配合transform属性。
#### CSS3中的溢出处理
CSS3提供了更灵活的溢出处理方式，例如`overflow-x`, `overflow-y`, `overflow: scroll`等。
#### Float
Float属性可以设置元素浮动，常用于文本环绕效果。浮动元素会影响其后的非浮动元素，可以通过清除浮动解决布局问题。
#### CSS选择器及优先级
CSS选择器包括类选择器、ID选择器、属性选择器等，选择器的优先级根据种类和数量决定，ID选择器优先级最高。
#### 清除浮动方法
清除浮动有多种方法，如使用伪元素清除浮动、使用`overflow`属性或定义一个空的div使用`clear`属性。
#### 盒模型介绍
盒模型是一个用于网页布局的模型，包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。
#### 网站性能优化
网站性能优化包括前端优化和后端优化，前端优化可以通过减少HTTP请求、使用CDN、图片压缩、CSS和JS文件合并和压缩等方式实现。
#### HTML5和CSS3的新特性及使用
HTML5和CSS3引入了诸多新特性，如HTML5的video和audio标签，CSS3的border-radius、box-shadow、flexbox布局等，它们极大提高了开发效率和页面表现力。
#### HTTP常见的请求方法
HTTP常见的请求方法包括GET、POST、PUT、DELETE、HEAD、OPTIONS等。
#### GET和POST的区别
GET用于获取资源，POST用于提交数据。在HTTP请求中，GET方法的数据会附加在URL之后，而POST方法的数据会以请求体的形式发送。
#### 状态码304和302的区别
状态码304表示资源未被修改，可以使用缓存的版本。状态码302表示资源临时移动到另一个URI。
#### Web性能优化和浏览器缓存机制
Web性能优化可以采用合并文件、压缩资源、利用缓存等方法。浏览器缓存机制通过HTTP头部控制，包括`Cache-Control`、`Expires`等。
#### CSS3中的新特性
CSS3包括了很多新特性，如圆角（border-radius）、阴影（box-shadow）、过渡（transition）、动画（animation）、Flexbox布局、Grid布局等。
#### 浏览器在生成页面的时候会生成哪两颗树？
浏览器在渲染页面时，首先生成DOM树（文档对象模型树），然后生成CSSOM树（样式对象模型树），最后根据这两棵树渲染出最终页面。
