【前端面试汇总】- HTML 面试题汇总

reoreo
5 阅读21分钟

1、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

行内元素：

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
  • 可以设置行高
  • 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效
  • 内边距（padding）设置上下从现实上看是增加的，但其实设置时无效的，并不会影响周围的元素
  • span a label i b strong em del(删除线) ins(下划线) sub(下标) sup（上标）

块级元素：

  • 独占一行，其宽度自动填满其父元素宽度（即使设置了宽度仍然是独占一行的）
  • 多个块状元素标签写在一起，默认排列方式为从上至下
  • 高度，行高，外边距（margin）以及内边距（padding）都可以控制
  • div h1-h6 p ul ol li nav aside header footer section article address form table

空元素：

  • 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的
  • meta link img input

2、HTML5 的 data-* 属性有什么作用？

  • 作用：
    • 用于存储储自定义数据，可以通过 js 访问。
  • 使用场景：
    • 存储用户 ID、状态信息
    • 传递配置参数
    • 存储临时数据
<body>
  <div data-user-id="123" data-username="zhangsan" data-age="25">用户信息</div>
  <script>
    const div = document.querySelector("div");
    console.log(div.dataset.userId); // "123"
    console.log(div.dataset.username); // "zhangsan"
    console.log(div.dataset.age); // "25"
  </script>
</body>

在 JavaScript 中，属性名会自动从 kebab-case 转换为 camelCase。

3、HTML 中 DOCTYPE 的作用是什么？

  • 在 HTML 5 中，我们需要在第一行标注 <!DOCTYPE html>
  • HTML 的起源
    • HTML（超文本标记语言）在 1991 年发明，最初是为了简化信息在互联网中的发布与分享。早期的 HTML 文档通常不需要 声明，浏览器根据自己的规则解析这些文档
  • 标准化的需求
    • 随着 Web 技术的发展，不同浏览器之间的行为差异导致了严重的兼容性问题
    • W3C（万维网联盟）在 1994 年发布了 HTML 2.0，并引入了 声明，用以定义文档的 DTD（文档类型定义）
  • 什么是 <!DOCTYPE>
    • <!DOCTYPE> 是 HTML 文档的文档类型声明，告知浏览器使用哪种 HTML 版本来解析文档。
    • 声明决定了文档的渲染模式，包括 标准模式、怪异模式 以及 近标准模式。
  • 渲染模式
    • 标准模式（Standards Mode）
      • 浏览器严格遵循 W3C 标准，呈现出符合现代 Web 标准的行为。
    • 怪异模式（Quirks Mode）
      • 模仿早期浏览器的行为，保留了许多历史遗留的渲染问题，以支持旧网页。怪异模式会导致盒模型的解析方式与标准模式不同。
    • 近标准模式（Almost Standards Mode）
      • 介于标准模式和怪异模式之间，解决了与表格单元格垂直对齐相关的问题，但在其他方面与标准模式基本一致。
  • HTML5 取消了复杂的 DTD 声明，统一使用简洁的 <!DOCTYPE html>

4、Quirks（怪癖）模式是什么？它和 Standards（标准）有什么区别？

  • 标准模型
    • 元素的总宽度和总高度是由内容宽度（content width）、内边距（padding）、边框（border）和外边距（margin）组成的。
    • 当你给一个元素设置宽度和高度时，这个数值仅仅代表内容区域的大小，不包括 padding 和 border。
  • 怪异模式
    • 怪异模式主要是为了兼容早期的浏览器（如 Internet Explorer 5.x 及更早版本）而存在的。在这些浏览器中，并没有严格遵循 W3C 的盒模型标准
  • 当不对 doctype 进行定义时，会触发怪异模式
    • 在标准模式下，一个块的总宽度= width + padding(左右) + border(左右) + margin(左右)
    • 在怪异模式下，一个块的总宽度= width + margin(左右)（即 width 已经包含了 padding 和 border 值）
  • box-sizing
    • 当设置为 box-sizing:content-box 时，将采用标准模式解析计算，也是默认模式
    • 当设置为 box-sizing:border-box 时，将采用怪异模式解析计算

