前端面试基础篇之HTML、HTTP

巴拉小魔仙
240 阅读9分钟

大鹏一日同风起,扶摇直上九万里。——李白《上李邕》

一、HTML篇

1.HTML标签和元素是一回事吗？

不是

HTML元素是由一个开始标签定义，一个结束标签结尾，中间可能存在内容。

例如：<h1>这是一个标题</h1> 这是一个元素；<h1></h1>是一对标签。

2.HTML中的属性是什么？

属性可以定义元素的特性 例如：<p align="center">定义属性</p>，这里的'align'是一个属性，该属性定义了段落内容居中显示。

3.HTML中的void元素是什么？

没有关闭标签或不需要关闭的标签就是void元素 例如：<br/> <img/> <hr/>

4.HTML元素中id属性和class属性有什么区别？=

HTML的每个元素可以存在多个class值，而id有且只有一个。且在不同元素中，一个id值有且只有一个。

5.multipart/form-data多部分表单数据是什么？

multipart/form-data是Content-Type属性的一种值。 用于将文件数据发送到服务端进行处理，需要在表单中进行文件上传时，就需要使用该格式。

Content-Type，一般是指用于网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定游览器将以什么形式、什么编码读取这个文件。

Content-Type常见属性值：

  • application/x-www-form-urlencoded：form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式
  • application/json ： JSON数据格式

6.语义化标签有哪些？

  • <header>：网页头部信息
  • <footer>：网页尾部信息
  • <nav>：网页的导航菜单
  • <article>：一组信息
  • <section>：文章信息
  • <aside>：页面侧边栏信息

7.如何优化网站资源加载，提升网页打开速度？

  • CND托管：CND或内容交付网络是地理上分布的服务器，有助于减少延迟
  • 文件压缩：减少资源大小进行数据传输，达到减少网络交互时间的目的
  • 文件链接：减少HTTP调用数量
  • 缩小脚本：减少js和css文件的大小
  • 并行下载：在多个子域中托管资源有助于绕过所有现有游览器每个域6个资源的下载限制
  • 延迟加载：将非关键资源延迟加载

8.有哪些方式可以定位一个HTML元素？

- `static`:默认值，元素根据文档的正常流程定位
- `relative`：相对定位，元素根据文档的正常流程定位，并相对于其原始/正常位置定位
- `absolute`：绝对定位，此处元素相对于其父级元素定位。最终位置由上下左右值确定
- `fixed`：固定位置，和absolute相似，不同处是元素相对于<html>元素定位
- `initial`：这会将属性值重置为默认值
- `inherit`：元素继承其父级的属性

9.有多少种方式可以显示HTML元素？

- `inline`：可以将块元素显示为内联元素。元素的width和height值不会变
- `block`:可以将内联元素显示为块元素
- `inline-block`:类似inline，可以使用使用高度和宽度值
- `flex`：将容器和元素显示为弹性结构
- `inline-flex`：将flex容器显示为内敛元素
- `grid`:将HTML元素显示为网格容器
- `none`：隐藏HTML元素

10.'display:none'和'visibility:hidden'有什么区别？

display:none：该元素被隐藏，仍占用空间

visibility:hidden：也会被隐藏，但不会占用网页上任何空间

11.如何在HTML中指定链接并解释target属性？

HTML提供超链接<a>标签来指定网页中的链接,href属性用于指定链接，target属性用于指定我们要在哪里打开链接文档。target属性有以下值:

  • _self：默认值，在同一窗口或选项卡中打开文档
  • _blank：在新窗口或选项卡中打开文档
  • _parent：在父框架中打开文档
  • _top：在全身中打开文档

12.链接标签'link'和'a'的区别？

`link`：链接标签，定义文档和外部资源之间的链接，是不可点击的
`a`：锚标签，创建一个指向另一个网站或者当前网页特定部分的超链接，是可点击的

13.对于脚本的使用位置有哪些规则？

  • 库脚本或事件脚本放在head部分
  • 将不会在页面上写入任何内容的普通脚本放在head部分
  • 将在网页上呈现内容的脚本放在正文部分的底部

二、HTTP篇

1.什么是HTTP？

HTTP是超文本传输协议，是网络传输数据的协议。它是一个简单的请求-响应协议，通常运行在TCP之上。 工作原理过程如下：

  • 客户与服务器建立连接
  • 客户想服务器提出请求
  • 服务器接受请求，并根据请求返回相应的文件作为应答
  • 客户与服务器关闭连接

2.什么是HTTPS？

HTTPS是安全的超文本传输协议。 它是以安全为目的的HTTP通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。 HTTPS在HTTP的基础上加入SSL。 HTTPS存在不同于HTTP的默认端口及一个加密/身份认证层（HTTP与TCP之间）。 它被广泛用于安全敏感的通信。例如交易支付等。

