unslug zh-cn: move

1 files changed, 116 insertions, 0 deletions

diff --git a/files/zh-cn/web/http/basics_of_http/data_uris/index.html b/files/zh-cn/web/http/basics_of_http/data_uris/index.html
new file mode 100644
index 0000000000..5153482967
--- /dev/null
+++ b/files/zh-cn/web/http/basics_of_http/data_uris/index.html
@@ -0,0 +1,116 @@
+---
+title: Data URLs
+slug: Web/HTTP/data_URIs
+tags:
+  - Base64
+  - HTTP
+  - URL
+  - 教程
+  - 进阶
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Data URLs</strong>，即前缀为 <code>data:</code> 协议的URL，其允许内容创建者向文档中嵌入小文件。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<p>Data URLs 由四个部分组成：前缀(<code>data:</code>)、指示数据类型的MIME类型、如果非文本则为可选的<code>base64</code>标记、数据本身：</p>
+
+<pre class="syntaxbox">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
+</pre>
+
+<p><code>mediatype </code>是个 MIME 类型的字符串，例如 "<code>image/jpeg</code>" 表示 JPEG 图像文件。如果被省略，则默认值为 <code>text/plain;charset=US-ASCII</code></p>
+
+<p>如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行base64编码之后再进行嵌入。</p>
+
+<p>下面是一些示例：</p>
+
+<dl>
+ <dt><code>data:,Hello%2C%20World!</code></dt>
+ <dd>简单的 text/plain 类型数据</dd>
+ <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
+ <dd>上一条示例的 base64 编码版本</dd>
+ <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
+ <dd>一个HTML文档源代码 <code>&lt;h1&gt;Hello, World&lt;/h1&gt;</code></dd>
+ <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
+ <dd>一个会执行 JavaScript alert 的 HTML 文档。注意 script 标签必须封闭。</dd>
+</dl>
+
+<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">给数据作 base64 编码</h2>
+
+<p>在Linux或者Mac OS系统上，你可以使用 <code>uuencode </code>命令行工具来简单实现编码：</p>
+
+<pre class="eval">uuencode -m <code>infile</code> <code>remotename</code>
+</pre>
+
+<p><code>infile</code> 参数表示要作 base64编码的文件名称，<code>remotename</code> 参数表示输出的文件名称, 实际上并没有在 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">data</span></font> 方案的URLs 中使用。</p>
+
+<p>输出结果如下：</p>
+
+<pre class="eval">begin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+</pre>
+
+<p>以上 Data URL 会使用位于首行之后的编码后的数据</p>
+
+<h3 id="在网页上使用_JavaScript">在网页上使用 JavaScript</h3>
+
+<p>Web APIs 已经有对 base64 进行编码解码的方法: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>.</p>
+
+<h2 id="Common_problems" name="Common_problems">常见问题</h2>
+
+<p>下文介绍一些在使用<code>data</code> URIs时遇到的常见问题:</p>
+
+<dl>
+ <dt>语法</dt>
+ <dd><code>data</code> URLs 的格式很简单，但很容易会忘记把逗号加在 "data" 协议名后面，在对数据进行 base64 编码时也很容易发生错误。</dd>
+ <dt>HTML代码格式化</dt>
+ <dd>一个 <code>data</code> URL 是一个文件中的文件，相对于文档来说这个文件可能就非常的长。因为 data URL 也是 URL，所以 data 会用空白符(换行符, 制表符, 空格)来对它进行格式化。但如果数据是经过 base64 编码的，就可能会<a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12" title="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">遇到一些问题</a>。</dd>
+ <dt>长度限制</dt>
+ <dd>虽然 Firefox 支持无限长度的 <code>data</code> URLs，但是标准中并没有规定浏览器必须支持任意长度的 <code>data</code> URIs。比如，Opera 11浏览器限制 URLs 最长为 65535 个字符，这意味着 data URLs 最长为 65529 个字符（如果你使用纯文本 data:, 而不是指定一个 MIME 类型的话，那么 65529 字符长度是编码后的长度，而不是源文件）。</dd>
+ <dt>缺乏错误处理</dt>
+ <dd>MIME类型错误或者base64编码错误,都会造成<code>data</code> URIs无法被正常解析, 但不会有任何相关错误提示.</dd>
+ <dt>不支持查询字符串</dt>
+ <dd>
+ <p>一个data URI的数据字段是没有结束标记的,所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段.例如:</p>
+
+ <pre class="eval">data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+ <p>这个 data URL 代表的 HTML 源文件内容为:</p>
+
+ <pre class="eval">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+ </dd>
+</dl>
+
+<h2 id="Support_in_other_browsers" name="Support_in_other_browsers">浏览器兼容性</h2>
+
+<p>{{compat("http.data-url")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2397")}}</td>
+   <td>The "data" URL scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resources" name="Resources">相关链接</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/URI">URI</a></li>
+</ul>