HTML杂货铺(2):削弱对第三方插件的依赖，以往播放音频或视频需要借助Flash,现在HTML5已支持多媒体。 (3)

一：HTML文档的基本结构

HTML的基本结构包括四个HTML元素，分别是DOCTYPE，html,head和body,任何文档都需要这四个元素

<!DOCTYPE html> //文档类型声明，有助于确定浏览器的渲染模式
<html> //根元素，HTML部分的开始
	<head> //包含文档的元数据
	</head>
	<body>//包含文档的内容
	</body>
</html>

二：HTML5的新特性：

(1):语义化的Web,让人和计算机更容易理解
(2):削弱对第三方插件的依赖，以往播放音频或视频需要借助Flash,现在HTML5已支持多媒体。
(3):更丰富的应用，涵盖各方面。包括以下几种：
1):新增绘图元素canvas,可直接操作图片，制作游戏和动态广告特效等
2):扩展JavaScript API,例如Web存储，地理定位，拖放，操纵历史浏览记录和读取文件等
3):创建离线Web程序，解决无网络时无法使用Web应用的情况
4):引入WebWorkers规范，解决Web应用越来越复杂的计算
(4):引入多种类型的新元素，例如构建文档的元素article,figure,header等，标识文本的元素mark,wbr等

三：HTML和HTML5的区别有哪些？

答案：HTML和HTML5主要有一下区别：
(1):旧版的HTML比较依赖浏览器的插件，例如Flash等
(2):由于HTML5不再基于SGML，所以文档声明类型(DOCTYPE)只有一种
(3):HTML5消除了过时或者冗余的元素，例如font,center
(4):HTML5新增了许多语义化的元素(例如article,header等)和新功能(例如video,canvas等)提供了更好的平台支持
(5):HTML5制定了新的全局属性和元素属性，全局属性有draggable,contenteditable等，元素属性有accept,placeholder

DOCTYPE用于声明文档类型和DTD(Document Type Definition)规范，确保不同浏览器以相同的方式解析文档，以及执行相同的渲染方式。DTD就是文档定义类型，一种标记符的语法规则，保重SGML和XML文档格式的合法性
故属于HTML5的DTD为：<!DOCTYPE html>

四：HTML与XHTML的区别

(1):XHTML中的元素要合理嵌套<p><span></span></p>这个就是不合理的嵌套
(2):XHTML中元素名称是区分大小的，且元素名称和属性要小写，DIV和div是不同的
(3):XHTML中所有的元素都是需要结束标签的，空元素可以用一个标签表示，但是要用 "/>"来结束，没有结束标签是会报错的
(4):XHTML中可以混合各种XML应用，例如MathML(数学标记语言)，SVG(可缩放的矢量图形)
(5): XHTML中，注释标签中的内容会被省略
(6): XHTML文档内的CDATA中的内容可以被执行，CDATA的作用是防止XML解析到非法字符(例如<,&等)就中断
(7): 在XHTML1.0中，不推荐使用a,applet,form,frame,iframe,img,map等，但是如果加了也不会报错
(8): 在HTML中用脚本读取的HTML标签名和属性名会以大写形式返回，而XHTML1.0则是小写
(9): 在XHTML文档中，元素的属性值需要引号包裹起来，并且禁止属性简化。
(10): 在XHTML中，有些特殊字符必须被替换为实体引用，例如将"<"替换为"<"
以下元素的写法哪些不符合XHTML1.0的规范（）
A:<P>打开文本框</p>
B:<buton name="add">提交</button>
C:<a href="javascript:;">跳转首页</a>
D:<p>电脑<b><i>必须</b></i>重启</p>

五：语义化

