Web开发学习笔记（6）-HTML5（二）

义化标签，是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。

在 HTML5 中，提供了如下图所示的语义化标签，可更直观看到页面结构。

标签说明：

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

例如，环球科学的首页，用语义化标签划分结构：

这些标签本身只有一个块级元素的特点，若不加入 CSS 样式，没有任何效果。

header 标签是一种具有引导和导航作用的构架元素，通常用来放置整个页面或者页面中一个内容块的标题，若是作为整个页面的标题，应该放在页面的起始位置。
nav 标签是一个可以用作页面导航的链接组。其中的导航元素可以将页面导航至其他关联页。需要注意的是并不是需要将一个页面的所有超链接都放到 nav 标签中，只放具有导航意义的超链接即可。
section 标签用于对页面上的内容进行分区，可以通过该标签将页面的内容分成多个部分。每个部分之间又有一定的联系。一个 section 标签通常由标题和内容组成。
article 标签用来表示页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇文章、一段评论、或者一段描述。一个 article 通常都包含一个 header 标签作为该文章的标题。
aside 标签用来描述当前页面内容的附注信息，它可以是当前页面内容相关的引用、广告、侧边栏等。
footer 标签可以作为内容的注脚，例如在网页中添加版权信息等。

time 标签可以对日期进行管理操作。它代表某个日期或者是 24 小时中的某个时刻。当表示时刻的时候，可以使用时区进行显示。例如：

<time datetime="2024-1-14">2024年1月14日</time>
<time datetime="2024-1-14T20:00">2024年1月14日晚8点</time>
<time datetime="2024-1-14T20:00Z">2024年1月14日晚8点</time>

搜索引擎会读取 datetime 属性的值，标签中的文字是在页面中显示的文字。其中 T 代表的是日期和时间的间隔。z 代表的是时间使用的是 UTC 标准时间。

time 标签有一个特殊的属性为：pubdate。该属性是布尔类型，通常用在 article 标签中代表该文章的发布日期。新建一个 index.html 文件，在其中写入以下内容：

<!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>
    <article>
      <header>
        <h1>文章标题</h1>
        <p>发布日期：<time datetime="2024-1-14" pubdate>2024年1月14日</time></p>
      </header>
    </article>
  </body>
</html>

figure 标签规定独立的流内容（包括图像、图表、照片、代码片段等）。

figcaption 标签为figure流内容的标题。figcaption 标签应该被置于 figure 标签的第一个或最后一个子标签的位置。

figure 和 figcaption 标签的使用，语法格式如下：

<figure>
  <figcaption></figcaption>
</figure>

在 HTML 中为我们提供了 code 标签，在 <code> 与 </code> 之间就是代码编辑区域。

举个例子，新建一个 index1.html 文件，在其中写入以下内容。

<!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>
    <figure>
      <pre>
            <code>
                var str = "Hello LanQiao";
                console.log(str);
            </code>
        </pre>
      <figcaption>
        <p>这是一段 JavaScript 代码</p>
      </figcaption>
    </figure>
  </body>
</html>

点击预览页面，效果如下：

从截图可以看出代码部分在 code 标签里的内容，与我们普通文字是不一样。在我们的代码里有一对 pre 标签，它是用来格式化文本内容的，保留文本原有的换行格式。

下是针对高级前端工程师的HTML相关面试题：

问题1: 请解释HTML5的Web Storage API及其使用场景。

考点: HTML5存储技术。
答案: HTML5的Web Storage API提供了两种存储方式：sessionStorage和localStorage。它们用于在客户端存储数据，不依赖于服务器。sessionStorage存储的数据在浏览器会话结束时会自动清除，而localStorage存储的数据除非手动清除，否则会一直存在。这常用于存储用户设置、会话信息等。
扩展问题: 请详细说明sessionStorage和localStorage的区别。
扩展问题: 请描述如何使用Web Storage API存储对象或数组。
扩展问题: 请举例说明在什么情况下使用Web Storage API比使用Cookies更合适。

问题2: 请描述HTML5的Web Worker API及其作用。

考点: HTML5多线程技术。
答案: HTML5的Web Worker API允许在后台线程中运行JavaScript代码，从而不会影响页面的性能。这适用于需要处理大量计算或I/O操作的任务，如图像处理、数据处理等。这有助于提高网页的性能，尤其是在处理大数据量或复杂计算时。
扩展问题: 请解释为什么在Web Worker中使用全局变量会导致问题。
扩展问题: 请描述如何在Web Worker中与主线程进行通信。
扩展问题: 请举例说明Web Worker API在处理大数据量时的优势。

问题3: 请解释HTML5的Web Sockets API及其与传统的AJAX通信的差异。

