开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情
一、HTML5 的离线存储怎么使用，工作原理是什么
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个 manifest 的属性；
2、在 cache.manifest 文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作 window.applicationCache 进行需求实现。
二、语义化、列举 5 个语义化的标签
1、去掉或样式丢失的时候能让页面呈现清晰的结构：html 本身是没有表现的，我们看到例如h1是粗体，字体大小 2em，加粗；strong是加粗的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html 的语义，可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的。
2、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS 的支持较弱）。
4、有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
5、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。
常见的语义化标签
标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
标签定义独立的内容。
标签定义页面主区域内容之外的内容（比如侧边栏）。
元素描述了文档的底部区域.
