HTML5 - 面试题

HTML5 是 HTML 标准的下一个主要修订版本，取代了 HTML 4.01、XHTML 1.0 和 XHTML 1.1。HTML5 是用于在万维网上构建和呈现内容的标准。

HTML5 引入了一些新的元素和属性，有助于构建现代网站。以下是 HTML5 中引入的一些重要特性：

• 新的语义元素 - 例如 <header>、<footer> 和 <section>。

• 表单 2.0 - 对 HTML 网页表单的改进，其中为 <input> 标签引入了新的属性。

• 持久本地存储 - 无需借助第三方插件即可实现。

• WebSocket - 一种用于 Web 应用程序的下一代双向通信技术。

• 服务器发送事件 - HTML5 引入了从 Web 服务器流向 Web 浏览器的事件，称为服务器发送事件 (SSE)。

• Canvas - 支持可以使用 JavaScript 编程的二维绘图表面。

• 音频和视频 - 您可以在网页上嵌入音频或视频，无需借助第三方插件。

• 地理位置 - 现在访问者可以选择与您的 Web 应用程序共享其物理位置。

• 微数据 - 允许您创建超出 HTML5 的词汇表，并使用自定义语义扩展您的网页。

• 拖放 - 将项目从一个位置拖放到同一网页上的另一个位置。

最新版本的 Apple Safari、Google Chrome、Mozilla Firefox 和 Opera 都支持许多 HTML5 功能，Internet Explorer 9.0 也将支持一些 HTML5 功能。

预装在 iPhone、iPad 和 Android 手机上的移动 Web 浏览器都对 HTML5 提供了良好的支持。

是的！HTML5 尽可能地设计为向后兼容现有 Web 浏览器。新功能建立在现有功能之上，并允许您为旧版浏览器提供后备内容。

建议使用几行 JavaScript 检测对各个 HTML5 功能的支持。

不！

此标签表示通用文档或应用程序部分。它可以与 h1-h6 一起使用以指示文档结构。

此标签表示文档的独立内容部分，例如博客文章或报纸文章。

此标签表示与页面其余部分略微相关的部分内容。

此标签表示部分的页眉。

此标签表示部分的页脚，可以包含有关作者、版权信息等的信息。

此标签表示文档中用于导航的部分。

此标签可用于标记对话。

此标签可用于将标题与某些嵌入式内容（例如图形或视频）关联起来。

自定义数据属性以 data- 开头，其名称将根据您的需求而定。以下是一个简单的示例：

<div class="example" data-subject="physics" data-level="complex">
   ...
</div>

以上将是完全有效的 HTML5，其中包含两个名为 data-subject 和 data-level 的自定义属性。您可以像获取标准属性一样，使用 JavaScript API 或 CSS 获取这些属性的值。

Web 表单 2.0 是对 HTML4 中的表单功能的扩展。HTML5 中的表单元素和属性提供了比 HTML4 更高的语义标记程度，并消除了 HTML4 中所需的许多繁琐的脚本编写和样式设置。

它表示根据 ISO 8601 编码的日期和时间（年、月、日、时、分、秒、秒的小数部分），时区设置为 UTC。

它表示根据 ISO 8601 编码的日期和时间（年、月、日、时、分、秒、秒的小数部分），没有时区信息。

它表示根据 ISO 8601 编码的日期（年、月、日）。

它表示由根据 ISO 8601 编码的年份和月份组成的日期。

它表示由根据 ISO 8601 编码的年份和周数组成的日期。

它表示根据 ISO 8601 编码的时间（时、分、秒、秒的小数部分）。

此控件仅接受数值。step 属性指定精度，默认为 1。

range 类型用于应包含一定范围数字值的输入字段。

这仅接受电子邮件值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交简单的文本，它会强制您以 [email protected] 的格式输入电子邮件地址。

这仅接受 URL 值。此类型用于应包含 URL 地址的输入字段。如果您尝试提交简单的文本，它会强制您以 http://www.example.com 格式或 http://example.com 格式输入 URL 地址。

HTML5 引入了一个新的元素 <output>，用于表示不同类型的输出结果，例如脚本编写的输出。

HTML5 引入了一个名为 placeholder 的新属性。<input> 和 <textarea> 元素上的此属性为用户提供了有关可以在字段中输入什么的提示。占位符文本不得包含回车符或换行符。

这是一个简单的单步模式，可以在文档加载时使用 JavaScript 轻松编程，自动聚焦特定表单字段。

HTML5 引入了一个名为 required 的新属性，它要求输入控件必须有值。

是的！HTML5 允许使用 <svg>...</svg> 标签直接嵌入 SVG。

是的！HTML5 的 HTML 语法允许在文档中使用 <math>...</math> 标签使用 MathML 元素。

cookie 具有以下缺点：

• cookie 包含在每个 HTTP 请求中，从而通过传输相同的数据来减慢 Web 应用程序的速度。

