前端高频面试题整理含答案-HTML篇（2024）

基础篇

1.什么是html？

HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言。

2.请解释一下HTML中的DOCTYPE是什么。

DOCTYPE是指文档类型声明，用于告诉浏览器当前页面使用的HTML版本。它位于HTML文档的开头，例如<!DOCTYPE html>表示使用HTML5。

3.请解释一下HTML语义化的概念。

HTML语义化是指使用恰当的标签来描述网页内容的结构和含义，使得页面结构更加清晰、易于理解和维护。

4.`<div>`和`<span>`有什么区别？

<div>是一个块级元素，用于组织和布局页面内容；<span>是一个内联元素，用于对文本进行样式化或标记。

5.请解释一下HTML5的本地存储机制。

LocalStorage：LocalStorage是HTML5提供的一种持久化的本地存储方式。它允许网页在浏览器中存储键值对数据，并且该数据在页面关闭后仍然存在。LocalStorage的数据大小限制通常为5MB左右。
SessionStorage：SessionStorage也是HTML5提供的一种本地存储方式，与LocalStorage类似，但是SessionStorage的数据在页面关闭后会被清除。SessionStorage适合存储会话期间需要保持的临时数据。
IndexedDB：IndexedDB是一种高级的客户端数据库，它允许网页在浏览器中存储结构化数据。IndexedDB提供了更强大的查询和事务支持，适合存储大量数据或需要复杂查询的场景。
WebSQL：WebSQL是一种基于SQL的客户端数据库，但是它已经不再被HTML5标准所推荐使用，因为它的规范已经停止更新，并且不被所有浏览器支持。

6.请解释一下HTML中的锚点是什么。

HTML中的锚点是指通过<a>标签创建的链接，可以在页面内部进行导航，例如跳转到页面的特定位置。

7.请解释一下HTML中的无序列表和有序列表的区别。

无序列表使用<ul>标签表示，列表项使用<li>标签表示，列表项前面没有编号；

有序列表使用<ol>标签表示，列表项同样使用<li>标签表示，列表项前面有编号。

8.请解释一下HTML中的图像地图是什么。

图像地图是指将一个图像分割成多个可点击的区域，并为每个区域定义一个链接。可以使用<map>和<area>标签来创建图像地图。

9.请解释一下HTML中的表格是如何工作的。

HTML中的表格由<table>、<tr>和<td>等标签组成。<table>表示整个表格，<tr>表示表格的行，<td>表示表格的单元格。

10.请解释一下HTML中的块级元素和内联元素的区别。

块级元素独占一行，可以设置宽度、高度和边距等样式；内联元素不独占一行，只占据自身内容的空间，无法设置宽度、高度和边距等样式。

11.请解释一下HTML中的元数据是什么。

HTML中的元数据是指提供关于网页的额外信息，如标题、字符编码、样式表等。元数据通常位于<head>标签中。

12.请解释一下HTML中的嵌套是什么。

HTML中的嵌套是指将一个元素放置在另一个元素内部的操作。例如<div><p>...</p></div>中的<p>元素被嵌套在<div>元素内部。

13.请解释一下HTML中的响应式设计是什么。

响应式设计是指根据设备的屏幕大小和分辨率，自动调整网页的布局和样式，以提供更好的用户体验。常见的响应式设计技术包括媒体查询和弹性布局。

引申篇

1.html5的新特性有哪些？

语义化标签：HTML5引入了一系列的语义化标签，如<header>、<nav>、<section>、<article>等，使得网页结构更加清晰明了，有助于搜索引擎优化和可访问性。
视频和音频支持：HTML5提供了<video>和<audio>标签，使得在网页中嵌入视频和音频变得更加简单。同时，HTML5还引入了WebRTC技术，使得实时音视频通信成为可能。
Canvas绘图：HTML5的<canvas>元素允许通过JavaScript脚本来绘制图形、动画和游戏等。它提供了一个类似于画布的区域，开发者可以在上面绘制各种图形。
本地存储：HTML5引入了本地存储机制，包括localStorage和sessionStorage。这些机制允许网页在客户端存储数据，以便在用户下次访问时进行读取和使用。
地理定位：HTML5提供了Geolocation API，可以获取用户的地理位置信息。这使得开发者可以根据用户的位置提供个性化的服务和功能。
Web Workers：HTML5引入了Web Workers，允许在后台运行脚本，以提高网页的性能和响应能力。Web Workers可以在独立的线程中执行任务，不会阻塞主线程。
表单增强：HTML5为表单元素提供了一些新的属性和类型，如<input type=“email”>、<input type=“date”>等，使得表单的验证和输入更加方便和准确。
Web存储：HTML5引入了Web存储API，包括IndexedDB和Web SQL Database，用于在客户端存储大量结构化数据，提供了比传统的cookie更强大和高效的存储方式。
Web组件：HTML5的Web组件允许开发者创建自定义的可重用组件，以提高代码的可维护性和复用性。Web组件包括自定义元素、Shadow DOM和HTML模板等。
响应式设计：HTML5支持响应式设计，使得网页可以根据不同设备的屏幕大小和分辨率进行自适应布局和显示，提供更好的用户体验。

