HTML 面试问题与解答 (2023) – 中级

最新推荐文章于 2024-07-12 20:49:16 发布

Q shen

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量80

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52010446/article/details/131837082

版权

下面包含最常见和最常见的 HTML 和 HTML 5 面试问题及其解释的列表。

`1. <div> 和 <span> 标签相似吗？`

这两个标签（<div>和<span>）都用于表示网页的部分。

标签用作块组件，标签用作内联组件。

<div>
    极客计算机科学门户
    <跨度>
        极客们的极客们
    <跨度>
</div>

标签： div 标签称为“Division”标签。它是一个块级标签，在 HTML 中用于划分网页上的内容（文本、图像、页眉、页脚、导航栏等）。div标签既有开始标签`（`

`）`，也有结束标签（`

`），并且必须强制关闭标签。标签： HTML span 元素是内联元素和内容的通用内联容器。它用于出于样式目的对元素进行分组（通过使用 class 或 id 属性）。更好的使用方法是当没有其他语义元素可用时。


## 2. <div> 和 <span> 标签的区别：

在这里插入图片描述

3.classes和id有什么区别？

id 属性： id 属性是用于指定文档的唯一标识符。CSS 和 JavaScript 使用它来为唯一元素执行特定任务。在 CSS 中，id 属性是使用 # 符号后跟 id 编写的。

句法：

<元素id =“id_name”>

在 CSS 样式表中：
#id_name {
// CSS 属性
}
class 属性： class 属性用于为 HTML 元素指定一个或多个类名称。class 属性可用于任何 HTML 元素。CSS 和 JavaScript 可以使用类名来对具有指定类名的元素执行某些任务。类名可以用“.”来表示。象征。

句法：

<元素类=“类名”>

在 CSS 样式表中：
。班级 {
// CSS 属性
}
id 和 class 属性之间的区别：它们之间的唯一区别是“id”在页面上是唯一的，并且最多只能应用于一个元素，而“class”选择器可以应用于多个元素。

4.如何在 HTML 中创建嵌套网页？

当一个完全不同的网页的内容嵌入到另一个网页中时，称为嵌套网页。可以使用以下两种方法创建嵌套网页：

<iframe>标签： HTML中的iframe代表Inline Frame。“iframe”标签定义文档内的矩形区域，浏览器可以在其中显示单独的文档，包括滚动条和边框。
<embed> 标签： HTML 中的<embed> 标签用于将外部应用程序（通常是音频或视频等多媒体内容）嵌入到 HTML 文档中。

5. 标签内可以使用哪些标签？

元素就像元数据（即有关数据的数据）的容器，它也位于标记和标记之间。元数据是有关 HTML 文档的数据，不会显示在网页上。它定义文档标题、样式、脚本和其他元信息。

HTML <head> 元素是以下元素的容器：

<title>：定义网页的标题。
<link>：最常用于链接外部 CSS 文件。
<meta>：用于指定字符集、页面描述、关键字、文档作者和视口设置。它不会被显示，但浏览器会使用它来显示内容或重新加载页面，并由搜索引擎和其他网络服务使用。
<base>：用于指定相对 URL 的基本 URL 或目标。
<style>：它用于在 HTML 网页中制作内部 CSS。
<script>：用于在 HTML 网页中定义。

6.什么是元标签？它们有多重要？

元数据意味着关于数据的信息。HTML 中的标签提供有关 HTML 文档的信息，或者简单地说，它提供有关文档的重要信息。这些标签基本上用于添加名称/值对来描述 HTML 文档的属性，例如到期日期、作者姓名、关键字列表、文档作者等。该标签是一个空元素，因为它只有一个开始标签而没有结束标签，但它在其属性中携带信息。Web 文档可以根据信息包含一个或多个元标记，但一般来说，它不会影响文档的物理外观。

句法：

<元属性名称=“值”>
关键点：

<meta> 标记内容在浏览器中不可见，并且添加在标记内。
它们仅用于提供有关 HTML 文档的附加信息。
<meta> 标签添加到我们的 HTML 文档中是为了搜索引擎优化。

7.什么是HTML布局？

页面布局是图形设计的一部分，处理页面上视觉元素的排列。页面布局用于使网页看起来更好。它建立了图形元素之间的整体外观、相对重要性和关系，以实现信息和眼球运动的流畅流动，从而实现最大的效果或影响。
页面布局信息：

