HTML5 面试问题（HTML5 Interview Questions）

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

HTML5引入了许多有助于构建现代网站的新元素和属性。 以下是HTML5中引入的强大功能 -

• New Semantic Elements −这些New Semantic Elements −类似于“标题”，“页脚”和“节”。

• Forms 2.0 − HTML网页表单的改进，其中为“input”标记引入了新属性。

• Persistent Local Storage −无需借助第三方插件即可实现。

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

• Server-Sent Events − HTML5引入了从Web服务器流向Web浏览器的事件，它们称为服务器发送事件（SSE）。

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

• Audio & Video −您可以在网页上嵌入音频或视频，而无需使用第三方插件。

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

• Microdata −这使您可以在HTML5之外创建自己的词汇表，并使用自定义语义扩展您的网页。

• Drag and drop −将项目从一个位置拖放到同一网页上的另一个位置。

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

预装在iPhone，iPad和Android手机上的移动网络浏览器都对HTML5提供了出色的支持。

是! HTML5尽可能设计为与现有Web浏览器向后兼容。 新功能以现有功能为基础，允许您为旧版浏览器提供后备内容。

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

没有！

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

此标记表示文档的独立内容，例如博客条目或报纸文章。

此标记表示一段仅与页面其余部分略有相关的内容。

此标记表示节的标题。

此标记表示节的页脚，可以包含有关作者，版权信息等的信息。

此标记表示用于导航的文档的一部分。

此标记可用于标记对话。

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

自定义数据属性以数据开头，并根据您的要求命名。 以下是简单的例子 -

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

以上将是完全有效的HTML5，具有两个称为数据主题和数据级别的自定义属性。 您可以使用JavaScript API或CSS以与标准属性类似的方式获取这些属性的值。

Web Forms 2.0是HTML4中的表单功能的扩展。 HTML5中的表单元素和属性提供比HTML4更大程度的语义标记，并且消除了HTML4中所需的繁琐脚本和样式的大量需求。

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

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

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

它表示根据ISO 8601编码的包含一年和一个月的日期。

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

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

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

范围类型用于输入字段，其中应包含一系列数字中的值。

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

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

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

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

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

HTML5引入了一个名为required的新属性，它坚持在输入控件中有一个值。

是! HTML5允许使用svg标记直接嵌入SVG。

是! HTML5的HTML语法允许使用math标记在文档中使用MathML元素。

Cookies有以下缺点 -

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

• 每个HTTP请求都包含Cookie，从而通过Internet发送未加密的数据。

• 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应用程序中使用Server-Sent Events，您需要在文档中添加元素。

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

URL将指向PHP，PERL或任何Python脚本，它将负责一致地发送事件数据。

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

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

设置Content-Type后，服务器端脚本将发送一个Event - 标记，后跟事件名称。 下面的示例将发送Server-Time作为由新行字符终止的事件名称。

print "Event: server-time\n";

最后一步是使用Data-tag发送事件数据，后面跟一个由新行字符终止的字符串值的整数，如下所示 -

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

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

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

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

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

readonly属性readyState表示连接的状态。 它可以具有以下值:

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

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

• 值为2表示连接正在进行结束握手。

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

readonly属性bufferedAmount表示使用send（）方法排队的UTF-8文本的字节数。

HTML5元素canvas为您提供了一种使用JavaScript绘制图形的简单而强大的方法。它可以用于绘制图形，制作照片合成或做简单（而不是那么简单）的动画。

HTML5支持当前的HTML5草案规范没有规定浏览器应该在音频标签中支持哪种音频格式。 但最常用的音频格式是ogg，mp3和wav。

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

HTML5支持video标记，用于在HTML或XHTML文档中嵌入视频文件。当前的HTML5草案规范未指定浏览器应在视频标记中支持哪些视频格式。但最常用的视频格式是 -

• Ogg −带有Thedora视频编解码器和Vorbis音频编解码器的Ogg文件。

• mpeg4 −带有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

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

HTML5 Geolocation API可让您与喜爱的网站分享您的位置。 Javascript可以捕获您的纬度和经度，并可以发送到后端Web服务器并执行奇特的位置感知事项，例如查找本地商家或在地图上显示您的位置。

今天，大多数浏览器和移动设备都支持Geolocation API。 地理定位API使用全局导航器对象的新属性，即。 地理位置对象可以创建如下:

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

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

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

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

Web Workers在不中断用户界面的情况下完成所有计算成本高昂的任务，并且通常在不同的线程上运行。

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