5、html 语义化

  • 什么是语义化
    • HTML 标签的语义化是指：通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构
  • 为什么需要语义化
    • 在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构
    • 用户体验好：例如 title、alt 用于解释名词或解释图片信息、label 标签的活用
    • 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
    • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
    • 便于团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化
  • 常用的有哪些标签
    • <header> “网页”或“section”的页眉。
    • <footer> “网页”或“section”的页脚
    • <hgroup> 当元素有多个层级时，该元素可以将 h1 到 h6 元素放在其内，譬如文章的主标题和副标题的组合
    • <aside> 元素被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的 section）
    • <section> 元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组
    • <article> 论坛的帖子，博客上的文章，一篇用户的评论，一个互动的 widget 小工具。（特殊的 section）
    • <nav> 页面的导航链接区域。用于定义页面的主要导航部分
    • <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减
    • <p> 段落标记。文字会自动换行。
    • <b>、<em> 和 <strong>（加粗、斜体强调、粗体强调）
    • <span> 用来组合文档中的行内元素
    • <ul> <ol> <li> 无序列表 有序列表 列表项目

6、head 标签

  • SEO 优化
    • 页面标题 title <title>your title</title>
    • 页面关键词 keywords <meta name="keywords" content="your keywords">
    • 页面描述内容 description <meta name="description" content="your description">
    • 定义网页作者 author <meta name="author" content="author,email address">
    • 定义网页搜索引擎索引方式 robots <meta name="robots" content="index,follow">
  • 声明文档使用的字符编码 <meta charset="utf-8">
  • 优先使用 IE 最新版本和 Chrome <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  • 为移动设备添加 viewport,可以让布局在移动浏览器上显示的更好
  • ios 设备
    • 添加到主屏后的标题 <meta name="apple-mobile-web-app-title" content="标题">
    • 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes"/>
    • 设置状态栏的背景颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  • 关闭 chrome 浏览器下翻译插件 <meta name="google" value="notranslate" />
  • cookie 设定指定时间后删除 <meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

7、meta viewport 是做什么用的，怎么写？ 常⽤的 meta 标签有哪些？

作为前端，你必须要知道的 meta 标签知识

  • name 和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值
    • author 用来表示网页的作者的名字，例如某个组织或者机构 <meta name="author" content="aaa@mail.abc.com">
    • description 是一段简短而精确的、对页面内容的描述。 <meta name="description" content="今日头条是...">
    • keywords 与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
    • viewpoint 为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。<meta name="viewport" content="width=device-width, initial-scale=1.0">
      • width 设置为 device-width 设置成设备的实际宽度
      • initial-scale 设置为 1.0 防止浏览器对页面进行缩放
    • robots 表示爬虫对此页面的处理行为，做搜索引擎抓取
      • content 可以为：
        • all 搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
        • none 搜索引擎讲忽略此网页
        • index 搜索引擎索引此网页
        • follow 搜索引擎继续通过此网页的链接索引搜索其它的网页
    • renderer 用来指定双核浏览器的渲染方式
      • 通过这个设置可以指定 360 浏览器的渲染方式 <meta name="renderer" content="webkit">
    • http-equiv 和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值。
      • http-equiv 所有允许的值都是特定 HTTP 头部的名称
      • X-UA-Compatible 做 IE 浏览器适配 <meta name="X-UA-Compatible" content="IE=edge,chrome=1">
        • IE=edge 告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9 就以 IE9 版本来渲染。
        • chrome=1 告诉浏览器，如果当前 IE 浏览器安装了 Google Chrome Frame 插件，就以 chrome 内核来渲染页面。

8、前端页面有哪三层构成，分别是什么？

  • 结构层
    • 由 HTML 超文本标记语言创建，即页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
  • 表示层
    • 由 CSS 层叠样式表负责创建，作用是如何显示有关内容
  • 行为层
    • 行为层表示网页内容跟用户之间产生交互性，用户操作了网页，网页给用户一个反馈，这是 JavaScript 和 DOM 主宰的领域

9、HTML5 有哪些更新

