关于 HTML5 的一些知识

本文介绍H5的一些知识

向<a>标签致敬

HTML5的一大好处就是可以把多个元素放到一个<a>标签里:

<a href="index.html"> 
 <h2>The home page</h2> 
 <p>This paragraph also links to the home page</p> 
 <img src="home-image.png" alt="home-slice" /> 
</a>

唯一的限制是不能把另一个<a>标签或button之类的交互性元素放到同一个<a>标签里（也很好理解），另外也不能把表单放到<a>标签里（更不用说了）。

新的语义标签

为什么有语义标签

大多数网站的结构都很相似，包含页头、页脚、侧边栏、导航条，等等。作为网页编写者，我们会给相应的div元素起个好理解的名字（比如class="Header"）。可是，单纯从代码来看，任何用户代理（浏览器、屏幕阅读器、搜索引擎爬虫，等等）都不能确定每个div元素中包含的是什么内容。用户辅助技术也无法区分不同的div。HTML5为此引入了新的语义元素。

HTML5规范引入了新的用于描述内容的语义标签，为组织页面中的标签提供了解决方案（要记哈）

• <main> 表示页面的主内容区
• <header> 定义页面或区块的页眉区域（C5、F3.6、S4、IE8、O10）
• <nav> 定义页面或区块的导航条（C5、F3.6、S4、IE8、O10
• <footer> 定义页面或区块的页脚（C5、F3.6、S4、IE8、O10）
• <section> 区块，定义页面或内容分组的逻辑区域（C5、F3.6、S4、IE8、O10）
• <article> 定义文章或完整的一块内容（C5、F3.6、S4、IE8、O10）
• <aside> 标签用于展示文章相关的附加内容，它是放置有关链接、术语表或者引文的最佳场所。

main: 无论是页面中的主要内容，还是Web应用中的主要部分，都应该放到main元素中。以下规范中的内容特别有用：

“文档的主内容指的是文档中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单等多个文档中重复出现的内容不算主内容（除非网页或文档的主要内容就是搜索表单）。”

另外要注意，每个页面的主内容区只能有一个（两个主内容就没有主内容了），而且不能作为article、aside、header、footer、nav或header等其他HTML5语义元素的后代。上述这些元素倒是可以放到main元素中。

header： 可以包含各式各样的内容，比如公司商标、搜索框，等等。
footer： 通常都包含了诸如版权日期以及版权所有等信息，而在页脚包含复杂的导航结构也是常见的做法。
section： 区块在页面中用于标识逻辑区域。现在，务必舍弃以往滥用<div>标签来描述页面逻辑区域划分的做法，用<section>标签来取代<div>标签。
section和article：<section>标签就像一份报纸中的体育版块。体育版块有许多篇文章，每一篇文章既能保持其独立性，又能再次被拆分成几部分。Web页面某些逻辑区域的划分，如：页眉、页脚，已经有了合适的标签来标识它们。而<section>标签则通常用于对内容进行逻辑分组。

什么时候用section什么时候用div?

那到底什么时候该用section元素呢？可以想一想其中的内容是否会配有自然标题（如h1）。如果没有，那最好还是选div。

关键是要知道section这个元素不是为应用样式而存在的。如果只是为了添加样式而包装内容，还是像以前一样使用div吧。

nav和a

如果你通常使用无序列表（<ul>）和列表标签（<li>）来写导航，那最好改成用nav嵌套多个a标签。

---

meter 和 progress

meter 标签就是为进度控制而专门设计的，另外，meter 标签不应该用于没有固定最小或最大值的场景，比如身高和体重。progress 标签类似于 meter 标签，但它用来呈现动态进度，正如你在上传文件时看到的那样（并非静态的度量，更像是针对给定用户，其上传文件时在服务器端的当前有效存储进度）。总体而言，progress 标签和 meter 标签还是非常相似的。

<progress id="progressbar" min="0" max="100" value="20"></progress>

为了解决部分浏览器不支持，可考虑引用下面这个组件：https://lea.verou.me/polyfills/progress/

details 和 summary