3.在HTTPS中，TLS/SSL如何加密HTTP请求和响应？

TSL使用公钥加密技术，公钥通过服务器的SSL证书与客户端设备共享。 当客户端打开与服务器的连接时，两个设备使用公钥锁定新的密钥（会话密钥）,加密它们之间的后续通信。 这样子，所有的HTTP请求和响应都会使用这个密钥进行加密，任何截获通信都只会截获随机字符串。

4.HTTP的优点和缺点是什么？

优点：

  • HTTP可以用Internet上的其他协议实现，也可以在其他网络上实现
  • HTTP页面存储计算机和Internet缓存中，因此可以快速访问
  • 与平台无关，允许跨平台移植
  • 不需要任何运行支持
  • 可以通过防火墙使用！全球应用是可能的
  • 不是面向连接的，因此没有网络开销来创建和维护会话状态和信息 缺点：
  • 没有隐私，任何人都可以看到通信内容
  • 数据完整性和不安全性
  • 任何拦截请求的人都可以获取用户名和密码

5.HTTPS的有点和缺点是什么?

优点：

  • 在大多数情况下，通过HTTPS运行的站点将进行重定向。所以即使输入http://，它也会通过安全连接重定向到https://
  • 它允许用户执行安全的电子商务
  • SSL技术保护任何用户并建立信任
  • 一个独立的机构验证证书所有者的身份

缺点：

  • HTTPS协议无法阻止从游览器缓存的页面中窃取信息
  • SSL数据只能在网络传输期间进行加密
  • HTTPS会增加计算开销和网络开销，所以速度会比HTTP慢点

6.HTTP和HTTPS有什么区别?

范围HTTPHTTPS
含义超文本传输协议安全的超文本传输协议
安全安全性低安全性高
端口默认80端口默认端口443
URL开头 http://https://
应用场景适合博客信息消费等网站适合收集账号等网络信息和支付功能等网站
协议TCP/IP级别运行没有单独的协议，基于HTTP运行，但是用了TLS/SSL技术加密连接
域名验证不需要SSL需要SSL整数并由CA签名
数据加密不使用数据加密使用数据加密
搜索排行不会提高搜索排名，搜索引擎不会优先考虑HTTP网站有助于提高搜索排名，由于HTTPS是安全网站，搜索引擎会为HTTPS提供偏好
速度速度快相比速度慢，由于安全性增加计算开销和网络开销，所以速度会比HTTP慢点
漏洞容易被黑客攻击相对高度安全
运行层级应用层传输层

7.常见的HTTP方法？

  • GET：用于从服务器获取详细信息，基本上是只读操作
  • POST：用于在服务器上创建资源
  • PUT：用于更新服务器上的资源
  • DELETE：用于删除服务器上的资源
  • PATCH：用于修改服务器上的资源
  • OPTIONS：获取服务器上支持的资源选项列表

8.常见的HTTP状态码有哪些？

  • 1**：信息响应
  • 2**：成功响应
  • 3**：重定向
  • 4**：客户端错误
  • 5**：服务端错误 最常用状态码如下：
  • 200：成功
  • 400：可能由于验证错误或者缺少输入数据引起
  • 403：当前用户无权访问资源
  • 404：资源方法不可用
  • 500：服务器在运行该方法时抛出异常

9.GET和POST的区别是什么？

本质上都是TCP链接，并无区别，但由于HTTP的规定以及游览器的限制，导致它们在应用过程中会有所不同，具体不同如下：

  • POST更安全，不会作为url的一部分，不会被缓存、保存在服务器日志、游览器记录中
  • POST发送的数据量更大，而GET的url有长度限制
  • POST比GET慢
  • GET用于从服务器获取详细信息，基本上是只读操作，POST用于在服务器上创建资源

10.为什么GET比POST更快？

POST请求包含更多的请求头，这个速度影响微乎其微，主要是因为POST在真正接收数据之前会先将请求头发送给服务端进行确认，确认后再真正发送数据。

POST请求过程：

  1. 游览器请求tcp连接(第一次握手)
  2. 服务器答应进行tcp连接(第二次握手)
  3. 游览器确认，并发送pots请求头(第三次，这个报文比较小，所以http会再此时进行第一次数据发送)
  4. 服务器返回100 Continue响应
  5. 游览器发送数据
  6. 服务器返回200 OK响应 GET请求过程：
  7. 游览器请求tcp连接(第一次握手)
  8. 服务器答应进行tcp连接(第二次握手)
  9. 游览器确认，并发送pots请求头(第三次，这个报文比较小，所以http会再此时进行第一次数据发送)
  10. 服务器返回200 OK响应 也就是说，get的总消耗是post的2/3左右
avatar
文章
阅读
粉丝