深入了解 HTML5 的新特性

  • 语义化标签
  • 多媒体支持
    • 音频元素 <audio>
    • 视频元素 <video>
  • canvas 绘图
  • 新的表单元素和属性
    • 元素
      • <datalist> 元素允许你在输入框中提供预定义的选项列表
      • <output> 元素用于显示计算结果或脚本执行的结果
    • 属性
      • placeholder 属性用于在输入框中提供对用户的简要说明
      • required 属性用于指定表单字段必须填写的情况
      • pattern 属性用于定义输入字段的模式，通常与 title 属性一起使用，提供对模式的说明
      • autocomplete 属性用于控制浏览器是否启用表单字段的自动完成功能
      • novalidate 属性用于禁用浏览器的表单验证，可用于自定义 JavaScript 验证
  • 新的表单类型
    • type="color" 创建一个颜色选择器，用户可以通过点击选择颜色 <input type="color" name="favcolor" value="#ff0000">
    • type="date" 提供一个日期选择器，用户可以选择日期 <input type="date" name="bday">
    • type="email" 用于接受电子邮件地址的输入。浏览器通常会检查输入是否符合电子邮件地址的格式 <input type="email" name="email">
    • type="file" 允许用户选择并上传文件 <input type="file" name="file">
    • ...
  • 新的 API
    • Web Storage API
      • Local Storage 持久化的本地存储，数据在不同会话和窗口间都是共享的
      • Session Storage 会话级别的本地存储，数据在同一会话（同一标签页或窗口）中共享
    • Web Audio API 用于在 Web 应用程序中处理和操作音频数据的 API
    • WebRTC API 用于实现实时通信的 WebRTC（Web Real-Time Communication）API，包括音视频通信和数据通信
    • Geolocation API 用于获取用户设备的地理位置信息
    • Web Workers API 允许在主线程之外运行脚本，提高了多线程并行性
    • Fetch API 用于发起 HTTP 请求，替代了传统的 XMLHttpRequest
    • 拖放（Drag and Drop）API
  • 新的属性和事件
    • 属性
      • data-* 属性允许开发者在 HTML 元素上存储自定义数据，以便 JavaScript 使用
      • contenteditable 属性使元素的内容可编辑，用户可以直接编辑元素内的文本
      • ...
    • 事件
      • input 事件在用户输入、粘贴或删除文本时触发
      • change 事件在表单元素的值发生变化并失去焦点时触发
      • DOMContentLoaded 事件在文档加载完成并解析完成后触发，而不需等待样式表、图像等资源加载完成
      • contextmenu 事件在用户右键点击元素时触发，通常用于自定义上下文菜单

10、说一下 web worker

聊一下对 WebWorker 的理解

  • 概念
    • WebWorker 实际上是运行在浏览器后台的一个单独的线程，可以执行一些耗时的操作而不会阻塞主线程。
    • WebWorker 通过与主线程之间传递消息实现通信，这种通信是双向的
  • 特点
    • 提高应用响应能力
      • 主线程被独占执行一些耗时的计算或操作时，会导致 UI 无响应。WebWorker 可以把这些任务转移到后台线程，从而保证主线程的运行，提高应用的响应能力。
    • 充分利用多核 CPU
      • 现代 CPU 都是多核的，WebWorker 可以让 Web 应用利用多核 CPU 的并行计算能力，充分发挥计算机硬件性能。
    • 避免渲染阻塞
      • JavaScript 运行在主线程，如果主线程一直占用，就无法执行 GUI 渲染任务，导致界面渲染受阻。WebWorker 把一些费时任务分流到后台线程就可以避免这一问题。
    • 后台持续运行
      • WebWorker 所在后台线程可持续运行，即使页面被挂起或最小化，任务仍在后台执行，非常适合一些需要长时间运行的操作。
  • 场景
    • 长时间运行的操作，一些复杂的数学计算，自定义公式的计算
    • 大文件上传，创建文件切片

11、HTML5 的离线储存怎么使用，它的工作原理是什么