你是如何理解HTML语义化的
(1):HTML5中的语义化就是让元素，属性或属性值有含义，更准确的标记特定类型的内容。
(2):对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS样式控制内容的呈现，像b元素，没有语义但能将字体变粗，这类元素就违背了语义化的目的，它是会被舍弃的
语义化的优势有以下三点：
(1):良好的语义使得HTML文档结构清晰，布局合理，主体突出，可读性更强
(2):促进无障碍访问，降低信息污染，帮助残障人士的辅助设备(如屏幕阅读器等)识别元素含义，做出正确反馈
(3):改善搜索引擎优化(SEO),经过语义化的HTML能提供丰富的上下文信息和内容的含义，让爬虫能更容易地分析内容，区分类型以及对内容进行索引。
HTML实体的应用场景有哪些？
如果要在HTML文档中显示特殊字符(例如"<"，">"等 )，那么就可以使用HTML实体。HTML实体还能预防XSS(跨站脚本攻击)攻击。XSS通常会将脚本嗲吗注入到HTML文档中，再解析执行。但使用HTML实体后，就可以让相关代码只打印，而不执行。

六：微格式

微格式是一种数据结构化技术，通过添加属性(class或rel)和元数据(link元素)的方式来实现Web的语义化，让内容适合人类阅读，也容易被计算机处理
rel属性：rel属性用来描述两个文档之间或者文档和资源之间的关系，link和a元素都有这个属性，代码解释：

<link rel="stylesheet" href="styles/style.css"/>//定义外部样式
<link rel="apple-touch-icon" href="app-touch-icon.png" />//用于关联iOS的桌面快捷图标
a元素的rel属性表示一种链接关系，下面的代码表示将会链接到作者的信息
<a href="info.html" rel="author">M</a>

七：元素分类

1：基本类型:虚元素，原始文本元素，可转义的原始文本元素，外部元素和普通元素
2：盒类型分类:分为块级元素和行内元素
3：功能分类

八：属性分类：

1：全局属性：全部元素都能使用的属性
1):HTML4原有的全局属性：accesskey,class,dir,hidden,id,lang,style,tabindex,title;
2):HTML5新增的全局属性：contenteditable,contextmenu,draggable,dropzone,spellcheck;
3):ARIA属性，即无障碍网页应用属性，也是一种全局属性
4):事件属性(event attribute),都是以 "on"为前缀，例如onclick,onmousedown
5):自定义属性(data-attribute),通常以 "data-"为前缀
2：局部属性：自己运用再某些特定元素的属性，例如form的action属性，textarea的row属性

布尔属性：当未设值时，只需将属性名写在开始标签；当设置了值时，这个值不能是true或者false，只能是 "checked"或控制。如果要取消选中，那么只能将这个属性从标签中移除，而不能设置为false.

九：什么是Shadow DOM（影子中的DOM）?

Shadow Dom是浏览器的一种功能，能够自动的添加子元素，例如audio元素在网页中能使用进度条，音量控制等功能，而这些元素都是由浏览器自动生成的
<audio controls src="test.wav"</audio>
元素属性的src和href的区别在哪里？
两者的功能不同。href能够建立一条通道，将当前文档和定义的资源链接起来。src是将定义的资源嵌入到当然文档中。
img元素中的title和alt属性有何区别
title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt是局部属性，只能用在img,input等元素中，提供在图片未载入或者加载失败时的替代文本。注意，只有当input元素的type属性未image时才能使用alt属性

十：应用CSS样式：

内联样式： <p color="red">我好累哦</p> 内嵌样式：

<style>
  p{
      color:red;
  }
</style>

注意：style元素除了拥有全局属性外，还拥有四个特殊的属性：type,media,title,scoped。其中scoped是布尔属性，用来定义样式的应用范围，如果该属性存在，那么样式只能应用于其父辈元素。
外部样式：外部样式可用link元素引用

方式	权重	HTTP请求	重用范围	文档大小	伪类与伪元素
内联样式	最高	无	不可重用	增加	不可定义
内嵌样式	同外联样式	无	当前页面	增加	可定义
外联样式	同内嵌样式	有	整个项目	保持	可定义

十一：嵌入JavaScript

