自整理html面试题

Bertha 。 2023-02-20 13:36 5阅读 0赞

## html面试题 ##

整理了一些html面试题,希望大家都能找到心仪的工作

### 1.描述一下http和https ###

\*\*http：\*\*超文本传输协议，无状态，无连接，基于请求和响应，不能保证数据完整性，用户离开网站后在访问需要重新发送请求  
\*\*https：\*\*基于http协议，内容加密，验证身份，保证了数据完整性，防止传输的数据被中间人冒充或篡改。

### 2.五大浏览器及内核 ###

ie：trident  
Firefox：gecko  
opera：之前presto，现在blink  
safari：webkit  
Google：blink

### 3.WebSocket的实现与应用 ###

浏览器通过js向服务器发出建立webSocket连接请求，建立连接后，客户端和服务器端可以通过**TCP**连接直接交换数据 ,是**解决跨域问题**的其中一种。  
Socket.send()：使用连接发送数据  
Socket.close()：关闭连接

### 4.一个完整的http请求都发生了什么事情 ###

1.域名解析，获得对应IP地址  
2.发起TCP3次握手  
3.建立TCP3次握手后，浏览器发起http请求  
4.服务器响应HTTP请求，浏览器获得html代码  
5.浏览器解析html代码，并请求html代码中的资源  
6.浏览器对页面进行渲染呈现给用户

### 5.html5增加了哪些属性和标签，api ###

**语义化标签：**

**标签属性：**

提示文本：<input type=”text” placeholder=”请输入....”>
    禁用：<input type=”button” value=”提交” disabled=”disabled”>
    自动获取焦点：<input type=”text” autofocus=”autofocus”/>
    自动补全：<input type=”text” autocomplate=”on/off” name=””/>
    非空验证：<input type=”text” require=”require”/>
    新增下拉菜单：
    <input type=”text” list=”one”/>
    <datalist id=”one”>
    <option></option>
    <option></option>
    <option></option>
    <datalist>
    新增音频标签：
    <audio controls=”controls”（音频界面） loop=”loop”(自动播放) autoplay=”autoplay”（自动播放）>
    <source src=”....”></source>
    </audio>
    新增视频标签：
    <video controls=”controls”（音频界面） loop=”loop”(自动播放) autoplay=”autoplay”（自动播放）>
    <source src=”....”></source>
    </video >

**新增表单标签：**

邮箱类型：<input type=”email”>
    网址类型：<input type=”url”>
    数字类型：<input type=”number”>
    颜色类型：<input type=”color”>
    搜索类型：<input type=”search”>
    本地时间类型：<input type=”datetime-local”>
    月份类型：<input type=”month”>
    周类型：<input type=”week”>
    时间类型：<input type=”time”>
    日期类型：<input type=”date”>

### 6.Cookie、sessionStorage、localStorage的区别 ###

**cookie**：内存小，限制在4kb左右，用于保存登录信息，携带在http头中，可设置失效时间，默认关闭浏览器后失效，需要程序员自己封装；  
**sessionStorage**：仅在当前会话有效，关闭浏览器或页面后被清除，仅在客户端保存，不参与服务器通信，一般5mb  
**localStorage**：除非被清除否则永远保存，仅在客户端保存，不参与服务器通信，一般5mb

### 7.对html语义化标签的理解 ###

根据内容结构化，选择合适的标签便于开发者阅读和机器更好的解析，用合理的html标记以及其特有属性格式化文档内容。  
**好处：**  
1.为了在没有css情况下，页面也能呈现出很好的页面结构，  
2.有利于SEO搜索引擎  
3.用户体验较好  
4.方便其他设备解析  
5.有利于团队的开发维护

### 8.Doctype作用？严格模式与混杂模式如何区分？ ###

html文档的第一行，告诉浏览器用哪种规范解析文档  
**严格模式**：指浏览器按照W3C标准解析代码  
**混杂模式**：兼容模式，指浏览器用自己的方式解析代码  
**如何区分**：与网页中DTD直接相关

### 9.概述RESTFUL ###

是一种网络应用程序开发方式，基于http，可以使用xml格式或json格式定义，适用于移动端互联网厂商为业务使能接口的场景，实现第三方OTT调用移动网络资源的功能，动作类型为新增、变更、删除所调用资源。

### 10.讲讲viewport和移动端布局 ###

**viewport（视口）**，就是浏览器显示页面内容的屏幕区域  
**layout viewport（布局视口）**，分辨率一般设置为980px，用于解决早期页面在手机上显示的问题  
**visual viewport（视觉视口）**，物理屏幕的可视区域，屏幕显示器的物理像素  
**ideal viewport（理想视口）**，屏幕分辨率

### 11.get和post的区别 ###

**get**：从服务器上获取数据；把参数加到url后，用户可以看到；传送数据较小，不超过2kb；安全性较低，但执行效率较高。  
**post**：向服务器传送数据；请求携带数据通过http传送到url地址中，用户看不到过程，安全性较高；传输数据较大，默认不受限制。

### 12.前端优化 ###

**页面/文件级优化**：  
1.减少http请求：设置缓存，压缩静态资源，图片懒加载  
2.引入时：css文件置顶，js文件置底  
3.常用静态文件使用CDN引用（减少带宽占用）  
4.图片压缩  
5.避免空标签，src和href  
6.将css,js文件放到外部文件中，目的是缓存文件  
7.避免跳转  
**代码级优化**：  
1.尽量少访问操作DOM  
2.尽量少用with（加长作用域链）、eval、function（需要二次编译）  
3.减少reflow、repaint，都比较耗费性能  
4.减少作用于查找  
5.减少字符串拼接  
6.避免使用css表达式  
7.样式避免使用复杂的选择器，精简页面样式文件  
**业务功能优化**：  
1.返回状态保持功能  
2.针对移动端各种屏幕尺寸的适配方案  
3.webpack优化  
4.将请求接口代码和加载动画弹框等的封装成公共函数  
5.统一前端常用组件规范

### 13.http状态码 ###

100系列：信息性状态码  
200系列：成功状态码  
300系列：重定向状态码  
400系列：客户端错误  
500系列：服务器端错误