web知识点整理（一）HTML部分（持续更新中）
html网页基本结构：
<!DOCTYPE html>
<!-- 文档类型声明 -->
<html lang="en">
<!-- lang语言种类：en为英语；zh-CN为中文。两个都行一般不影响。 -->
<head>
<!-- 头标签 -->
<meta charset="UTF-8">
<!-- 字符集：编码格式UTF-8被称为万国码；统一标准写为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义视图窗口 -->
<title>标题</title>
</head>
<body>
<!-- 内容标签 -->
</body>
</html>HTML5部分
3.1 HTML5 有哪些新特性、移除了那些元素？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
新增的有：
语意化更好的内容元素，比如 article、footer、header、nav、section;
常见使用如图：
表单控件，calendar、date、time、email、url、search;
input拾色器：选择你喜欢的颜色: <input type="color" name="favcolor">日期选择器：
生日: <input type="date" name="bday">日期时间选择器：
生日 (日期和时间): <input type="datetime-local" name="bdaytime">其他使用较少，使用时参考文档
用于媒介回放的 video 和 audio 元素;
video基本使用：
``` audio基本使用： ``` ```
绘图 canvas;
SVG绘图；
拖放API；
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
新的技术 webworker, websocket;
新的文档属性 document.visibilityState
移除的元素有：
acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、strike
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
3.2 HTML5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->载入后，初始化新标签的CSS：
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}3.3 简述一下你对 HTML 语义化的理解？
相关知识点：
（1） 用正确的标签做正确的事情。
（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3） 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
（4） 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO ;
（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
回答：
我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。 html 的本质作用其实就是定义网页文档的结构，一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是strong 标签拥有强调的语义。
对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 html5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签，删除了 big 、font 这些没有语义的标签。
3.4 前端需要注意哪些 SEO ？
（1） 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keywords 列举出重要关键词即可。
（2） 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
（3） 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
（4） 重要内容不要用 js 输出：爬虫不会执行 js 获取内容。
（5） 少用 iframe：搜索引擎不会抓取 iframe 中的内容。
（6） 非装饰性图片必须加 alt。
（7） 提高网站速度：网站速度是搜索引擎排序的一个重要指标。
3.5 HTML5 的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
（1） 创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。
（2） 在如下 cache.manifest 文件的编写离线存储的资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问
offline.html 。
（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
如何更新缓存：
（1） 更新 manifest 文件
（2） 通过 javascript 操作
（3） 清除浏览器缓存注意事项：
（1） 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点
5MB）。
（2） 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3） 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
（4） FALLBACK 中的资源必须和 manifest 文件同源。
（5） 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6） 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7） 当 manifest 文件发生改变时，资源请求本身也会触发更新。
3.6 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
3.7 常见的浏览器端的存储技术有哪些？
浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB。
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。
3.8 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
相关资料：
SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
存储大小：
cookie 数据大小不能超过 4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
作用域：
sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中
共享。
localStorage 在所有同源窗口中都是共享的。
cookie 在所有同源窗口中都是共享的。
回答：
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage
不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不
是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。