方式	内容和行为	HTTP请求	重用范围	文档大小	特点
内联脚本	耦合	无	当前文档	增加	将内联脚本放在外部样式表之后，会延迟其他资源的下载
外部脚本	分离	有	整个项目	保持	容易维护，高复用，可用defer或async属性解决页面阻塞问题
元素属性	耦合	无	不可重用	增加	两种定义方式：分别是事件属性和在链接属性使用特殊伪协议和URL。不但能制作可执行的JavaScript的浏览器书签，还能用a元素模拟按钮的效果

HTML解析遇到script元素，会先执行脚本，再回复文档的解析和渲染，默认情况下脚本的执行是同步和阻塞的，因此很多时候都会推荐将脚本放置在紧邻</body>的位置
为了解决阻塞的问题，script元素新增了两个布尔属性，分别是延迟(defer)和异步(async)

<script src="scripts/jquery.js" defer></script>
<script src="scripts/jquery.js" async></script>

属性	作用	执行顺序	作用内联脚本
defer	延迟脚本执行，直到文档解析完成	有序	否
async	尽快执行脚本，不会阻塞文档解析	无序	否

async属性后的运行机制：HTML文档的解析和外部脚本的下载是同时进行的，但脚本下载完成后就会开始执行，执行完脚本才会继续解析文档
defer属性后的运行机制：HTML文档的解析和外部脚本的下载是同时进行的，但只有当文档解析完成后，才会开始执行脚本
元素属性：
1：事件属性：事件属性都是以on为前缀的
2：特殊协议："javascript:;" "javascript:void(0);"

十二：meta元素：

每个meta元素只能有一个用途，如果想要多种用途，就需要添加多个meta元素
meta元素总共有四个属性：charset,name,http-equiv和content
但是如果你要使用meta属性，charset,name,http-equiv这三个属性中必须定义其中一个，但不能同时出现。且如果定义了name或http-equiv,那么必须定义content属性，且content属性不能单独出现 -----------"你懂没懂我不知道，但反正我是懂了"
charset:可用于表示HTML文档中的内容所用的字符编码（推荐使用UTF-8）

<meta charset="UTF-8"/>
<meta charset="utf-8"/>二者等价

name:表示文档级元数据
关键字：viewport
主要用于移动设备，可设置浏览器中的视口（视口就是不包括浏览器外壳（如标签页，书签栏，调试工具等），也就是文档内容的可视区域）。
http-equiv:用于模拟HTTP的首部，每个http-equiv属性值同样对应特定的content属性值。在http-equiv属性中包含三个关键字，分别是content-type(已经不推荐使用),default-style.refresh
关键字:refresh
指定一个以秒为单位的时间间隔，执行重载或重定向。如果是重载只需定义描秒数，如果是重定向，需要定义秒数和URL

十三：meta元素可以定义文档的哪些元数据呢？

分为四类；
1):声明HTML文档内容所用的字符编码；
2):完善文档描述信息，让搜索引擎更容易解析索引
3):适配移动设备，使页面在各种尺寸的屏幕中显示正确
4):指定首选样式，执行重载或重定向

十四：超链接`<a></a>`：相关属性将逐个讲解

href:用于定义资源的URL，href的三种情况：
1):缺省---不在a元素中声明href属性时，该元素仅作为占位符，失去默认外观和默认效果等
2):URL
3):锚点---是一种特殊链接，等定位到HTML文档中的某个特定位置，推荐用id属性来设置锚点
target:用于指定在何处显示链接的资源

关键字	描述
_self	当前窗口，也是target的默认值
_blank	新窗口
_parent	父窗口，没有父窗口同_self
_top	顶层窗口，如果已经是顶层窗口，与_self相同

其他属性

属性	描述
download	H5 新增，与href组合使用，兼容性差
hreflang	链接资源所使用的语言，仅仅是提示，没有特殊功能

a元素除了可以用于导航外，还有其他什么功能呢？
href属性中的URL可以是浏览器支持的任何协议，因为有这个特点，a元素可以用于手机拨号，发送短信，发送邮件等功能。发送短信是，可将内容作为参数直接带过去；发送邮件时，可将收件人，发件人，主题和内容最为参数直接带过去

十五：图像---img