考点: HTML5网络通信技术。
答案: Web Sockets提供了一种全双工的通信机制，允许服务器和客户端之间进行实时通信。与传统的AJAX通信相比，Web Sockets具有更快的通信速度和更好的性能。它常用于需要实时数据交换的应用，如聊天应用、游戏等。
扩展问题: 请描述Web Sockets的持久连接是如何实现的。
扩展问题: 请解释Web Sockets API在处理长连接时的优势。
扩展问题: 请举例说明在什么情况下使用Web Sockets API比使用传统的AJAX更合适。

问题4: 请描述HTML5的Canvas API及其在网页中的使用场景。

考点: HTML5图形和动画技术。
答案: Canvas API允许在网页中使用JavaScript绘制图形、动画和其他视觉效果。它广泛用于游戏开发、数据可视化、图形设计等领域。例如，在创建一个动态图表时，可以使用Canvas API绘制图表元素并实现动画效果。
扩展问题: 请描述如何使用Canvas API绘制一个简单的图形。
扩展问题: 请解释如何在Canvas API中使用路径和形状。
扩展问题: 请举例说明Canvas API在创建游戏时的好处。

问题5: 请描述HTML5的Web Audio API及其在网页中的使用场景。

考点: HTML5音频处理技术。
答案: Web Audio API提供了强大的音频处理功能，包括音频合成、音频效果、音频混合等。它常用于音乐制作、音效设计、实时音频处理等场景。例如，在创建一个音乐播放器时，可以使用Web Audio API处理音频文件并实现音效效果。
扩展问题: 请解释如何在Web Audio API中处理音频文件。
扩展问题: 请描述如何使用Web Audio API创建音频合成效果。
扩展问题: 请举例说明Web Audio API在音乐制作时的优势。

问题6: 请描述HTML5的WebRTC API及其在网页中的应用。

考点: HTML5实时通信技术。
答案: WebRTC API提供了一种在网页中实现实时通信的方法，包括视频会议、语音聊天、屏幕共享等。它不需要安装额外的插件，直接在浏览器中运行。这常用于视频会议、远程协作等场景。
扩展问题: 请解释WebRTC如何处理网络抖动和延迟。
扩展问题: 请描述如何在WebRTC中实现视频会议功能。
扩展问题: 请举例说明WebRTC API在实时通信应用中的优势。

问题7: 请描述HTML5的地理定位API及其使用场景。

考点: HTML5位置感知技术。
答案: 地理定位API允许网页获取用户的地理位置信息。这常用于地图服务、导航应用、基于位置的服务（LBS）等场景。例如，在创建一个导航应用时，可以使用地理定位API获取用户的当前位置并显示导航路线。
扩展问题: 请解释如何处理地理定位API中的错误。
扩展问题: 请描述如何在地理定位API中使用高精度定位。
扩展问题: 请举例说明地理定位API在LBS应用中的优势。

问题8: 请描述HTML5的CSS3过渡和动画属性及其在网页中的使用场景。

考点: HTML5与CSS3的结合。
答案: CSS3过渡和动画属性允许网页中的元素平滑地过渡到新的状态或执行动画效果。它们常用于按钮点击效果、导航栏切换、页面加载动画等场景。例如，在创建一个动画导航栏时，可以使用CSS3过渡和动画属性为导航栏添加平滑的动画效果。
扩展问题: 请解释CSS3过渡和动画属性的异同。
扩展问题: 请描述如何使用CSS3过渡和动画属性创建复杂的动画效果。
扩展问题: 请举例说明CSS3过渡和动画属性在网页设计中的优势。

问题9: 请描述HTML5的WebGL API及其在网页中的应用。

考点: HTML5高级图形技术。
答案: WebGL API允许在网页中使用JavaScript直接操作底层图形硬件，以实现高性能的3D图形和动画效果。它常用于游戏开发、虚拟现实（VR）、增强现实（AR）等场景。例如，在创建一个3D游戏时，可以使用WebGL API实现3D场景和角色动画。这些高级HTML面试题涉及HTML5的高级特性和API，要求面试者对HTML5有更深入的理解和应用能力。
扩展问题: 请解释如何在WebGL API中使用着色器。
扩展问题: 请描述如何在WebGL API中处理3D模型。
扩展问题: 请举例说明WebGL API在创建3D游戏时的优势。

增的HTML5结构标签

结构标签：(块级元素) 有意义的div

标签	含义
`<article>`	定义独立的、完整的相关内容块
`<header>`	定义一个页面或一个区域的头部内容
`<nav>`	定义导航类辅助内容
`<section>`	定义一块区域
`<aside>`	定义页面非正式内容部分的侧边栏
`<hgroup>`	定义h1~h6标题组合
`<figure>`	定义元素的组合，多用于图片与图片描述组合
`<figcaption>`	定义 figure元素的描述
`<footer>`	定义一个页面或一个区域的底部内容