【面试宝典】14道HTML高频题库整理(附答案背诵版)-优快云博客

本文链接：https://blog.youkuaiyun.com/tailonh/article/details/140899052

1、简述 HTML5 新特性？

HTML5 是 HTML 的最新版本，它引入了很多新的特性和元素，以提供更丰富的网页内容和更好的用户体验。以下是一些主要的新特性：

语义元素：HTML5 引入了新的语义元素，像 <article>, <section>, <nav>, <header>, <footer>, <aside>等。这些元素可以帮助更好地描述网页的结构和内容。

例如，<nav> 元素可以用于包含页面的主导航链接，而 <footer> 元素可以用于包含页面的底部信息，如作者信息、版权信息等。
图形和多媒体元素：HTML5 引入了 <canvas> 元素用于在网页上绘制图形，以及 <audio> 和 <video> 元素用于在网页上嵌入音频和视频内容。

例如，<video> 元素可以用于在网页上嵌入一个视频播放器，而 <canvas> 元素可以用于在网页上绘制动态图形，如游戏图像。
表单控件：HTML5 增加了新的表单控件，如日期和时间选择，电子邮件和网址输入等，这使得网页表单的创建变得更加方便。

例如，<input type="date"> 元素可以用于在表单中创建一个日期选择器。
Web 存储：HTML5 引入了本地存储（localStorage）和会话存储（sessionStorage），用于在用户的浏览器上存储数据。

例如，localStorage 可以用于在用户关闭浏览器后仍然保持用户的登录状态或购物车信息。
地理位置：HTML5 的地理位置 API 允许网站获取用户的地理位置信息。

例如，一些天气网站可以使用地理位置 API 来自动显示用户当前位置的天气。
WebSocket：HTML5 的 WebSocket API 提供了在网页和服务器之间建立实时通信的能力。

例如，聊天应用或实时数据更新的应用可以使用 WebSocket 来实现。

以上只是 HTML5 的一部分新特性，还有更多的新特性等待开发者去发现和利用。

2、HTML5 为什么只需要写 !DOCTYPE HTML？

在 HTML4 和 XHTML 中，我们需要写出完整的 DOCTYPE，包括 DTD（文档类型定义）的 URL，这是因为这些版本的 HTML 与 SGML（标准通用标记语言）有关联，需要引用 DTD 来解析文档。例如，HTML 4.01 严格模式的 DOCTYPE 会是这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

然而，HTML5 不再基于 SGML，因此不需要引用 DTD，所以 DOCTYPE 的声明变得简单了，只需要写 <!DOCTYPE html>。这告诉浏览器该文档是 HTML5 文档，应该使用 HTML5 的规则来解析。

这种简化的 DOCTYPE 同时也有助于提升网页的兼容性，因为所有现代浏览器都能正确地理解 <!DOCTYPE html>，并以标准模式渲染网页，而不是怪异模式。

3、HTML5 有哪些新特性、移除了那些元素？

HTML5 引入了许多新的特性和元素，同时也移除了一些过时或不常用的元素。这些变化主要是为了提高 HTML 的语义性，以及增强用户体验和交互性。

HTML5 的新特性和元素主要包括：

语义元素：如 <article>, <section>, <nav>, <header>, <footer>, <figure>, <figcaption>, <aside> 等。
表单元素和属性：如新的输入类型 <input type="email">, <input type="tel">, <input type="number">, <input type="range"> 等，以及 form 属性如 placeholder, required, autocomplete, autofocus 等。
多媒体元素：<audio> 和 <video> 用于嵌入音频和视频。
图形元素：<canvas> 用于在页面上绘制图形。
新的 API：如地理位置（Geolocation）、本地存储（LocalStorage 和 SessionStorage）、应用缓存（Application Cache）、Web Workers、WebSocket 等。

HTML5 移除的元素主要包括：

纯表现性元素：如 <font>, <center>, <big>, <small>, <strike>, <tt> 等。这些元素的功能可以通过 CSS 来实现，因此被移除。
过时的元素：如 <frame>, <frameset>, <noframes>。这些元素用于创建框架页面，但现在已经被 CSS 的布局功能取代。
冗余的元素：如 <acronym>。这个元素的功能已经被 <abbr> 元素覆盖。

以上只是部分变化，还有更多的新特性和移除的元素。这些变化都是为了让 HTML 更加语义化，更加适应现代的网页设计和开发需求。

4、如果把HTML5看做一个开放的平台，那么它构建的模块有哪些？

如果我们将 HTML5 视为一个开放的平台，那么它主要由以下几个模块组成：

语义化标签：HTML5 引入了许多新的语义化标签，如 <nav>、<article>、<section>、<header>、<footer> 等，这些标签帮助开发者更好地组织和理解网页结构。
多媒体支持：HTML5 提供了 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单。同时，HTML5 还提供了对于字幕、章节、音轨等更加丰富的支持。
图形和动画：HTML5 引入了 <canvas> 标签，它是一个强大的图形容器，可以用于绘制图形、制作动画，甚至开发游戏。此外，HTML5 还支持 SVG 和 WebGL。
离线和存储：HTML5 提供了本地存储（localStorage）和会话存储（sessionStorage），这使得网页可以在浏览器端存储用户信息。此外，HTML5 的应用缓存（Application Cache）技术可以使得网页在离线时仍然可用。
设备访问：HTML5 提供了一系列 API，使得网页可以访问设备的功能，如地理位置（Geolocation API）、设备方向（Orientation API）、摄像头和麦克风访问（getUserMedia API）等。
连接：HTML5 提供了 WebSocket API，使得浏览器和服务器可以进行全双工通信。此外，HTML5 还支持 Server-Sent Events，服务器可以主动向客户端发送更新。
性能和集成：HTML5 提供了 Web Workers 技术，使得网页可以在后台线程中运行任务，不会阻塞用户界面。此外，HTML5 还提供了对于拖放（Drag and Drop API）的原生支持。
CSS3：虽然不是 HTML5 的一部分，但 CSS3 是与 HTML5 同时发展的，它提供了对于颜色、字体、布局、动画等更加丰富的控制。
JavaScript：HTML5 平台的核心部分，用于实现网页的交互功能。

以上模块共同构建了 HTML5 这个强大的开放平台，使得开发者可以创建更加丰富、交互式的网页和 Web 应用。

5、简述HTML5的离线储存？

HTML5的离线存储主要指的是两种技术：Web Storage（包括 LocalStorage 和 SessionStorage）和 Application Cache。

Web Storage：Web Storage 提供了两种在客户端存储数据的方式。
- LocalStorage：数据存储在浏览器的本地，没有过期时间，即使关闭浏览器或电脑，数据也会一直存在，除非用户主动删除或者通过代码进行删除。这可以用来存储一些持久的数据，比如用户的个性化设置等。
- SessionStorage：数据存储在浏览器的会话中，当会话结束（比如关闭浏览器或者关闭浏览器的某个标签页）时，数据会被清除。这可以用来存储一些临时的数据，比如用户在一个网页表单中填写的信息。
这