属性	描述
src	必须存在的属性，图像的URL
alt	当图像未正确替换的时候，可用这个属性定义的文字替换显示
crossorigin	帮助canvas元素能够使用第三方站点的图像，而且不会污染画布
usemap	让图像关联区分响应图

关于画布污染：所谓的画布污染就是指不能再使用画布的toDataURL(),getImageData()等方法。代码演示：

<img id="cross" src="http://www.pwstrick.com/avatar.jpg"crossorigin="anonymous"/>
<script>
    window.onload = function(){
        var canvas = document.creatElement("canvas"),
         ctx=canvas.getContext("2d"),
         img=document.getElementById("cross");
        ctx.drawImage(img,0,0);
        //图像不启用跨域将不能执行该方法，会抛出安全错误
        canvas.toDataURL();
</script>

分区响应图
将map元素和area元素组合使用时，可创建分区响应图。这个没遇到过，有这个需求的时候我再补充吧
插图元素
HTML5中新增加了两个与图像有关的语义化元素：figure和figcaption.这两个元素都属于内容分组，两者结合在一起，可用于插入图像，以及对图像的描述。代码演示：

<figure>
   <img src="img/ater.jpg" />
   <figcaption>略略略，2019/10/18</figcaption>
</figure>

十六：嵌入在HTML文档中的图像格式有哪些，都有些什么特点？

格式	透明	压缩	动画	颜色数	浏览器兼容性	特点
GIF	支持，但不是alpha透明	无损	支持	8位	全部支持	简单动画，颜色少，有锯齿
PNG	alpha透明	无损	不支持	8位和24位	IE6不支持	压缩比高，色彩好，除了动画，其余方面可替代GIF
JPEG	不支持	有损	不支持	24位	全部支持	存储照片或颜色丰富的复杂图像
APNG	alpha透明	有损	支持	8位和24位	部分支持	PNG格式的扩展，可替代GIF
WEBP	alpha透明	无损和有损	支持	24位	部分支持（chrome,Opera）	更优的图像数据压缩算法

十七：用户数据收集

input元素可根据type属性的值分为文本，日期，数值和按钮等类型
文本：
文本类型的type属性包括;hidden,text,password,以及HTML5新增的tel,email,search和url,总共七个关键字，具体功能如图所示：

关键字	功能
hidden	隐藏元素，可存储不让用户看见和编辑的数据
text	只能输入单行文本，并且文本中的换行符会自动移除
tel	可输入电话号码格式的文本，没有强制执行特定的验证机制（电话号码的规则太多了）
password	遮盖单行文本，密码，你懂吧
email	邮箱文本，可验证
search	搜索字符串的单行文本，无特殊功能，也不会关联搜索引擎
url	超链接，但是也只检查协议，不检查后面的

注意：
tel类型的input元素在移动端可弹出数字键，用户不用切换键盘
search类型的input元素在chorme中，会增加一个取消图标
list属性用于关联数据列表，即datalist元素，可用于自动提示
HTML5中有一个新增的全局属性dir，dir属性用于规定元素中内容的方向，默认值ltr表示从左向右，rtl表示从右向左

<input type="text" dor="ltr"/>

text和search类型的input元素还有一个比较特别的dirname属性.定义dirname为direction，如下所示，GET方式提交表单的时候，就会多一对参数名和数据（也就说说dirname中的direction等同于dir中的ltr）

<input type="text" dir="ltr" dirname="direction"/>

十八：日期与数值

日期类型的type属性值包括date，datelime-local,month,time,week
这几种类型的input都拥有相同的属性，这些属性中min和max可以设定一段日期区间，起始日期和截止日期
例如：<input type="data" min="2010/10/10" man="2012/12/12"
数值：规范数值的输入，既可以减少后台验证，也可以提升操控效率

十九：按钮和其他类

按钮类型的type属性值有image,button,submit和reset.其中image类型的按钮比较特殊，不但拥有图像相关的属性，还拥有了HTML5新增的提交相关的6个属性。

HTML5新增的属性	表单的属性
formaction	action
formenctype	enctype
formmethod	method
formtarget	target
formnovalidate	novalidate

type值	功能
checkbox	选择是与否的复选框，可选中多个选项
radio	选择是与否的单选框，只能选中一个选项
color	指定颜色，读取的颜色用十六进制标记法标记
file	将选择的文件上传到服务器中

注：file类型的input元素新增了一个布尔属性multiple，可选择多个文件一起上传。代码演示：<input type="file" multiple>

二十：给表单控件分组

可用HTML5新增的fieldset元素，将逻辑关联的表单控件(inout,select)等组织在一起，分别编组，再用legend元素对编的组提供相关说明。

<fieldset>
   <legend>账户信息</legend>
   <section>
    <label for="nick">昵称</label>
    <inout type="text" id="nick"/>
  </section>
  <section>
    <label for="mobile">手机</label>
    <inout type="tel" id="mobile"/>
  </section>
</fieldset>

二十一：元素的布尔属性disabled和readonly的区别在哪里？

所谓的元素操作是指读取，写入等操作，Tab导航是否能用Tab键定位该元素。
用表格的方式对disabled和readonly进行对比

属性	元素外观	元素操作	获取焦点	Tab导航	表单提交	元素支持
disabled	修改	否	否	否	没有发送数据	input,textarea,option,select和button等元素
readonly	维持	是	是	是	会发送数据	input和textarea

二十二：表格元素

表格元素一般用于呈现二维数据。过去表格还曾被用于页面布局，但是现在已经不用了，因为这是一种不规范的开发方式

元素	含义	元素	含义
table	表格	colgroup	表格的一组列
caption	表格的主题	col	表格的一列
thead	表格的表头	th	表头的单元格
tbody	表格的主体	td	表格的单元格
tfoot	表格的表脚	tr	表格的行

二十三：元素属性：

1：表格属性：HTML5废弃了table元素的冗余属性，还废弃了控制样式的属性。推荐使用CSS来替代
例如align属性表示表格在文档中的对齐方式，可以使用CSS属性margin来替代
cellpadding属性用于指定单元格内边距，可用css属性padding替代
cellspacing表示单元格之间的间隙，可用CSS属性border-spacing替代
2：单元格属性
单元格元素都有headers属性,通过定义一个或多个th元素的id属性来关联表头，有助于设备对表格的处理。还有两个特殊的属性：colspan和rowspan.colspan属性可合并列，rowspan可合并行。

二十四：请列举表格布局的弊端

1):可访问性差。表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系。
2):难以实现响应式，通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并要用元素的colspan和rowspan属性，不能用CSS属性简单的设置
3):可维护性差，表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套，这使得代码难以阅读，特别是如果不缩进，标签没有层次感。
4):不够语义化，表格布局会用到大量的单元格，
5):加载速度慢，嵌套的表越多，文档就变得越臃肿，不但会加长网络传输时间，而且会增加渲染时间