2.html中的块状元素和行内元素有哪些？

块状元素（Block-level Elements）：
- 块状元素以新行开始，占据一整行的宽度。
- 常见的块状元素有：<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form>等。
行内元素（Inline Elements）：
- 行内元素不会独占一行，它只占据它包含的内容的宽度。
- 常见的行内元素有：<span>、<a>、<strong>、<em>、<img>、<input>、<button>等。

需要注意的是，HTML5中还引入了一种新的元素类型——内联块状元素（Inline Block Elements），它具有行内元素的特点，但可以设置宽高和外边距等属性。常见的内联块状元素有：<img>、<input>等。

3.html的优化方法？

减少HTTP请求：合并多个CSS和JavaScript文件，使用CSS Sprites来减少图片请求，减少页面中的外部资源引用。
压缩和缓存：压缩HTML、CSS和JavaScript文件，减小文件大小，提高加载速度。使用浏览器缓存来减少重复请求。
使用CDN加速：将静态资源（如图片、CSS和JavaScript文件）存放在CDN（内容分发网络）上，利用CDN的分布式节点来加速资源的传输。
延迟加载：对于页面中的一些非关键资源，可以延迟加载，即在页面加载完成后再进行加载，提高页面的初始加载速度。
优化图片：使用适当的图片格式（如JPEG、PNG、WebP），压缩图片大小，使用懒加载技术加载图片。
简化HTML结构：避免嵌套过深的标签结构，减少不必要的标签和属性，提高解析速度。
使用异步加载：对于一些不影响页面展示的脚本，可以使用异步加载，使页面在加载脚本时不被阻塞。
避免重定向：减少页面的重定向次数，避免不必要的网络请求。
使用合适的DOCTYPE声明：正确声明文档类型，避免浏览器进入兼容模式，提高渲染速度。
优化CSS和JavaScript：合理组织CSS和JavaScript代码，减少冗余和重复代码，使用压缩工具进行压缩。

4.说一下iframe有哪些优点和缺点？

iframe是HTML中的一个标签，用于在当前页面中嵌入另一个页面。它具有以下优点和缺点：

优点：

简单易用：使用iframe可以轻松地将其他网页嵌入到当前页面中，无需复杂的JavaScript代码。
分离内容：通过使用iframe，可以将不同的内容分离到不同的页面中，使代码更加模块化和可维护。
并行加载：页面中的iframe可以并行加载，提高了页面加载的效率。
跨域通信：通过iframe的跨域通信机制，可以实现不同域名之间的数据传递。

缺点：

安全性问题：由于iframe可以嵌入其他网页，存在安全风险，例如可能被用于点击劫持攻击。
SEO问题：搜索引擎可能无法正确解析iframe中的内容，影响网页的搜索排名。
页面性能：过多的iframe会增加页面的加载时间和资源消耗。
难以控制样式：由于iframe中的内容是独立的页面，样式和布局可能难以控制和调整。

5.说一下常见的meta标签属性和作用？

6.说一下b和strong，i和em的区别？

7.a标签与link标签的区别？

a标签（Anchor标签）用于创建超链接，可以将文本、图片或其他元素转换为可点击的链接。a标签的href属性指定了链接的目标地址，可以是一个URL、一个文件路径或一个锚点。当用户点击a标签时，浏览器会跳转到指定的目标地址。
link标签用于在HTML文档中引入外部资源，如CSS样式表、图标文件等。link标签的rel属性指定了被引入资源的关系类型，常见的有stylesheet（引入CSS样式表）、icon（引入网站图标）等。link标签的href属性指定了被引入资源的路径。

总结一下两者的区别：

a标签用于创建超链接，link标签用于引入外部资源。
a标签可以在当前页面跳转到其他页面，link标签只是引入外部资源而不会跳转页面。
a标签可以包含文本或其他元素，link标签只能放在head标签内。

8.html中href属性与src的区别？

href（Hypertext Reference）是用于指定链接目标的属性。它通常用于在HTML文档中创建超链接，可以链接到其他网页、文件、锚点等。例如，可以使用href属性将文本或图像转换为可点击的链接，点击后会跳转到指定的URL。
src（Source）是用于指定资源路径的属性。它通常用于在HTML文档中引入外部资源，如图像、音频、视频等。通过src属性，可以将外部资源嵌入到HTML文档中进行展示或播放。例如，可以使用src属性将图片文件嵌入到<img>标签中，或者将视频文件嵌入到<video>标签中。

总结一下：

href用于创建超链接，指向其他网页或资源。
src用于引入外部资源，如图像、音频、视频等。