标题：前端的部分，用于页面顶部。

标签用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/侧边栏：它包含附加信息或广告，并不总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和其他与网页相关的查询。页脚部分始终放置在网页的底部。

8.什么是语义元素？

语义元素具有有意义的名称，可以说明内容的类型。例如页眉、页脚、表格……等。HTML5 引入了许多如下所述的语义元素，这些元素使代码更易于开发人员编写和理解，并指导浏览器如何处理它们。

文章：它包含不需要任何其他上下文的独立内容。
aside：它用于将内容放置在侧边栏中，即除了现有内容之外。
详细信息：它定义用户可以隐藏或查看的其他详细信息。
图和图标题：用于将图像添加到网页并带有小描述。
页脚：位于任何文章或文档的底部，可以包含联系方式、版权信息等。
header：用于页面介绍部分的页眉。
main：定义文档的主要内容。
mark：用于突出显示文本。
nav：用于以导航栏或导航菜单的形式定义一组导航链接。
部分：页面可以分为简介、联系信息、详细信息等部分，每个部分可以位于不同的部分标签中。

9.什么是 HTML 实体？

HTML 提供了一些显示保留字符的方法。保留字符是为 HTML 保留的字符或基本键盘中不存在的字符。

例如： “<”在 HTML 语言中已被保留。有时，此字符需要显示在网页上，这会在代码中产生歧义。除此之外，还有基本键盘中通常不存在的特征（£、¥、€、©）等。HTML 提供了一些实体名称和实体编号来使用这些符号。实体编号很容易学习。

10.如何在HTML中添加符号？

HTML 中有一些保留字符，& 在 HTML 文档中使用时具有特殊含义。就像如果您在 HTML 文档中使用小于或大于符号，那么浏览器将会以不同的方式对待它们。因此我们将使用 HTML 实体在网页中插入符号。
在这里插入图片描述

11.什么是HTML编码？

统一资源定位符 (URL) 只是访问网站内容的网站地址，例如www.geeksforgeeks.org。但 URL 中允许使用某些字符，例如字母 AZ 和 az、数字 0-9 以及一些特殊字符。它们可以按原样使用，但不在此列表中的其余字符在将它们编码为合适的形式后使用。
URL 编码是将 URL 转换为 Web 浏览器接受的有效格式的过程。URL 编码是通过用 % 符号后跟两个十六进制数字替换所有不允许的字符来进行的。这两个十六进制值代表ASCII字符集中字符的数值。例如，URL 中的空格是不可接受的，在编码时会被替换为“%20”或“+”号。同样，$ 符号被替换为“%24”。

保留字符：某些字符有时在 URL 中具有特殊含义，并且可以以两种方式使用。例如，“/”字符是保留字符，当用作分隔 URL 路径的分隔符时，它具有特殊含义。这里通过将其编码为“%2F”来使用。其他没有特殊用途的情况下可以正常使用。

12、POST方法和GET方法有什么区别？

超文本传输协议 (HTTP) 旨在实现客户端和服务器之间的通信。HTTP 作为客户端和服务器之间的请求-响应协议。HTTP 请求方法有 2 种，即 GET 和 POST

GET：它从指定资源请求数据。
POST：该方法用于将需要处理的数据提交到指定的资源。
URL 中的粗体部分是 GET 参数，斜体部分是这些参数的值。
通过与符号 (&) 连接，可以在 URL 中嵌入多个参数=值。
只能通过 GET 方法发送简单的文本数据。
13.什么是 HTML Canvas？
HTML“canvas”元素用于通过 JavaScript 绘制图形。“canvas”元素只是图形的容器。必须使用 JavaScript 来实际绘制图形。Canvas 有多种方法用于绘制路径、方框、圆形、文本和添加图像。

示例：画布是 HTML 页面上的矩形区域。默认情况下，画布没有边框，也没有内容。已指定 id 属性以在脚本中引用它，并指定宽度和高度属性来定义画布的大小。style 属性用于添加边框。

<!DOCTYPE html>
<html>

<body>
	<canvas id="myCanvas"
			width="400"
			height="200"
			style="border:2px solid #000000;">
	</canvas>
</body>
</html>

14.什么是SVG？

SVG 代表可缩放矢量图形。它基本上以 XML 格式定义基于矢量的图形。SVG 图形在缩放或调整大小时不会损失任何质量。SVG 文件中的每个元素和每个属性都可以设置动画。