二十五：iframe

通过iframe元素能在一个文档中嵌入另一个文档。且这两个文档之间是相互独立的，彼此的JavaScript和CSS都不会影响对方。
iframe属性
1：seamless:seamless的中文意思是无缝这个布尔属性可以让jframe元素中引用的文档成为父文党的一部分，是的父文档中的CSS能够影响子文档的样式。兼容性特别差，几乎没有浏览器支持
2：阻塞父窗口的load时间
3：将script元素放置在iframe之前，会阻塞iframe中资源的请求
4：制造点击劫持（ClickJacking）,将一个不可见的iframe或包含用户感兴趣内容的iframe覆盖在文档的某个位置，诱使用户点击iframe中的内容。

二十六：多媒体

HTML5支持直接通过多媒体元素就能在浏览器中播放视频或音频，不用再依赖Flash插件。
使用多媒体元素的优势：
(1):支持移动设备，可为智能手机，平板电脑或其他移动设备提供丰富的观看体验
(2):易于定制效果，使用传统的CSS就能为多媒体元素设计个性化的视觉体验
(3):轻松实现响应式设计，能在不同媒体渲染合适的样式，呈现最优的界面
(4):语义化的元素，可提供明确的含义，提升文档的可访问性。

多媒体元素video
video专门用来播放视频，这是HTML5中新增的视频元素

