web前端之HTML面试题十道必问（最新）2022.6.11

前言：

随着互联网技术的发展，前端页面的不断更新优化，我们所学的内容也随之变化，比如HTML5方面、css3、ES6等很多内容，今天我们所整理的就是关于前端开发面试时必问的一些问题及一些所涉及的一些“坑”！！

1、px,em,rem,%区别？

• px：像素，相对长度单位，像素px是相对于显示屏幕分辨率而言的；
  特点：

  • px是固定的元素，一旦设置了就无法因为适应页面大小而改变

• em：是相对长度单位，相当于当期对象内文本的字体尺寸，如当前的行内文本的字体尺寸未被人为设置，则相对于浏览器默认字体尺寸，适用于响应式布局
  特点：

  • em的值并不是固定的；
  • em会继承父元素的字体的大小

注意：任意浏览器的默认的字体高度都是16px，所有未经调整的浏览器都符合：1em=16px

• rem: rem是css3新增的一个相对单位，是相对于根元素的 ——元素，通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就位rem
  特点：
  - 可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
  总结：

• rem和em单位是由浏览器基于自己设计中的字体大小计算得到的像素值

• em单位基于使用他们的元素的字体大小

• rem是基于html元素的字体大小

• erm单位可能接受任何继承的父元素字体大小影响

• rem单位可以从浏览器字体设置中继承字体大小

• 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem；

2、HTML5的新特性？

• 用于绘画的canvas元素；
• 用于媒介回放的video和audio元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如article、header、nav等
• 新的表单控件，比如date、time等

3、Utf-8编码汉字占多少个字节

• 占2个字节的：带有附加的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母则需要二个字节编码
• 占3个字节的：基于等同于GBK，含21000多个汉字
• 占4个字节的：中日韩超大字符集里面的汉字，有五万多个
  一个utf8数字占一个字节
  一个utf8英文占一个字节
  少数是汉字每个占用三个字节，多数占用四个字节‘

4.localstore和sessionstore的区别?

• localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

区别：

• sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法
• sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭
• 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
• sessionStorage为临时保存

而localStorage

• localStorage也是Storage类型的一个对象
• 在HTML5中localStorage作为持久保存在客户端数据的方案取代了
  lobalStorage(globalStorage必须指定域名)
• localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在
• 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
• localStorage为永久保存

5.cookie和session有什么联系？

什么是session？

• session 是一种服务端机制，类似散列表结构来存储用户数据。
• 浏览器第一次向服务器发送请求的时候，服务器会自动生成一个session和sessionID
• sessionID唯一标识这个session
• 服务器通过返回响应将sessionID发送回浏览器

总的来说：客户端请求服务端，服务端（Tomcat）会为这次请求开辟一块内存空间，这个对象便是Session对象， 存储结构为ConcurrentHashMap。

什么是cookie

• 1个HTTP cookie的（网络Cookie，浏览器cookie）是一小片数据的一个服务器发送到用户的网络浏览器。浏览器可以存储它并将其与下一个请求一起发送回同一服务器；
• 通常，它用于判断两个请求是否来自同一个浏览器 - 例如，保持用户登录。它记住无状态 HTTP协议的有状态信息。

两者的区别

• Cookie和Session都是会话技术，Cookie是运行在客户端，Session是运行在服务器端。
• Cookie有大小限制以及浏览器在存cookie的个数也有限制，Session是没有大小限制和服务器的内存大小有关。
• Cookie有安全隐患，通过拦截或本地文件找得到你的cookie后可以进行攻击。
• Cookies不会占服务器资源，是存在客服端内存或者一个cookie的文本文件中
• “Session”则会占用服务器资源。所以，尽量不要使用Session，而使用Cookies
• 有时候为了解决禁用cookie后的页面处理，通常采用url重写技术，调用session中大量有用的方法从session中获取数据后置入页面。

6.cookie和localStorage的区别，如何获得他们？

cookie的特点：

• 只能存储文本
• 单条存储有大小限制4KB左右
• 数量限制，一般浏览器，限制大概在50条左右
• 读取有域名限制
• 时效限制
• 路径限制

localStorage是什么？

• 主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage特点：

• localStorage拓展了cookie的4K限制
• ocalStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
• 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
• localStorage在浏览器的隐私模式下面是不可读取的
• localStorage不能被爬虫抓取到
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

注意：localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

7.link和@import的区别？

• link 是 HTML 提供的标签；@import 是 CSS 提供的语法规则。
• 加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
• link方式的样式的权重 高于@import的权重；
• mport只在IE5以上才能识别，而link是HTML标签，无兼容问题;
• link 支持使用javascript改变样式 （document.styleSheets），后者不可

8.cookie的特点

什么是cookie？

• cookie是存储于访问者计算机中的变量
• cookie是浏览器提供的一种机制
• 可以由JavaScript对其进行控制(设置、读取、删除)

cookie的优点：

• cookie可以实现跨页面全局变量
• cookie可以跨越同域名下的多个网页，但不能跨越多个域名使!用
• 可以设置有效期限
• cookie机制将信息存储于用户硬盘，因此可以作为跨页面全局变量，

cookie的缺点：

• cookie可能被禁用；
• cookie与浏览器相关，不能互相访问；
• cookie可能被用户删除；
• cookie安全性不够高；
• cookie存储空间很小(只有4–10KB左右)

cookie 常用场合：（1）保存用户登录状态；（2）跟踪用户行为；（3）定制页面；（4）创建购物车 …等等

9.对H5新增的语义化标签的理解？

新增语义化标签

• header
• nav
• footer
• section
• artice
• aside
• …

语义化的理解

• 语义化标签和无语义化div一样，都是表示一个空的容器，但是语义化标签通常都代表一个语义的内容块，如头部、导航、脚部、文章、段落、侧边栏……

• 在页面布局中经常使用DIV+CSS的方式，如果要表示一块的内容为导航，通常都是这样写的：

• 语义化标签要表示一个导航内容块，可以这样写：

  ，方便开发者使用

布局

10.前端有哪几种存储方式，他们之间的优缺点是什么？

前端存储方式：

• cookie存储
• sessionStorage存储
• localStorage存储

cookie存储

• 使用 cookie 必须要有服务器（HTML 静态网页无效），存储的大小限制在 4k。
• cookie 是要在服务器和浏览器来回输送的，由于浏览器的的跨域限制，客户端和服务端必须保证是同源策略（也就是跨域）。
• 而且 cookie 是存放在前端的，安全一直以来是个问题，适合使用一些会话信息传输。

sessionStorage存储

• 同源策略限制，若想在同一个页面之间对同一个 sessionStorage 进行操作，这些页面必须是同协议、域名、端口号。
• 单标签页限制，sesstionStorage 操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享 sesstionStorage 数据。
• 只在本地存储，seesionStorage 的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据
• 存储方式，seesionStorage 的存储方式采用 key、value 的方式。
• 存储上限限制，不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在 5MB 以下。

localStorage存储

• localStorage 会将第一次请求的数据直接存储在本地，可以存储 5M 数据，相比于 cookie 可以解决带宽，但只有高版本浏览器中才支持。
• 目前所有浏览器都会把 localStorage 的值类型限定为 string 类型，对于我们比较常见的 JSON 对象类型需要转换。
• localStorage 本质上是对字符串的读取，如果存储内容多的话会小号内存空间，导致页面变卡。