前端面试必备！HTML 超实用考点全解析

在前端开发的广阔领域中，面试是检验开发者能力的关键环节。而 HTML 作为前端开发的基础，在面试中常常占据重要地位。无论是初入前端领域的新人，还是经验丰富的开发者，都可能在 HTML 的相关问题上遭遇挑战。今天，就让我们一起深入探讨前端面试中的 HTML 那些事儿，为你的面试成功之路添砖加瓦。

HTML（HyperText Markup Language）即超文本标记语言，它是用于创建网页的标准标记语言。

作用主要有：通过各种标签描述网页的结构和内容，如标题、段落、图片、链接等。浏览器解析 HTML 文档后，将其呈现为用户可见的网页界面。

新语义化标签：<header>、<nav>、<section>、<article>、<aside>、<footer>等，使网页结构更清晰，便于维护和搜索引擎优化。
多媒体支持：<video>和<audio>标签可方便在网页中嵌入视频和音频。
画布（<canvas>）：允许使用 JavaScript 在网页上绘制图形。
地理定位（Geolocation API）：使网页能获取用户的地理位置信息。
本地存储（Local Storage 和 Session Storage）：可在浏览器端存储数据。
Web Workers：能在后台运行 JavaScript 代码，不影响页面性能。
表单增强：新增表单元素和属性，如 <input type="date">、<input type="email">等，还有表单验证属性。

语义化 HTML 是指使用具有明确语义的 HTML 标签来构建网页结构和内容。

好处有：

HTML 文档由以下部分组成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    网页内容在这里。
</body>
</html>

引入外部 CSS 文件：使用 <link> 标签，例如 <link rel="stylesheet" href="styles.css">。其中 rel 属性表示关系，这里是 “stylesheet” 表示样式表，href 属性指定 CSS 文件的路径。
引入外部 JavaScript 文件：使用 <script> 标签，例如 <script src="script.js"></script>。src 属性指定 JavaScript 文件的路径。

使用 的格式来写注释。例如：。

<meta> 标签用于提供有关 HTML 文档的元数据。常见用途有：

设置字符编码：<meta charset="UTF-8">确保网页正确显示各种字符，避免出现乱码。
定义页面描述和关键词，用于搜索引擎优化：<meta name="description" content="页面描述内容">和 <meta name="keywords" content="关键词1,关键词2,...">。
设置视口（viewport），用于响应式设计：<meta name="viewport" content="width=device-width, initial-scale=1.0">确保网页在不同设备上正确显示。

DOCTYPE 声明用于告诉浏览器文档的类型，以便浏览器正确地解析和渲染页面。对于 HTML5，使用 <!DOCTYPE html>声明。它可以触发浏览器以标准模式渲染页面，避免一些兼容性问题。

<table> 标签用于创建表格。相关子标签有：

alt 属性用于为图像提供替代文本。当图像无法显示时，浏览器会显示 alt 属性中的文本，以告知用户图像的内容。这对于无障碍访问和搜索引擎优化都非常重要。

当鼠标悬停在图像上时，会显示 title 属性中的文本，作为图像的提示信息。它主要是为用户提供额外的说明。

class 属性：可以为多个元素赋予相同的类名，用于对一组具有相似样式或行为的元素进行分类。通过 CSS 选择器可以选择具有特定类名的元素进行样式设置。
id 属性：在一个 HTML 文档中应该是唯一的，用于唯一标识一个特定的元素。可以通过 JavaScript 或 CSS 选择器使用 id 来选择特定的元素进行操作或样式设置。

method 属性：指定表单数据提交的方式，常见的值有 GET 和 POST。GET 方法将表单数据附加在 URL 中进行提交，适用于少量数据的提交且数据不敏感的情况。POST 方法将表单数据放在请求体中进行提交，更安全且适用于大量数据或敏感数据的提交。
action 属性：指定表单数据提交的目标 URL，即表单数据将被发送到哪个服务器端处理程序进行处理。