• cookie 包含在每个 HTTP 请求中，从而通过互联网发送未加密的数据。

• cookie 的数据量限制约为 4 KB。不足以存储所需数据。

HTML5 引入了 sessionStorage 属性，网站可以使用它将数据添加到会话存储中，并且该窗口（即会话）中打开的同一网站的任何页面都可以访问它，并且一旦关闭窗口，会话就会丢失。

HTML5 引入了 localStorage 属性，它可用于访问页面的本地存储区域，没有时间限制，并且无论何时使用该页面，此本地存储都可用。

会话终止后，浏览器会立即删除会话存储数据。

本地存储数据没有时间限制。要清除本地存储设置，需要调用 `localStorage.remove('key')`；其中 'key' 是要删除的值的键。如果要清除所有设置，需要调用 `localStorage.clear()` 方法。

HTML5 以及 WHATWG Web Applications 1.0 引入了从 Web 服务器流向 Web 浏览器的事件，它们被称为服务器发送事件 (SSE)。使用 SSE，您可以将 DOM 事件持续地从 Web 服务器推送到访问者的浏览器。

事件流方法打开与服务器的持久连接，在有新信息可用时将数据发送到客户端，无需持续轮询。

服务器发送事件标准化了我们如何将数据从服务器流式传输到客户端。

要在 Web 应用程序中使用服务器发送事件，需要向文档中添加一个 `` 元素。

`` 元素的 src 属性应指向一个 URL，该 URL 应提供一个持久性 HTTP 连接，该连接发送包含事件的数据流。

该 URL 将指向一个 PHP、PERL 或任何 Python 脚本，这些脚本将负责持续发送事件数据。

服务器端脚本应发送 Content-type 头，指定类型为 text/event-stream，如下所示：

print "Content-Type: text/event-stream\n\n";

设置 Content-Type 后，服务器端脚本将发送一个 Event - 标签，后跟事件名称。以下示例将发送 Server-Time 作为事件名称，以换行符结尾。

print "Event: server-time\n";

最后一步是使用 Data - 标签发送事件数据，后跟整数或字符串值，以换行符结尾，如下所示：

$time = localtime();
print "Data: $time\n";

WebSockets 是一种用于 Web 应用程序的下一代双向通信技术，它通过单个套接字运行，并通过 HTML 5 兼容浏览器中的 JavaScript 接口公开。

一旦您与 Web 服务器建立了 Web Socket 连接，您可以通过调用 send() 方法将数据从浏览器发送到服务器，并通过 onmessage 事件处理程序接收从服务器到浏览器的数据。

以下是创建新的 WebSocket 对象的 API。

这里第一个参数 url 指定要连接到的 URL。第二个属性 protocol 是可选的，如果存在，则指定服务器必须支持才能成功连接的子协议。

只读属性 readyState 表示连接的状态。它可以具有以下值：

• 值为 0 表示连接尚未建立。

• 值为 1 表示连接已建立并且可以进行通信。

• 值为 2 表示连接正在进行关闭握手。

• 值为 3 表示连接已关闭或无法打开。

只读属性 bufferedAmount 表示使用 send() 方法排队的 UTF-8 文本的字节数。

HTML5 元素 `` 提供了一种简单而强大的方法，可以使用 JavaScript 绘制图形。它可以用来绘制图表、制作照片合成或进行简单的（和不那么简单的）动画。

HTML5 支持 `

您可以使用 `` 标签来指定媒体以及媒体类型和许多其他属性。一个音频元素允许多个 source 元素，浏览器将使用第一个识别的格式。

HTML5 支持 `

• Ogg - 使用 Thedora 视频编解码器和 Vorbis 音频编解码器的 Ogg 文件。

• mpeg4 - 使用 H.264 视频编解码器和 AAC 音频编解码器的 MPEG4 文件。

您可以使用 `` 标签来指定媒体以及媒体类型和许多其他属性。一个音频元素允许多个 source 元素，浏览器将使用第一个识别的格式。

HTML5 地理位置 API 允许您与您最喜欢的网站共享您的位置。Javascript 可以捕获您的经纬度，并可以发送到后端 Web 服务器，并执行诸如查找本地企业或在地图上显示您的位置之类的精细位置感知操作。

如今，大多数浏览器和移动设备都支持地理位置 API。地理位置 API 与全局 navigator 对象的新属性（即 Geolocation 对象）一起工作，可以按如下方式创建：

geolocation 对象是一个服务对象，允许小部件检索有关设备地理位置的信息。

此方法检索用户的当前地理位置。

此方法定期检索有关设备当前地理位置的更新。

此方法取消正在进行的 watchPosition 调用。

Web Workers 执行所有计算密集型任务，而不会中断用户界面，通常在单独的线程上运行。

Web Workers 允许长时间运行的脚本不会被响应点击或其他用户交互的脚本中断，并允许执行长时间任务而不会产生影响以保持页面响应。