SVG 的优点：与其他图像格式（如 JPEG 和 GIF）相比，使用 SVG 的优点是：

SVG 图像可以使用任何文本编辑器创建和编辑。
SVG 图像可以被搜索、索引、脚本化和压缩。
SVG 图像是可缩放的。
SVG 图像可以在任何分辨率下高质量打印。

15. HTML 支持哪些不同的多媒体格式？

多媒体文件具有多种格式和不同的扩展名，例如 .wav、.mp3、.mp4、.mpg、.wmv 和 .avi

16.如何让浏览器使用 HTML Geolocation API 告诉我们的位置

HTML5 中的地理位置用于与某些网站共享位置并了解确切位置。它主要用于当地企业、餐馆，或在地图上显示位置。它使用 JavaScript 将纬度和经度提供给后端服务器。大多数浏览器都支持地理定位 API。地理位置 API 使用全局导航器对象，可以按如下方式创建该对象：

var loc = navigator.geolocation

使用 HTML Geolocation 显示位置：以下代码通过 HTML Geolocation 借助纬度和经度显示当前位置。

<!DOCTYPE html>
<html>

<head>
	<title>Latitude and longitude</title>
	<style>
		.gfg {
			font-size: 40px;
			font-weight: bold;
			color: #009900;
			margin-left: 50px;
		}
		
		.geeks {
			margin-left: 150px;
		}
		
		p {
			font-size: 20px;
			margin-left: 20px;
		}
	</style>
</head>

<body>
	<div class="gfg">GeeksforGeeks</div>
	<p>Displaying location using Latitude and Longitude</p>
	<button class="geeks"
			onclick="getlocation()">
		Click
	</button>
	<p id="demo1"></p>

	<script>
		var variable1 = document.getElementById("demo1");
	
		function getlocation() {
			navigator.geolocation.getCurrentPosition(showLoc);
		}
	
		function showLoc(pos) {
			variable1.innerHTML = "Latitude: "
		+ pos.coords.latitude
		+ "<br>Longitude: "
		+ pos.coords.longitude;
		}
	</script>
</body>
</html>

17.什么是 HTML Web 存储 API？

SessionStorage和LocalStorage被称为 Web 存储 API。通过使用这些API，可以将数据存储在客户端。

会话存储：

SessionStorage用于在客户端存储数据。
SessionStorage 中保存的数据最大限制约为 5 MB。
SessionStorage 中的数据一直存在，直到当前选项卡打开，如果我们关闭当前选项卡，那么我们的数据也会自动从 SessionStorage 中删除。
与SessionStorage一样，LocalStorage也用于在客户端存储数据。
LocalStorage 中的数据保存最大限制约为 5 MB。
LocalStorage没有过期时间，LocalStorage中的数据会一直保存到用户手动删除为止。这是 LocalStorage 和 SessionStorage 之间的唯一区别

18. HTML 中的表单是什么？

HTML 表单是使用交互式控件在 Web 服务器上存储用户信息的文档。HTML 表单包含不同类型的信息，例如用户名、密码、联系电话、电子邮件 ID 等。

HTML 表单中使用的元素有复选框、输入框、单选按钮、提交按钮等。使用这些元素，用户的信息可以提交到 Web 服务器上。form标签用于创建 HTML 表单。
例子：

<!DOCTYPE html>
<html>

<body>
	<form>
		Username:
		<br>
		<input type="text"
			name="username">
		<br>
		Email id:
		<input type="text"
			name="email_id">
		<br>
		<input type="submit"
			value="Submit">
	</form>
</body>
</html>

Q shen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 面试问题与解答 (2023) – 中级

元数据意味着关于数据的信息。HTML 中的标签提供有关 HTML 文档的信息，或者简单地说，它提供有关文档的重要信息。这些标签基本上用于添加名称/值对来描述 HTML 文档的属性，例如到期日期、作者姓名、关键字列表、文档作者等。该标签是一个空元素，因为它只有一个开始标签而没有结束标签，但它在其属性中携带信息。Web 文档可以根据信息包含一个或多个元标记，但一般来说，它不会影响文档的物理外观。句法：<元属性名称=“值”><meta>标记内容在浏览器中不可见，并且添加在标记内。
复制链接

扫一扫