HTML5 的新特性（二）——离线存储、Web Workers Service Worker：离线应用与后台同步的解决方案

  • 离线存储允许 web 应用在用户的设备上本地保存数据，即使在没有网络连接的情况下，用户也能加载和使用应用。
  • Service Worker
    • 概念
      • Service Worker 本质上是充当 web 应用程序与浏览器之间的代理服务器。也可以在网络可用时作为浏览器和网络间的代理。它们的目的是创建有效的离线体验、拦截网络请求并根据网络是否可用采取适当的操作，以及更新服务器上的资产。它们还允许访问推送通知和后台同步 API。
    • 特性
      • 本质上是一个 Web Worker，它独立于 Javascript 主线程，因此它不能直接访问 DOM，也不能直接访问 window 对象，但是可以访问 navigator 对象，也可以通过消息传递的方式（如 postMessage）与 Javascript 主线程进行通信。
      • 独立于 Javascript 主线程，所以不会造成阻塞。它设计为完全异步，同步 API（如 XHR 和 localStorage 不能在 Service Worker 中使用。
      • 基于 HTTPS 的，因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。如果是本地调试的话，localhost 是可以的。
      • 拥有独立的生命周期，与页面无关（关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动）。注册 Service Worker 后，浏览器会默默地在背后安装 Service Worker。
    • 生命周期
      • 解析(parsed)、安装(installing)、安装完成(installed)、激活(activating)、激活完成(activated)、闲置(redundant)。
    • Service Worker 离线缓存
      • 缓存资源
        • 最重要的功能之一，就是可以通过缓存静态资源来实现离线访问我们的页面。
        • Service Worker 的缓存基于 CacheStorage，它是一个 Promise 对象，我们可以通过 caches 来获取它。CacheStorage 提供了一些方法，我们可以通过这些方法来对缓存进行操作
        • 在 installing 状态下会调用 install 方法，通常我们会在 install 事件中缓存一些静态资源。
      • 缓存更新
        • 缓存资源并不会随着我们代码或者资源的更改而更新缓存。
        • 通过版本号来控制更新，在 activating 状态下会触发 activate 回调，在该回调中我们可以清除旧缓存，然后在 install 事件中缓存新的资源。
  • Cache API
    • LocalStorage
      • 用于长期存储数据，数据没有过期时间，除非主动删除数据，否则数据永远不会消失
      • 存储容量：5MB
      • 只能存储字符串，因此需要将对象 JSON 序列化
    • SessionStorage
      • 用于临时存储数据，数据仅在页面会话期间存在，页面关闭则数据消失
      • 作用域限于单个页面会话
      • 存储容量：5MB，存储字符串数据
    • IndexedDB
      • 用于客户端存储大量结构化数据，包括文件/二进制大对象
      • 支持事务，可以存储和操作大量数据
      • 允许你创建索引来高效查询数据

12、script、script async 和 script defer 的区别

面试官：给我说说 script 默认加载、defer、async 加载方式的异同点

  • <script> 默认是顺序加载
  • defer 属性
    • 先下载 JS 文件，再渲染页面内容，最后执行 JS 脚本内容，执行的顺序与出现顺序一样
  • async 属性
    • 下载 JS 文件，渲染页面跟执行 JS 脚本同时进行，不能保证执行的顺序

13、src 和 href 的区别

src 和 href 的区别

  • src
    • 引用外部资源
    • 替换元素本身的内容
    • 解析到使用 src 的元素时，会暂停其他资源资源的下载（script 元素推荐放在 html 结构的底部）
  • href
    • 超链接
    • 不会替换元素本身的内容
    • 不会暂停其他资源的下载（像 CSS 那样影响页面观感的可以放在 html 结构的头部优先加载）

14、img 标签中 srcset 和 sizes

响应式图片 img 标签中 srcset 和 sizes 的使用

  • 背景
    • 日常开发中，我们使用固定大小的图片，但是对于不同的设备，设备像素比（dpr）的不同，图片的清晰度会受到影响。
  • srcset
    • 定义
      • srcset 的值是一个字符串，用来定义一个或多个图像候选地址，以 , 分割，每个候选地址将在特定条件下使用。
    • 步骤
      • <img src="https://picsum.photos/id/88/150" srcset="https://picsum.photos/id/88/300 2x,https://picsum.photos/id/88/450 3x,https://picsum.photos/id/88/600 4x" alt="" />
      • 当放大两倍，此时 dpr 为 2，找到 2x 对应图片
      • 如果放大 5 倍，此时 dpr 为 5，没有设置对应的图片，会选择适合的 4x 图片
  • sizes
    • 定义
      • 为每个媒体条件指定图像的布局宽度。在布局状态更改以匹配不同介质条件时自动选择不同图像（甚至是不同方向或长宽比的图像）的能力。

15、说说设备像素，css 像素，设备独立像素，dpr，ppi 之间的区别

面试官：说说设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

  • css 像素
    • px 是一个相对单位，相对的是设备像素
    • 在同一个设备上，每 1 个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）
    • 在不同的设备之间，每 1 个 CSS 像素所代表的设备像素是可以变化的（比如两个不同型号的手机）
  • 设备像素
    • 设备能控制显示的最小物理单位
    • 从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位为 pt
  • 设备独立像素
    • 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了 css 像素
    • 一个设备独立像素里可能包含 1 个或者多个物理像素点，包含的越多则屏幕看起来越清晰
    • 在 javaScript 中可以通过 window.screen.width window.screen.height 查看
  • dpr
    • 设备像素比，代表设备独立像素到设备像素的转换关系
    • 在 JavaScript 中可以通过 window.devicePixelRatio 获取
    • dpr = 设备像素 / 设备独立像素
  • ppi
    • pixel per inch 每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。
    • ppi = √ ￣ x^2 * y^2 / 屏幕尺寸 （x, y 是屏幕分辨率）