属性	描述
autoplay	布尔属性，指定视频在页面载入后就能自动播放
preload	是否预先载入视频，有3个可选关键字：none,metadata和auto
controls	布尔属性，显示播放控件
loop	布尔属性，循环播放视频
muted	布尔属性，将视频静音
poster	指定视频的封面照
src	视频的URL地址
widht	视频宽度，单位像素
height	视频高度，单位像素

注意：
1):虽然CSS能控制video的宽高，但是video中嵌入的视频为了不变形，会按比例显示。
2):视频文件：视频文件中包含视频，音频，字幕和配置等信息，这些内容需要按照一定的规则组织起来，这些规则叫做容器格式。由于原始视频和音频比较巨大，所以需要先用视频编解码器和音频编解码器压缩，然后存储起来，使用的时候在解压缩
为了能在各种主流浏览器中播放视频，可以用source元素指定多个格式，浏览器会沿着顺序找能够播放的视频文件

<video>
   <source src="video/a.webm" type="video/webm"/>
   <source src="video/a.ogv" type="video/ogg"/>
   <source src="video/a.mp4" type="video/mp4"/>
   <p>当前浏览器不支持HTML5视频元素</p>
</video>

多媒体元素audio audio专门用来播放音频

<video>
   <source src="video/a.mp3" type="video/mp3"/>
   <source src="video/a.ogg" type="video/ogg"/>
   <source src="video/a.wav" type="video/wav"/>
   <p>当前浏览器不支持HTML5视频元素</p>
</video>

二十八：除了video和audio元素，HTML5还支持哪些其他的多媒体元素呢？

HTML5还支持embed和track元素。
embed元素用于嵌入外部资源，例如SVG矢量图，应用程序或插件等。
track元素是audio和video的子元素，为多媒体文件添加辅助文本信息，例如字幕，屏幕阅读器说明和主题等

二十九：绘图

通过Canvas和SVG两种图形技术可以让开发人员基于Web标准，创建图形相关的交互网站或应用程序。虽然Canvas和SVG都能绘制图形，但Canvas是基于位图的图像，而SVG是基于矢量的图形
位图图像与矢量图像
位图图像：特点是色彩变化丰富，常用于数码照片，页面效果图。缺点是无限放大后会看到像素块，图像会失真
矢量图像：与位图相比，色彩更加简单，不是很逼真。但是无论是放大还是缩小或旋转都不会丢失细节，也不会影响清晰度。

三十：元素canvas

canvas是HTML5新增的元素，该元素创建一个固定大小的画布，在画布中可以绘制要展示的内容。
特点及功能：
1):只能通过JavaScritp脚本来绘制图形，例如矩形，圆等。
2):如果要为图形设置CSS样式，文本或动画，那么也要通过JavaScript来实现
3):canvas元素有很强的图像操作能力，不但能实现图像合成与裁剪，还能实现滤镜的一些效果。
4):每次修改内容，需要将整个画布重新渲染一次
5):如果在画布中绘制一个按钮，不能直接为这个按钮添加DOM事件
6):可通过定义canvas元素的内容和ARIA属性，让它更具语义化，从而帮助设备了解此元素存在的意义和作用
代码实现：

<canvas id="btnCanvas" role="button" aria-label="嘟嘟嘟嘟" width="200"height="100">
<p>这是一个按钮，用来启动</p>
</canvas>
<script>
    var canvas = document.getElementById("btnCanvas"),
     ctx = canvas.getContext("2d");
    ctx.fillStyle="#007ab9";//矩形背景色
    ctx.fillRect(0,0,canvas.width,canvas.height);//绘制矩形
    ctx.font="40px serif";//字体设置
    ctx.fillstyle="#FFF"//字体颜色
    ctx.fillText("dududu",20,60)//绘制文本
</script>

三十一：SVG

