前端面试题汇总之HTML篇（含答案）

2024-07-24

2376 字约 8 分钟

...

什么是 DOCTYPE，有何作用
对HTML语义化的理解
title与h1的区别、b与strong的区别、i与em的区别
页面导入样式时，使用 link 和 @import 有什么区别
H5有哪些新元素和新特性
cookie、sessionStorage 和 localStorage 的区别和用途
DOM查询以及操作

1、什么是 DOCTYPE(⽂档类型)，有何作用

（1）解释（是什么）

DOCTYPE是是HTML5的文档声明,一种标准通用标记语言的文档类型声明。

必须声明在HTML⽂档的第⼀⾏，比如我们常见的一般是以下这样子

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（2）DOCTYPE的作用包括：

告知浏览器使用哪个HTML版本：定义和声明HTML文档的类型和版本,告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，例如，<!DOCTYPE html> 声明表示文档是基于HTML5的。不同的HTML版本可能具有不同的语法和功能支持，因此DOCTYPE有助于浏览器正确地解析和渲染页面，就类似我们解析语言时候的UTF-8 语言。
确保文档以标准模式呈现：没有DOCTYPE声明的情况下，一些旧版本的浏览器会进入“怪异模式”或“兼容模式”，可能导致页面的渲染和布局问题。DOCTYPE可以确保确保浏览器按照标准规范解析和渲染页面，从而提升页面的可访问性和一致性。以获得一致的展示效果。不同的渲染模式也会影响浏览器对 CSS 和 JavaScript 脚本的解析。
提供文档验证：DOCTYPE声明是HTML文档的一部分，也用于验证文档的合法性。在HTML文档中正确声明DOCTYPE有助于确保页面符合W3C（World Wide Web Consortium）的标准。

浏览器渲染页面的两种模式

渲染模式可通过document.compatMode获取(例如：语雀官网的文档类型是CSS1Compat)）：

CSS1Compat：标准模式（Strick mode）,默认采用这种模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode) ，浏览器使用自己的怪异模式解析渲染页面。这种模式中，页面以一种比较宽松的向后兼容的方式显示。

2、对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

通俗来讲就是用正确的标签做正确的事情，依据内容结构选择合适的标签元素然后去生成代码。

🧲 语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签有：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

这里我们可以尝试写一些语义化标签，然后对于语义化标签预览一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <div>头部</div>
    </header>
    <nav>
        <div>导航栏</div>
    </nav>
    <section>
        <div>区块（有语义化的div）</div>
    </section>
    <main>
        <div>主要区域</div>
    </main>
    <article>
        <div>主要内容</div>
    </article>
    <aside>
        <div>侧边栏</div>
    </aside>
    <footer>
        <div>
            底部
        </div>
    </footer>
    <script>
    </script>
</body>
</html>

最后看一下我们的结果！

3、title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容

i内容展示为斜体，em表示强调的文本

4、页面导入样式时，使用 link 和 @import 有什么区别

link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS

页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载

@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

5、H5有哪些新元素和新特性

h5新增的新元素和新特性有：

新元素：

1.  **<header> ：定义文档或节的页眉。
1.  **<footer>** ：定义文档或节的页脚。
1.  **<nav>** ：定义导航链接的部分。
1.  **<article>** ：定义页面中独立的内容区域，如博客文章、新闻故事等。
1.  **<section>** ：定义文档中的节（section），如章节、页眉、页脚或文档中的其他部分。
1.  **<aside>** ：定义页面内容之外的内容，通常表示侧边栏或相关内容。
1.  **<main>** ：定义文档的主要内容区域。
1.  **<figure>** 和 **<figcaption>** ：<figure>用于包裹一组相关的元素，如图像和其标题；<figcaption>用于定义<figure>元素的标题。

新特性：

1.  **多媒体支持**：新增了<audio>和<video>元素，使得在网页上嵌入音频和视频内容更为简便。
1.  **画布（Canvas）** ：通过<canvas>元素，可以使用JavaScript来绘制图形、动画等复杂的图形和视觉效果。
1.  **本地存储**：引入了localStorage和sessionStorage，用于在客户端存储数据，使得网页可以更快速地访问本地存储的数据。
1.  **表单控件**：新增了多种新的表单输入类型，如日期、时间、邮箱等，还包括输入验证和自动完成功能的增强。
1.  **地理位置**：通过Geolocation API，允许网页应用获取用户的地理位置信息。
1.  **Web Workers**：允许在后台运行脚本以提高多线程处理能力，从而改善网页性能。
1.  **WebSocket**：提供了一种在单个 TCP 连接上进行全双工通信的协议，使得实时数据传输更为高效。
1.  **SVG** 和 **MathML**：HTML5原生支持了SVG（可缩放矢量图形）和MathML（数学标记语言），使得网页可以更容易地集成复杂的图形和数学公式。

6、cookie、sessionStorage 和 localStorage 的区别和用途

cookie、sessionStorage和localStorage 三种客户端存储选项的主要区别和用途

特性	Cookie	sessionStorage	localStorage
存储容量	4KB	5MB	5MB
存储位置	存储在客户端和服务器之间，会随着每个HTTP请求发送到服务器	仅在当前会话中有效，在页面会话结束后清除	永久存储，除非被显式清除或者网站清除
数据传输	每次HTTP请求时都会发送到服务器	不会发送到服务器	不会发送到服务器
过期时间	可设置过期时间	仅在当前会话有效，关闭标签页或浏览器后清除	永久有效，除非被显式删除
访问权限	可以通过设置cookie的路径和域进行访问控制	仅在设置了相同协议、相同主机和相同端口的页面之间共享	同源策略：只允许同源页面访问
用途	跟踪会话状态、个性化设置等	临时存储会话级别的数据	永久存储的数据
API	Document.cookie	sessionStorage	localStorage
安全性	可设置为HttpOnly，防止被JavaScript访问	相对较高，因为数据仅存储在客户端	相对较高，因为数据仅存储在客户端

7、DOM查询以及操作

方法	描述	返回类型	示例
`getElementById`	根据元素 ID 获取单个元素	`Element`	`document.getElementById('myId')`
`getElementsByClassName`	根据类名获取一组元素	`HTMLCollection`	`document.getElementsByClassName('myClass')`
`getElementsByTagName`	根据标签名获取一组元素	`HTMLCollection`	`document.getElementsByTagName('div')`
`querySelector`	使用 CSS 选择器获取单个元素	`Element`	`document.querySelector('.myClass')`
`querySelectorAll`	使用 CSS 选择器获取所有匹配元素	`NodeList`	`document.querySelectorAll('div')`
`getElementByName`	根据 name 属性获取一组元素（通常用于表单）	`NodeList`	`document.getElementsByName('myName')`
`parentElement`	获取元素的父元素	`Element`	`element.parentElement`
`children`	获取元素的所有子元素	`HTMLCollection`	`element.children`
`nextSibling`	获取元素的下一个兄弟节点	`Node`	`element.nextSibling`
`previousSibling`	获取元素的前一个兄弟节点	`Node`	`element.previousSibling`
`parentNode`	获取元素的父节点	`Node`	`element.parentNode`