HTML杂货铺

时间  2019-12-19
标签 html 货铺 栏目 HTML 繁體版
原文   原文链接

一：HTML文档的基本结构

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

<!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等
css

三：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
html

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

四：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中，有些特殊字符必须被替换为实体引用，例如将"<"替换为"&lt;"
如下元素的写法哪些不符合XHTML1.0的规范（）
A:<P>打开文本框</p>
B:<buton name="add">提交</button>
C:<a href="javascript:;">跳转首页</a>
D:<p>电脑<b><i>必须</b></i>重启</p>
jquery

五：语义化

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

六：微格式

微格式是一种数据结构化技术，经过添加属性(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：功能分类
chrome

八：属性分类：

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属性
canvas

布尔属性：当未设值时，只需将属性名写在开始标签；当设置了值时，这个值不能是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,从而避免被盗取。

完结

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程