16、iframe 有那些优点和缺点

使用 iframe 的优缺点

  • 优点
    • iframe 能够把嵌入的网页原样展现出来
    • 模块分离，便于更改，如果有多个网页引用 iframe，只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷
    • 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决
  • 缺点
    • 影响搜索引擎优化，不利于网站排名
    • 多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
    • 阻塞页面加载，影响网页加载速度，window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发

17、Canvas 和 SVG 的区别

Canvas 和 SVG 的区别

  • 描述：
    • Canvas 使用 JavaScript 来绘制图形，适合处理图像、视频和游戏等需要高性能的场景。
    • SVG 是一种使用 XML 描述 2D 图形的格式，可以缩放到任意大小而不失真，并且可以在不同的平台和设备上以相同的方式呈现。
  • 相同点：
    • 都是 HTML5 中的图形渲染技术，用于在网页中呈现动态或静态图形。
  • 不同点：
    • 绘图方式：Canvas 是基于位图的绘图技术，而 SVG 是基于矢量图形的绘图技术。
    • 缩放性：SVG 是矢量图形，可以缩放到任意大小而不失真，而 Canvas 是基于像素的绘图技术，缩放会导致像素失真。
    • 编辑性：SVG 可以使用 XML 进行编辑和修改，而 Canvas 是位图，不容易进行编辑和修改。
    • 浏览器兼容性：Canvas 在大多数现代浏览器中都有很好的支持，但在某些旧浏览器中可能存在问题。而 SVG 在大多数现代浏览器中都有很好的支持，并且在旧版本的 Internet Explorer 中也有插件支持。
    • 动画效果：SVG 具有更好的动画效果和交互性，可以通过 CSS 和 JavaScript 来控制动画。Canvas 也可以进行动画，但需要使用 JavaScript 编写复杂的动画逻辑。
    • 渲染方式：SVG 通过 DOM 元素来呈现图形，可以与其他 HTML 元素进行交互，但也会带来一定的性能问题。Canvas 则是在 HTML5 画布中绘制图形，没有与其他 HTML 元素的交互，因此性能更高。
    • 文本渲染：在 SVG 中，文本渲染是矢量化的，可以进行平滑缩放，而在 Canvas 中，文本是像素化的，缩放可能会导致模糊。
    • 图像处理：Canvas 提供了一些原生的图像处理方法，如像素操作、滤镜和混合模式等，可以方便地对图像进行处理。而 SVG 并不提供原生的图像处理方法，需要使用其他工具或 JavaScript 库来实现。
    • 文件大小：SVG 文件通常比 Canvas 文件小，因为 SVG 是基于矢量图形的，可以通过优化路径和使用缩写等方式来减小文件大小。而 Canvas 文件通常比较大，因为它是基于像素的位图，需要存储每个像素的颜色信息。
    • 实时更新：Canvas 的绘图是实时的，每个像素都可以实时更新，而 SVG 的绘图是渲染器决定的，它需要花费一些时间来渲染图形。
    • 复杂性：Canvas 适合处理简单的图形和动画效果，但对于复杂的图形，它的处理能力有限。而 SVG 适合处理复杂的图形和动画效果，可以通过分层和优化来提高性能。

18、说一下 HTML5 drag API

深入了解 HTML5 Drag API：实现图片拖拽排序功能

  • HTML5 提供的一组用于实现拖拽操作的接口和事件
  • 拖拽源的属性和事件：
    • draggable 属性
      • 用于指定元素是否可拖动
    • dragstart 事件
      • 拖动操作开始时触发的事件
    • drag 事件
      • 拖动过程中持续触发的事件
    • dragend 事件
      • 拖动操作结束时触发的事件
  • 目标区域的属性和事件
    • dragenter 事件
      • 拖动元素进入目标区域时触发的事件
    • dragover 事件
      • 拖动元素在目标区域上方移动时持续触发的事件
    • dragleave 事件
      • 拖动元素离开目标区域时触发的事件
    • drop 事件
      • 在目标区域释放拖动元素时触发的事件
  • DataTransfer 对象
    • 在拖放源和目标区域之间传递数据
    • 事件的 event.dataTransfer 对象
  • 场景：
    • 图片拖拽功能
avatar
文章
阅读
粉丝