你是不是常常想在页面中添加一个“展开”/“收起”部件？用户单击一段摘要，就会打开相应的补充内容面板。HTML5为此提供了details和summary元素。

<details> 
 <summary>I ate 15 scones in one day</summary> 
 <p>Of course I didn't. It would probably kill me if I did. What a 
way to go. Mmmmmm, scones!</p> 
</details>

单击摘要文本，就会打开一个面板。再单击一次，面板收起。如果希望面板默认打开，可以为details元素添加open属性（无值属性）

H5的其他功能或相关API

• 在HTML5中，已不再需要借助Flash、Silverlight等插件技术，就可以实现视频、音频播放以及矢量图浏览等功能了。

• HTML5 提供了Web Sockets支持，实现浏览器与服务端之间的持久连接，不再需要如旧有方式那般不断轮询服务端以获取最新进度。

• HTML5是一种Web开发技术，但借助新增的 Web Storage 和 Web SQL Database API（Application Programming Interface，应用程序接口），就可以创建将数据完全保存在客户端的Web应用程序。

  Web Storage机制为开发人员提供了一种通过浏览器内建的键/值存储方式进行客户端数据存 储的简单方法，。只需要极少量的JavaScript代码，就能轻易完成存储或获取简单数据串的操作。它 是最流行的客户端存储API之一，IE 8、老版本iOS及Android浏览器都支持它。

  注意，这些信息是无法与服务端或其他电脑共享的，除非主动将这些信息主动发送到服务端保存。

  Web Storage的localStorage方式，其保存的是浏览器会话间的数据，且不能被其他网站访 问，因为它受限于你当前访问的网站。

  sessionstorage用法和localstorage用法一样，只不过前者在页面关闭时数据就清空了（确认下是当前页面关闭前有效，还是关闭浏览器前都是有效的），后者即使关掉页面关掉浏览器后重新打开，数据还是依然存在的。

  Web Storage技术对于存储小块数据而言不失为一种简单的方式，但它在移动设备上会遇到性能 限制，且不适合用于保存大量数据。

• H5可获取用户经纬度

• Web workers通过提供一种简单的方式来编写并行程序，或者把长时间运行的任务放至后台运行，来解决此类问题。对于那些长时间运行以及经常需要CPU密集计算,但又不希望阻塞用户界面主线程的任务，Web Workers无疑是非常好的方案。

• 还有比如以下API：

  • History：管理浏览器历史记录（C5，F3，S4，IE8，O10.1，iOS3.2，A2）
  • Cross-Document Messaging：在跨域的内容窗口或<iframe>间传递消息（C5，F4，S5，iOS4.1，A2）
  • WebSocket：在浏览器与服务器之间创建一个有状态链接（C5，F6，S5，IE10，O12.1，iOS6）
  • Geolocation：从客户端浏览器获取经纬度（C5，F3.5，S5，O10.6，iOS3.2，A2.1）
  • Drag and Drop：提供拖放交互功能（C4，F3.5，S3.1，IE6：部分支持，IE10：完全支持，O12）

  当访问者打开一个新的Web页面，浏览器会将此页面添加到它的历史记录中

  当用户点击后退按钮时，就会触发window.onpopstate()事件

  Cross-Document Messaging技术，或者称之为Web Messaging（Web消息传递）2，是一个实现跨域脚本间来回传递消息的API。实现比如一个域名a下的页面，打开了一个iframe页面，且该页面是域名b下的，这项技术实现b页面向a页面传递数据。window.postMessage。onmessage()事件。

• 检查网络状态

  首先，通过navigator.onLine属性，我们可以检测当前是否处于在线状态。

  if (navigator.onLine) {
      alert('online')
  } else {
      alert('offline');
  }  

  我们还有可供监听的事件，以处理网络断开连接的情况。

  window.addEventListener("offline", function(e) {
      alert("offline");
  }, false);
   
  window.addEventListener("online", function(e) {
      alert("online");
  }, false);

  通过这种方式，我们可以检测网络是何时断开的，并显示一条信息；当网络再次可用时，又可以同步备份数据到服务端。

• 其他……

---

更新于：2023-3-31