极客神殿

Data URLs，即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。语法Data URLs 由四个部分组成：前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：data:[<mediatype>][;base64],<data>mediatype 是个 MIME 类型的字符串，例如 “image/jpeg” 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASC

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法Object.assign(target, ...sources)参数target目标对象。sources源对象。返回值目标对象。描述如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对

DOM 事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自Event 类的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。本文提供了一个可以发送的事件的列表；一些是官方标准中的标准事件，另一些则是在特定浏览器内部使用的事件；例如，Mozilla 列出的特定事件使 拓展 可以用它们与浏览器交互。最常见的类别资源事件事件名称何时触发cachedmanifest中列出的资源已经下载

replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。原字符串不会改变。const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';const regex = /dog/gi;console.log(

CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。大多数情况下，开发者需要将 flex 设置为 auto，initial，none，或一个无单位正数。尝试调整下面的 flex 容器以观察这些值的作用:默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width 与 min-height属性。语法/* Basic values */fle

grid 是一个CSS简写属性，可以用来设置以下属性：显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，间距属性 grid-column-gap 和 grid-row-gap。注意：您仅可在一个 grid 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽

使用此CSS 参考页面以浏览按 字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及@ 规则。你也可以浏览 按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。基本规则语法样式规则语法style-rule ::= selectors-list { properties-list }… ...

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。定位类型**定位元素（positioned element）**是其计算后位置属性为 relative, absolute, fixed 或 sticky的一个元素。**相对定位元素（relatively positioned element）**...

类表达式是用来定义类的一种语法。和函数表达式相同的一点是，类表达式可以是命名也可以是匿名的。如果是命名类表达式，这个名字只能在类体内部才能访问到。JavaScript 的类也是基于原型继承的。语法const MyClass = class [className] [extends] { // class body};描述类表达式的语法和类语句的语法很类似，只是在类表达式中，你可以省...

class 声明创建一个基于原型继承的具有给定名称的新类。class Polygon { constructor(height, width) { this.area = height * width; }}console.log(new Polygon(4,3).area);// expected output: 12你也可以使用类表达式定义类。但是不同于类表达式，...

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。/* 关键字 */background-size: coverbackground-size: contain/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */background-size: 50%backgro...

到目前为止，您应该掌握了将图像、视频和音频嵌入到网页上的诀窍了。此刻，让我们继续深入学习，来看一些能让您在网页中嵌入各种内容类型的元素： <iframe>, <embed> 和<object> 元素。<iframe>用于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash — 一种正在被淘汰的技术，但您仍然会时不时的看到它。嵌入的简...

为显示CSS属性设置是否将元素视为块或内联元素以及用于其子元素的布局，例如grid或flex。display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。display 的一些取值已经在其单独的规范中给出了完整的定义；在文末的表格中可以找到所有规范的链接。全部的取值如...

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective...

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局...

CSS中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。box-sizing: border-box;width: 100%;border: solid #5B6DCD 10px;padding: 5px;在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素...

JavaScript 的并发模型基于”事件循环”。这个模型与像 C 或者 Java 这种其它语言中的模型截然不同。运行时概念下面的内容解释了一个理论上的模型。现代 JavaScript 引擎着重实现和优化了描述的几个语义。可视化描述栈函数调用形成了一个栈帧。function foo(b) { var a = 10; return a + b + 11;}f...

首先，我们将从一个高层次看看API - 它们是什么；他们如何工作；如何在代码中使用它们，以及它们是如何组织的。我们也将看看不同主要类别的API以及它们的用途。 预备知识 基本计算机知识，对于HTML和CSS的基本理解（见JavaScript 第一步，创建JavaScript代码块，JavaScript 对象入门）。 目标 熟悉API，他们可以做什么...

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。语法element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoVi...

使用XMLHttpRequest (XHR)对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。XMLHttpRequest在 Ajax 编程中被大量使用。尽管名称如此，XMLHttpRequest可以用于获取任何类型的数据，而不仅仅是XML，它还支持 HTTP以外的协议(包括文件和ftp)。如果您的通信需要从服...

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果...

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。要从其他非blob对象和数据构造一个Blob，请使用 Blob() 构造函数。要创建包含另一个blob数据的子集blob，请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象，请...

这是一个实验中的功能此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。MediaSource是Media Source Extensions API 表示媒体资源HTMLMediaElement对象的接口。MediaSource 对象可以附着在HTMLMedi...

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。语法void canvas.toBlob(callback, type, encode...

开发一个使用服务器发送的事件的Web应用程序是很容易的。你需要在服务器上的一些代码将事件流传输到Web应用程序，但Web应用程序端的事情几乎完全相同，处理任何其他类型的事件。在Web应用程序中使用服务器发送事件很简单.在服务器端,只需要按照一定的格式返回事件流,在客户端中,只需要为一些事件类型绑定监听函数,和处理其他普通的事件没多大区别.从服务器接受事件服务器发送事件API也就是EventS...

每一个HTML元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型（content model）。每个HTML元素都属于0个、1 个或多个内容模型，每个模型都有一些规则使得元素中的内容必须遵循一个HTML规范文档( HTML-conformant document)。以下是三种类型的内容分类：主内容类，描述了很多元素共享的内容规范；表单相关的内容类，描述...

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文：根元素(<html>)浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 ...

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。将模板视为一个内容片段，存储在文档中供后续使用。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；然而，元素的内容不会被呈现。属性此元素仅包含全局属性。但， HTMLT...

window.postMessage()&amp;nbsp;方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机&amp;nbsp; (两个页面的模数 Document.domain 设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()&amp;nbsp;方法提供了一种受控机制...