与Canvas只能用JavaScript绘图不同，SVG提供了各种类型的元素，包括形状，文本，渐变，动画滤镜等，并且可以为每个元素附加DOM事件，还能用CSS控制他们的样式，虽然只能使用部分CSS属性。SVG也可以插入图像，执行裁剪，遮罩，旋转等功能。不过SVG不能像canvas那样，将处理过的图形进行输出。在Canvas中有个toDataURL()方法，可以将画布中的内容编码成字符串形式。

三十二canvas元素用属性和用CSS设置宽高有什么区别？

答：可将canvas简单理解为两部分：容器和画布。css控制的是容器的尺寸，而属性控制的是画布的尺寸。绘图都是在画布上进行，画布默认宽高分别为：300px 150px.以上面的例子为例，用属性定义宽高改为用CSS定义宽高。

<canvas width="200" height="100"></canvas>
<canvas style="width:200px;height="100px"></canvas>

由于画布的默认尺寸比容器的尺寸大，因此将画布塞入容器后，能让画布内容的清晰度变高，执行代码后的结果有差异。由于清晰度变高，因此画布中的文字变小，并且偏移距离也会做出改变。

Web存储分为本地存储和会话存储。可以简单的把他们看作改进版的Cookie。Web存储弥补了Cookie的诸多不足

三十二：Cookie

当用户访问网站的时候，会发起大量请求，大部分是基于HTTP协议的HTTP请求，而HTTP协议是无状态的(每个请求都是独立的，前后没有联系) 当你每访问一遍需要后台验证的页面时就得登录验证一遍，这样很麻烦，cookie的出现，解决了这个问题。但是随着交互的复杂度越来越高，Cookie的范围也就越来越有限，许多缺陷也就暴露出来了。例如：
1):Cookie可以指定过期时间，利用这个特点，可以将登录的用户名和密码等存储到Cookie中，下次登陆可以省去重新登陆。但是如果网站访问量巨大，就会很影响带宽。
2):Cookie不适合存储一些隐私或敏感信息（密码什么的），Cookie在网络中传递很容易被劫持，劫持后可伪造请求，执行一些危险操作。CSRF(跨站点请求伪造)就是通过劫持Cookie的方式来进行攻击的
3):Cookie的大小被浏览器限制在4KB左右，只能存储简单的信息，不能应对复杂的存储需求。如果大家不太理解的话，可以想象一下，当你填了一份巨长居多的表单，但是啪断网了，或者叮手贱把浏览器不小心关了，填了半个小时的表就这样没了Cookie也很难过啊，Cookie说：“我没法啊，你懂的吧，我只是个Cookie，我没法应对这样复杂的存储需求”

三十三：Web存储

Web存储拥有更大的存储容量，一般在2.5~10M之间，它不会作为请求报文中的额外信息传递给服务器，因此比较容易实现网页或应用的离线化。两种Web存储使用的时候略有不同。
(1):本地存储永远不会过期，即使浏览器关闭，还会存在，同源的本地存储可以共享。
(2):会话存储只能应用于页面会话期间，当关闭页面浏览器的时候，会话存储中的数据就会自动清除。
通过JavaScript中的全局属性localStorage和sessionStorage，可分别访问本地存储和会话存储。用代码来展示两者之间的区别。

localStorage.setItem("local","local data");//设置本地存储
sessionStorage.setItem("session","session data")//设置会话存储

然后在另一张页面child.html中输出存储的数据

var local=localStorage.getItem("local")//获取本地存储
    session=sessionStorage.getItem("session");//获取会话存储
console.log(local);
console.log(session);

userdata userdata是一种持久化存储方式，即使关了浏览器也不会清楚这些数据，但可以设置失效日期。与上面两种实现方式不同，userData将数据寄存在HTML元素中。

三十四：用什么方法可以防止Cookie被盗取

答：Cookie是先由浏览器向服务器发起请求，再由服务器响应后回传Set-Cookie首部(此时可设置HttpOnly属性)向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后，就能够禁止页面的JavaScript访问这个Cookie,从而避免被盗取。

HTML杂货铺