diff options
Diffstat (limited to 'files/zh-cn/orphaned')
57 files changed, 6243 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/example_2_-_using_ul/index.html b/files/zh-cn/orphaned/example_2_-_using_ul/index.html new file mode 100644 index 0000000000..0ac22c34df --- /dev/null +++ b/files/zh-cn/orphaned/example_2_-_using_ul/index.html @@ -0,0 +1,7 @@ +--- +title: Please Delete this doc 请删除本页 +slug: Example_2_-_Using_UL +--- +<p>Please Delete this doc</p> + +<p>请删除本页</p> diff --git a/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html b/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html new file mode 100644 index 0000000000..082f9e0f39 --- /dev/null +++ b/files/zh-cn/orphaned/games/tools/engines_and_tools/index.html @@ -0,0 +1,68 @@ +--- +title: 游戏引擎和工具 +slug: Games/Tools/引擎和工具 +translation_of: Games/Tools/Engines_and_tools +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<h2 id="HTML5_游戏引擎">HTML5 游戏引擎</h2> + +<p>下面是用HTML5和JavaScript实现的游戏引擎：</p> + +<ul> + <li><a href="https://aframe.io">A-Frame</a>: 一个用于构建3D和虚拟现实体验的web框架。使用HTML和实体组件生态系统。HTC Vive、Oculus Rift、桌面端和移动平台都可以使用。来自Mozilla虚拟现实团队。</li> + <li><a class="external" href="http://www.canvace.com/">Canvace</a>: 一个用于创建2D和2.5 D游戏的HTML5游戏平台。</li> + <li><a class="external" href="http://craftyjs.com/">Crafty</a>: 一个基于javascript的2D游戏框架。</li> + <li><a class="external" href="http://cocos2d-x.org/wiki/Cocos2d-js">Cocos2D JS</a>: 为您想要发布的任何平台提供一致的开发经验，无论是web还是本地平台。“一套代码，可在任何地方运行”在Cocos2D JS中是非常容易和自然的。用一个独立的JavaScript代码库，你就可以在web浏览器和本地平台上运行你的游戏，包括Mac OS X、Windows、iOS和Android。你的游戏可以在所有主流应用商店和其他分销渠道上发布。</li> + <li><a class="external" href="http://www.scirra.com/">Construct 2</a>: 它是第一个支持HTML5的HTML5游戏引擎，它只支持HTML5和JavaScript。只使用Canvas，并且通过JavaScript插件可扩展。</li> + <li><a class="external" href="http://www.divgo.net/">Div GO</a>: 基于Div游戏工作室开发的2D和3D游戏的开发引擎。它包含了新的函数和变量来增强HTML5和canvas。Div GO还提供了一个集成开发环境，其中包括代码编辑器、进程和函数列表、图形编辑器、运行过程列表、编译器和生成器/包装器项目。</li> + <li><a class="external" href="http://enchantjs.com/">EnchantJS</a>: 一个简单的用于创建2D和3D HTML5游戏的JavaScript框架。它有良好的文档和易于遵循的入门教程。</li> + <li><a class="external" href="http://www.compilgames.net">GDevelop</a>: 一个面向本地和HTML5的游戏开发平台。它用基于WebGL/canvas的Pixi.js渲染项目。</li> + <li><a class="external" href="http://www.isogenicengine.com/">Isogenic Engine</a>: 目前最有前途的游戏引擎之一。内置大规模的多人联网，在服务器端使用Node.js和MongoDB，并且可以输出canvas或dom节点的图形。</li> + <li><a class="external" href="http://impactjs.com/">Impact</a>: 一个带有编辑器和其他工具的JavaScript游戏引擎，会产生各种各样的游戏风格(例如2D和3D)，并且可以发布到web、Android和iOS。</li> + <li><a href="http://jawa.games">Jawa</a> : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes</li> + <li><a href="http://Lance.gg">Lance.gg</a>: A game engine suitable for multiplayer games. Handles networking code (authoritative server), implements real-time extrapolation of game object positions, a.k.a. client-side prediction. Supports 2D and 3D game worlds. Works with either simplified physics or full-featured physics engine <a href="http://www.cannonjs.org/">cannon.js</a>. Supported renderers: <a href="http://www.pixijs.com/">PIXI.js</a>, plain HTML, canvas / Three.js, and <a href="https://aframe.io">A-Frame</a>.</li> + <li><a class="external" href="http://melonjs.org/">melonJS</a>: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.</li> + <li><a class="external" href="http://mightyfingers.com/">MightyEngine</a>: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.</li> + <li><a class="external" href="http://phaser.io">Phaser</a>: A 2D game engine supporting Web, Android, and IOS platforms.</li> + <li><a class="external" href="http://playcanvas.com/">PlayCanvas</a>: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.</li> + <li><a class="external" href="http://piqnt.com/stage.js/">Stage.js</a>: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.</li> + <li><a class="external" href="http://superpowers-html5.com/index.en.html">Superpowers</a>: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.</li> + <li><a class="external" href="http://www.wimi5.com">WiMi5</a>: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. </li> + <li><a class="external" href="http://www.rpgmakerweb.com/products/programs/rpg-maker-mv">RPG Maker MV: </a>This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.</li> + <li><a href="https://bitbucket.org/nikola_l/visual-js/">visual-js</a>: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try <a href="https://jsfiddle.net/user/zlatnaspirala/fiddles/">Api examples on jsfiddle</a>. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. </li> +</ul> + +<h2 id="HTML5_game_tools">HTML5 game tools</h2> + +<ul> + <li><a class="external" href="http://clay.io/development-tools">Clay.io</a>: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.</li> + <li><a class="external" href="https://github.com/mrdoob/stats.js">stat.js</a>: Simple JavaScript performance monitor.</li> + <li><a href="http://phasereditor.boniatillo.com">Phaser Editor</a>: an IDE to build Phaser based games. Provides several built-in tools like a scene builder, texture packer, asset manager and an improved JavaScript editor.</li> + <li><a href="https://github.com/shakiba/planck.js">Planck.js</a>: 2D JavaScript physics engine for cross-platform game development, rewrite of Box2D.</li> +</ul> + +<h2 id="Useful_technologies">Useful technologies</h2> + +<p>The following can be useful when developing games based on Web technologies.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/canvas">Canvas</a>: 2D graphics.</li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a>: 3D graphics.</li> + <li>Audio: {{htmlelement("audio")}} element, <a href="/en-US/docs/Web_Audio_API">Web Audio API.</a></li> + <li><a href="/en-US/docs/WebSockets">WebSockets</a>: Can be used for real-time communication between a player and the game server, to support multi-player games.</li> + <li><a class="external" href="http://nodejs.org/">Node.js</a>: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a>: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a> : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.</li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.</li> + <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?</li> + <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.</p> +</div> + +<h2 id="Game_template">Game template</h2> + +<p>You can use the <a href="https://github.com/mozilla/mortar-game-stub">Mortar Game Stub</a> template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.</p> diff --git a/files/zh-cn/orphaned/glossary_of_translation/index.html b/files/zh-cn/orphaned/glossary_of_translation/index.html new file mode 100644 index 0000000000..c3fedad9ab --- /dev/null +++ b/files/zh-cn/orphaned/glossary_of_translation/index.html @@ -0,0 +1,572 @@ +--- +title: 翻译术语表和翻译规范 +slug: Glossary_of_translation +tags: + - Translation + - localize +--- +<p>为了规范 MDN 上的术语、用语及规范，在此建立一个供编者、译者参考的术语表和翻译规范。如需查阅其他 Web 开发术语，请参见<a href="/zh-CN/docs/Glossary" title="/zh-CN/docs/Glossary">词汇表</a>（有待翻译）。</p> + +<h2 id="术语表">术语表</h2> + +<table class="standard-table" style="height: 506px; width: 980px;"> + <tbody> + <tr> + <td style="text-align: center; width: 25%;">原文</td> + <td style="text-align: center; width: 25%;">译文</td> + <td style="text-align: center;">注释</td> + </tr> + <tr> + <td style="text-align: center;">Creative Commons License</td> + <td style="text-align: center;">知识共享许可协议</td> + <td style="text-align: center;">有些空间不足等原因可能简称CC协议</td> + </tr> + <tr> + <td style="text-align: center;">best practices</td> + <td style="text-align: center;">最佳实践</td> + <td style="text-align: center;"> 最佳实践，是一个管理学概念，认为存在某种技术、方法、过程、活动或机制可以使生产或管理实践的结果达到最优，并减少出错的可能性。（参考 <a href="http://zh.wikipedia.org/wiki/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">维基百科</a>）</td> + </tr> + <tr> + <td style="text-align: center;">Mozilla Demo Studio</td> + <td style="text-align: center;">Mozilla 演示室</td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">Demo</td> + <td style="text-align: center;">演示</td> + <td style="text-align: center;">如果会产生歧义或需特别注明，可以译为“演示（Demo）”</td> + </tr> + <tr> + <td style="text-align: center;">Kuma</td> + <td style="text-align: center;">Kuma</td> + <td style="text-align: center;">这里特指用于 MDN 的 wiki （维基知识库）软件系统本身，不译</td> + </tr> + <tr> + <td colspan="1" rowspan="2" style="text-align: center;">Mozilla</td> + <td style="text-align: center;">Mozilla</td> + <td style="text-align: center;">指 Mozilla 基金会时，不译</td> + </tr> + <tr> + <td style="text-align: center;">谋智</td> + <td style="text-align: center;">特指谋智网络（Mozilla 中国全资子公司）时</td> + </tr> + <tr> + <td style="text-align: center;">Firefox</td> + <td style="text-align: center;">Firefox</td> + <td style="text-align: center;">虽然“谋智网络”网页等处翻译为火狐，但软件目前仍显示为 Firefox，且 MDN 访者皆可了解，故暂不译。</td> + </tr> + <tr> + <td style="text-align: center;">Add-on|Addons</td> + <td style="text-align: center;">附加组件</td> + <td style="text-align: center;"> + <p>扩展、插件、外观（主题）的总称</p> + </td> + </tr> + <tr> + <td style="text-align: center;">Extension</td> + <td style="text-align: center;">扩展</td> + <td style="text-align: center;"> + <p>本体 .xpi</p> + </td> + </tr> + <tr> + <td style="text-align: center;">Plug-in|Plugin</td> + <td style="text-align: center;">插件</td> + <td style="text-align: center;"> + <p>本体 DLL</p> + </td> + </tr> + <tr> + <td style="text-align: center;">Appearance</td> + <td style="text-align: center;">外观</td> + <td style="text-align: center;"> + <p>原称为主题（Theme），后某个版本开始在附加组件管理器中已改为外观。</p> + </td> + </tr> + <tr> + <td style="text-align: center;">Web</td> + <td style="text-align: center;">Web</td> + <td style="text-align: center;"> + <p>准确的翻译的话，应该对应中文的“网络”，然而感觉太容易有歧义了。不如不译。</p> + </td> + </tr> + <tr> + <td style="text-align: center;">World Wide Web</td> + <td style="text-align: center;">万维网</td> + <td style="text-align: center;"> + <p>虽然说这样翻译最好，但翻译后可能有些人不懂（还真有这样的），所以可以引注万维网的具体释义：<span class="st">一个由许多互相链接的超文本组成的系统，通过互联网访问。</span></p> + </td> + </tr> + <tr> + <td style="text-align: center;"> </td> + <td style="text-align: center;"> </td> + <td style="text-align: center;"> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="翻译规范">翻译规范</h2> + +<p>这里列出了一些在翻译工作中经常会遇到的一些问题，并给出一些参考意见和建议。</p> + +<p>MDN 是开放性的，每个人都可根据自己的兴趣和能力为其做出贡献。而无论你做出的贡献是大是小，都有可能会让很多的人从中受益，所以请不要吝惜自己的才华。</p> + +<p>但是，开放并不代表毫无约束和规范。MDN 中有几篇与风格和规范有关的文章可供参考（本文即为其中之一）。我们建议你认真阅读并尽量遵守，这会使你的文章与其他人保持一致，而一致的风格会让读者阅读起来更加轻松和惬意。</p> + +<p>本规范主要给你在翻译 MDN 上的英文文章时提供参考。其中的内容绝大部分都不是强制的（强调一下，MDN 是开放性的，我们更关注内容本身的价值，其次才是样式和风格），但是如果每个人都能注意这些并遵守，必然会让 MDN 变得更加美好。因此，何乐而不为呢？</p> + +<p>另外还有几篇与此有关的文章。如果你正准备为 MDN 添加一篇新的文章，可以参考 <a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Content/Style_guide">MDN Web 文档写作规范</a>，这篇文章是从英文翻译过来的，其中的部分内容并不适合中文写作，但这并不妨碍你从中受益。而如果你对 MDN 编辑器（就是在 MDN 中撰写或编辑文章时使用的在线所见即所得编辑器）还不熟悉，可以参考<a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide">这里</a>的说明。</p> + +<p>最后，感谢你能够耐心阅读本文。Let‘s get started.</p> + +<h3 id="意译优于直译">意译优于直译</h3> + +<p>技术文档的翻译不比文学作品的翻译，因为一般来说，技术类文章都是采用直述方式来撰写的，因此翻译相对简单，即使是完全的直译也不会导致读者无法理解的问题。</p> + +<p>但是由于中英文的语法、表述习惯、以及思维方式上的差异等诸多客观因素，如果只是机械化地对原文的每一句话进行直译，仍然可能会影响翻译质量。因此就我个人的经验来看，在翻译的时候把握原文的意思，然后适当采用意译的方式来翻译，是一种比较好的技术类文章的翻译实践。</p> + +<h4 id="避免逐句翻译">避免逐句翻译</h4> + +<p>一般来说，我们拿到一篇英文文章，在翻译的时候都会采用边阅读边翻译的方式，也就是逐句翻译。这种方式有点类似于计算机处理指令。优点是简单直观，比较流程化；而缺点则是容易导致翻译较为生硬，并且容易产生理解偏差甚至错误。</p> + +<p>翻译生硬是因为当你把注意力集中在某条句子上面时，就容易被其英文表达方式所影响，从而由逐句翻译变为逐词翻译，翻译出来的中文经常带有明显的“翻译腔”（想了解什么是<a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%BF%BB%E8%AF%91%E8%85%94">翻译腔</a>？）。</p> + +<p>容易产生理解偏差和理解错误，是因为逐句翻译时容易忽略它们与上下文中其他内容之间的联系，从而导致对原文的意思把握不够全面，有时候就会产生理解上的偏差，甚至是完全曲解原文的意思。</p> + +<p>对于不是专业从事翻译工作的人来说（我想大多数志愿者应该都不是专业的翻译人员），很难避免逐句翻译的习惯，但是我们在这里给出几点建议，可以帮助你提高翻译质量。</p> + +<ul> + <li>翻译前先通读原文</li> +</ul> + +<p>我们鼓励你在翻译之前先将英文版的原文通读一遍，至少应该通读一下当前准备翻译的小节，这样可以减少对原文的理解偏差。</p> + +<ul> + <li>先逐句翻译，再重构优化</li> +</ul> + +<p>写作文的时候，老师会强调修改的必要性；写代码的时候，我们也会强调重构的好处。翻译也是一样，不要想着一次成功，想要一遍就得到高质量的成果是很难的。我们可以先采用逐句翻译的方式，得到译文的第一稿，然后再通过重构去修正和优化它。重构可能会重复好几轮最终才能得到一篇高质量的的译文。</p> + +<p>不要担心过程繁琐或重构会占用你太多时间。记住，宁缺毋滥，不准确甚至错误的翻译只会误导他人，而我们的理想是给他人带来帮助。</p> + +<h4 id="误解：100_翻译_准确">误解：100% 翻译 = 准确</h4> + +<p>可能有些人会有这样的误解：我必须把英文原文中的每一句话都翻译出来，不能遗漏，只有这样才是准确的翻译。</p> + +<p>这种观念是错误的。首先，由于英文和中文在表述习惯上的差异，有些句子在英文中比较自然，但如果直接翻译为中文就会显得有些啰嗦。此时我们可以选择将其精简一下，把冗余的部分去掉。不要担心丢掉了这些内容之后会让译文不准确，必要的删减只会让译文更加简洁，阅读起来也更加流畅。</p> + +<p>比如英文中经常会见到“he/she”、“and/or”这样的表达方式。看起来比较严谨，但是在中文中并没有类似的习惯，因此简单将其翻译为“他”、“和”（也可以是“或”）即可。如果非要追求“准确”而将其翻译为“他/她”、“和/或”反而有画蛇添足之感（并且翻译腔也比较浓）。</p> + +<p>表述习惯上的差异还包括语序、句式、时态、词性等，关于中英文两种语言在表述习惯上的差异，可以参考下面的小节。</p> + +<p>其次，英文原文也不一定是 100% 正确的。MDN 上的英文文档虽然质量很高，但它也是由人维护的，是人就会有疏忽和犯错的时候，因此我们所翻译的原文并不一定是完全正确的。而作为翻译者，我们不应该只满足于翻译活动本身，还应该在翻译过程中勇于发现和改正原文的错误之处。</p> + +<h4 id="准确表述原文意思">准确表述原文意思</h4> + +<p>这一点并不是一条具体的规范，因为我不会、也无法解释如何才能做到“准确表述原文的原意”。将这一点列在这里主要是为了强调我们应该努力提高翻译的准确性。</p> + +<div class="note"> +<p>我们要对翻译的每一句话负责。如果你的翻译中有错误，就可能会让读者产生误解，而这比不给他们提供译文更糟糕（没有译文时，读者可以阅读英文原文，或去其他地方查找相关资料）。注意，这里所说的错误特指严重的概念性错误或原则性错误，而不是由于疏忽而导致的排版错误、打字错误等小的失误。</p> +</div> + +<p>下面这个例子是我之前翻译过的一篇文章里面的一段内容。原文是这样的：</p> + +<pre>The term "global objects" (or standard built-in objects) here is not to be +confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in +the global scope</strong>. The <strong>global object </strong>itself can be accessed using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" title="A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode."><code>this +</code></a>operator in the global scope (but only if ECMAScript 5 strict mode is not +used; in that case it returns <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="The global undefined property represents the primitive value undefined. It is one of JavaScript's primitive types."><code>undefined</code></a>). In fact, the global scope <strong>consists +of</strong> the properties of the global object, including inherited properties, if +any.</pre> + +<p>这段话中有两个微妙的词“global objects”和“global object”，一个是复数一个是单数。但我们知道，中文的名词并没有单复数的变化，因此直译过来都是“全局对象”，然而原文却恰恰需要对两者的不同进行解释，但是同一个名词怎么会有两种不同的解释呢？如何在中文中表达原文的意思呢？</p> + +<p>我们先来看之前的翻译，它采用的是直译，即将两个词都翻译为”全局对象“（将这个作为反例列在这里并没有贬低或指责的意思，仅仅是想通过这个例子让大家理解本小节所要表达的意思）：</p> + +<pre>“全局对象（global objects）”（或标准的内置对象）与<strong>全局对象（global object）</strong>不同。 +这里的全局对象（global objects）指的是全局<em>作用域</em>中的对象。而<strong>全局对象（global +object）</strong>本身可以……实际上，全局<em>作用域</em>由全局对象（global object）的属性组成，包括 +继承属性（如果有的话）。</pre> + +<p>”全局对象与全局对象不同“，显然会让读者犯糊涂。虽然译者在两个”全局对象“后面加上了它们的英文名称，但是收效甚微，读者仍然会被这段话搞晕，因为它们的英文名称也是很相似的。因此，这里必然不能采用直译的方式，而应该选择符合原文意思，但是中文名称又有明显不同的名词来翻译。下面是我对这段译文的重新翻译：</p> + +<pre>标准内置对象也称为<code>全局对象（global objects）</code>。注意这里的全局对象指的是具有全局作用域 +的“一组”对象，而全局对象这个词还有一层意思，用来指代当前环境中的顶层对象，该对象在…… +事实上，全局作用域就是由顶层对象的属性组成的，包括继承而来的属性（如果有的话）。</pre> + +<p>我选择把第二个全局对象（即单数形式的 global object）翻译为”顶层对象“，这样就把两个全局对象从中文名称上区别开了。同时，我还对整段译文进行了较大的调整，因为如果仅仅是将“global object”替换为“顶层对象”仍然不是很好，可能会让读者感到困扰。请将上面的译文与下面的这段对比一下：</p> + +<pre>“全局对象”（或标准的内置对象）与<strong>顶层对象</strong>不同。这里的全局对象指的是全局<em>作用域</em>中的对象。 +而<strong>顶层对象</strong>本身可以……实际上，全局<em>作用域</em>由顶层对象的属性组成，包括继承属性（如果有的话）。 +</pre> + +<p>一个读者在初次读到这段话的时候，可能会产生以下疑问：</p> + +<ol> + <li>全局对象当然与顶层对象不同了，它们的名称就不一样啊，为什么要强调这一点？</li> + <li>为什么要将两者放到一起比较？就像你说月亮和犀牛是不一样的，我肯定会感到奇怪。</li> +</ol> + +<p>所以，追求意思准确的同时还要尽量让中文表述更合理、自然。</p> + +<h4 id="认识英文和中文在表述习惯上的不同">认识英文和中文在表述习惯上的不同</h4> + +<p>由于思维方式、表述习惯、语言语法/句法等方面的差异，同样的意思，中文和英文在表述形式上经常会有差异。而我们在翻译的时候应当注意并尽量抹平这种差异，以符合中文读者的阅读习惯。这可以有效提高你的翻译质量。</p> + +<p>下面是我所想到的一些中文和英文在表述习惯上的差异。欢迎补充。</p> + +<h5 id="英文中主语很少省略">英文中主语很少省略</h5> + +<p>英文强调格式严谨，一个句子里面主语谓语通常是必须有的，但中文则注重表意，只要意思表达清楚就行。对于这样的句子，多数时候我们都不需要把其中的主语翻译出来。</p> + +<div class="example-good"> +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which <strong>they</strong> are passed.</p> +</div> + +<p>这句话中的“they”就是一个不太重要的主语（虽然是在从句中），翻译时去掉也不会有什么影响：</p> + +<div class="example-bad"> +<p>传递给函数的所有参数都会以函数的参数列表中的标识符名称来对待，并以<strong>它们</strong>传递时的顺序来匹配。</p> +</div> + +<h5 id="万能动词">万能动词</h5> + +<p>英语中有很多万能动词：do、make / take、get、have 等，遇到这些万能动词的时候最好留意一下，尽量将其替换成其原本所要指代的动作。</p> + +<div class="note"> +<p>可能是受英文的影响，中文中也越来越多地出现了一些万能动词，比如“作为”、“进行”等。个人认为这是一种不好的现象，应该尽量避免滥用这些词。</p> +</div> + +<h5 id="被动句式">被动句式</h5> + +<p>英语中经常喜欢用被动句式来表达一种被动关系。但其实在中文里面我们一般只有在需要强调物和人之间存在被动关系的时候才会使用被动句式，其他时候一般不会刻意使用被动句式。如果将文章中出现的每个被动句式都翻译成“被……”可能会让译文看起来略显生硬且翻译腔浓重。因此应该仅在必要的时候才采用被动句式来翻译，其他时候直接忽略原文中的被动关系即可。</p> + +<p>这种情况在英文中很常见，随便找一下就能找到不少。比如：</p> + +<div class="example-good"> +<p>Strings are useful for holding data that can be represented in text form. </p> +</div> + +<p>如果直接翻译，可能会翻译成：</p> + +<div class="example-bad"> +<p>字符串在用来保存那些可以被表示成文本形式的数据时很有用。</p> +</div> + +<p>这样翻译虽然也能正确表达原文的意思，但是中文在这种情况下一般不会刻意使用被动句式，所以完全可以去掉“被”字：</p> + +<div class="example-good"> +<p>字符串在用来保存那些可以表示成文本形式的数据时很有用。</p> +</div> + +<p>其实这句话还可以进一步简化：</p> + +<div class="example-good"> +<p>字符串在保存文本数据时很有用。</p> +</div> + +<p>原文最后的整个从句仅仅用来说明“data”是“文本数据”而已，“can be represented in”和最后的“form"都是次要的，在中文里面完全可以省略。你甚至可以将这句话翻译成下面这样：</p> + +<div class="example-good"> +<p>字符串可以用来保存文本数据。</p> +</div> + +<p>完全不会影响读者的理解！</p> + +<h5 id="将来句式">将来句式</h5> + +<p>和被动句式一样，英文中也经常使用将来句式来表达这是一个可能发生的动作或者将来会发生的动作。然而，同被动句式一样，翻译的时候我们通常都不需要将其翻译成“将……”。</p> + +<p>这种情况同样有很多，随便举一例：</p> + +<div class="example-good">For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. </div> + +<p>很多人会把这句话翻译成：</p> + +<div class="example-bad"> +<p>尽管可以使用方括号的方式来访问字符，但是试图删除或为其赋值将不会成功。</p> +</div> + +<p>这样翻译会带有明显的翻译腔，实际上并不需要把原文中的“will”翻译出来，直接忽略即可：</p> + +<div class="example-good"> +<p>尽管可以使用方括号的方式来访问字符，但是试图删除或为其赋值是无法成功的。</p> +</div> + +<h5 id="一个……">一个……</h5> + +<p>英文中的名词有单复数变化，在遇到复数名词的时候，我们一般都知道并不需要刻意把这种复数翻译出来。但是还有一种情况我们却往往会忽略，那就是单数可数名词前面有“a”或“an”的时候，我们经常会翻译成“一个……”。实际上，多数时候并不需要加上这个数量词。</p> + +<p>比如下面这个例子：</p> + +<div class="example-good"> +<p>It's possible to use String as a more reliable toString() alternative, as it ...</p> +</div> + +<p>当然，你可以按照原样来翻译，将“a”翻译为“一种”或“一个”：</p> + +<div class="example-bad"> +<p>将 String 函数作为 toString() 方法的一种更可靠的替代是可行的，因为它……</p> +</div> + +<p>虽然看起来没什么问题，但是这里的“一种”、“一个”是完全多余的，去掉之后不但不会影响翻译效果，而且还会显得更加简洁。其实这个翻译还犯了一个前面所说过的万能动词的问题，“作为”在这里并不是太好，另外把“possible”翻译为“可行”、“可能”也不是很好，因为“possible”在这里只是用来说明“可以”这么做。</p> + +<p>总之，这个翻译的翻译腔还是浓了点，仍然有改进的空间：</p> + +<div class="example-good"> +<p>可以用 String 函数代替 toString() 方法，并且这样更可靠一些，因为它……</p> +</div> + +<h5 id="当……的时候">当……的时候</h5> + +<p>英文中经常会使用”when“来表示一种状态，或某种条件，而在中文里面我们不会经常用“当……的时候”这种表述方式来表达这种状态和条件。所以不要一遇到“when”、“while”，就把它翻译成“当……的时候”，应该先判断一下这里的“when”和“while”确实是用来表示时间，还是仅仅用来表示状态或条件。</p> + +<p>看下面这个例子：</p> + +<div class="example-good">When memory is shared, multiple threads can read and write the same data in memory. </div> + +<p>这里的“when”所表示的就是一种条件，所以最好不要将其翻译为“当内存是共享的时候”。下面是我的翻译：</p> + +<div class="example-good"> +<p>多个共享内存的线程能够同时读写同一位置上的数据。</p> +</div> + +<h4 id="翻译中的标点符号">翻译中的标点符号</h4> + +<p>英语有一个比较死板的规则，一个句子中包含了主谓宾的时候，就应该用句号把这个句子结束掉，然后再另起一句。但是中文却没有这种限制，因此在翻译的时候，我们不要总是把英语的句号当做一个句子的结束，有时候把逻辑关系比较强的几句英文合并为一句中文会更好。</p> + +<h3 id="排版和风格">排版和风格</h3> + +<p>这一节介绍了一些在页面排版、样式、风格等方面可能会遇到的一些问题，并给出指导建议。</p> + +<h4 id="关于英文单词两边的空格">关于英文单词两边的空格</h4> + +<p>首先，这是一个见仁见智的问题，不同的人可能有不同的喜好。这里建议你加上空格（因为我喜欢 :-p），当然你完全可以按照自己的喜好来。</p> + +<p>但是，<strong>请在同一篇文章中保持风格统一</strong>。如果你正在编辑别人之前翻译过的文章，也请尽量与文章原有风格保持一致（或者如果你不嫌麻烦，可以将整篇文章全部改成你喜欢的风格）。整齐划一的风格会使阅读时如沐春风，从而有利于读者从你的文章中获益。</p> + +<h4 id="标点符号">标点符号</h4> + +<p><strong>请在译文中使用中文标点</strong>。在中文中夹杂着英文标点是很不严谨的做法，并且不利于读者的阅读体验。</p> + +<div class="note"> +<p>这里所说的标点不包括代码中的标点。但如果选择翻译代码中的注释，则注释中的标点也应该一并翻译为中文。</p> +</div> + +<p>这里不再强调一般的标点对应关系，仅列举几种特殊情况：</p> + +<ul> + <li>英文中没有顿号，应该使用顿号的地方在英文中一般使用的是逗号，在翻译时应注意将其翻译为顿号。比如“JavaScript, HTML, CSS”应翻译为“JavaScript、HTML、CSS”。</li> + <li>如果遇到引号，分两种情况：一种是表达普通的引用或强调，如果是这种情况，直接翻译为中文引号即可；而如果是第二种情况，即为了表示代码中的字符串、属性等值时所使用的引号（也就是说，它表示的是字符串或属性在代码中原本应该具有的形式），这时候就不要机械地将其翻译成中文引号了，应仍保留英文引号。</li> +</ul> + +<h3 id="小节标题的翻译">小节标题的翻译</h3> + +<p>MDN 上的很多文章都具有类似的结构，比如很多文章都包含“Specifications”和“Browser compatibility”两个小节。为了保证文章间的统一性，常见小节的标题翻译应尽量保持一致。下面就给出一些文章中常见的小节及其推荐翻译方法。此表欢迎补充。</p> + +<table class="standard-table" id="normal_section_heading"> + <caption>常见小节的标题翻译</caption> + <thead> + <tr> + <th scope="col">英文标题</th> + <th scope="col">推荐翻译方法</th> + <th scope="col">不推荐翻译方法</th> + <th scope="col">示例</th> + </tr> + </thead> + <tbody> + <tr> + <td>Examples</td> + <td>示例</td> + <td>例子、举例</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Examples">示例</a>一节</td> + </tr> + <tr> + <td>Specifications</td> + <td>规范</td> + <td>标准、规范文档</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E8%A7%84%E8%8C%83">规范</a>一节</td> + </tr> + <tr> + <td>Browser compatibility</td> + <td>浏览器兼容性</td> + <td>浏览器的兼容性、浏览器兼容</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7">浏览器兼容性</a>一节</td> + </tr> + <tr> + <td>See also</td> + <td>相关链接</td> + <td>参考、参见、更多内容</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5">相关链接</a>一节</td> + </tr> + <tr> + <td>Obsolete</td> + <td>已过时</td> + <td>已废弃、作废、淘汰</td> + <td><code><a></code> 标签的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#%E8%BF%87%E6%97%B6%E7%9A%84">已过时</a>一节</td> + </tr> + <tr> + <td>Syntax</td> + <td>语法</td> + <td>句法</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Syntax">语法</a>一节</td> + </tr> + <tr> + <td>Description</td> + <td>描述</td> + <td>说明</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%8F%8F%E8%BF%B0">描述</a>一节</td> + </tr> + <tr> + <td>Properties</td> + <td>属性</td> + <td>属性列表</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Properties">属性</a>一节</td> + </tr> + <tr> + <td>Methods</td> + <td>方法</td> + <td>方法列表</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods">方法</a>一节</td> + </tr> + <tr> + <td>…… instances</td> + <td>……实例</td> + <td>……对象、……实例化</td> + <td>Array 中的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B">数组实例</a>一节</td> + </tr> + <tr> + <td>Attributes</td> + <td>属性</td> + <td> </td> + <td><code><a></code> 标签的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#%E5%B1%9E%E6%80%A7">属性</a>一节</td> + </tr> + </tbody> +</table> + +<h3 id="缩写的展开">缩写的展开</h3> + +<p>展开缩写时使用中文括号，括号中首先给出缩写的完整英文表达，后面跟着逗号和中文翻译。例如：</p> + +<div class="example-good">HTML（HyperText Markup Language，超文本标记语言）</div> + +<div class="example-bad"> +<p>HTML（超文本标记语言，HyperText Markup Language）</p> +</div> + +<div class="example-bad"> +<p>HTML（超文本标记语言——HyperText Markup Language）</p> +</div> + +<div class="example-bad"> +<p>HTML (HyperText Markup Language，超文本标记语言) （注：使用了英文括号）</p> +</div> + +<h3 id="选择题">选择题</h3> + +<p>有时候，我们会在翻译过程中面临某个单词或某段内容是译还是不译、哪种翻译方法更好的选择。本小节总结了翻译中的一些常见问题，并给出一些意见和建议，供参考。</p> + +<h4 id="长句还是短句？">长句还是短句？</h4> + +<p>没有人会乐意阅读复杂和很长的句子。但是有时候由于所要表达的内容本身的逻辑复杂性，而导致无法进一步压缩句子的长度和复杂度。但是这时候我们可以通过调整顺序和拆分句子来降低它的理解难度。</p> + +<h4 id="“你”还是“您”？">“你”还是“您”？</h4> + +<p>对于非严谨的地方，一般用“你”即可，这样亲切些，没必要冷冰冰的。当然必要的时候（一般是警告的地方，如“您即将从演示室移除xxx”）可以使用“您”来称呼。</p> + +<h4 id="译还是不译？">译还是不译？</h4> + +<ul> + <li>部分被广为接受的英文专有名词、缩略语等不推荐刻意翻译为中文。例如 Web 不需要翻译成“网络”（注意不是 web，这里的 W 是大写的，为专有名词）、HTTP 不需要翻译成”超文本传输协议“。</li> + <li>部分被广为接受的英文人名、公司名等不推荐刻意翻译成中文。例如 Adobe 不需要翻译成“阿道比”、MDN 不需要翻译成”Mozilla 开发者网络“。</li> + <li>代码中的属性名、方法名、对象名、类名、标签名等不译。例如 length property 不需要翻译成“长度属性”，而是应为“length 属性”。</li> + <li>网址、域名不译。</li> +</ul> + +<h4 id="示例代码及注释">示例代码及注释</h4> + +<p>MDN 上面的很多文章中都包含示例代码。一般来说，你可以将这些代码及注释原封不动地复制过来，并不需要刻意去翻译。示例代码不同于正式工作中所写的代码，示例代码主要是说明概念和用法，因此通常会设计的很简单，并且主要的解释都已经在前面的文章内容里面了，注释大多数时候只是起到辅助说明的作用，所以多数时候，即使读者完全不看注释也不妨碍他们对示例的理解。</p> + +<p>但是有几种情况还是建议最好能对其中的注释做一下翻译。</p> + +<h5 id="1._示例中涉及到其他知识，而注释正是为了解释这部分知识而添加的">1. 示例中涉及到其他知识，而注释正是为了解释这部分知识而添加的</h5> + +<p>在这种情况下，确保读者已完全理解了注释就是相当必要的了，否则可能会影响对整个示例的理解。因此这种情况最好能对这部分注释做一下翻译。</p> + +<p>比如下面是摘自 JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Creating_an_array_using_the_result_of_a_match">Array</a> 对象中的例子。该示例涉及到正则表达式的应用，而对于初学者来说，他可能还不太了解什么是正则表达式，以及这段代码的结果是什么，这会使他产生迷惑（而且原文中本段代码后面还配有一个详细解释了代码执行结果的表格，如果读者无法理解这段代码，他很可能也看不懂那个表格中的内容）。</p> + +<pre><code>// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz');</code></pre> + +<p>所以我选择对其进行<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Creating_an_array_using_the_result_of_a_match">翻译</a>：</p> + +<pre><code>// 匹配1个 d 后面紧跟着至少1个 b，再后面又跟着1个 d 的子串， +// 并且需要记住子串中匹配到的 b 和最后的 d （通过正则表达式中的分组）， +// 同时在匹配时忽略大小写 + +myRe = /d(b+)(d)/i; +myArray = myRe.exec("cdbBdbsbz");</code></pre> + +<h5 id="2._注释的内容是对原文的补充">2. 注释的内容是对原文的补充</h5> + +<p>有些示例是对原文的补充说明，而不是单纯的演示和举例。这时候，示例和注释相当于是原文的一部分，因此这种情况下最好能将注释翻译出来。</p> + +<h5 id="3._惯用语的翻译">3. 惯用语的翻译</h5> + +<p>这一点不太容易解释，并且我个人觉得还存在争议，列在这里供参考。</p> + +<p>有些注释中使用了一些我们平时的惯用语，而这些惯用语我们已经习惯了中文化的表达，对英文并不熟悉。这种情况下，可以适当对其进行翻译。</p> + +<p>一个常见的例子，我们经常会在示例中使用打印语句来打印信息，以此说明程序的运行结果。这种时候，英文文档中经常会用“// print 100”或”// log 100“来对打印语句做注释。如果我们将其翻译为”// 打印 100“可能看起来会更加亲切一些。</p> + +<h4 id="标签">标签</h4> + +<p>页面底部的标签大部分情况下并不需要翻译。</p> + +<h4 id="URL_slug">URL slug</h4> + +<p>slug 就是网页地址后面的那一串，用来标识每一篇文章。如果你正面临是否需要翻译 slug 的选择，请选择 No！保留 slug 为英文可以保证链接的可读性，也可以避免翻错的情况（这个一旦确定好像就不能修改了）。</p> + +<h3 id="保存和恢复翻译进度">保存和恢复翻译进度</h3> + +<p>翻译一篇文章可能无法一次完成，尤其是比较长的文章。幸好 MDN 的编辑器可以将进度自动保存在你的本地电脑中，在你不小心关闭了浏览器，或者不小心点击了一个链接而离开了当前页面的时候，自动保存的内容会在你重新打开编辑页面的时候自动恢复，从而避免丢失之前的劳动成果。</p> + +<p>但是，请不要百分百依赖编辑器的自动保存功能，偶尔它也有失效的时候，而一旦发生就可能会造成严重后果。</p> + +<p>如果因为文章内容较多而导致翻译时间很长，可以在取得阶段性成果之后先将内容提交，并在提交时勾选“版本备注” -> “本地化标志” -> "本地化进行中 - 还没完全翻译呢"，这样提交后用户看到的页面上会显示“翻译正在进行中”的提示信息。</p> + +<p>最后，如果你在翻译过程中存在一些拿不准的地方，或者自我感觉译文中可能存在错误或需要改进的地方，那么你可以在提交时勾选“版本备注” -> “需要复核吗？”中的“技术复核”或“文法复核”选项。这样其他志愿者就可以看到并帮助你复核译文。</p> + +<h3 id="其他">其他</h3> + +<p>这一小节列出了翻译过程中可能会遇到的其他一些问题。</p> + +<h4 id="Firefox_UI_控件名称">Firefox UI 控件名称</h4> + +<p>除非中文版 UI 控件的翻译有明显错误，否则控件名称（如操作步骤中描述的窗口、菜单、按钮等）都应尽量参照所描述版本或最新版 Firefox 中的翻译，以保证可对应。</p> + +<p>若最新版 Firefox 的 UI 仍有错误的翻译或你有改善建议，请到 <a href="http://g.mozest.com/forum-78-1" title="http://g.mozest.com/forum-78-1">mozest 本地化板块</a>反馈或邮件通知<a href="https://wiki.mozilla.org/L10n:Teams:zh-CN" title="https://wiki.mozilla.org/L10n:Teams:zh-CN">简体中文本地化成员</a>。</p> + +<h4 id="引用链接">引用链接</h4> + +<p>英文版文章中可能会包含引用 MDN 中其他文章的绝对链接，此时要注意将链接修改为中文版的 URL。</p> + +<p>修改方法很简单，一般是把其中的 <code>en-US</code> 改为 <code>zh-CN</code> 即可。比如下面是 JavaScript 文档中对全局对象的介绍，分别对应英文版和中文版：</p> + +<p>https://developer.mozilla.org/<code>en-US</code>/docs/Web/JavaScript/Reference/Global_Objects</p> + +<p>https://developer.mozilla.org/<code>zh-CN</code>/docs/Web/JavaScript/Reference/Global_Objects</p> + +<h3 id="待完善">待完善</h3> + +<p id="如果你有什么好的想法，欢迎随时编辑本页面，当然到MDNzh论坛来讨论更方便。">本规范还有很多不完善的地方，如果你有什么好的意见和建议，欢迎编辑本页面，当然也可以到<a href="https://groups.google.com/d/forum/mdnzh" title="MDN中文化社区">MDNzh论坛</a>来讨论。</p> + +<p> </p> + +<p> </p> diff --git a/files/zh-cn/orphaned/learn/how_to_contribute/index.html b/files/zh-cn/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..73d806a1b6 --- /dev/null +++ b/files/zh-cn/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,85 @@ +--- +title: 如何向MDN的学习区做贡献 +slug: learn/How_to_contribute +tags: + - MDN 元信息 + - 初学者 + - 学习 + - 引导 + - 指南 + - 文档 + - 贡献 +translation_of: Learn/How_to_contribute +--- +<div>{{LearnSidebar}}</div> + +<p>可能您是第一次看到这个页面，也可能您经过层层搜索而来。我们猜测您找到这里，是希望向 MDN 学习区做贡献——棒极了！</p> + +<p><span class="seoSummary">这篇文档将告诉您如何提高 MDN 学习区资料的质量。您可以做的事情各种各样，取决于您有多少时间，以及您的身份：<a href="/zh_CN/Learn/How_to_contribute#I'm_a_beginner">初学者</a>、<a href="/zh_CN/Learn/How_to_contribute#I'm_a_web_developer">Web 开发者</a>，还是<a href="/zh_CN/Learn/How_to_contribute#I'm_a_teacher">教师</a>。</span></p> + +<div class="note"> +<p><strong>注意</strong>：这篇指南会告诉您<a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">如何撰写文章来帮助他人学习 Web</a>。</p> +</div> + +<h2 id="寻找特定任务">寻找特定任务</h2> + +<p><strong>贡献者向学习区做出贡献的方法通常是阅读文章、修复排版错误并提出改进。我们同时欢迎您向我们的 <a href="https://github.com/mdn/learning-area/">GitHub 源 </a>添加示例。若您还想了解需要做的其他事项，请与我们联系。</strong></p> + +<p>在学习新知识的同时做出贡献是一件乐趣无穷的事。如果您感到迷茫或者有疑问，不用犹豫，通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们（本页底部有更详细的信息）。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> 是学习区的主题发布人——您也可以直接和他联系。</p> + +<p>以下章节为您的任务提供概要思路。</p> + +<h2 id="我是初学者">我是初学者</h2> + +<p>好极了！对于创建学习资源和提供反馈，初学者们至关重要。作为目标受众，您对这些文章具有独特的视角，这让您成为我们团队中的无价之宝。真的，如果您正在通过某篇文章学习知识却卡住了，或者您觉得这篇文章看起来有点令人费解，您既可以自行改正，也可以把问题告诉我们以便我们去改正它。</p> + +<p>下面是几种建议的贡献方式：</p> + +<dl> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Tag">为文章添加标签</a>（<em>5 分钟</em>）</dt> + <dd>为文章添加标签是最简单的贡献方式。利用标签来呈现信息是我们的特色之一，因此添加标签对我们来说是非常有价值的贡献方式。您可以先从还没有标签的<a href="/zh-CN/docs/MDN/Doc_status/Glossary#No_tags">词汇条目</a>和<a href="/zh-CN/docs/MDN/Doc_status/Learn#No_tags">学习文章</a>开始。</dd> + <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> + <dd>我们希望，作为初学者的您能用您的视角来审视我们所写的内容。如果您感到某个词汇条目难以理解，这说明该条目需要改进。您可以做任何觉得有必要的修改。如果您感到自己的技能不足以修改词汇条目，也可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>告诉我们。</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> + <dd>这是学习新知识的最有效的方式了。挑选一个想要深入了解的概念，根据您所学的，撰写关于这个概念的词汇条目。“向他人解释”，这是巩固已学知识的最佳方式之一，既帮助您深入理解，同时也帮助了他人。这就是共赢！</dd> + <dt><a href="/zh_CN/docs/Learn/Index">阅读并复核学习文章</a>（<em>2 小时</em>）</dt> + <dd>这与上述“复核词汇条目”非常类似，只是由于文章更长，因此要花更多时间。</dd> +</dl> + +<h2 id="我是_Web_开发者">我是 Web 开发者</h2> + +<p>太棒了！我们太需要您的专业技能了，这确保我们向初学者提供的内容技术准确。考虑到这部分内容用于供他人学习，我们希望您提供的解释尽可能表述简单，但又不至于无用。我们首先考虑易于理解，而非过度精确。</p> + +<dl> + <dt><a href="/zh_CN/docs/Glossary">阅读并复核词汇条目</a>（<em>5 分钟</em>）</dt> + <dd>我们希望作为 Web 开发者的您，能让我们的文章内容技术准确而又不至于太学究气息。您可以做任何认为有必要的修改。如果您想在编辑前讨论内容，可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> + <dt><a href="/zh_CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a>（<em>20 分钟</em>）</dt> + <dd>阐述技术词汇是一种很好的学习方法，它能帮助您用准确而简单的方式把握技术细节。初学者非常需要准确清晰的术语定义。我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> + <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> + <dd>这与上述“复核词汇条目”一样，只是由于文章更长，因此要花更多时间。</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时或者更多</em>)</dt> + <dd>MDN 缺少朴素直白的文章以介绍如何使用 Web 技术（<a href="/zh-CN/docs/Learn/CSS">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a>、<a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 等等）。我们还有很多陈旧的文档内容，需要复核或重构。发挥您的聪明才智，造福 Web 技术初学者吧！</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、代码样例或交互式学习工具</a> (<em>? 小时</em>)</dt> + <dd>亲自实践的学习效果更佳，因此我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户熟练运用文章中详述的概念。制作“主动学习”材料的方式很多，比如使用 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> 或类似工具创建代码样例，或者使用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容。总而言之，释放您的创造力吧！</dd> +</dl> + +<h2 id="我是教师">我是教师</h2> + +<p>MDN 长期以来都拥有卓越的技术，但对于传授知识的最佳方法，我们仍然缺乏深刻的见解。我们需要教育工作者的参与，从而确保我们的材料为读者提供良好而实用的教育方法。</p> + +<dl> + <dt><a href="/zh-CN/docs/Glossary">阅读并复核词汇条目</a> (<em>15 分钟</em>)</dt> + <dd>检查词汇条目，并对任何您认为有必要的地方进行修改。如果您想在编辑前讨论内容，可以通过可以通过<a href="/zh-CN/docs/MDN/Community#Join_our_mailing_lists">邮件列表</a>或 <a href="/zh-CN/docs/MDN/Community#Get_into_IRC">IRC 频道</a>联系我们。</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">撰写词汇条目</a> (<em>1 小时</em>)</dt> + <dd>为了满足初学者的需求，在词汇表中对术语进行清晰简明的定义、对概念进行基本总体的描述至关重要。您的教育经验对于创建优秀的词汇条目大有裨益；我们有许多<a href="/zh-CN/docs/Glossary#Contribute">缺乏定义的术语</a>需要您来完善，请放手去做吧！</dd> + <dt><a href="/zh-CN/docs/tag/needsSchema">向文章中添加插图或图表</a> (<em>1 小时</em>)</dt> + <dd>您一定了解图表在学习材料中的价值。我们的文章内容总是缺乏图表，而您正好可以大展身手。您可以从<a href="/zh-CN/docs/tag/needsSchema">缺少图表内容的文章</a>中选择一些，为其创建插图。</dd> + <dt><a href="/zh-CN/Learn/Index">阅读并复核学习文章</a> (<em>2 小时</em>)</dt> + <dd>这与上述“复核词汇条目”类似，只是由于文章更长，因此要花更多时间。</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">撰写学习文章</a> (<em>4 小时</em>)</dt> + <dd>我们需要朴素直白的文章，介绍 Web 生态体系以及其他相关的功能主题。这些文章的目标是教育性，而非领域百科。文章应当涉及什么、如何表述，您在这方面的丰富经验大有帮助。</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">创建练习、测验或者交互式学习工具</a> (<em>? 小时</em>)</dt> + <dd>我们希望所有的学习文章都包含“主动学习 (active learning)”材料，比如练习、或者交互式内容。这些材料能够帮助用户学习并拓展理解文章中详述的概念。您可以做很多事情——创建测验、用 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a> 构建可解析的交互式内容——总之，释放您的创造力吧！</dd> + <dt><a href="/zh-CN/docs/MDN/Contribute/Howto/Create_learning_pathways">创建学习路线</a> (<em>? 小时</em>)</dt> + <dd>为了提供循序渐进、易于理解的教程，我们需要把学习材料组织成体系化的路线。这个过程将收集已有的材料，并找出缺失的内容，然后用新文章填补空缺。</dd> +</dl> diff --git a/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html b/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..24a27db5b5 --- /dev/null +++ b/files/zh-cn/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,144 @@ +--- +title: HTML 中的表单 +slug: Web/Guide/HTML/Forms_in_HTML +tags: + - HTML5 + - HTML5 form updates + - form +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<div>HTML5中的表单元素和属性提供了比HTML4更多的语义标记，并取消了大量的在HTML4不可缺少的脚本和样式。HTML5中的表单功能为用户提供了更好的体验，使表单在不同网站之间更一致，并向用户提供有关数据输入的即时反馈。它们还为使用禁用脚本的浏览器的用户提供相同的用户体验。</div> + +<div> </div> + +<div>本文总结了HTML5中的表单变化。有关使用表单的详细指南，请参阅我们更多的<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML表单指南</a>。</div> + +<div> </div> + +<h2 id="The_input_element" name="The_input_element"><code><input></code> 元素</h2> + +<p><code>{{HTMLElement("input")}}</code> 的 {{htmlattrxref("type", "input")}} 特性拥有更多的值。（请观看 {{HTMLElement("input")}} 获得完整列表）</p> + +<ul> + <li><code>search</code>: 这个元素呈现为一个搜索框。除了换行符会自动从输入中移除，无其他强制性语法。</li> + <li><code>tel</code>: 这个元素可现为一个编辑电话号码的输入控件。因为电话号码国际化差异非常明显，所以除了换行符会自动从输入中移除，无其他强制性语法。你可以使用如 {{htmlattrxref("pattern", "input")}} 与 {{htmlattrxref("maxlength", "input")}} 等属性来限制输入到控件中的值。</li> + <li><code>url</code>: 这个元素呈现为一个编辑<a class="external" href="http://en.wikipedia.org/URL" title="http://en.wikipedia.org/wiki/URL">URL</a> 的输入控件。换行符与首尾的空格将会被自动去除。</li> + <li> + <p><code>email</code>: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址，但若满足输入框的限制，必须遵守在<span style="font-family: Arial; font-size: medium; line-height: 26px;">扩展的巴科斯范式(ABNF)中的规范：</span><code style="font-size: 14px;">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code><span style="line-height: 1.5em;"> 其中</span><code style="font-size: 14px;">atext</code><span style="line-height: 1.5em;"> 在规范</span><a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3" style="line-height: 1.5em;">RFC 5322 section 3.2.3</a> 中被定义<span style="line-height: 1.5em;">,而</span><code style="font-size: 14px;">ldh-str在规范</code><a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5" style="line-height: 1.5em;">RFC 1034 section 3.5</a> 中被定义。<span style="line-height: 1.5em;">.</span></p> + + <div class="note"><strong>注意:</strong> 若设置{{htmlattrxref("multiple", "input")}}属性，{{HTMLElement("input")}} 区域中可以用逗号分割的方式，输入多个email, 但 Firefox不支持.</div> + </li> +</ul> + +<p> {{HTMLElement("input")}} 元素也拥有一些新的特性。</p> + +<ul> + <li>{{htmlattrxref("list", "input")}}： {{HTMLElement("datalist")}} 元素的 ID，该元素的内容，{{HTMLElement("option")}} 元素被用作提示信息，会在 input 的建议区域作为提议显示出来。</li> + <li>{{htmlattrxref("pattern", "input")}}： 一个正则表达式，用于检查控件的值，能够作用于 {{htmlattrxref("type", "input")}} 值是 <code>text，</code> <code>tel，</code> <code>search，</code> <code>url，</code> 和 <code>email 的 input 元素。</code></li> + <li>{{htmlattrxref("form", "input")}}： 一个字符串，用于表明该 input 属于哪个 {{HTMLElement("form")}} 元素。一个 input 只能存在于一个表单中。</li> + <li>{{htmlattrxref("formmethod", "input")}}：一个字符串，用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST)；如果定义了它，则可以覆盖 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("method", "form")}} 特性。只有当 {{htmlattrxref("type", "input")}} 值为 <code>image</code> 或 <code>submit，并且 </code>{{htmlattrxref("form", "input")}} 特性被设置的情况下， {{htmlattrxref("formmethod", "input")}} 才能生效。</li> + <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}： 一个字符串，当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展，并非标准。</li> +</ul> + +<h2 id="text_input">text input</h2> + +<dl> + <dt> </dt> +</dl> + +<p>这个程序段段定义了一个用户可以输入的一行input。</p> + +<pre><code><form> + Enter your Name <input type="text" name="name"> +</form></code></pre> + +<h2 id="checkboxes"><strong>checkboxes</strong></h2> + +<p>这个程序段允许用户选择多个选项。</p> + +<pre><code><input type="checkbox" name="chk" value="" checked> Do you want the newsletter</code></pre> + +<h2 id="The_form_element" name="The_form_element">Radio < input> element</h2> + +<pre><code><form> + <input type="radio" name="frequency" value="daily">Daily<br> + <input type="radio" name="frequency" value="weekly">Weekly<br> + <input type="radio" name="frequency" value="monthly">Monthly<br> + <input type="radio" name="frequency" value="yearly">Yearly +</form></code></pre> + +<h2 id="The_form_element" name="The_form_element"><code><form></code> 元素</h2> + +<p>{{HTMLElement("form")}} 元素有了一个新特性：</p> + +<ul> + <li>{{htmlattrxref("novalidate", "form")}}：设置了该特性不会在表单提交之前对其进行验证。</li> +</ul> + +<h2 id="The_datalist_element" name="The_datalist_element"><code><datalist> 元素</code></h2> + +<p>{{HTMLElement("datalist")}} 元素会在填写 <span style="line-height: inherit;">{{HTMLElement("input")}} 字段时，显示一列</span><span style="line-height: inherit;"> {{HTMLElement("option")}} 作为提示。</span></p> + +<p>你可以使用 {{HTMLElement("input")}} 元素上的<span style="line-height: inherit;"> {{htmlattrxref("list", "input")}} 特性来将一个特定的 input 与特定的</span><span style="line-height: inherit;"> {{HTMLElement("datalist")}} 元素做关联。</span></p> + +<h2 id="The_output_element" name="The_output_element"><code><output></code> 元素</h2> + +<p><code>{{HTMLElement("output")}}</code> 元素表示计算的结果。</p> + +<p>你可以使用 {{htmlattrxref("for", "output")}} 特性来在 <code>{{HTMLElement("output")}}</code> 元素与文档内其他能够影响运算的元素(例如，input 或参数)建立关联。 {{htmlattrxref("for", "output")}} 特性的值是以空格做分隔的其他元素的 ID 列表。</p> + +<p>{{non-standard_inline}} Gecko 2.0 (其他浏览器并非如此) 支持为 <span style="line-height: inherit;">{{HTMLElement("output")}} 元素自定义有效性约束(</span><span style="line-height: 21px;">validity constraints</span><span style="line-height: inherit;">)与错误信息，可以对其使用如下 CSS 伪类：</span><span style="line-height: inherit;">{{Cssxref(":invalid")}}， {{Cssxref(":valid")}}， {{Cssxref(":-moz-ui-invalid")}}，与 {{Cssxref(":-moz-ui-valid")}}。在如下情况会显得很有用：例如计算结果违反了业务规则，但却并非因为特定的 input 值出现错误(例如，</span><span style="line-height: inherit;">「百分比总数不能超过100</span><span style="line-height: inherit;">」</span><span style="line-height: inherit;">)。</span></p> + +<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder 特性</h2> + +<p>{{htmlattrxref("placeholder", "input")}} 特性作用于 <code>{{HTMLElement("input")}}</code> 与 <code>{{HTMLElement("textarea")}}</code> 元素上，提示用户此域内能够输入什么内容。placeholder 中的文本不能包含回车与换行。</p> + +<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus 特性</h2> + +<p>{{htmlattrxref("autofocus", "input")}} 特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 <code>autofocus</code> 特性，它是一个 Boolean 值。这个特性适用于 <code>{{HTMLElement("input")}}，</code> <code>{{HTMLElement("button")}}，</code> <code>{{HTMLElement("select")}}，与<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"> </font></code><code>{{HTMLElement("textarea")}}</code> 元素。例外情况是，如果一个 {{htmlattrxref("autofocus", "input")}} 元素的 {{htmlattrxref("type", "input")}} 特性值设置成了 <code>hidden，则</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">autofocus</code><span style="line-height: inherit;"> 无法生效(就是说，你无法让一个隐藏控件自动获得焦点)。</span></p> + +<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM 属性</h2> + +<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM 接口除了为 <code>{{HTMLElement("label")}}</code> 元素提供了对应的特性外，还提供了一个额外的属性。 <strong>control</strong> 属性返回被打上标签的控件，就是 label 适用的控件，由 {{htmlattrxref("for", "label")}} 特性(如果定义的话) 或是第一个后代元素控件来确定。</p> + +<h2 id="Constraint_Validation" name="Constraint_Validation">约束验证</h2> + +<p>HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证，<span style="line-height: inherit;">出于安全性与数据完整性的考虑，服务器端验证仍然必不可少，但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。</span></p> + +<p>如果 {{HTMLElement("input")}} 元素设置了<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title 特性，当验证失败时，特性值会显示在提示信息中。如果</code><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 设置为空字符串，则不会显示提示信息。如果没有设置 </span><code style="font-size: 14px; line-height: inherit;">title</code><span style="line-height: inherit;"> 特性，会使用标准验证信息(例如通过 {{htmlattrxref("x-moz-errormessage")}} 特性指定，或调用 </span><code style="font-size: 14px; line-height: inherit;">setCustomValidity()</code><span style="line-height: inherit;"> 方法) 代为显示。</span></p> + +<div class="note"><strong>注意：</strong> 约束验证不支持表单中的 {{HTMLElement("button")}} 元素；若想基于表单的验证结果来改变按钮的样式，可以使用 {{cssxref(":-moz-submit-invalid")}} 伪类。</div> + +<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">约束验证的 HTML 语法</h3> + +<p>下列 HTML5 语法中的条目用于为表单数据指定约束。</p> + +<ul> + <li>{{HTMLElement("input")}}, {{HTMLElement("select")}}， 和 {{HTMLElement("textarea")}} 元素上的 {{htmlattrxref("required", "input")}} 特性，指定必须提供该元素的值。(在 {{HTMLElement("input")}} 元素上， {{htmlattrxref("required", "input")}} 只能与特定的 {{htmlattrxref("type", "input")}} 特性值结合起来生效。)</li> + <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("pattern", "input")}} 特性用于限定元素值必须匹配一个特定的正则表达式。</li> + <li>{{HTMLElement("input")}} 元素上的 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性限定了能够输入元素的最大与最小值。</li> + <li>{{HTMLElement("input")}} 元素的 {{htmlattrxref("step", "input")}} 特性(与 {{htmlattrxref("min", "input")}} 与 {{htmlattrxref("max", "input")}} 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符，则它无法通过验证。</li> + <li>{{HTMLElement("input")}} 与 {{HTMLElement("textarea")}} 元素的 {{htmlattrxref("maxlength", "input")}} 特性限制了用户能够输入的最大字符数(在 Unicode 代码点内)。</li> + <li>{{htmlattrxref("type", "input")}} 的 <code>url</code> 与 <code>email</code> 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。</li> +</ul> + +<p>此外，若要阻止对表单进行约束验证，你可以在 <span style="line-height: inherit;">{{HTMLElement("form")}} 上设置</span><span style="line-height: inherit;"> </span><span style="line-height: inherit;">{{htmlattrxref("novalidate", "form")}} 特性，或在 </span><span style="line-height: inherit;">{{HTMLElement("button")}} 与 {{HTMLElement("input")}} 元素(当 </span><span style="line-height: inherit;">{{htmlattrxref("type", "input")}} 是 </span><code style="font-size: 14px; line-height: inherit;">submit</code><span style="line-height: inherit;"> 或 </span><code style="font-size: 14px; line-height: inherit;">image</code><span style="line-height: inherit;">)上设置 </span><span style="line-height: inherit;">{{htmlattrxref("formnovalidate", "button")}} 特性。这些特性指定了当表单提交时不做验证。</span></p> + +<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">约束验证 API</h3> + +<p>下面这些 DOM 属性与方法和约束验证相关，能够在客户端脚本中使用：</p> + +<ul> + <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code> 对象上的 <code>checkValidity()</code> 方法，当表单的相关元素都通过了它们的约束验证时返回 true，否则返回 false。</li> + <li>在 <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">表单相关元素</a>上： + <ul> + <li><code>willValidate</code> 属性，如果元素的约束没有被符合则值为 false。</li> + <li><code>validity</code> 属性，是一个 <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 对象，表示元素当前所处的验证状态(就是说约束成功或是失败)。</li> + <li><code>validationMessage</code> 属性，用于描述与元素相关约束的失败信息。</li> + <li><code>checkValidity()</code> 方法，如果元素没有满足它的任意约束，返回false，其他情况返回 true。</li> + <li><code>setCustomValidity()</code> 方法，设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。</li> + </ul> + </li> +</ul> + +<div>{{HTML5ArticleTOC}}</div> diff --git a/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html b/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html new file mode 100644 index 0000000000..a0f74f6ef1 --- /dev/null +++ b/files/zh-cn/orphaned/learn/html/forms_and_buttons/index.html @@ -0,0 +1,43 @@ +--- +title: 表单和按钮 +slug: learn/HTML/Forms_and_buttons +tags: + - 初学者 + - 指引 + - 文章 + - 表单 +translation_of: Learn/HTML/Forms_and_buttons +--- +<p>{{draft}}{{LearnSidebar}}</p> + +<p class="summary">表单和按钮是Web的一个非常重要的部分 - 这些允许您的站点访问者输入数据并将其发送给您（例如注册，登录和反馈表单），并且您可以实现控制以控制复杂功能（例如提交表单） 到服务器，或暂停播放视频。）这个模块可以帮助您入门。</p> + +<h2 id="先决条件">先决条件</h2> + +<p>在开始本单元之前，您应该对<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML的基础知识</a>有一定的了解，如HTML简介中所述。 如果你没有通过这个模块（或类似的东西），先完成它，然后再回来！</p> + +<div class="note"> +<p><strong>Note</strong>: 如果你是在计算机/平板电脑等其他你无法创建文件的设备上的话，你可以尝试在在线代码编辑平台上运行代码例如 <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> +</div> + +<h2 id="向导">向导</h2> + +<p>本模块包含以下的文章</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms_and_buttons/Basics">表单和按钮基础知识</a>（Form and button basics）</dt> + <dd> 在本文中，我们将向您介绍HTML表单的基础知识，包括它们的用途，基本功能和常用表单控件。 我们还将了解HTML按钮以及如何使用它们。</dd> + <dt>形成语义和结构</dt> + <dd> 存在许多元素，允许我们将表单结构化为更易于使用和访问 - 其中一些是专门的表单元素，其中一些是通用HTML容器。 在本文中，我们将介绍创建表单结构的最佳实践。</dd> + <dt>高级表单功能</dt> + <dd> 在这里，我们将介绍HTML表单中可用的一些更高级的功能，例如数据列表，进度条，滑块以及最小值和最大值。</dd> + <dt>表格验证</dt> + <dd> 在我们的最终表单文章中，我们将讨论表单验证，讨论为什么有必要，并查看HTML选项卡提供的一些功能，以便客户端验证表单数据。</dd> +</dl> + +<h2 id="练习">练习</h2> + +<dl> + <dt>表单练习</dt> + <dd>等待完成（to be done）</dd> +</dl> diff --git a/files/zh-cn/orphaned/mdn/community/conversations/index.html b/files/zh-cn/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..e37d40486e --- /dev/null +++ b/files/zh-cn/orphaned/mdn/community/conversations/index.html @@ -0,0 +1,59 @@ +--- +title: MDN 社区对话 +slug: MDN/Community/Conversations +tags: + - 不完善的 + - 后期还需要改善 + - 社区相关 + - 经过一次润色的 +translation_of: MDN/Community/Conversations +--- +<div>{{MDNSidebar}}</div> + +<p class="summary">MDN的“工作”在MDN网站开展，但“社区”也通过（异步）讨论以及（同步）在线聊天和会议开展。</p> + +<h2 id="异步讨论"><span class="short_text" id="result_box" lang="zh-CN"><span>异步讨论</span></span></h2> + +<p><span id="result_box" lang="zh-CN"><span>为了分享信息并进行持续的讨论，<a href="https://discourse.mozilla-community.org/c/mdn">MDN在Mozilla话语论坛中有自己的类别（“MDN”）</a>。</span> <span>将此类别用于与MDN相关的所有主题，包括文档内容的创建，翻译和维护;</span> <span>MDN平台开发;</span> <span>并进行规划，目标设定和进度跟踪。</span></span></p> + +<ul> + <li><span id="result_box" lang="zh-CN"><span>要加入Mozilla的话语，请参阅<a href="https://discourse.mozilla-community.org/t/signing-up-and-logging-in/16017">注册并登录</a>;</span> <span>如果您有Mozilla LDAP帐户，则可以使用该帐户，而不是“使用电子邮件登录”。</span></span></li> + <li><span class="short_text" id="result_box" lang="zh-CN"><span>要订阅MDN类别，请参阅<a href="https://discourse.mozilla-community.org/t/subscribing-to-categories-and-topics/16024">订阅类别和主题</a>。</span></span></li> + <li><span id="result_box" lang="zh-CN"><span>（可选）如果您希望主要通过电子邮件与话语进行交互，请参阅<a href="https://discourse.mozilla-community.org/t/mailman-mode/15279">为自己设置邮件列表体验</a>。</span> <span>您可以通过发送电子邮件至：<a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>，开始话语讨论。</span> <span>如果您通过电子邮件使用话语，您可以通过回复您收到的通知电子邮件来回复邮件。</span> <span>如果您想在回覆内插入意见，请在您的内联块之前和之后放置两个回车，以便话语解析正确。</span></span></li> +</ul> + +<h2 id="历史档案"><span class="short_text" id="result_box" lang="zh-CN"><span>历史档案</span></span></h2> + +<p><span id="result_box" lang="zh-CN"><span>在2017年6月之前，MDN相关的讨论发生在与Google群组关联并归档的邮件列表中。</span> <span>如果您想搜索这些过去的讨论，您可以查看与旧邮件列表相对应的Google网上论坛。</span> <span>（</span></span>是的，我们知道这些名字是重叠和混淆。历史的偶然性。对此我们感到很抱歉。<span lang="zh-CN"><span>）</span></span></p> + +<dl> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdc">mozilla.dev.mdc</a></dt> + <dd><span class="short_text" id="result_box" lang="zh-CN"><span>此列表用于讨论MDN上的文档内容。</span></span></dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.dev.mdn</a></dt> + <dd><span class="short_text" id="result_box" lang="zh-CN"><span>此列表涉及MDN底层Kuma平台的开发工作。</span></span></dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.mdn</a></dt> + <dd><span class="short_text" id="result_box" lang="zh-CN"><span>这个论坛是针对高层次的规划和优先级讨论，MDN网站和其他相关举措。</span></span></dd> +</dl> + + + +<h2 id="同步聊天">同步聊天</h2> + +<p>Mozilla实时的讨论平台是<a href="https://matrix.org">Matrix</a>，Mozilla自己拥有使用这个通讯协议的<a href="https://chat.mozilla.org/">服务器</a>。网页中即可加入讨论。</p> + +<p><a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web文档聊天室</a>是为讨论MDN内容的主要频道。我们探讨编写、内容编排等内容。我们也会进行“茶水间”讨论（摸鱼），这是我们的社群保持联系，或者仅仅用来消遣的方式。通常在北美和欧洲的工作日，这间聊天室最为活跃。</p> + +<p>你或许会想了解一下怎么使用<a href="https://wiki.mozilla.org/Matrix">Mozilla的Matrix</a>，然后呢，如果你真的很喜欢它的话，那么可以安个独立的Matrix应用，例如<a href="https://about.riot.im/">Riot.im</a>。</p> + +<h3 id="那么IRC呢？">那么IRC呢？</h3> + +<p>多年来，Mozilla用互联网中继聊天（IRC）来进行实时讨论。到了2020年初，Matrix已经把IRC淘汰了。你可能会在很多地方看到有人提到IRC的频道，包括MDN上。你可以帮忙更新MDN上你看到的IRC频道的链接，为指向对应Matrix聊天室的链接。如果你不确定这个话题对应的Matrix聊天室是哪间，那么可以来<a href="https://chat.mozilla.org/#/room/#general:mozilla.org">General</a>聊天室询问。不再活跃的项目和话题可能也不会有Matrix聊天室，如果是这样的话，把链接删掉即可。</p> + +<h2 id="参加我们的会议（和其他活动）">参加我们的会议（和其他活动）</h2> + +<p><br> + MDN团队会举行一些面向MDN社区的定期会议。查看 Mozilla维基上的<a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings</a> 页面获取关于日程、议程和笔记的细节，以及如何参加的信息。</p> + +<p>查看<a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">MDN Events calendar</a>上的这些和其他会议、当地聚会和其他项目。在 <a href="https://wiki.mozilla.org/MDN/Meetings">MDN Meetings wiki page</a>上有定期会议</p> + +<p>如果你看到一个在Vidyo videoconferencing系统的“mdn”频道举行的会议，你可以在<a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">网上加入谈话</a>。</p> diff --git a/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html b/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html new file mode 100644 index 0000000000..ca1da4be91 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/community/doc_sprints/index.html @@ -0,0 +1,123 @@ +--- +title: Doc sprints +slug: MDN/Community/Doc_sprints +tags: + - NeedsUpdate +translation_of: MDN/Community/Doc_sprints +--- +<div>{{MDNSidebar}}</div> + +<p>{{ draft() }}</p> + +<div class="note"> +<p><strong>Note: </strong>MDN社区在2010 - 2013年期间经常举办文档迭代。 从2014年开始，这些事件的范围扩大到“<a href="https://blog.mozilla.org/community/2015/04/17/a-highly-productive-hack-on-mdn-weekend-in-berlin/">Hack on MDN</a>”事件，其中包括代码窃取以及文档项目。 下面的大部分建议同样适用于 "Hack" sprints和documentation sprints。</p> +</div> + +<p><span class="seoSummary">这是组织</span>documentation sprint<span class="seoSummary">的指南。 它包含来自组织</span>doc sprints<span class="seoSummary">的人的建议和提示，以帮助您更好的组织文档。 本指南还借鉴了<a href="http://write.flossmanuals.net/book-sprints/introduction/">FLOSS手册书籍</a>的书籍。</span></p> + +<h2 id="什么是_doc_sprint">什么是 doc sprint?</h2> + +<p>doc sprint 是一段时间，一群人像你一样可爱的人，合作撰写关于给定主题或相关主题的文档。</p> + +<h2 id="sprints_的分类">sprints 的分类</h2> + +<p>sprints可以是线上的，也可以是线下的，也可以线上线下一起进行。对于线上sprints而言，每个人都可以在不同的地区参与，只需要通过中间渠道进行沟通。对于线下sprints，参加者在sprints期间聚集在同一地区，以便他们可以面对面进行交流。线下sprints需要更多的后勤规划，确保会议地点，可以容纳所有参与者，并且在sprints期间需要提供食物与安置参与者。</p> + +<p>另一种分类sprints的方式是通过专题聚焦。例如sprint可能关注特定的主题，比如：Web开发，或翻译特定语言。</p> + +<h2 id="计划一次_sprint">计划一次 sprint</h2> + +<h3 id="设定目标">设定目标</h3> + +<p>明确这次 sprint的目标, 包括内容和社区效应。 这能够帮助你更好地计划低层次的细节。</p> + +<ul> + <li>你想要记录一个特定的主题区域吗?</li> + <li>你想要创建一种特定类型的文档或者资源吗? 比如说，教程，代码示例，或者特定语言的翻译。</li> + <li>你想要吸引更多人加入到MDN，做出贡献吗？</li> + <li>你想要增进社区成员的凝聚力吗?</li> +</ul> + +<h3 id="决定类型和范围">决定类型和范围</h3> + +<p>基于你的目标, 确定 sprint的类型 (线上的，也可以是线下的，或者是线上线下一起进行) 和范围 (这是参与者会关注的)。</p> + +<p>比如说，你想要吸引新的社区成员，你可以选择本地的线下sprint, 因为不需要长途旅行, 而且参加者还可以见面. 如果您想要专注于特定的主题领域，其中内容贡献者是地理上分离的，而且早就彼此认识，那么一个线上sprint就很合适。</p> + +<h3 id="选择日期和时间">选择日期和时间</h3> + +<p>对于需要长途交通的线下sprint， 我们已经发现了三天 (比如说两天周末和一天工作日) 就足够做到很多重要的工作。也不会占用大家日常生活的很多时间。对于公开，本地，线下的sprint，大部分人只能够付出一天的时间. 对于线上的sprint, 我们通常进行两天: 一个工作日外加周末的一天。 As an alternative example, in the past there has been mini-sprint for writing and translating docs, every Wednesday evening in the Mozilla Paris office; it was primarily in-person for locals, but also got remote participation from Montreal (where it was at lunch time).</p> + +<p>Attaching a sprint to the end of a conference that everyone attended worked well; trying to run a sprint <em>during</em> a conference that everyone attended did not work so well. Make sure that participants know about the sprint when they make their conference plans, so that they allow extra days for the sprint.</p> + +<p>Consider the time zones that virtual participants are in; be sure that you allow enough working time in each time zone, and have some overlap when multiple zones (such as Europe and Americas, or Americas and Asia) are awake. However, it's just reality that no one time is good for everyone everywhere.</p> + +<p>For virtual sprints, the dates can be set as little as 2-3 weeks in advance. For in-person sprints, you need to decide further in advance, in order to allow time for people to decide and make travel arrangements.</p> + +<h3 id="Promote_the_sprint">Promote the sprint</h3> + +<p>You can make the sprint open, and invite the world, but you should have a few key people that you know for sure will participate. Work with them when selecting dates, to ensure that they are available during the chosen dates. If the sprint is not open, then you need only extend invitations; make sure that each invitation is personal, explaining why that person has been specificallly invited.</p> + +<p>For public sprints, identify existing groups that have an interest in the topic, for example: local Web developer meetup groups for a local in-person sprint. Send an announcement through whatever channel is appropriate for that group. Be sure to provide a link to a web page with more details, and include a call-to-action for people to sign up for the sprint. <a href="https://www.eventbrite.com/" title="https://www.eventbrite.com/">Eventbrite </a>and <a href="http://lanyrd.com" title="http://lanyrd.com">Lanyrd</a> are two services that support sign-ups. For Mozilla developer events, we have found that about half the people who sign up actually show up.</p> + +<p>Use the social media channels that are appropriate to reach your target attendees. We have found that for Web developers, this means Twitter, followed by Google Plus, more than Facebook or LinkedIn. However, popular channels can vary geographically (such as Orkut in Brazil). Reach out to a few well-connected people who have a large following among your target audience, and ask them to re-share your posts.</p> + +<h3 id="Logistics_for_in-person_sprints">Logistics for in-person sprints</h3> + +<p>Logistics for in-person sprints are greater for longer sprints and those where sprinters travel to attend. A short or locals-only sprint need relatively little logistical support.</p> + +<h4 id="Budget_and_funding">Budget and funding</h4> + +<p>You need to figure out how much the event is going to cost, and where the money is going to come from.</p> + +<p>Costs to consider in your budget include:</p> + +<ul> + <li>Travel</li> + <li>Lodging</li> + <li>Food</li> + <li>Meeting space</li> +</ul> + +<p>Some of these costs can be self-funded by participants, meaning that they pay for their own costs. There are a variety of ways to save money, which are mentioned in the following sections.</p> + +<p>It may be possible to get sponsorship from Mozilla to fund some of the costs of your event. It helps to have a clear focus for your event, and a specific plan and budget. If there is a <a href="https://reps.mozilla.org/people/#/">Mozilla Rep</a> in your area, work with them to request budget and swag through the Reps program. Otherwise, you can submit a <a href="https://bugzilla.mozilla.org/form.dev-engagement-event">developer events request</a> in Bugzilla.</p> + +<dl> + <dt>Venue</dt> + <dd>There are lots of options for meeting space. If you are in a city with a Mozilla office, you can use the community space in that office. Elsewhere, options include meeting rooms in libraries, churches, coffee shops, or businesses where you have contacts. Many cities now have coworking spaces that rent their conference rooms for a reasonable fee.</dd> + <dt>Resources</dt> + <dd>Be sure that your venue has good chairs and tables, and reliable power and Internet access. Sitting all day on a bad chair is not just uncomfortable; it can lead to injury. Make sure that the number of sprinters and their computers and devices does not overwhelm the power supply and available Internet bandwidth. Be generous (but not dangerous) with extension cords, and if necessary, international plug adapters. A projector for shared viewing can be very helpful. Whiteboards and sticky notes are great for brainstorming and planning.</dd> + <dt>Travel</dt> + <dd>Travel is relevant only if the sprinters do not all live close to the sprint venue. The usual strategies for saving on travel apply, and are not specific to doc sprints.</dd> + <dt>Accommodations</dt> + <dd>Where sprinters stay should not be inconveniently far from the meeting venue. It can be cheaper (and possibly more fun) to split the cost of a vacation house or flat, rather than paying for individual hotel rooms. If you have a mix of visitors and (willing) locals, the visitors can stay in the homes of local community members.</dd> + <dt>Food</dt> + <dd>Sprinters need to eat! Make arrangements for food during the sprint, and inform sprinters if certain meals will not be arranged. If the group is staying in a home, you can save money by buying and cooking food rather than going out to eat. Even if food is self-funded, it can reduce hassle to pitch into a common fund for food, rather than splitting every restaurant bill. If your venue allows, have snacks (some healthy and some not) available between meals.</dd> + <dt>Fun</dt> + <dd>Make time for non-writing social activities. These can be informal, like going for a hike together, or more formal, like a tourist excursion. Going out for beer (at the end of the day, of course) is usually a winner. On the other hand, don't plan every hour of every day. Everybody needs some down time, especially introverts.</dd> +</dl> + +<h2 id="During_the_sprint">During the sprint</h2> + +<h3 id="Planning_the_work">Planning the work</h3> + +<p> </p> + +<h3 id="Tracking_tasks">Tracking tasks</h3> + +<p>Have a way to track what tasks need to be worked on, who is doing what, and what has been completed. For MDN doc sprints, we use a wiki page for advance planning, and an etherpad for tracking work during the sprint.</p> + +<p>Often, people want to help but don't know where to start, and deciding among many options takes too much mental effort. For any given participant, give them a couple of possible tasks ("you could do A, or B"); this simplifies their choice, without making them feel like they're being bossed around.</p> + +<h3 id="Collaborating">Collaborating</h3> + +<p>One of the benefits of in-person sprints is that people can work together in ways that they might not be able to when they're not in the same place, for example, by working out ideas together on a whiteboard or by brainstorming with sticky notes. Still, there are opportunities for collaboration and camaraderie in any type of sprint. Chatting via IRC is essential for virtual sprints, and still very helpful for in-person sprints (for example, for sharing links). For a greater sense of "virtual presence", consider using a video conferencing service, such as Google Hangout.</p> + +<p>As an organizer, look for common interests among the participants and for ways that they can work together.</p> + +<h3 id="Celebrating_accomplishments">Celebrating accomplishments</h3> + +<p>Be sure to take time to celebrate accomplishments at the end of the sprint. This gives participants a better feeling than when the sprint just ends without any summary. If possible, have people "demo" what they have done, even if it is just showing a new article page.</p> + +<p>Also, share the sprint accomplishments via a blog post, to celebrate publicly as well. This is important for any kind of sprint, but especially for virtual sprints, where the participants might not all be online at the official end of the sprint for a wrap-up session.</p> diff --git a/files/zh-cn/orphaned/mdn/community/index.html b/files/zh-cn/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..19e3e729ce --- /dev/null +++ b/files/zh-cn/orphaned/mdn/community/index.html @@ -0,0 +1,53 @@ +--- +title: 加入 MDN 社区 +slug: MDN/Community +tags: + - MDN Meta + - 引导 + - 社区 +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> + +<div class="summary"> +<p>MDN（Mozilla Developer Network）不仅仅是一个维基，而且是一个为使用开放 Web 技术的开发者而打造的社区。在这儿，开发者为了使 MDN 更加出色而共同努力。</p> +</div> + +<p>我们非常乐意您能给 MDN 贡献一份力量。当然我们更加希望您能加入 MDN 社区。只需简单的三步，即可加入我们：</p> + +<ol> + <li><a href="/zh-cn/docs/MDN/Contribute/Howto/Create_an_MDN_account">创建 MDN 账户</a></li> + <li><a href="/zh-cn/docs/MDN/Community/Conversations">参与交流</a></li> + <li><a href="/zh-cn/docs/MDN/Community/Whats_happening">关注正发生的一切</a></li> +</ol> + +<h2 id="社区是怎么运作的">社区是怎么运作的</h2> + +<p>下列文章详细地介绍了 MDN 社区。</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Roles">社区参与者</a></dt> + <dd class="landingPageList">MDN 社区有许多负责任的参与者。</dd> + <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Doc_sprints">文档迭代</a></dt> + <dd class="landingPageList">这是一个有关组织文档迭代的指导。它包含组织过文档迭代的开发者的建议和技巧，这个指导的目的是为了帮助您更好地组织文档。</dd> + <dt class="landingPageList"><a href="/zh-cn/docs/MDN/Community/Whats_happening">关注正发生的一切</a></dt> + <dd class="landingPageList">MDN 是由 <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla 开发者网络社区</a> 发起的。这里有一些有关我们正在做的事物信息。</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN 社区对话</a></dt> + <dd class="landingPageList">MDN 上的工作在 MDN 社区网站上进行。但社区也提供讨论，在线交流和线下会议等多种对话方式。</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">社区工作</a></dt> + <dd class="landingPageList">了解如何作为 MDN 社区的一部分来为 MDN 文档作贡献是本文的主题。本文给出了一些技巧来帮助您和其他开发者、开发团队来进行更有效的交流。</dd> +</dl> +</div> +</div> diff --git a/files/zh-cn/orphaned/mdn/community/whats_happening/index.html b/files/zh-cn/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..abdb8b5215 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,42 @@ +--- +title: 跟随正在发生的事情 +slug: MDN/Community/Whats_happening +tags: + - MDN Meta + - 初学者 + - 指南 + - 社区 +translation_of: MDN/Community/Whats_happening +--- +<div>{{MDNSidebar}}</div> + +<p>MDN是由 <a href="https://wiki.mozilla.org/MDN">Mozilla开发者网络社区</a>带给你的。这里是关于我们正在做之事的共享信息的一些途径。</p> + +<h2 id="博客">博客</h2> + +<dl> + <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> + <dd>Web和Mozilla技术和功能的新闻深度报道。</dd> + <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> + <dd>促进社区参与Mozilla MDN活动和讨论。</dd> +</dl> + +<h2 id="信息流">信息流</h2> + +<ul> + <li><a href="http://twitter.com/MozDevNet">@MozDevNet</a>: 有趣的网页，教程，指南，提交要求，重大更新，以及其他有关Mozilla开发网络的消息。</li> + <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks">@MozHacks</a>: 关于新Web技术，很棒的HTML5应用程序和Firefox功能的推特。</li> + <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> +</ul> + +<h2 id="状态栏和仪表盘">状态栏和仪表盘</h2> + +<p>查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Doc_status">文档状态</a> 页面，以了解整个MDN内容的动态。您将能够看到哪些文章需要书写或更新，哪些主题需要最大的帮助以及更多。</p> + +<h2 id="MDN会议">MDN会议</h2> + +<p>有一些跟踪和各种MDN相关的项目和进程共享进步定期会议，这些都描述了<a href="https://wiki.mozilla.org/MDN/Meetings">MDN会议的维基页面。</a></p> + +<p>想要了解最新动态，MDN社区会议是最佳渠道。MDN社区会议一般在美国太平洋时间周三上午10点举办（UTC-0800 十月——三月, UTC-0700 三月——十月）。会议每两周举办一次，会议采用 <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> 的方式举行。想要了解会议日程及往期会议记录，请查阅 <a href="https://wiki.mozilla.org/MDN/Meetings/Community" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN 社区会议</a> 维基页面。</p> + +<p><a class="external text" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com" rel="nofollow">公共 MDN活动 </a> 日历包括MDN社区会议，文件分享，其他MDN相关活动。如果您在我们的Vidyo视频会议系统中遇到正在“mdn”频道中举办的会议，那么您可以 从<a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">从网站上加入会议对话</a>。</p> diff --git a/files/zh-cn/orphaned/mdn/community/working_in_community/index.html b/files/zh-cn/orphaned/mdn/community/working_in_community/index.html new file mode 100644 index 0000000000..e8cce689d8 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/community/working_in_community/index.html @@ -0,0 +1,101 @@ +--- +title: 社区工作 +slug: MDN/Community/在社区工作 +tags: + - 指南 + - 社区 +translation_of: MDN/Community/Working_in_community +--- +<div>{{MDNSidebar}}</div> + +<p>在任何重大规模上为MDN文档作出贡献的主要部分是知道如何作为MDN社区的一部分工作。本文提供的技巧可帮助您充分利用与其他作者和开发团队的互动。</p> + +<h2 id="一般礼仪准则">一般礼仪准则</h2> + +<p>以下是在Mozilla社区工作时的一些通用指导原则。</p> + +<ul> + <li> 要有礼貌！即使意见不一致，我们都有相同的使命：网络的改善。 </li> + <li>问，不要求。当你礼貌地请求帮助而不是要求帮助时，人们更有可能会对他们有帮助和回应。尽管文档工作很重要，而且我们的开发团队知道它，但是如果不尊重它们，人类的本能往往会导致人们磨损和困难。 </li> + <li>平衡您对信息的需求和文档的紧迫性以及您讨论中的其他人必须致力于帮助您的时间。如果马上不是绝对必要的话，不要一直推动越来越多的细节，以至于让参与谈话的其他人变得疯狂。 </li> + <li>请记住，您的请求需要宝贵的时间从您联系的人，所以一定要充分利用他们的时间。 </li> + <li>体谅文化差异。 Mozilla是一个跨国和多元文化的团队，因此当与某个文化与自己或不同的人交谈时，务必在沟通时牢记这一点。 </li> + <li>开始一个新的谈话，而不是劫持现有的谈话。不要将你的问题注入无关的对话中，因为你需要与之交谈的人正在关注它。虽然对您很方便，但这可能会刺激您想要与之交谈的人，并导致不理想的结果。 </li> + <li>避免 {{interwiki("wikipedia", "bikeshedding")}}。不要让你的热情变得恼人的琐事。它使对话变得繁琐而不重要。</li> +</ul> + +<h2 id="委婉">委婉</h2> + +<p>与他人沟通时要时刻保持委婉和恭敬。</p> + +<h3 id="礼貌地指出错误">礼貌地指出错误</h3> + +<p>如果您在联系某人的目的是要求他们采取不同的做法，或者指出他们所犯的错误（特别是他们反复犯错的话），请以正面评论开始您的信息。这可以减轻打击，这可以说，它表明你试图帮助，而不是让你成为坏人。 例如，如果一个新的贡献者创建了大量没有标签的页面，并且您想要指出这个问题，那么您给他们的消息可能看起来像这样（您需要为每个个案更改的内容加下划线):</p> + +<blockquote> +<p>嗨，<u>MrBigglesworth</u>，我一直注意到你对<u>Wormhole API文档</u>的贡献，并且能够得到你的帮助真是太棒了！我特别喜欢<u>你通过可读性平衡细节水平的方式</u>。尽管如此，如果您<u>在页面中添加正确的标签</u>，您可以使这些文章更好，更有用。</p> + +<p><u>详细信息，请参阅MDN标记指南 (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) 。</u></p> +</blockquote> + +<h2 id="分享知识">分享知识</h2> + +<p>在您参与MDN项目时，了解发生了什么以及与我们社区的其他成员进行互动很有用。通过与我们社区中的其他人交谈，您可以获得并分享想法，状态更新等。我们还拥有工具和信息资源，可以帮助您了解由谁来完成的工作。</p> + +<h3 id="沟通渠道">沟通渠道</h3> + +<p>您可以通过多种方式与社区成员（开发人员或作者）进行交流，每种方式都有自己特定的礼仪规则。</p> + +<h4 id="Bugzilla">Bugzilla</h4> + +<p>在编写文档以涵盖由于Bugzilla中的错误而实施的更改时，您经常会与涉及这些错误的人员进行交互。请务必始终牢记Bugzilla礼仪指南！</p> + +<h4 id="电子邮件">电子邮件</h4> + +<p>有时候，如果你有他们的电子邮件地址，你和一个或多个其他人之间的私人电子邮件交换就是要走的路。</p> + +<div class="note"> +<p>注意：一般来说，如果有人在您要记录的技术文档上发布了他们的电子邮件地址，已经亲自给您发送了他们的电子邮件地址，或者通常有一个众所周知的电子邮件地址，则电子邮件是可接受的“第一次联系人”做法。如果你需要挖掘它，你可能应该首先尝试获得IRC或邮件列表的许可，除非你已经用尽了所有其他尝试取得联系的努力。</p> +</div> + +<h3 id="Content_status_tools">Content status tools</h3> + +<p>We have several useful tools that provide information about the status of documentation content.</p> + +<dl> + <dt><a href="/dashboards/revisions">Revision dashboard</a></dt> + <dd>The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Documentation status overview</a></dt> + <dd>Our <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">documentation status overview</a> page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.</dd> + <dt><a href="/en-US/docs/MDN/Plans">Documentation project plans</a></dt> + <dd>We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.</dd> + <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga</a></dt> + <dd>The MDN staff writers use a tool called Taiga to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about the agile processes followed by the MDN team, see our <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes">Process page on the Mozilla wiki</a>.</dd> +</dl> + +<h2 id="The_development_community">The development community</h2> + +<p>Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!</p> + +<p>In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.</p> + +<p>On a related note, a great way to find the right person to talk to is to look at the <a href="https://wiki.mozilla.org/Modules">module owners lists</a>.</p> + +<h2 id="The_writing_community">The writing community</h2> + +<p>The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.</p> + +<p>See the article <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Join the community</a> for more information about the MDN community.</p> + +<p>The most frequent place you'll directly interact with other writers is in the {{IRCLink("mdn")}} channel on IRC. This channel is specifically reserved for discussing documentation. For IRC-specific etiquette tips, see the Mozilla Support article "<a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/" title="https://quality.mozilla.org/docs/misc/getting-started-with-irc/">Getting Started with IRC</a>." You'll also have discussions with us on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>. In general, IRC tends to be used for quick, more in-person-like discussions, while the discussion forum is typically used for longer-duration conversation.</p> + +<p>By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually things go very smoothly.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contributing to MDN</a></li> + <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">MDN community</a></li> + <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">How to send and reply to email</a></li> + <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">How to be a Mozillian</a></li> +</ul> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html new file mode 100644 index 0000000000..08693b3ff1 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html @@ -0,0 +1,53 @@ +--- +title: 如何成为一名测试版试验员 +slug: MDN/Contribute/Howto/成为一名测试版试验员 +tags: + - MDN Meta +translation_of: MDN/Contribute/Howto/Be_a_beta_tester +--- +<div>{{MDNSidebar}}</div> + +<p>随着MDN Kuma平台的开发人员不断地对站点进行更改，我们为那些选择成为测试版测试人员提供对这些新特性的早期访问。与任何“beta”测试一样，在某些情况下，一些功能可能无法正常工作。</p> + +<h2 id="参与beta测试">参与beta测试</h2> + +<ol> + <li>登录MDN，在顶部导航栏点击你的用户名。<br> + <img alt="Shows location of the user's profile link in the top navigation" src="https://mdn.mozillademos.org/files/15099/profile_link.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 59px; width: 383px;"><br> + 随后跳转到你的资料页。</li> + <li>点击<strong>编辑</strong>按钮。<br> + <img alt="Shows location of the button to edit a user's profile (which may vary depending on window dimensions" src="https://mdn.mozillademos.org/files/15093/profile_edit_link.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 144px; width: 387px;"><br> + 随后在编辑模式下打开资料页。</li> + <li>勾选复选框成为 <strong>Beta 测试者</strong>。<br> + <img alt="Shows the location of the Beta Tester checkbox" src="https://mdn.mozillademos.org/files/15095/profile_beta_checkbox.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 139px; width: 305px;"></li> + <li>点击资料页底部的<strong>发布</strong>按钮<br> + <img alt="Shows the location of the Publish button on a user's profile page" src="https://mdn.mozillademos.org/files/15097/profile_publish_button.png" style="box-shadow: 2px 2px 7px 1px #9e9e9e; height: 218px; width: 477px;"></li> +</ol> + +<h2 id="退出Beta测试">退出Beta测试</h2> + +<ol> + <li>登录MDN，在顶部导航栏点击你的用户名。随后会跳转到你的资料页。</li> + <li>点击<strong>编辑</strong>按钮。随后在编辑模式下打开资料页。</li> + <li>取消 <strong>Beta 测试者</strong>的复选框</li> + <li>点击<strong>发布</strong>按钮.</li> +</ol> + +<h2 id="对beta测试给予反馈">对beta测试给予反馈</h2> + +<p>你有两种方式可以对 beta 测试进行反馈:</p> + +<ul> + <li>在MDN讨论组里分享质量反馈. 在 <a href="https://discourse.mozilla-community.org/t/beta-redesign-feedback/16544">Beta feedback thread</a> 发布一个帖子. 或者,</li> + <li>按照下面的步骤提交 bug:</li> +</ul> + +<ol> + <li>如果你还没有账号，创建一个 <a href="https://bugzilla.mozilla.org/createaccount.cgi">Bugzilla</a> 账号.</li> + <li>打开 <a href="https://bugzilla.mozilla.org/form.mdn#h=detail%7Cbug">bug report in Bugzilla for MDN</a>.</li> + <li>在“摘要”字段中包含 “beta” 一词，帮助 MDN开发人员过滤和区分传入的 bug。.</li> + <li>尽你所能填写 bug 报告. 越详细越好.</li> + <li>点击<strong>提交</strong>按钮.</li> +</ol> + +<p> </p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..256d61b897 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,44 @@ +--- +title: 如何创建 MDN 账号 +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - MDN + - 创建账户 + - 初学者指南 + - 新手上路 +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div> + +<p> <span class="seoSummary">要对MDN的内容进行任何更改，你需要一个<strong>MDN</strong>账户。别担心，如果你只是打算阅读或搜索MDN，就不需要一个账户！这个指南 将帮助你建立MDN账户。</span></p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p><strong>为什么MDN需要我的电子邮件地址？</strong></p> + +<p>你的电子邮件地址用于帐户恢复；必要时，MDN管理员会通过它来联系您，讨论你的账户或在网站上的活动。</p> + +<p>此外，你可以选择订阅通知（例如，<a href="/zh-CN/docs/MDN/Contribute/Howto/Watch_a_page">当特定的页面被更改</a>）和消息（例如，如果你选择加入我们的beta测试团队，你可能会收到关于待测试新功能的邮件）。</p> + +<p>你的电子邮件地址永远不会显示在MDN，并只会按照我们的<a href="https://www.mozilla.org/privacy/websites/">隐私政策</a>使用。</p> + +<div class="note">如果你通过Github登录到MDN，并且你的Github账号使用了“noreply”的电子邮件地址，你将<em>不会</em>收到任何来自MDN的信息（包括你从页面订阅的通知）。</div> +</div> +</div> + +<ol> + <li>在每个MDN页面的顶部都有一个<strong>登录</strong>按钮。将鼠标指向它（如果你在移动设备上使用，轻触即可），以显示支持的登录到MDN的认证服务列表。</li> + <li>选择一项服务以登录。目前，我们只支持使用Github登录。值得注意的是如果你选择GitHub，你的MDN公开资料页上将显示一个链接，其指向你的GitHub个人资料页。</li> + <li>按照Github的提示，将你的GitHub帐户绑定到MDN。</li> + <li>从认证服务页面返回到MDN之后，MDN会提示你输入用户名和电子邮件地址。<em>你的用户名会公开显示，以便展示你做过的工作。请不要将你的电子邮件地址作为用户名</em>。</li> + <li>点击<strong>创建我的MDN个人资料</strong>。</li> + <li>如果你在步骤4中指定的电子邮件地址与认证服务所使用的不同，请检查<em>这个</em>邮箱，并点击我们发送的确认邮件中的链接。</li> +</ol> + +<p>一切就绪！你已经拥有一个MDN帐户，并可以立即编辑页面！</p> + +<p>你可以在任何MDN页面的顶部点击你的名字以查看账号的公开资料。从那里，你可以点击<strong>编辑</strong>按钮修改或更新你的个人资料。</p> + +<div class="note"> +<p>注：新用户名不能包含空格或“@”字符。请记住，你的用户名将会公开显示，以标识你做过的工作！</p> +</div> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..83945186c5 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,57 @@ +--- +title: 如何进行技术审查 +slug: MDN/Contribute/Howto/Do_a_technical_review +tags: + - MDN Meta + - 复核 + - 如何做 + - 指南 + - 文档 +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div> + +<p class="summary">技术复核包括审查一篇文章的技术准确性和完整性，并在必要的时候予以纠正。 如果<span id="result_box" lang="zh-CN"><span>一篇文章</span></span>的作者需要其他人来对文章进行技术复核的话，就需要在编辑时勾选”技术复核“选项。<span id="result_box" lang="zh-CN"><span>通常情况下，作者会联系特定的工程师来执行技术审查，</span></span>但是任何具有此领域专业技能的人都可以完成技术复核。</p> + +<p><span id="result_box" lang="zh-CN"><span>本文介绍如何进行技术复核</span></span><span lang="zh-CN"><span>，从而帮助确保MDN的内容的正确性。</span></span></p> + +<h4 id="任务是什么？">任务是什么？</h4> + +<p> <span id="result_box" lang="zh-CN"><span>审查和纠正文章的技术准确性和完整性。</span></span></p> + +<h4 id="什么地方需要技术审核？">什么地方需要技术审核？</h4> + +<p> 在被标记为需要<a href="https://wiki.developer.mozilla.org/zh-CN/docs/needs-review/technical">技术审核</a>的特定文章中。</p> + +<h4 id="开始做任务前你需要了解什么？">开始做任务前你需要了解什么？</h4> + +<ul> + <li>在此篇文章技术领域的专业知识。如果你在阅读这篇文章的时候没有学到任何新知识，那么你就是这篇文章技术领域的专家。</li> + <li><span class="short_text" id="result_box" lang="zh-CN"><span>如何在MDN上编辑wiki文章</span></span></li> +</ul> + +<h4 id="完成任务的步骤是什么？">完成任务的步骤是什么？</h4> + +<ol> + <li>选取一篇需要复查的文章： + <ol> + <li>前往 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/needs-review/technical">technical reviews</a> 页面。这里列出了所有需要技术复核的文章。</li> + <li>选择一个你非常熟悉的领域的页面。</li> + <li>点击该页面。</li> + </ol> + </li> + <li>在阅读这篇文章的时候注意文章里的所有技术细节：这篇文章的内容正确吗？是否缺少了一些细节？如果你觉得这篇文章不适合你，那么请毫不犹豫地换一篇文章。</li> + <li>如果没有错误，你不需要重新编辑来把这篇文章标识为”已复核“，你只需要找到左边导航栏最下方的”快速复核“框。黄色背景的框里列出了所有等待复核的请求，像这样：<img alt="" src="https://mdn.mozillademos.org/files/13016/SidebarTechReviewRequested.png" style="height: 93px; width: 321px;"></li> + <li>去掉需要技术复核前面的勾，然后点保存。</li> + <li>如果你发现了需要被修正的错误，你可以在编辑器里修改这篇文章的审核请求状态。以下是操作步骤： + <ol> + <li>点击页面顶部的编辑按钮，进入 <a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide">MDN editor</a> 页面，来编辑该页面。</li> + <li>更正不正确的技术信息，还可以添加文章遗漏的任何重要信息。</li> + <li>在文章的底部输入修改注释。这个注释简要地描述你的修改工作，比如“完成技术审查。”如果你更正了某些信息，将它们写进你的注释，比如“技术审查以及修复参数的相关描述。”这将帮助其他贡献者和网站编辑人员知道你修改的部分以及原因。如果你认为文章中有些不必要被审查的部分，也可以在注释中提出来。</li> + <li>取消勾选“需要审查”下面的“技术”选项框了吗？它就在页面的审查注释区域。</li> + <li>点击发布按钮。</li> + </ol> + </li> +</ol> + +<p>祝贺你，你已经完成了你的第一篇技术复核，<span id="result_box" lang="zh-CN"><span>感谢您的帮助！</span></span></p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..48396dcd33 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,55 @@ +--- +title: 如何进行编辑审核 +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - 指导 + - 文档 + - 编辑审核 +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> + +<p class="summary"><strong>编辑审核</strong>的工作由修改文中排版错误，拼写、语法、用法等文本错误构成。并不是所有贡献者都是语言专家，但有了他们的共同努力，他们把那些需要编辑以及校对的文章转化为了极其有用的文章；这些都是在编辑审核的工作中完成的。</p> + +<p><span class="seoSummary">这篇文章描述了如何进行编辑审核，从而帮助实现 MDN 的内容精确。</span></p> + +<dl> + <dt>任务是什么？</dt> + <dd>编辑并审核那些被标记为需要编辑审核的文章。</dd> + <dt>应该在何处处理它？</dt> + <dd>在特定的文章中会有标记有需要编辑审核的地方。</dd> + <dt>开始做任务前你需要了解什么？</dt> + <dd>你需要有好的中文语法和词汇技能。文章复核是要确保语法、用词都是正确的并且有意义，同时遵循 <a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide">MDN 样式指南</a>。</dd> + <dt>完成任务的步骤是什么？</dt> + <dd> + <ol> + <li>选择一篇文章来审核： + <ol> + <li>访问<a href="/zh-CN/docs/needs-review/editorial">需要复核的文章列表</a>。它陈列了所有请求编辑审核的页面。</li> + <li>点击文章链接进入页面。<br> + <strong>注意：</strong>这个列表是自动生成的，但更新并不频繁，所以列表中的一些文章是不再需要编辑审核的。如果你选择的文章<em>没有</em>显示“这篇文章需要复核”，跳过这一篇文章，再选择其他的文章。</li> + </ol> + </li> + <li id="core-steps">仔细阅读文章，特别注意其中可能出现的排版、错字、语法或者词语使用错误。如果你觉得这篇文章不适合你，随时可以换一篇其它文章。</li> + <li>如果文章中没有任何错误，你不需要进入编辑页面再把它标记为“已审核”。在页面的左侧边栏处可以找到“快速复核”对话框：<br> + <img alt="文法复核边栏屏幕截图" src="https://mdn.mozillademos.org/files/13164/editorial%20review%5Bzh-CN%5D.JPG" style="height: 99px; width: 284px;"></li> + <li>取消 <strong>文法</strong> 的勾选之后点击 <strong>保存</strong> 。</li> + <li>如果你发现了需要改正的错误： + <ol> + <li>点击右上角蓝色的 <code><strong>编辑</strong></code> 按钮；它将带你进入 <a href="/zh-CN/docs/Project:MDN/Contributing/Editor_guide">MDN 编辑器</a>。</li> + <li>更正所有你看到的的排版、错字、语法或者词语使用错误。你并不需要将所有问题都一次性改好，不过当完成整篇文章的时候你还觉得不确定是否完美，一定要保留文法复核的请求。</li> + <li>在文本底部输入一段<strong>修订注释</strong>；比如 <em>“文法符合：更改了排版，语法和用词错误。” </em>这有助于其他编辑者和网站管理员知道你更改了什么以及为什么做出更改。</li> + <li>在 <strong>需要复核吗？</strong> 下面取消 <strong>文法</strong> 的选择。这一项位于页面的 <strong>版本备注</strong> 当中。<br> + <img alt="文法复核编辑模式屏幕截图" src="https://mdn.mozillademos.org/files/13166/editorial%20review%20edit-mode%5Bzh-CN%5D.JPG" style="height: 246px; width: 259px;"></li> + <li>点击 <strong>发布</strong> 按钮。</li> + </ol> + </li> + </ol> + + <div class="note"> + <p>你所做出的更改在保存后不一定立即可见，页面保存和处理过程可能出现一些延迟。</p> + </div> + </dd> +</dl> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..bf90ff0262 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,59 @@ +--- +title: 如何为页面编写概要 +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - 指南 +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +<div>{{MDNSidebar}}</div> + +<p>您可以在MDN的每一个页面上定义概要，它可以在很多方面起到作用，如包含在搜索引擎的搜索结果中，或者在其他MDN页面如热门话题页或者工具提示页。它应该概括的描述该页面的所有内容，并且当在其他页面显示时，不包含页面内容的无关部分。</p> + +<div class="blockIndicator warning"> +<p><strong>一个概要可以被明确的定在在一个页面中。如果概要没有被明确的定义，通常会使用该页面内容的第一句话作为概要，而它往往不是该页面最精确的描述。</strong></p> +</div> + +<table class="full-width-table"> + <tbody> + <tr> + <td><strong>任务是什么？</strong></td> + <td>标记应被用作其在其他情况下摘要页面中的文本;这项任务可能包括在需要写相应的文本。</td> + </tr> + <tr> + <td><strong>哪些地方需要它？</strong></td> + <td>在缺乏一个总结或总结不太好的页面。</td> + </tr> + <tr> + <td><strong>完成任务需要什么？</strong></td> + <td>能够使用MDN编辑器的能力;良好的英语写作能力;对网页的主题足够熟悉，以便于能写一个很好的总结。</td> + </tr> + <tr> + <td><strong>怎样完成任务？</strong></td> + <td> + <ol> + <li>选择一个页面来设置总结: + <ol> + <li>在<a href="/zh-CN/docs/MDN/Doc_status">MDN documentation status</a> 页面上的section中, 点击你所了解的话题。<img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png"></li> + <li>在主题的文档状态页面，单击汇总表中的页头。这需要你在该主题区段的所有网页的索引;它示出了在左侧列中的页面的链接，以及在右栏中的标签和摘要。<img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png"></li> + <li>挑选缺少一个总结页面，或者说有一个较差的总结的页面。<img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png"></li> + </ol> + </li> + </ol> + + <div class="blockIndicator warning"> + <p>点击链接进入该页面。</p> + </div> + + <ol> + <li>单击编辑在MDN编辑器中打开该页面。</li> + <li>找一两句话，作为一个总结。如果需要，可以编辑现有的内容来创建或修改的句子来做一个很好的总结。</li> + <li>选择要使用的摘要文本。</li> + <li>在样式插件的编辑器工具栏，选择搜索引擎优化摘要。 (In the page source, this creates a {{HTMLElement("span")}} element with <code>class="seoSummary"</code> around the selected text.)<img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png"></li> + <li>保存你的更改，并附上类似“设置页面总结”的修改意见。修改意见是可选的，但我们鼓励你添加一个。这样便于其他人了解变更的情况。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>完成这样的一份任务后，你就是MDN的一员。</p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..4420d3f04e --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,69 @@ +--- +title: 如何给JavaScript相关页面添加标签 +slug: MDN/Contribute/Howto/Tag_JavaScript_pages +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>标记工作包括给页面添加元信息，使得这些页面的相关内容能被搜索工具等正确的分拣。</strong></p> + +<dl> + <dt>哪里需要做这件事<strong>?</strong></dt> + <dd>那些特定的<a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">没有标签的JavaScript相关的页面</a></dd> + <dt><strong>开始标记任务前你需要知道些什么？</strong></dt> + <dd>一些基本的JavaScript编程知识，比如javascript中的方法和属性都是些什么。</dd> + <dt><strong>你的工作有以下几个步骤</strong></dt> + <dd> + <ol> + <li>选择下面列举的某篇文章。</li> + <li>点击该文章所对应的链接，载入页面。</li> + <li>当页面载入完毕时，点击顶部附近的<strong>EDIT按钮，</strong>就会进入MDN编辑模式。</li> + <li>最后就是添加Javascript相关的标签了，我们提供了如下可选的标签。 + <table class="standard-table"> + <thead> + <tr> + <th scope="col">标签名</th> + <th scope="col">适用于含有哪些内容的页面</th> + </tr> + </thead> + <tbody> + <tr> + <td>Method</td> + <td>方法</td> + </tr> + <tr> + <td>Property</td> + <td>属性</td> + </tr> + <tr> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Prototype</font></td> + <td>原型</td> + </tr> + <tr> + <td>Object type name</td> + <td>所述对象的名字，例如String.fromCharCode就应该有String标签</td> + </tr> + <tr> + <td><code>ECMAScript6 </code>and <code>Experimental</code></td> + <td>在新版ECMAScript标准中增加的特性</td> + </tr> + <tr> + <td><code>Deprecated</code></td> + <td>不赞成使用的特性（那些不鼓励使用但仍然被浏览器支持的特性）</td> + </tr> + <tr> + <td><code>Obsolete</code></td> + <td>被废弃的特性（那些不再被浏览器支持的特性）</td> + </tr> + <tr> + <td>others</td> + <td>查看 <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">MDN 标签规则</a> 中其他可选标签</td> + </tr> + </tbody> + </table> + </li> + <li>添加备注信息并保存你的修改。</li> + <li>你做到了！</li> + </ol> + </dd> +</dl> + +<p> </p> diff --git a/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..15c6f0b2ee --- /dev/null +++ b/files/zh-cn/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,117 @@ +--- +title: 如何写文章帮助人们了解 Web +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +tags: + - MDN元数据 + - 学习社区 + - 指导 + - 贡献指南 +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +<div>{{MDNSidebar}}</div> + +<p>MDN 的<strong><a href="/zh-CN/docs/Learn">学习区</a></strong>是我们给新手开发者介绍 Web 概念的大本营。因为它的内容主要面对初学者，这是你分享知识，帮助新手逐渐了解 Web 的绝佳地点。确保新手开发者能够跟上这里的内容是很重要的，所以我们格外重视学习区。</p> + +<p><span class="seoSummary">这篇文章解释了如何给<a href="/zh-CN/docs/Learn">学习区</a>写文章。</span></p> + +<h2 id="如何写学习社区的文章">如何写学习社区的文章</h2> + +<p>要开始贡献你的知识，只需点击绿色大按钮，然后按照下面的五个步骤。如果你想找点子，请看一下我们的团队<a href="https://trello.com/b/LDggrYSV"> Trello </a>！</p> + +<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">写一篇新的学习文章</a> + +<div></div> +</div> + +<p>这篇文章可能不会在正确的地方出现，但至少是在MDN上。如果你需要找人谈谈把它搬到正确的地方，请<a href="/en-US/docs/Learn#Contact_us">联系我们</a>。</p> + +<h3 id="第一步：写两行">第一步：写两行</h3> + +<p>你文章的第一句话需要总结一下你将要涉及的主题，第二句话应该更详细地介绍你要放在文章中的内容（项目）。例如：</p> + +<div class="summary"> +<p> {{glossary("HTML")}} 文件包含的结构和内容, {{Glossary("CSS")}}以及其他主要的Web技术，使内容看起来像你想要的那样。在本文中，我们将介绍这项技术是如何工作的，以及如何编写你自己的基本示例。</p> +</div> + +<p>注意示例如何简要说明CSS是用于样式化页面的核心Web技术。 这足以使读者很好地了解本文所涵盖的内容。</p> + +<p>因为学习区域的文章主要是针对初学者的，所以每篇文章都应该涵盖一个简单的主题，以免给读者带来太多的新信息。如果你不能在一句话中总结这篇文章，那么你可能在一篇文章中做得太多了!</p> + +<h3 id="第二步：添加一个顶部框">第二步：添加一个顶部框</h3> + +<p>然后添加一个顶框，以帮助读者了解他们在学习过程中的位置。 这是“<a href="/en-US/docs/Learn/Understanding_URLs">了解URL及其结构</a> ”顶部框的示例。 您可以在编写自己的文章时将其用作模型。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">必要条件:</th> + <td>您首先必须清楚Internet的工作方式，Web服务器是什么，与Web链接背后的所有概念。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>您将了解什么是URL以及它如何在Web上工作</td> + </tr> + </tbody> +</table> + +<dl> + <dt>必要条件</dt> + <dd>读者首先必须知道什么东西才能读懂你的一篇文章?在有可能的状况下，让每一个前提条件链接到另一篇涵盖概念的学习领域的一篇文章(除了您写的是是一篇完全不需要首先先验知识的无比基础的文章)。</dd> + <dt>目标</dt> + <dd>这一章节粗略说明了您的读者在阅读学习这篇文章的过程中会学到（并学会）什么。这与一行程序有点不同;一行代码总结了文章的主题，而目标部分专门列出了读者在阅读文章过程中所希望完成的全部内容。</dd> +</dl> + +<div class="note"> +<p>注意:要创建此表，您可以复制并粘贴上面的示例表，或者使用MDN的编辑器 <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Tables">台式工具</a>。如果选择使用table工具，则需要在默认的standard-table类之外特别添加learn-box CSS类。为此，当您创建或编辑表的属性时，请转到“Advanced”面板并将样式表类字段设置为“standard-table learn-box”。</p> +</div> + +<h3 id="第三步写一个完整的描述">第三步:写一个完整的描述</h3> + +<p>接下来，写一个更长的描述，提供更全面的文章概述，突出最重要的概念。不要忘记解释为什么读者要花时间来学习这个主题并阅读你的文章！</p> + +<h3 id="第四步：更深一步">第四步：更深一步</h3> + +<div>当你完成了所有这些，你终于可以深入到主题。你可以根据自己的喜好来组织文章的这一部分(尽管您能够随时咨询我们的 <a href="/en-US/docs/MDN/Contribute/Style_guide">设计指南</a>)。这是你闪耀的机会!详细解释你要写的主题。提供指向完整参考文档的链接，详细解释该技术的工作原理，提供语法和用法细节，等等。由你决定 + +<div></div> +</div> + +<ul> + <li>专注于一个主题。如果你觉得你需要涵盖其他主题，这意味着要么你错过了一篇必备文章，要么你需要把你的文章分解成多个主题</li> + <li>使用简单的英语。尽可能避免使用技术术语，或者至少定义它们并在适用的情况下链接到它们的<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">术语表条目。</a></li> + <li>包括直接的例子，使理论概念更容易掌握。许多人以身作则学得最好。与写学术论文相比，我们希望初学者能容易地跟上文章的节奏</li> + <li>视觉辅助工具通常可以使内容更容易消化，并携带额外的信息，所以请随意使用图像、图表、视频和表格。如果您正在使用包含文本的图表，我们建议您使用{{Glossary("SVG")}}，这样我们的翻译团队就可以本地化文本。</li> +</ul> + +<p>看一看我们的函数的前几节<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">可重用代码块文章</a> ，有一些很好的描述部分。</p> + +<h3 id="第五步提供“主动学习”材料">第五步:提供“主动学习”材料</h3> + +<p>为了阐明本文并帮助读者更好地理解他们正在学习的内容，请确保提供练习、教程和需要完成的任务。通过让他们积极地、实际地使用和试验你文章中解释的概念，你可以帮助他们将信息“锁定”在大脑中。</p> + +<p>您可以选择在页面中直接包含这些示例作为 <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实时实例</a>,或者<a href="/en-US/docs/MDN/Contribute/Editor/Links">直接链接到它们。</a> （如果它们不能作为实时实例。） 如果你有兴趣帮助创造这些有价值的东西 ，请参阅<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">《创建一个交互式的练习来帮助学习网络》</a></p> + +<p>如果您不能提供到现有活动学习材料的链接(您不知道或者没有时间创建它们)，那么您应该在文章中添加标记{{tag ("NeedsActiveLearning")}}。这样，其他贡献者就可以找到需要积极学习材料的文章，并可能帮助你找到它们。</p> + +<p dir="rtl">看看<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">《主动学习:选择不同的元素》</a>进行现场互动学习练习或者<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">《主动学习: 玩转范围》</a>或者另一种不同风格的练习，要求它们在本地下载模板并按照提供的步骤更改</p> + +<p dir="rtl"></p> + +<p dir="rtl"> </p> + +<h3 id="第六步：查看文章，并放入学习区域导航菜单">第六步：查看文章，并放入学习区域导航菜单</h3> + +<p>在你写完你的文章后，让我们知道，这样我们可以看一看，做一个回顾，并提出改进建议 。再次看看我们的 <a href="/en-US/docs/Learn#Contact_us">联系方式</a> 板块以寻找最好的联系方式。</p> + +<p>完成文章的另一部分是把它放在学习区主导航菜单中。这个菜单是 <a href="/en-US/docs/Template:LearnSidebar">LearnSidebar 宏</a>生成的。 你需要特殊的权限来编辑，所以，再一次，让我们团队中的一个人把它添加进去。</p> + +<p>您至少应该将其添加到您的页面中，这是通过在页面顶部的段落中添加宏调用\{{LearnSidebar}}来完成的。</p> + +<ul> +</ul> + +<h2 id="推荐文章">推荐文章</h2> + +<p>您想做出贡献，但是您不知道该写什么?</p> + +<p>学习社区维护了一个要写文章的<a href="https://trello.com/b/LDggrYSV">Trello看板</a>。随意挑选一个，然后开始去写吧！</p> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/index.html b/files/zh-cn/orphaned/mdn/editor/basics/index.html new file mode 100644 index 0000000000..d6435b8282 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/basics/index.html @@ -0,0 +1,61 @@ +--- +title: 编辑器 UI 元素 +slug: MDN/Editor/Basics +tags: + - 指南 + - 新手 + - 编辑器 +translation_of: MDN/Editor/Basics +--- +<p><span class="seoSummary">MDN内置 WYSIWYG（所见即所得）编辑器，目的就是让编辑工作变得更加轻松。你可以轻松地在网站各处创建、编辑、修改文章或其他页面。</span> 编辑器界面如下所示，包含八个关键区域。本指南将提供每个区域的介绍，以便您了解如何使用整个编辑环境。</p> + +<div class="note"> +<p>我们不断努力改进MDN，所以有时候本指南或下面的屏幕截图可能会稍微过时。不过，我们会定期更新此文档，以避免其无法使用。</p> +</div> + +<p><img alt="Screenshot of the editor UI (August 2017) with each section labeled" src="https://mdn.mozillademos.org/files/15261/edit-page-with-labels.png" style="border-style: solid; border-width: 2px; height: 723px; width: 808px;"></p> + +<p>上图所示的编辑器各个UI区域已罗列在下表中，点击下面的链接来了解每个部分。</p> + +<ul> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_info">页面信息（上图中的 Page info ）</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Page_controls">页面控制（Page controls）</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar">工具栏（Toolbar）</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Edit_box">编辑框（Edit box）</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Tags">标签（Tags）</a></li> + <li><a href="#修订意见">修订意见（Revision comment）</a></li> + <li><a href="#复核请求">复核请求（Review requests）</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Attachments">附件（Attachments）</a></li> +</ul> + +<h2 id="修订注释">修订注释</h2> + +<p>我们强烈建议你每次编辑完成后要附上对修改的注释（修订注释）。这些注释将被保存到页面的修订历史中，就像这个<a href="/zh-CN/dashboards/revisions" title="/zh-CN/dashboards/revisions">修订看板</a>。这将有助于向复核你修改的人提供解释说明。想要添加修订意见也很简单，只要在<strong>发布</strong>之前，在修订意见框中填入注释即可。</p> + +<p>这么做的好处：</p> + +<ul> + <li>如果你进行修改的原因不明显，你的注释可以向别人解释你的想法。</li> + <li>如果你的修改在技术上很复杂，注释可以向编辑者解释它背后的逻辑。甚至可以在注释中包含一个bug追踪号，以便向编辑者提供更多参考信息。</li> + <li>如果你的编辑涉及删除大量的内容，你的注释可以证明删除的合理性（例如，“我把这个内容移到第X条”）。</li> +</ul> + +<h2 id="复核请求">复核请求</h2> + +<p>MDN社区使用<strong>复核</strong>来追踪和提高MDN内容的质量。通过在文章页面上设置特定标志来表示这篇文章需要审查复核。你可以在 <a href="/zh-CN/docs/MDN/Contribute/Howto" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help">MDN 使用指南</a>中了解更多关于<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_a_technical_review" title="/zh-CN/docs/Project:MDN/Contributing/How_to_help#Content_reviews">技术复核</a>和<a href="/zh-CN/docs/MDN/Contribute/Howto/Do_an_editorial_review">文法复核</a>的知识。</p> + +<p>想要申请对你所做的文章进行复核，只需勾选对应复核类型前面的复选框即可。任何对技术方面的修改，都应申请技术复核，当然，如果你申请文法复核，想找个人来检查你的写作和样式，那也是极好的。</p> + +<p>当申请复核后，文章将会被添加到<a href="/zh-CN/docs/needs-review/technical">需要技术复核</a>或<a href="/zh-CN/docs/needs-review/editorial">需要文法复核</a>列表，但这并不能保证会立马有人来复核你的文章。对于技术复核，最好直接联系相关技术领域的<a href="/zh-CN/docs/MDN/Community/Roles/Subject-matter_experts">学科专家</a>。对于编辑评论，您可以在 <a href="https://discourse.mozilla.org/c/mdn">MDN 论坛</a>中发帖以请求其他人来复核你的更改。</p> + +<p> </p> + +<p>在勾选申请复核之后，请务必点击一下<strong>发布</strong>按钮，这样才能提交复核请求。</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="https://docs.ckeditor.com/">CKEditor User's Guide</a></li> +</ul> + +<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}<span id="cke_bm_73C" style="display: none;"> </span></h6> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html b/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html new file mode 100644 index 0000000000..48175fd7c8 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/basics/page_controls/index.html @@ -0,0 +1,37 @@ +--- +title: MDN 编辑器页面控件 +slug: MDN/Editor/Basics/Page_controls +tags: + - 指南 + - 编辑器 +translation_of: MDN/Editor/Basics/Page_controls +--- +<div>{{MDNSidebar}}</div> + +<p>页面控件由对整个页面起作用的按钮组成，为了减少多余的滚动，页面控件在编辑器的顶部和底部都可见。一共有四个页面控制按钮：</p> + +<div class="note"> +<p>如果你编写的页面符合 MDN 的要求，而编辑器却不能保存成功，你可以<a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">电子邮件联系开发团队</a>寻求帮助。</p> +</div> + +<dl> + <dt>发布并继续编辑</dt> + <dd>点击这个按钮，会在不关闭编辑器的前提下保存并发布页面。这样你就可以定期保存编辑工作，在页面修订历史中创建存档，这些存档说不定以后会用到。在创建新页面时这个按钮是不可用。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> + <dt>发布</dt> + <dd>点击该按钮，将保存并发布你的文章，同时关闭编辑器，浏览器跳转到标准模式下的页面。查看<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Editor/Basics#修订注释">修订注释框</a>以了解如何在保存文章时添加修订注释。</dd> + <dt>预览</dt> + <dd>点击这个按钮将打开新的页面或窗口，以发布的样式展示编辑器中的内容，其中的<a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Macros">宏指令</a>和<a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma/Introduction_to_KumaScript#Template_Syntax">模板</a>都如实展示。值得注意的是，此时你的文章并没有被保存。这个按钮的作用，就是在文章发布前检查实际页面效果的，如果出现脚本错误，请参阅<a href="/en-US/docs/MDN/Contribute/Troubleshooting#Scripting_error_while_previewing_a_page">预览页面时排除脚本错误</a>。</dd> + <dd> + <div class="warning" style="font-size: 14px;"> + <p><strong>警告:</strong> Currently some macros and templates don't execute properly in Preview-mode, leaving the Preview page missing some of its content (such as sidebars), and thus with somewhat distorted page layout; i.e. not totally <abbr title="What You See Is What You Get">WYSIWYG</abbr>. Further, if <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#scayt"><abbr title="Spell-Check As You Type">SCAYT</abbr> is enabled</a> (and possibly if the page contains certain valid macros or templates), Preview mode may still give a scripting error.</p> + </div> + </dd> + <dt><br> + <a id="DiscardChanges" name="DiscardChanges">放弃</a></dt> + <dd>这个按钮的功能就是取消编辑，放弃所有未曾保存的更改。页面将会跳转回上个页面。</dd> + <dd> + <div class="warning" style="font-size: 14px;"> + <p><strong>警告:</strong> Occasionally <strong>Discard</strong> can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.</p> + </div> + </dd> +</dl> diff --git a/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html b/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html new file mode 100644 index 0000000000..54be30c0cf --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/basics/page_info/index.html @@ -0,0 +1,47 @@ +--- +title: 编辑器 UI 的页面信息区域 +slug: MDN/Editor/Basics/Page_info +tags: + - 指南 + - 新手 + - 编辑器 +translation_of: MDN/Editor/Basics/Page_info +--- +<div>{{MDNSidebar}}</div> + +<p>页面信息区域包含了本页面的信息，但也可以扩展开来以提供额外的页面控件。</p> + +<h2 id="现有页面">现有页面</h2> + +<p>默认情况下，编辑现有页面时，页面信息区域会显示页面标题。</p> + +<p>你可以点击<strong>编辑标题和属性</strong>按钮来打开更多页面控件。如下图：</p> + +<p><img alt="Page info fields for an existing article" src="https://mdn.mozillademos.org/files/15263/Expanded-page-info.png" style="border-style: solid; border-width: 2px; height: 190px; width: 751px;"></p> + +<p>这里可以对下列内容进行设置：</p> + +<dl> + <dt>标题</dt> + <dd>标题会显示在浏览器的标题栏（或标签栏）、面包屑导航栏中，以及文章的顶部。但它不会出现在页面的URL中。</dd> + <dt>目录</dt> + <dd>指定文章中次级标题的级别深度，次级标题会自动生成目录展示在页面上。默认情况下，这里填的是从 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><code><h2></code></a> 到 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h4" title="Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically."><h4></a></code> ，也就是有三级深度。当然，你也可以根据需要自由选择，比如，“没有目录”（不显示目录，如登陆页），或者“所有级别”。</dd> + <dt>最大渲染时长</dt> + <dd>确定页面自动刷新的频率。在绝大多数情况下，设置为零。</dd> + <dt>查找</dt> + <dd>对于已本地化的页面，这个字段可以帮助重新关联变成“孤儿”的页面（脱离英文原版的页面）。对于英语页面来讲，这个字段用处不大，因为，英语是 MDN 的官方语言。</dd> +</dl> + +<h2 id="新页面">新页面</h2> + +<p>如果你拥有<a href="/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permission">创建页面权限</a>，你就可以创建新的页面了。查看<a href="/en-US/docs//MDN/Contribute/Howto/Create_and_edit_pages#Creating_a_new_page">如何创建和编辑页面</a>你可以了解到更多这方面的知识。对于创建新页面，页面信息区域看起来如下图：</p> + +<p><img alt="Page info fields for a new page" src="https://mdn.mozillademos.org/files/15265/New-page-info.png" style="border-style: solid; border-width: 2px; height: 214px; width: 739px;"></p> + +<p>你同样可以设置<strong>标题</strong>和<strong>目录</strong>，还可以设置页面的<strong>别名</strong>，别名用于页面URL地址的最后一个部分。以只读状态显示的<strong>父地址</strong>是页面URL中网站根节点之后的部分。当你在标题输入框中输入文字的时候，别名输入框会自动生成对应的内容，其中会用下划线替代标题中的空格。</p> + +<div class="note"> +<p>值得注意的是，我们推荐使用更短的别名和描述更清晰的标题。举例来说，一个关于编辑器页面控件的页面，应该取一个例如：“MDN 编辑器页面控件”的标题，而它的 URL 应该写成“<code>MDN/Contribute/Editor/Basics/Page_controls</code>”，其中“<code>Page_controls</code>”正是这个页面的别名。</p> +</div> + +<p> </p> diff --git a/files/zh-cn/orphaned/mdn/editor/index.html b/files/zh-cn/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..02f71ade9f --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/index.html @@ -0,0 +1,20 @@ +--- +title: MDN 编辑指南 +slug: MDN/Editor +tags: + - MDN + - 指南 + - 文档 +translation_of: MDN/Editor +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/zh-CN/docs/MDN")}}</div> + +<p><span class="seoSummary">MDN Web Docs wiki 文档系统的 WYSIWYG (所见即所得)编辑器让贡献新的内容变得简单。这篇指南将告诉你如何使用它，借此来提高你的生产力。在编辑或新建新的页面之前，请阅读并遵守 <a href="https://www.mozilla.org/zh-CN/about/legal/terms/mozilla/">Mozilla 条款</a>。 </span></p> + +<p><a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide" title="Read the MDN style guide">MDN 样式指南</a> 除了告诉你如何进行格式化和样式化内容本身外，还包括我们推荐的语法和拼写规则。</p> + +<p>{{LandingPageListSubpages}}</p> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html b/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..de23593df5 --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/keyboard_shortcuts/index.html @@ -0,0 +1,145 @@ +--- +title: MDN 编辑器的编辑框 +slug: MDN/Editor/Edit_box +tags: + - MDN + - 快捷键 + - 编辑器 + - 编辑框 +translation_of: MDN/Editor/Keyboard_shortcuts +--- +<p>编辑框正是你写文章的地方，在编辑框中点击右键会根据你点击的位置打开对应的快捷菜单，比如：在表格中点击右键会弹出与编辑表格相关的菜单，在列表中右击就会弹出与列表相关的菜单。</p> + +<p>默认情况下，编辑器会用自己的右键菜单替代浏览器默认的菜单，如果你一定要打开浏览器的默认菜单（比如，使用火狐的拼写检查功能），你可以按住 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 键（ Mac 的 <kbd>Command</kbd> 键），再点击右键。</p> + +<h2 id="快捷键">快捷键</h2> + +<p>丰富而便捷的键盘快捷键能让你在编辑时，手不离开键盘。此处所列的是 Windows 或 Linux 系统下的快捷键，如果是 Mac，只需将 <kbd>Control</kbd> 替换为 <kbd>Command</kbd> 即可。</p> + +<table class="standard-table"> + <colgroup> + <col style="width: 15em;"> + </colgroup> + <tbody> + <tr> + <th>快捷键</th> + <th>描述</th> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td>全选</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td>复制</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td>粘贴</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td> + <td>粘贴为纯文本</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td>剪切</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td>撤销</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td>重做</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>K</kbd></td> + <td>打开链接编辑器/添加新链接</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td>移除光标所在位置的链接</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td>加粗</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td>斜体</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td>切换 <code><code></code> 样式</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td> + <p>切换源码编辑模式</p> + + <div class="note">使用源码编辑模式时请格外小心，你必须按照既定的格式来编辑。请仔细阅读<a href="/zh-CN/docs/Project:MDN/%E8%B4%A1%E7%8C%AE/Editor_guide/Source_mode">编辑器源码模式指南</a>，该指南详细介绍了如何使用源码模式，以及各项注意事项。</div> + </td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td>切换当前区域的 <code><pre></code> 样式</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>U</kbd></td> + <td>下划线</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td>保存但不关闭编辑器</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td>保存并关闭编辑器</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td>移除选中区域的样式（此处是数字“0”，不是字母“O”）</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>2</kbd> 至 <kbd>Ctrl</kbd> + <kbd>6</kbd></td> + <td>切换标题的级别（从 2 到 6 ），一级标题仅可供文章头部的页面标题使用。</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></td> + <td>在无序列表、有序列表和普通段落格式之间切换。</td> + </tr> + <tr> + <td><kbd>Tab</kbd></td> + <td>在缩进模式下增加缩进级别，否则插入两个空格作为制表符。在表格内部，将光标移动到下一个单元格，或者在没有下一个单元格的情况下插入新行。如果光标当前位于页面标题或某个标题中，则光标跳转到下一段。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td>在缩进模式下降低缩进水平。在表格内部，跳到前一个单元格，如果前面没有单元格，则插入新行。如果光标当前位于页面标题或某个标题中，则光标跳转到下一段。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td>插入空格(<code>&nbsp;</code>)</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td> + <p>跳出当前区域。例如，如果你当前正在某个 <code><pre></code> 区域，按下 <kbd>Shift</kbd> + <kbd>Enter</kbd> ，你将跳出这个区域，回到文章正文。</p> + + <div class="note style-wrap"> + <p>当前不可用，详见：{{bug('780055')}}。</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/MDN/Contribute/Editor/Basics">编辑器 UI 元素</a></li> + <li><a href="/zh-CN/docs/MDN/Contribute">为 MDN 做贡献</a></li> + <li><a href="/zh-CN/docs/MDN/Getting_started">初识 MDN</a></li> +</ul> + +<div>{{MDNSidebar}}</div> diff --git a/files/zh-cn/orphaned/mdn/editor/source_mode/index.html b/files/zh-cn/orphaned/mdn/editor/source_mode/index.html new file mode 100644 index 0000000000..660f88267e --- /dev/null +++ b/files/zh-cn/orphaned/mdn/editor/source_mode/index.html @@ -0,0 +1,121 @@ +--- +title: 源码模式 +slug: MDN/Editor/Source_mode +translation_of: MDN/Editor/Source_mode +--- +<div>{{MDNSidebar}}</div> + +<p class="summary">MDN 编辑器有个重要的按键，用来切换到源码编辑模式。此模式下，你可以看到正在编辑的文章的 HTML。<span class="seoSummary">这个指引使你了解 MDN wiki 源码编辑模式<strong>能</strong>做什么，什么<strong>应该</strong>做，但更为重要的是，什么是<strong>不应该</strong>做的。</span></p> + +<div class="warning"> +<p>在你考虑使用源码模式之前，请注意我们强烈建议你不要使用源码模式。如果您只是为了强行符合我们的样式规范，你不应该去使用源码模式。我们确实有一些需求不启用源码模式无法做到。记得查看{{anch("Warnings and caveats")}}。</p> +</div> + +<h2 id="启用源码模式">启用源码模式</h2> + +<p>启用源码模式很简单。在编辑器工具栏的左上角，点击“<strong>Source</strong>”或“<strong>原始碼</strong>”按钮。</p> + +<p><img alt="Partial screenshot of the editor toolbar, with the Source mode button highlighted" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p> + +<p>对于格式化、图片之类的功能，很可能源码模式没有 WYSIWYG (所见即所得)好用，因为你可能需要滚动很远才能找到编辑器中相关源码的位置。</p> + +<h2 id="警告">警告</h2> + +<p>综上所述，你应该极少会需要用到源码模式。只有一些极个别的事情才必须由修改源码实现。最终，我们会更新编辑器界面，为你展示你的修改。</p> + +<p><a href="/en-US/docs/MDN/Contribute">MDN贡献者指南</a>中未明确描述的所有内容均不应添加到源代码中。这意味着：</p> + +<ul> + <li>不要使用自定义字体和样式。若不是标准的一部分，请勿使用。</li> + <li>不要使用特殊颜色。若不是标准视觉样式，请修改为我们提供的样式。</li> +</ul> + +<h2 id="源码模式下编辑">源码模式下编辑</h2> + +<p>一旦启用源码模式，你将可以编辑 wiki 页面的原始 HTML。虽不受编辑器约束，您应竭尽所能保持您的工作与<a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">样式指南</a>一致，并且可以安全可靠的工作。</p> + +<div class="note"> +<p>通常，您应该是在源码模式中做一些短暂的调整，而不是长时间的撰写页面。</p> +</div> + +<p>不幸的是，<kbd>Tab</kbd> 键在源码模式中无法使用，请输入两个空格来代替。</p> + +<p>若您使用 MDN 不允许的 HTML 元素和属性，它们会在你保存时直接被移除。此外，文档还将重新被格式化，以使之符合预期。</p> + +<h2 id="合理使用源码模式">合理使用源码模式</h2> + +<p>在一些个别的情况下，使用源码是唯一能遵循MDN格式规范的方式。这一节涵盖了这些情况，并说明了如何在不破坏其他东西的前提下，正确使用这些功能。</p> + +<h3 id="在示例代码中高亮代码行">在示例代码中高亮代码行</h3> + +<p>在用<a href="/zh-CN/docs/MDN/Contribute/Editor/Basics/Toolbar#Blocks_group">工具栏的块组</a>中的<strong>PRE</strong>或<strong>Syntax Highlighter</strong>建立的示例代码片段块中，你会希望让某几行代码更引人注目一些。唯一实现这种事项的方式是开启源码模式，找到包含此部分代码的{{HTMLElement("pre")}}块，然后编辑<code><pre></code>标签的{{htmlattrxref("class")}}属性，加上一个<code>highlight</code>组件，像下面这种格式：</p> + +<ul> + <li><code>highlight[<em>lineNum1</em>, <em>lineNum2</em>, ..., <em>lineNumN</em>]</code></li> +</ul> + +<p>例如，如果现在的标签为<code><pre class="brush: js"></code>，然后你想往第4行和第7行加个高亮，你可把它改为<code><pre class="brush:js; highlight:[4,7]"></code>。</p> + +<p>我们看个更复杂的示例：</p> + +<table class="fullwidth-table"> + <thead> + <tr> + <th scope="col">高亮前</th> + <th scope="col">高亮后</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2); +</pre> + + <p>这里的{{HTMLElement("pre")}}标签为：<code><pre class="brush: js"></code></p> + </td> + <td> + <pre class="brush: js; highlight:[4,7] notranslate"> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +var path1 = new Path2D(); +path1.rect(10, 10, 100, 100); + +var path2 = new Path2D(path1); +path2.moveTo(220, 60); +path2.arc(170, 60, 50, 0, 2 * Math.PI); + +ctx.stroke(path2);</pre> + + <p>然后这里的<code><pre></code>标签已经改为了：<code><pre class="brush: js; highlight:[4,7]"></code></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="没有对应工具栏按钮的样式">没有对应工具栏按钮的样式</h3> + +<p>MDN上我们用的一些样式通过通常的用户界面是无法实现的。好消息是，这些不是很常见。示例如：</p> + +<ul> + <li>要应用“keyboard”样式于其上的话，你需要将{{HTMLElement("kbd")}}元素中的键名的文本括上。我们还没有实现这个功能的用户界面，所以调到源码模式，把键名括在<code><kbd></code>中。 例如，如果源码是： + + <pre class="brush: html notranslate"><p>Press the <kbd>Enter</kbd> key to start the countdown.</p></pre> + + <p>输出结果就是：</p> + + <p>Press the <kbd>Enter</kbd> key to start the countdown.</p> + </li> + <li>用于特定页面的一些很不常用的样式也需要手动加上，这尤其在一组盒子上常见。这就是我们用宏来帮助自动建立诸多入口页面组件的缘故。</li> +</ul> diff --git a/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html b/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html new file mode 100644 index 0000000000..d0ca0069fb --- /dev/null +++ b/files/zh-cn/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html @@ -0,0 +1,31 @@ +--- +title: A simple demo of a live code sample +slug: MDN/Structures/Live_samples/Simple_live_sample_demo +translation_of: MDN/Structures/Live_samples/Simple_live_sample_demo +--- +<div>{{MDNSidebar}}</div><h2 id="The_example">The_example</h2> + +<p id="Simple_example_of_a_live_demo">This is a very simple example showing you how to do a live demo in MDN. For more information, see <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</p> + +<pre class="brush: html notranslate"><form> + <label>Try me<input type="text" name="name"></label> + <input type="submit" value="go"> +</form></pre> + +<pre class="brush: css notranslate">form { + border-radius: 10px; + background: powderblue; +}</pre> + +<pre class="brush: js notranslate">var f = document.querySelector('form'); + +f.addEventListener('submit', function(ev) { + ev.preventDefault(); + document.querySelectorAll('input')[1].value = 'sending'; +}, false);</pre> + +<p>{{ EmbedLiveSample('The_example', '', '', '') }}</p> + +<p> </p> + +<p> </p> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html new file mode 100644 index 0000000000..e7792b75d4 --- /dev/null +++ b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html @@ -0,0 +1,98 @@ +--- +title: 发布你的附加组件 +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +<div>{{AddonSidebar}}</div> + +<p>一般当你完成了基于WebExtension技术的附加组件的代码编写和测试, 你可能会想与其他人分享这成果(不管出于什么目的...). Mozilla旗下有一个网站: <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a> (简称AMO), 开发者们可以在这里发布附加组件, 而其他用户可以在这里找到这些附加组件并安装使用, 通过在AMO上发布你的附加组件, 你可以加入到我们的社区里来, 这里有一群用户和创造者, 说不准会发现几个使用你的附加组件的人哦.</p> + +<p>你编写的附加组件并不一定需要发布在AMO上， 但是、即使你不打算在AMO上发布你的附加组件, 你也必须提交你的附加组件到AMO上来进行审核以获得签名。因为火狐浏览器会拒绝安装没有AMO签名的附加组件。</p> + +<p>所以发布一个附加组件的流程, 可概述为:</p> + +<ol> + <li>压缩你所创建的附加组件文件</li> + <li>在<a href="https://addons.mozilla.org/zh-CN/">AMO</a>上创建一个属于你的账户</li> + <li>上传你的压缩文件到AMO来进行签名和审核, 并选择是否在AMO上进行发布</li> + <li>修复在审核中发现的任何问题</li> + <li>如果你选择不在AMO上发布, 可以恢复已签名的附件组件, 并自行发布</li> +</ol> + +<p>当你准备发布附加组件的新版本时, 你可以访问 <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org </a>的附加组件页来更新它, 并上传新的版本.<br> + 需要注意的是: 你必须在这个附加组件页进行更新, 否则AMO没法知道你是要更新一个已经存在的附加组件呢, 还是要上传一个全新的附加组件呢.</p> + +<p>如果你选择在AMO上发布你的附加组件, 之后火狐浏览器会自动检查更新. 如果你选择自行发布, 你需要在你的manifest.json中手动设置一个<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> 唯一标识, 并且需要手动设置<code>update_url属性指向你的</code><a href="/en-US/Add-ons/Updates">update manifest file</a>.</p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p>火狐浏览器把附加组件包的后缀叫做或改为".xpi", 这只是".zip"的一个扩展.</p> + +<p>在上传附加组件到AMO的时候, 你不需要把压缩包的后缀改为".XPI".</p> +</div> +</div> + +<h2 id="1._使用zip压缩你的附加组件文件">1. 使用zip压缩你的附加组件文件</h2> + +<p>首先你的附加组件文件夹应该包含一个manifest.json和其他一些需要的文件 - javascript文件, icons文件, HTML文件等等. 你需要使用zip把它们压缩成一个文件以便上传到AMO.</p> + +<p>注意: 请将你的附加组件目录的的所有文件压缩为zip包,而 不要直接对附加组件根目录进行压缩(见下图所示).</p> + +<h3 id="Windows">Windows</h3> + +<ol> + <li>打开你的附加组件所在的文件夹.</li> + <li>选中所有文件.</li> + <li>右键并选择发送到 → 压缩到(zipped)文件夹.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ol> + <li>打开你的附加组件所在的文件夹.</li> + <li>选中所有文件.</li> + <li>右键并选择压缩<em>n项</em>.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> + +<ol> + <li><code>cd path/to/my-addon/</code></li> + <li><code>zip -r ../my-addon.zip *</code></li> +</ol> + +<h2 id="2._在AMO上创建一个账户">2. 在AMO上创建一个账户</h2> + +<p>访问<a href="https://addons.mozilla.org/">https://addons.mozilla.org/</a>. 如果你已经有一个<a href="https://support.mozilla.org/zh-CN/kb/firefox-mozilla">火狐账户</a>, 你可以直接使用它来登录. 否则, 点击"注册"并按要求创建一个火狐账户.</p> + +<h2 id="3._上传你的zip压缩文件">3. 上传你的zip压缩文件</h2> + +<p>接下来, 上传压缩后的附加组件到AMO进行签名和审查, 并选择是否发布到AMO, 更多细节, 可查看<a href="/en-US/Add-ons/Distribution#Submitting_to_AMO">Submitting to AMO</a>.</p> + +<div class="note"> +<p>需要注意的是一旦你上传了你的附加组件(基于WebExtension技术)到AMO, 你不能使用Add-on SDK或过时的XUL/XPCOM技术来更新该附加组件. 如果你切换到了这些技术平台之一, 必须把它做为新的附加组件并重新提交.</p> + +<p>总而言之: 像Add-on SDK和XUL/XPCOM等过时的技术体系在不久的将来都将被淘汰, WebExtensions才是唯一.</p> + +<p>在上传你的附加组件之前，请再次检查你的zip包内没有包含其他不相关的文件.</p> +</div> + +<h2 id="4._修复审查中出现的问题">4. 修复审查中出现的问题</h2> + +<p>当你上传了附加组件, AMO服务器将运行一些基本的检查并立即通知你有关的一切问题. 这些问题分为2种类型: "错误"和"警告". 如果你有错误, 你必须修复它们并重新提交, 如果只是警告, 你最好也搞定它们(当可以也忽略警告): 然后可以继续提交.</p> + +<p>如果自动检查器没有报告任何错误, 该附件组件将进行更为详细的审核(复查). 你同样会收到审查结果并且需要修复所有问题, 然后重新提交.</p> + +<h2 id="5._发布你的附加组件">5. 发布你的附加组件</h2> + +<p>如果你选择了在AMO上托管你的附加组件, 这意味着发布过程的结束. AMO会对该附加组件进行签名和发布, 之后其他用户就能下载并安装使用了.</p> + +<p>如果你选择不在AMO上进行发布, 可以恢复已签名的附加组件, 并自行发布(比如把附件组件的压缩包直接发给别人).</p> + +<p> </p> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html new file mode 100644 index 0000000000..496abe0bd3 --- /dev/null +++ b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html @@ -0,0 +1,22 @@ +--- +title: 从 Google Chrome 移植 +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +<div>{{AddonSidebar}}</div> + +<p>使用 WebExtension API 开发的扩展是专为跨浏览器兼容而设计的：很大程度上，该技术与 Google Chrome 和 Opera 支持的<a class="external external-icon" href="https://developer.chrome.com/extensions">扩展 API</a> 代码直接兼容。为这些浏览器编写的扩展，在大多数情况下，只需少数修改就能在 Firefox 中运行。几乎所有的<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API">扩展 API</a> 都支持使用 <code>chrome</code> 命名空间下的回调函数，跟 Chrome 一样。那些仅有的 <code>chrome</code> 命名空间不支持的 API 是故意不与 Chrome 兼容的。这些情况下，API 文档页将明确声明它仅在 <code>browser</code> 命名空间中受支持。从 Chrome 或者 Opera 移植一个扩展的过程大概这样：</p> + +<ol> + <li>检查你 manifest.json 使用的功能并了解 WebExtension API 对应的 <a href="/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome 不兼容参考表</a>。如果你在使用的功能或者 API 还未被 Firefox 支持，那你可能还不能移植你的扩展。Mozilla 提供了一个服务可助您自动执行此步：<a href="https://www.extensiontest.com/">https://www.extensiontest.com/</a>。</li> + <li><a href="/zh-CN/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">安装你的扩展至 Firefox</a> 并对其进行测试。</li> + <li>如有任何问题，可通过 <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons 邮件列表</a>或 <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a> 上的 <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> 联系我们。</li> + <li><a href="/zh-CN/Add-ons/WebExtensions/Publishing_your_WebExtension">提交您的附加组件至 AMO 以供签名及分发</a>。</li> +</ol> + +<p>如果您依赖 Chrome 命令行选项来加载解压的扩展，请参看 Firefox 中进行临时安装的 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 工具以便开发。</p> + +<ul> +</ul> diff --git a/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html new file mode 100644 index 0000000000..654aaea253 --- /dev/null +++ b/files/zh-cn/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,83 @@ +--- +title: 打包和安装 +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +--- +<h2 id="打包你的扩展">打包你的扩展</h2> + +<p>Firefox 扩展应打包为 XPI 文件。它只是一个 ZIP 文件，但采用 <code>.xpi</code> 作为扩展名。</p> + +<p>最重要的一点，ZIP 文件必须是扩展文件的 ZIP 打包，<strong>不能</strong>包含一层根目录。</p> + +<h3 id="Windows">Windows</h3> + +<ol> + <li>打开你的扩展文件所在的文件夹。</li> + <li>选择所有文件。</li> + <li>右击并选择 发送到 → 压缩(zipped)文件夹。</li> + <li>将得到的文件从 <code>文件名.zip</code> 重命名为 <code>文件名.xpi</code>。</li> +</ol> + +<p><img alt="Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder" src="https://mdn.mozillademos.org/files/11717/pUF1vnr.png" style="height: 641px; width: 904px;"></p> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ol> + <li>打开你的扩展文件所在的文件夹。</li> + <li>选择所有文件。</li> + <li>右击并选择 压缩 <em>n</em> 项。</li> + <li>将得到的文件从 <code>Archive.zip</code> 重命名为 <code>文件名.xpi</code>。</li> +</ol> + +<p><img alt="Screenshot of the Finder context menu showing the Compress 15 Items option" src="https://mdn.mozillademos.org/files/11715/Screen%20Shot%202015-10-08%20at%2016.19.02.png" style="height: 460px; width: 850px;"></p> + +<h3 id="Linux_Mac_OS_X_终端">Linux / Mac OS X 终端</h3> + +<ol> + <li><code>cd path/to/my-extension/</code></li> + <li><code>zip -r ../my-extension.xpi *</code></li> +</ol> + +<h2 id="安装你的扩展">安装你的扩展</h2> + +<ol> + <li>导航到 <code>about:addons</code></li> + <li>拖拽 XPI 到页面上，或者打开齿轮菜单，选择“从文件安装附加组件...”</li> + <li>点击弹出的对话框中的“安装”</li> +</ol> + +<h2 id="在_Firefox_OS_上安装你的扩展">在 Firefox OS 上安装你的扩展</h2> + +<p><code>你可以使用 WebIDE 提供的 USB 或者 Wifi 进行安装</code></p> + +<h2 id="故障排除">故障排除</h2> + +<p>下面是几种你可能会遇到的常见问题：</p> + +<h3 id="此附加组件无法安装，因为它未经验证。">"此附加组件无法安装，因为它未经验证。"</h3> + +<ul> + <li>确保你正在使用 <a href="https://nightly.mozilla.org/">Nightly</a> ，并且已在 <code>about:config </code>中将 <code>xpinstall.signatures.required</code> 切换为 <code>false</code>。</li> + <li>在 <a href="/en-US/docs/Mozilla/Add-ons/Distribution">附加组件签名与分发</a> 了解更多信息。</li> +</ul> + +<h3 id="该附加组件无法安装，因为它似乎已损坏。">"该附加组件无法安装，因为它似乎已损坏。"</h3> + +<ul> + <li>确保你是直接压缩你的附加组件文件，<strong>而不是</strong>压缩它们所在的文件夹。你的 manifest.json 文件必须在 zip 文件的根目录中。</li> + <li>确保你正在使用 <a href="https://nightly.mozilla.org/">Nightly</a> 版本的 Firefox。</li> +</ul> + +<h3 id="完全没反应">完全没反应</h3> + +<ul> + <li>确保你的文件名称以 <code>.xpi</code> 结尾，因为某些操作系统可能会隐藏真实的文件扩展名。 + + <ul> + <li>在 Windows 上，选中 查看 → 显示 / 隐藏：文件扩展名。</li> + <li>在 Mac OS X 上，选中 文件 → 获取信息 → 名称和扩展名。</li> + </ul> + </li> + <li>还有一种可能，你不小心点击并因此驳回了安装提示。在 Nightly 中的后退按钮旁边找到一个拼图图标。点击它将重获这个弹出提示。</li> +</ul> diff --git a/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html b/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html new file mode 100644 index 0000000000..583cb6cb5a --- /dev/null +++ b/files/zh-cn/orphaned/mozilla/mozilla_persona/index.html @@ -0,0 +1,155 @@ +--- +title: Mozilla Persona +slug: Mozilla/Mozilla_Persona +tags: + - Mozilla + - Persona +--- +<div class="callout-box"> + <p><strong>保持联系或获取帮助！</strong></p> + <p>关注 <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">我们的 blog</a>，加入 <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">我们的邮件列表</a>，或在 <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC">IRC</a> 中的 <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> 找到我们。</p> +</div> +<p><a class="link-https" href="https://www.mozilla.org/zh-CN/persona/" title="https://www.mozilla.org/zh-CN/persona/">Mozilla Persona</a> 是一个用于 web 的完全去中心化且安全的验证系统，基于开放 BrowserID 协议。Mozilla 当前管理一个 Persona 相关的一个<a href="/zh-CN/docs/Persona/Bootstrapping_Persona" title="/zh-CN/docs/Persona/Bootstrapping_Persona">可选的、中心化服务</a>的一小组套件。</p> +<p>为什么你和你的站点应该使用 Persona？</p> +<ol> + <li><strong>Persona 完全消除了站点特定的密码，</strong> 把用户和网站从创建、管理和安全存放密码的责任中解放出来。</li> + <li><strong>Persona 易于使用。</strong>只需点击两次，一个 Persona 用户可以登入到一个诸如 <a href="http://voo.st" title="http://voo.st">Voost</a> 或 <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a> 的新站点，绕开了账户创建相关的摩擦。</li> + <li><strong>Persona 易于实现。</strong>开发人员在一个下午就可以把 Persona 添加到站点上。</li> + <li>最好的是，<strong>不会被锁定</strong>。 开发人员获取所有他们用户的验证过的邮件地址，而用户可以在 Persona 上使用任何邮件地址。</li> + <li><strong>Persona 基于 BrowserID 协议构建。</strong>一旦流行的浏览器供应商实现了 BrowserID<strong>，它们不再需要依赖于 Mozilla 来登入。</strong></li> +</ol> +<p>继续阅读来开始！</p> +<div class="note"> + <strong>注意：</strong>Persona 在活跃开发中。关注<a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">我们的 blog</a> 来了解新特性，或加入<a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">我们的邮件列表</a>来提供反馈！</div> +<h2 id="在你的站点上使用_Persona">在你的站点上使用 Persona</h2> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="准备开始">准备开始</h3> + <dl> + <dt> + <a href="/zh-CN/docs/Persona/Why_Persona" title="zh-CN/BrowserID/Why_BrowserID">为什么使用 Persona？</a></dt> + <dd> + 了解在你的站点上支持 Persona 的原因和它与其它身份验证系统的区别。</dd> + <dt> + <a href="/zh-CN/Persona/Quick_Setup" title="BrowserID/Quick setup">快速安装</a></dt> + <dd> + 一份快捷的攻略，展示了如何向你的网站中添加 Persona。</dd> + </dl> + </td> + <td> + <h3 id="Persona_API_参考">Persona API 参考</h3> + <dl> + <dt> + <a href="/zh-CN/DOM/navigator.id" title="navigator.id">navigator.id API 参考</a></dt> + <dd> + <code>navigator.id</code> 对象的参考，web 开发者可以用此来把 Persona 继承到站点中。</dd> + <dt> + <a href="/zh-CN/Persona/Remote_Verification_API" title="zh-CN/BrowserID/Remote_Verification_API">验证 API 参考</a></dt> + <dd> + 建立在 <code>https://verifier.login.persona.org/verify</code> 上的远程验证 API 的参考。</dd> + </dl> + </td> + </tr> + <tr> + <td> + <h3 id="指导">指导</h3> + <dl> + <dt> + <a href="/zh-CN/Persona/Security_Considerations" title="BrowserID/Security considerations">安全考虑</a></dt> + <dd> + 确保 Persona 部署安全的实践和技术。</dd> + <dt> + <a href="/zh-CN/Persona/Browser_compatibility" title="/Browser_compatibility">浏览器兼容性</a></dt> + <dd> + 准确获知哪些浏览器支持 Persona。</dd> + <dt> + <a href="/zh-CN/Persona/Internationalization" title="/Internationalization">国际化</a></dt> + <dd> + 了解 Persona 如何处理不同的语言。</dd> + </dl> + </td> + <td> + <h3 id="资源">资源</h3> + <dl> + <dt> + <a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">库和插件</a></dt> + <dd> + 寻找你偏好的编程语言、web 框架、博客或是内容管理系统（CMS）的即插库。</dd> + <dt> + <a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona cookbook</a></dt> + <dd> + Persona 站点的示例源代码。包括 PHP、Node.JS 等等的片段。</dd> + <dt> + <a href="/zh-CN/docs/persona/branding" title="/zh-CN/docs/persona/branding">品牌资源</a></dt> + <dd> + 登入按钮和其它向用户表现 Persona 的图形。</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="给身份提供者的信息">给身份提供者的信息</h2> + <p>如果你是一个电子邮件提供商或另一个身份提供服务，翻阅下面的链接来获知如何成为一个 Persona 身份提供者。</p> + <dl> + <dt> + <a href="/zh-CN/docs/Persona/Identity_Provider_Overview" title="IdP">IdP 概述</a></dt> + <dd> + Persona 身份提供者的高层视角。</dd> + <dt> + <a href="/zh-CN/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">实现一个 IdP</a></dt> + <dd> + 成为一个 IdP 的详细技术细节指导。</dd> + <dt> + <a href="/zh-CN/Persona/IdP_Development_tips" title="Developer tips">开发提示</a></dt> + <dd> + 开发一个新的身份提供者的一系列开发提示和技巧。</dd> + <dt> + <a href="/zh-CN/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/zh-CN/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd> + <code>.well-known/browserid</code> 文件的结构和用途概述，这个文件被 IdPs 用于通知它们支持这个协议。</dd> + </dl> + </td> + <td> + <h2 id="Persona_项目">Persona 项目</h2> + <dl> + <dt> + <a href="/zh-CN/Persona/Glossary" title="navigator.id">术语表</a></dt> + <dd> + BrowserID 和 Persona 定义的术语。</dd> + <dt> + <a href="/zh-CN/Persona/FAQ" title="zh-CN/BrowserID/FAQ">FAQ</a></dt> + <dd> + 常见问题的回答。</dd> + <dt> + <a href="/zh-CN/Persona/Protocol_Overview" title="BrowserID/Protocol overview">协议概述</a></dt> + <dd> + 底层 BrowserID 协议的中等技术概述。</dd> + <dt> + <a href="/zh-CN/persona/Crypto" title="MDN">加密</a></dt> + <dd> + 一瞥 Persona 和 BrowserID 背后的密码学概念。</dd> + <dt> + <a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">协议规范</a></dt> + <dd> + 这里是深层技术细节。</dd> + <dt> + <a href="/Persona/Bootstrapping_Persona" title="zh-CN/BrowserID/Bootstrapping_BrowserID">Persona 网站</a></dt> + <dd> + 要让 Persona 运作， 我们在<a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> 建立了三个服务：一个备用身份提供者、一个可迁移的 {{ domxref("navigator.id") }} API 实现以及一个身份断言验证服务。</dd> + <dt> + <a href="https://github.com/mozilla/browserid">Persona 源码</a></dt> + <dd> + Persona 网站背后的源码托管在 GitHub 的一个仓库上。欢迎提交补丁！</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/zh-cn/orphaned/tools/add-ons/index.html b/files/zh-cn/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..7c50cee424 --- /dev/null +++ b/files/zh-cn/orphaned/tools/add-ons/index.html @@ -0,0 +1,6 @@ +--- +title: 组件 +slug: Tools/Add-ons +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div><p>开发者工具没有内置到Firefox里面，而是作为组件的方式存在。</p> diff --git a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html new file mode 100644 index 0000000000..f553738351 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html @@ -0,0 +1,7 @@ +--- +title: Directory failure 目录失效 +slug: Web/API/AnalyserNode/fft +--- +<p>目录失效</p> + +<p dir="ltr" id="tw-target-text">Directory failure</p> diff --git a/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html b/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html new file mode 100644 index 0000000000..2b7022c1ce --- /dev/null +++ b/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html @@ -0,0 +1,95 @@ +--- +title: AudioContext.mozAudioChannelType +slug: Web/API/AudioContext/mozAudioChannelType +translation_of: Web/API/AudioContext/mozAudioChannelType +--- +<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p> + +<p>{{domxref("AudioContext")}}的<code>mozAudioChannelType</code>属性是只读的，在Firefox OS设备上可以用来设置音频在audio context中播放的声道。</p> + +<p>该属性是<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>中定义的非标准属性，更多信息请查看<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var myAudioChannelType = audioCtx.mozAudioChannelType; +</pre> + +<p>只能通过下面的构造器来设置AudioContext中音频的声道：</p> + +<pre class="brush: js">var audioCtx = new AudioContext('ringer');</pre> + +<h3 id="返回值">返回值</h3> + +<p>A {{domxref("DOMString")}} value.</p> + +<h2 id="例子">例子</h2> + +<p>TBD</p> + +<h2 id="规范">规范</h2> + +<p>AudioChannels API目前没有官方规范，实现细节请查看<a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>、WebIDL等等</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>General support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>General support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li> + <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li> + <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li> + <li>{{domxref("AudioContext")}}</li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html b/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html new file mode 100644 index 0000000000..eb82534aed --- /dev/null +++ b/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html @@ -0,0 +1,163 @@ +--- +title: AudioNode.connect(AudioParam) +slug: Web/API/AudioNode/connect(AudioParam) +translation_of: Web/API/AudioNode/connect(AudioParam) +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>允许我们将当前节点的一个输出连接到音频参数的一个输入，并允许通过音频信号控制参数。<br> + 使AudioNode输出连接到多个AudioParam，并将多个AudioNode输出连接到单个 AudioParam，同时多次调用connect()。因此支持Fan-in and fan-out。<br> + AudioParam可以从连接到它的任何AudioNode输出获取渲染的音频数据，并通过下混合将其转换为单声道（如果本身不是单声道的话）。然后，它将其他这样的输出和固定参数混合（ AudioParam的值通常没有任何连接），包括为参数调度的任何时间的变化。<br> + 因此，可以通过将AudioParam的值设置为中心频率来选择AudioParam将要更改的范围，并使用音频源和AudioParam之间的GainNode来调整AudioParam更改的范围。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js;highlight[11]">var lfo = audioCtx.createOscillator(); +lfo.frequency.value = 2.0; // Hz, two times per second + +var lfoGain = audioCtx.createGain(); +lfoGain.gain.value = 0.5; + +// this is the parameter that is going to be modulated +var gain = audioCtx.createGain(); +gain.gain.value = 0.5; + +// Oscillators go from -1 to 1 +// Make it go from -0.5 to +0.5 by connecting it to a GainNode with a gain value of 0.5 +lfo.connect(lfoGain); + +// because the value of the gain.gain AudioParam is originaly 0.5, the value is added, and it will go from 0.0 to 1.0 +lfoGain.connect(gain.gain); + +lfo.connect(gain.gain);</pre> + +<div class="note"> +<p><strong>Note</strong>: There can only be one connection between an output from one specific <code>AudioNode</code> and an {{ domxref("AudioParam") }}. Multiple connections to the same termini are equivalent to a single such connection (the duplicates are ignored).</p> +</div> + +<h3 id="Description" name="Description">Returns</h3> + +<p>Void.</p> + +<h2 id="Examples" name="Examples">Example</h2> + +<p>In this example, we will be altering the gain value of a {{domxref("GainNode")}} using an {{domxref("OscillatorNode")}} with a slow frequency value. This technique is know as an <em>LFO</em>-controlled parameter.</p> + +<pre class="brush: js;highlight[8,9]">var AudioContext = window.AudioContext || window.webkitAudioContext; + +var audioCtx = new AudioContext(); + +// create an normal oscillator to make sound +var oscillator = audioCtx.createOscillator(); + +// create a second oscillator that will be used as an LFO (Low-frequency +// oscillator), and will control a parameter +var lfo = audioCtx.createOscillator(); + +// set the frequency of the second oscillator to a low number +lfo.frequency.value = 2.0; // 2Hz: two oscillations par second + +// create a gain whose gain AudioParam will be controlled by the LFO +var gain = audioCtx.createGain(); + +// connect the LFO to the gain AudioParam. This means the value of the LFO +// will not produce any audio, but will change the value of the gain instead +lfo.connect(gain.gain); + +// connect the oscillator that will produce audio to the gain +oscillator.connect(gain); + +// connect the gain to the destination so we hear sound +gain.connect(audioCtx.destination); + +// start the oscillator that will produce audio +oscillator.start(); + +// start the oscillator that will modify the gain value +lfo.start();</pre> + +<h2 id="Parameters" name="Parameters">Parameters</h2> + +<dl> + <dt>Destination</dt> + <dd>The {{ domxref("AudioParam") }} you are connecting to.</dd> + <dt>Output (optional)</dt> + <dd>An index describing which output of the current <code>AudioNode</code> you want to connect to the {{ domxref("AudioParam") }}. The index numbers are defined according to the number of output channels (see <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_channels">Audio channels</a>.) If this parameter is out-of-bound, an <code>INDEX_SIZE_ERR</code> exception is thrown.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#widl-AudioNode-connect-void-AudioParam-destination-unsigned-long-output', 'connect(AudioParam)')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><code>connect</code><code>(AudioParam)</code></td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>connect</code><code>(AudioParam)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html new file mode 100644 index 0000000000..450751cefa --- /dev/null +++ b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html @@ -0,0 +1,218 @@ +--- +title: 简单的cookie框架 +slug: Web/API/Document/cookie/Simple_document.cookie_framework +tags: + - Cookies + - cookie +translation_of: Web/API/Document/cookie/Simple_document.cookie_framework +--- +<h2 id="一个小型框架_一个完整的cookies读写器对Unicode充分支持">一个小型框架: 一个完整的cookies读/写器对Unicode充分支持</h2> + +<p>由于Cookie只是特殊格式的字符串，因此有时很难管理它们。 以下库旨在通过定义一个与一个<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#Storage"><code>Storage</code> </a>对象部分一致的对象(<code>docCookies</code>)来抽象对<code>document.cookie</code>的访问。</p> + +<p> 以下代码也<a href="https://github.com/madmurphy/cookies.js">在GitHub上获取</a>。它是基于GNU General Public License v3.0 许可 (<a href="https://github.com/madmurphy/cookies.js/blob/master/LICENSE">许可链接</a>)</p> + +<h5 id="库">库</h5> + +<pre class="brush: js">/*\ +|*| +|*| :: cookies.js :: +|*| +|*| A complete cookies reader/writer framework with full unicode support. +|*| +|*| Revision #1 - September 4, 2014 +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie +|*| https://developer.mozilla.org/User:fusionchess +|*| https://github.com/madmurphy/cookies.js +|*| +|*| This framework is released under the GNU Public License, version 3 or later. +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| +|*| Syntaxes: +|*| +|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) +|*| * docCookies.getItem(name) +|*| * docCookies.removeItem(name[, path[, domain]]) +|*| * docCookies.hasItem(name) +|*| * docCookies.keys() +|*| +\*/ + +var docCookies = { + getItem: function (sKey) { + if (!sKey) { return null; } + return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; + }, + setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { + if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } + var sExpires = ""; + if (vEnd) { + switch (vEnd.constructor) { + case Number: + sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; + break; + case String: + sExpires = "; expires=" + vEnd; + break; + case Date: + sExpires = "; expires=" + vEnd.toUTCString(); + break; + } + } + document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); + return true; + }, + removeItem: function (sKey, sPath, sDomain) { + if (!this.hasItem(sKey)) { return false; } + document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); + return true; + }, + hasItem: function (sKey) { + if (!sKey) { return false; } + return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + }, + keys: function () { + var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); + for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } + return aKeys; + } +};</pre> + +<div class="note"><strong>Note:</strong> 对于<em>never-expire-cookies 我们使用一个随意的遥远日期</em><code>Fri, 31 Dec 9999 23:59:59 GMT</code>. 处于任何原因，你担心这样一个日期，使用 <em><a href="http://en.wikipedia.org/wiki/Year_2038_problem">惯例世界末日</a></em>Tue, 19 Jan 2038 03:14:07 GMT - 这是自1970年1月1日00:00:00 UTC以来使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators#Signed_32-bit_integers">有符号的32位二进制整数</a>表示的最大秒数。(i.e., <code>01111111111111111111111111111111</code> which is <code>new Date(0x7fffffff * 1e3)</code>).</div> + +<h3 id="cookie的写入">cookie的写入</h3> + +<h5 id="语法">语法</h5> + +<pre class="syntaxbox"><code>docCookies.setItem(<em>name</em>, <em>value</em>[, <em>end</em>[, <em>path</em>[, <em>domain</em>[, <em>secure</em>]]]])</code></pre> + +<h5 id="Description">Description</h5> + +<p>新增/重写一个 cookie.</p> + +<h5 id="参数">参数</h5> + +<dl> + <dt><code>name</code></dt> + <dd>新增/重写一个 cookie的 <a href="#new-cookie_syntax">名字</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符传</code></a>).</dd> + <dt><code>value</code></dt> + <dd>cookie的<a href="#new-cookie_syntax">值</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符串</code></a>).</dd> + <dt><code>end</code> <font face="Helvetica, arial, sans-serif"><span style="background-color: #eeeeee; font-size: 14px; font-weight: 400;">可选</span></font></dt> + <dd><code><a href="#new-cookie_max-age">max-age</a>（最大有效时间）单位秒</code> (e.g. <code>31536e3</code> 表示一年, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code> </a> 表示永不过期的cookie), 或者以<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a></code> 格式或者<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> 的<a href="#new-cookie_expires"><code>expires</code></a> date（过期时间）; 如果没有，指定的cookie将在会话结束时到期 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number"><code>number</code></a> – finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> – <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). + <div class="note" id="max-age_note" style="margin-top: 1em;"> + <p><strong>Note:</strong> 尽管 <a href="https://tools.ietf.org/html/rfc6265#section-5.2.2">officially defined in rfc6265</a>, <code>max-age</code> 在 Internet Explorer, Edg和一些移动端浏览器上不兼容. 因此，将数字传递给<code>end</code>参数可能无法按预期工作. 可能的解决方案可能是将相对时间转换为绝对时间。例如，以下代码：</p> + + <pre class="brush: js">docCookies.setItem("mycookie", "Hello world!", 150);</pre> + + <p>可以使用绝对日期重写，如下例所示：</p> + + <pre class="brush: js"> maxAgeToGMT (nMaxAge) { + return nMaxAge === Infinity ? "Fri, 31 Dec 9999 23:59:59 GMT" : (new Date(nMaxAge * 1e3 + Date.now())).toUTCString(); +} + +docCookies.setItem("mycookie", "Hello world!", maxAgeToGMT(150));</pre> + + <p>在上面的代码中，函数<code> maxAgeToGMT() </code>用于从相对时间（即，从“age”）创建<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a>.</code></p> + </div> + </dd> + <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> + <dd>可访问此cookie的路径. 例如，“/”，“/ mydir”;如果未指定，则默认为当前文档位置的当前路径(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> + <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> + <dd>可访问此cookie的域名. 例如，<code>“example.com”</code>，<code>“.example.com”</code>（包括所有子域）或<code>“subdomain.example.com”</code>; 如果未指定，则默认为当前文档位置的主机端口(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> + <dt><code>secure</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> + <dd>cookie将仅通过https安全协议传输 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean"><code>boolean</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> +</dl> + +<h3 id="获取一个cookie">获取一个cookie</h3> + +<h5 id="语法_2">语法</h5> + +<pre class="syntaxbox"><code>docCookies.getItem(<em>name</em>)</code></pre> + +<h5 id="描述">描述</h5> + +<p>读一个cookie。如果cookie不存在，则返回null值。Parameters</p> + +<h5 id="参数_2">参数</h5> + +<dl> + <dt><code>name</code></dt> + <dd>读取cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> +</dl> + +<h3 id="移除一个cookie">移除一个cookie</h3> + +<h5 id="语法_3">语法</h5> + +<pre class="syntaxbox"><code>docCookies.removeItem(<em>name</em>[, <em>path</em>[, <em>domain</em>]])</code></pre> + +<h5 id="描述_2">描述</h5> + +<p>删除一个cookie.</p> + +<h5 id="参数_3">参数</h5> + +<dl> + <dt><code>name</code></dt> + <dd>待移除cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> + <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> + <dd>例如，"<code>/"</code>，"<code>/ </code><code>mydir"</code>;如果未指定，则默认为当前文档位置的当前路径 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> + <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> + <dd>例如, <code>"example.com"</code>, 或者 <code>"subdomain.example.com"</code>; 如果未指定，则默认为当前文档位置的主机端口（字符串或null），但不包括子域。 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>), 但不包括子域名。与早期的规范相反，域名中的前置的点被忽略。如果指定了域，则始终包含子域。 + <div class="note"><strong>Note:</strong> 要删除跨子域的cookie，您需要想<code>setItem()样</code>在<code>removeItem()</code>中指定domain属性。</div> + </dd> +</dl> + +<h3 id="检查一个cookie（是否存在）">检查一个cookie（是否存在）</h3> + +<h5 id="语法_4">语法</h5> + +<pre class="syntaxbox"><code>docCookies.hasItem(<em>name</em>)</code></pre> + +<h5 id="描述_3">描述</h5> + +<p>检查当前位置是否存在cookie。</p> + +<h5 id="参数_4">参数</h5> + +<dl> + <dt><code>name</code></dt> + <dd>待检查cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> +</dl> + +<h3 id="获取所有cookie列表">获取所有cookie列表</h3> + +<h5 id="Syntax">Syntax</h5> + +<pre class="syntaxbox"><code>docCookies.keys()</code></pre> + +<h5 id="Description_2">Description</h5> + +<p>返回此位置的所有可读cookie的数组。</p> + +<h3 id="Example_usage">Example usage:</h3> + +<pre class="brush: js">docCookies.setItem("test0", "Hello world!"); +docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); +docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); +docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); +docCookies.setItem("test4", "Hello world!", "Wed, 19 Feb 2127 01:04:55 GMT"); +docCookies.setItem("test5", "Hello world!", "Fri, 20 Aug 88354 14:07:15 GMT", "/home"); +docCookies.setItem("test6", "Hello world!", 150); +docCookies.setItem("test7", "Hello world!", 245, "/content"); +docCookies.setItem("test8", "Hello world!", null, null, "example.com"); +docCookies.setItem("test9", "Hello world!", null, null, null, true); +docCookies.setItem("test1;=", "Safe character test;=", Infinity); + +alert(docCookies.keys().join("\n")); +alert(docCookies.getItem("test1")); +alert(docCookies.getItem("test5")); +docCookies.removeItem("test1"); +docCookies.removeItem("test5", "/home"); +alert(docCookies.getItem("test1")); +alert(docCookies.getItem("test5")); +alert(docCookies.getItem("unexistingCookie")); +alert(docCookies.getItem()); +alert(docCookies.getItem("test1;=")); +</pre> diff --git a/files/zh-cn/orphaned/web/api/entity/index.html b/files/zh-cn/orphaned/web/api/entity/index.html new file mode 100644 index 0000000000..2e05365217 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/entity/index.html @@ -0,0 +1,52 @@ +--- +title: Entity +slug: Web/API/Entity +translation_of: Web/API/Entity +--- +<p>{{APIRef("DOM")}} {{draft}} {{obsolete_header}}</p> + +<p>对DTD实体的只读引用. 也继承 {{domxref("Node")}} 的方法和属性。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> + <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> + <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> + <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> + <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> + <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt> + <dd>Is a {{domxref("DOMString")}}.</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td><code>inputEncoding</code>, <code>xmlEncoding</code>, and <code>xmlVersion</code> were added</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/orphaned/web/api/fetchobserver/index.html b/files/zh-cn/orphaned/web/api/fetchobserver/index.html new file mode 100644 index 0000000000..9bd7699388 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/fetchobserver/index.html @@ -0,0 +1,145 @@ +--- +title: FetchObserver +slug: Web/API/FetchObserver +translation_of: Web/API/FetchObserver +--- +<div>{{draft}}{{APIRef("Fetch API")}}{{SeeCompatTable}}</div> + +<p><font><font>在</font></font><strong><code>FetchObserver</code></strong><font><font>接口</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><font><font>提取API</font></font></a><font><font>表示观察者对象，它允许您检索关于为获取请求的状态信息。</font></font></p> + +<h2 id="Properties">Properties</h2> + +<p><em><font><font>FetchObserver接口从其父接口继承属性</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" title="EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们提供监听器。"><code>EventTarget</code></a><font><font>。</font></font></em></p> + +<dl> + <dt>{{domxref("FetchObserver.state")}} {{readonlyInline}}</dt> + <dd>Returns a <code>FetchState</code> enum value indicating the current state of the fetch request.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("FetchObserver.onstatechange")}}</dt> + <dd>Invoked when a {{event("statechange_(cancellable_fetch)", "statechange")}} event fires, i.e. when the state of the fetch request changes.</dd> + <dt>{{domxref("FetchObserver.onrequestprogress")}}</dt> + <dd>Invoked when a {{event("requestprogress")}} event fires, i.e. when the request progresses.</dd> + <dt>{{domxref("FetchObserver.onresponseprogress")}}</dt> + <dd>Invoked when a {{event("responseprogress")}} event fires, i.e. when the download of the response progresses.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>The FetchSignal interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> + +<h2 id="Examples">Examples</h2> + +<p>In the following snippet, we create a new {{domxref("FetchController")}} object, get its <code>signal</code>, and then give the signal to the <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> via the signal parameter of its <code>init</code> object so the controller can control it. Later on we specify an event listener on a cancel button so that when the button is clicked, we abort the fetch request using {{domxref("FetchController.abort()")}}.</p> + +<p>We also specify an observe property inside the fetch request <code>init</code> object — this contains a {{domxref("ObserverCallback")}} object, the sole purpose of which is to provide a callback function that runs when the fetch request runs. This returns a {{domxref("FetchObserver")}} object that can be used to retrieve information concerning the status of a fetch request.</p> + +<p>Here we use {{domxref("FetchController.responseprogress")}} and {{domxref("FetchController.onstatechange")}} event handlers to respectively fill up a progress bar as more of the reponse downloads, and to determine when the download has completed and display a message to let the user know.</p> + +<p><strong>Note that these event handlers are not yet supported anywhere.</strong></p> + +<pre class="brush: js">var controller = new FetchController(); +var signal = controller.signal; + +downloadBtn.addEventListener('click', function() { + fetch(url, { + signal, + observe(observer) { + observer.onresponseprogress = function(e) { + progress.max = e.total; + progress.value = e.loaded; + } + + observer.onstatechange = function() { + if (observer.state = 'complete') { + reports.textContent = 'Download complete'; + } + } + } + }).then( ... ) // do something with the response +}); + +cancelBtn.addEventListener('click', function() { + controller.abort(); +});</pre> + +<p>You can find a work-in-progress demo showing usage of <code>FetchObserver</code> on GitHub (see the <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-signal-controller-observer">source code</a> and the <a href="https://mdn.github.io/fetch-examples/fetch-signal-controller-observer/">live example</a>).</p> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of a specification yet.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/msselection/index.html b/files/zh-cn/orphaned/web/api/msselection/index.html new file mode 100644 index 0000000000..5760848324 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/msselection/index.html @@ -0,0 +1,103 @@ +--- +title: MSSelection +slug: Web/API/MSSelection +tags: + - API + - DHTML + - DOM + - MSSelection +--- +<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> + +<div class="blockIndicator warning"> +<p><strong>IE Only</strong></p> +该属性是IE专有的。尽管IE很好地支持它，但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案，而不是在跨浏览器的脚本中完全依赖它。</div> + +<p><code>MSSelection</code> 对象表示用户选择的文本范围或插入光标(Caret)的当前位置，类似于标准定义的 {{domxref("Selection")}} 接口。它主要通过配套的 {{domxref("TextRange")}} 接口进行操作。</p> + +<p>该接口从IE4开始实现，但直到IE9时添加了对标准 <code>Selection</code> 接口的支持时，为了区分它才被命名为 <code>MSSelection</code>。可供修改和使用的 <code>MSSelection</code> 可通过 {{domxref("document.selection")}} 属性获取，但是这在IE11被彻底移除。</p> + +<p>注意，在非IE浏览器不支持该接口，可使用替代的标准 {{domxref("Selection")}} 接口。</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt>{{domxref("MSSelection.type")}}{{ReadOnlyInline}}</dt> + <dd> + <p>返回选中区域的类型。</p> + </dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>{{domxref("MSSelection.empty()")}}</dt> + <dd>取消当前选中区，将选中区类型设置为 <code>none</code>。</dd> + <dt>{{domxref("MSSelection.clear()")}}</dt> + <dd>清除选中区的内容，将选中区类型设置为 <code>none</code>。注意，该方法可以删除不可编辑的元素。</dd> + <dt>{{domxref("MSSelection.createRange()")}}</dt> + <dd>在当前选中区上创建并返回一个 <code>TextRange</code>，其内容和当前选区一致。返回的区域在修改时不会直接作用到选区上，除非使用 {{domxref("TextRange.select()")}} 方法。</dd> + <dt>{{domxref("MSSelection.createRangeCollection()")}}</dt> + <dd>返回一个 {{domxref("TextRangeCollection")}}，该集合包含选区中所有区域对应的 <code>TextRange</code>。注意该对象不是一个 {{jsxref("Array")}}，且IE中的Web网页不支持多个选区，因此它总是返回单个对象的集合。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>以下示例在<strong>IE10以下</strong>有效。该示例通过 <code>document.selection</code> 获取 <code>MSSelection</code> 对象，并清空选区中的内容。</p> + +<pre class="brush:js">var sel = document.selection; +sel.clear();</pre> + +<h2 id="开发者笔记">开发者笔记</h2> + +<h3 id="使用_TextRange_操作选中区域">使用 TextRange 操作选中区域</h3> + +<div class="blockIndicator warning"> +<p>仅在<strong>IE9以下</strong>有效。在浏览器允许的情况下，应优先使用 {{domxref("Selection")}} 接口。</p> +</div> + +<p>{{domxref("document.selection")}} 属性返回一个 <code>MSSelection</code> 对象，<code>selection.createRange()</code> 方法创建一个和当前选中区域一致的 {{domxref("TextRange")}} 对象。</p> + +<pre class="brush:js">var sel = document.selection; +var range = sel.createRange(); +alert(range.text); +// 输出被选区域的纯文本</pre> + +<p>注意，<code>createRange</code> 方法并不创建引用，如果希望通过该方法修改选中区域，则需要调用 <code>TextRange.select</code> 方法。</p> + +<h3 id="selection_兼容性"><code>selection</code> 兼容性</h3> + +<p><code>document.selection</code> 属性返回当前文档的 <code>MSSelection</code> 对象。标准规定一个窗口/文档可能有多个不相邻选区，但只有Firefox实现通过 <kbd>Ctrl</kbd> 选中多个区域；IE中一般也只允许文档只存在一个被选中的 <code>TextRange</code>。</p> + +<p>然而，在其它浏览器中，<code>document</code> 并不存在一个所谓 <code>selection</code> 属性——它们通过标准 <a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 实现对选区的操作，也就是通过 <code>window.getSelection()</code> 方法获取 {{domxref("Selection")}} 对象，并使用标准的 {{domxref("Range")}} 对象对文本片段作出处理。IE11及之后的版本也放弃了 <code>document.selection</code> 对象而转为使用标准接口（尽管 <code>TextRange</code> 一直保留，但大多数情况下它已失去作用）。</p> + +<p>这很容易引起迷惑。通常，如果脚本只要求兼容最新的浏览器，那么标准的接口是最佳的选择；但通常目前的网站仍希望兼容IE8或其以下的浏览器，因此，最好的做法是同时处理两者，也就是在不支持标准接口时尝试使用 <code>MSSelection</code> 方式，但不要把该方式作为唯一的选择。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="width: 15px;"></th> + <th scope="col">IE</th> + <th scope="col">其它浏览器</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="width: 15%;">{{domxref("MSSelection")}} {{non-standard_inline()}}</th> + <td>≤10(IE9后应使用标准API)</td> + <td style="width: 60%;">不支持（详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>）</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">扩展</h2> + +<ul> + <li>{{domxref("TextRange")}} 接口</li> + <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> + <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/namelist/index.html b/files/zh-cn/orphaned/web/api/namelist/index.html new file mode 100644 index 0000000000..8506bc5266 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/namelist/index.html @@ -0,0 +1,48 @@ +--- +title: NameList +slug: Web/API/NameList +translation_of: Web/API/NameList +--- +<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> + +<div class="note"> +<p><strong>Note:</strong> 虽然这个API曾经被用在 Gecko, 事实上它也是没有办法被创建的. NameList从 {{ Gecko("10.0") }}开始已经被废弃了。</p> +</div> + +<p>提供一个有序的键值对集合. 它可以通过下标0访问. 在DOM规范中没有指定这个集合是如何被应用的.</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("NameList.length")}}{{readonlyInline}}</dt> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("NameList.contains()")}}</dt> + <dd>返回{{jsxref("Boolean")}}.</dd> + <dt>{{domxref("NameList.containsNS()")}}</dt> + <dd>返回 {{jsxref("Boolean")}}</dd> + <dt>{{domxref("NameList.getName()")}}</dt> + <dd>返回{{domxref("DOMString")}}</dd> + <dt>{{domxref("NameList.getNamespaceURI()")}}</dt> + <dd>返回 {{domxref("DOMString")}}</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html new file mode 100644 index 0000000000..3f9c09d768 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html @@ -0,0 +1,38 @@ +--- +title: 测试滕盖 +slug: Web/API/NavigatorPlugins/测试滕盖 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>Returns a {{domxref("MimeTypeArray")}} object, which contains a list of {{domxref("MimeType")}} objects representing the MIME types recognized by the browser.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes; +</pre> + +<p><code>mimeTypes</code> is a <code>MimeTypeArray</code> object which has a <code>length</code> property as well as <code>item(index)</code> and <code>namedItem(name)</code> methods.</p> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">function isJavaPresent() { + return 'application/x-java-applet' in navigator.mimeTypes; +} + +function getJavaPluginDescription() { + var mimetype = navigator.mimeTypes['application/x-java-applet']; + if (mimetype === undefined) { + // no Java plugin present + return undefined; + } + return mimetype.enabledPlugin.description; +} +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p><em>This is not part of any specification.</em></p> diff --git a/files/zh-cn/orphaned/web/api/notification/sound/index.html b/files/zh-cn/orphaned/web/api/notification/sound/index.html new file mode 100644 index 0000000000..ffe90b4955 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/notification/sound/index.html @@ -0,0 +1,129 @@ +--- +title: Notification.sound +slug: Web/API/notification/sound +translation_of: Web/API/notification/sound +--- +<p>{{APIRef("Web Notifications")}}</p> + +<div class="note"> +<p><strong>Note</strong>: 这个属性并没有完全被一些浏览器支持.</p> +</div> + +<p> <code>sound</code> 是 {{domxref("Notification")}}的只读属性，interface specifies the URL of an audio file to be played when the notification fires. This is specified in the <code>sound</code> option of the {{domxref("Notification.Notification","Notification()")}} constructor.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var sound = Notification.sound; +</pre> + +<h3 id="Return_Value" name="Return_Value">Value</h3> + +<p>A {{domxref("USVString")}}.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following snippet is intended to fire a sound along with the notification; a simple <code>options</code> object is created, then the notification is fired using the <code>Notification()</code> constructor.</p> + +<pre class="brush: js">var options = { + body: 'Do you like my body?', + sound: 'audio/alert.mp3' +} + +var n = new Notification('Test notification',options); + +n.sound // should return 'audio/alert.mp3'</pre> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Notifications','#dom-notification-sound','sound')}}</td> + <td>{{Spec2('Web Notifications')}}</td> + <td>Living standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{ CompatNo() }}</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{ CompatNo() }}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_OS_notes">Firefox OS notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> + +<h3 id="Chrome_notes">Chrome notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> + +<h3 id="Safari_notes">Safari notes</h3> + +<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/textrange/text/index.html b/files/zh-cn/orphaned/web/api/textrange/text/index.html new file mode 100644 index 0000000000..ae485dd58e --- /dev/null +++ b/files/zh-cn/orphaned/web/api/textrange/text/index.html @@ -0,0 +1,72 @@ +--- +title: TextRange.text +slug: Web/API/TextRange/text +tags: + - API + - DHTML + - DOM + - TextRange +--- +<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> + +<div class="blockIndicator warning"> +<p><strong>IE Only</strong></p> +该属性是IE专有的。尽管IE很好地支持它，但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案，而不是在跨浏览器的脚本中完全依赖它。</div> + +<p>{{domxref("TextRange")}} 接口中的属性 <strong><code>text</code></strong> 用于以 {{domxref("DOMString")}} 形式获取或设置区域内的纯文本内容。该更改直接作用到 DOM 树中，并清除区域内原有的非纯文本元素。注意，该属性忽略所有格式数据，因此若要获取选区中的HTML内容，请使用 {{domxref("TextRange.htmlText")}} 属性。</p> + +<h2 id="语法">语法</h2> + +<pre>var tS<em>tring</em> = <em>textRange</em>.text; +<em>textRange</em>.text = oString; +</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("DOMString")}}。</p> + +<h2 id="示例">示例</h2> + +<p>以下示例在IE9以下有效。该示例通过 <code>document.selection</code> 获取 <code>TextRange</code>，并过滤选区中的富文本元素。IE9以上支持标准的替代方案 {{domxref("Range")}}。</p> + +<pre class="brush:js">var range = document.selection.createRange(); +range.htmlText = range.text; +// 将富文本内容设置为纯文本内容，则区域也就变为纯文本。 +</pre> + +<h2 id="开发者笔记">开发者笔记</h2> + +<h3 id="关于_text_属性">关于 text 属性</h3> + +<p>注意，当通过该属性操作或获取时，不会得到包含非纯文本的信息；如果通过该属性设置，则区域内的元素将被删除，之后通常会变为一个包含指定内容的文本节点。因此，即使通过这个属性操作纯文本内容，结果也将剔除原先的所有格式数据。</p> + +<p>如果希望脚本的功能明确可读，最好的办法是不要同时使用该属性和 <code>htmlText</code> 属性设置数据。另外，该属性不是标准的，它从IE4开始在IE中实现，但不在其它浏览器的规范中。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="width: 15px;"></th> + <th scope="col">IE</th> + <th scope="col">其它浏览器</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="width: 15%;">{{domxref("TextRange.text")}} {{non-standard_inline()}}</th> + <td>支持(IE9后应使用标准API)</td> + <td style="width: 60%;">不支持（详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>）</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">扩展</h2> + +<ul> + <li>{{domxref("TextRange")}} 作为该属性的实现接口</li> + <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> + <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> +</ul> diff --git a/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html new file mode 100644 index 0000000000..3969f9c5ea --- /dev/null +++ b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html @@ -0,0 +1,270 @@ +--- +title: WebSocket Server Vb.NET +slug: Web/API/WebSockets_API/WebSocket_Server_Vb.NET +translation_of: Web/API/WebSockets_API/WebSocket_Server_Vb.NET +--- +<p>{{gecko_minversion_header("2")}}{{draft}}</p> + +<p>下面的示例没有优化。没有使用 .NET 4.5 Websocket。<br> + <br> + 当前版本：</p> + +<ul> + <li>包含了一个System.Net.Sockets.TcpClient类的泛型集合</li> + <li>特性 - 自定义事件和委托处理程序</li> + <li>特性 - 线程化和实现Timers.Timer</li> + <li>演示如何使用网络流将帧写回客户机(opCode 0001)</li> + <li>是否打算作为本教程和其他贡献者的起点</li> +</ul> + +<p> </p> + +<pre>Imports System.Net.Sockets +Imports System.Net +Imports System +Imports System.Text +Imports System.Text.RegularExpressions + + +Namespace TypeDef.WebSocket + + Public Class Client + Dim _TcpClient As System.Net.Sockets.TcpClient + + Public Delegate Sub OnClientDisconnectDelegateHandler() + Public Event onClientDisconnect As OnClientDisconnectDelegateHandler + + + Sub New(ByVal tcpClient As System.Net.Sockets.TcpClient) + Me._TcpClient = tcpClient + End Sub + + + Function isConnected() As Boolean + Return Me._TcpClient.Connected + End Function + + + Sub HandShake() + Dim stream As NetworkStream = Me._TcpClient.GetStream() + Dim bytes As Byte() + Dim data As String + + While Me._TcpClient.Connected + While (stream.DataAvailable) + ReDim bytes(Me._TcpClient.Client.Available) + stream.Read(bytes, 0, bytes.Length) + data = System.Text.Encoding.UTF8.GetString(bytes) + + If (New System.Text.RegularExpressions.Regex("^GET").IsMatch(data)) Then + + Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" & Environment.NewLine & "Connection: Upgrade" & Environment.NewLine & "Upgrade: websocket" & Environment.NewLine & "Sec-WebSocket-Accept: " & Convert.ToBase64String(System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(New Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups(1).Value.Trim() & "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))) & Environment.NewLine & Environment.NewLine) + + stream.Write(response, 0, response.Length) + Exit Sub + Else + 'We're going to disconnect the client here, because he's not handshacking properly (or at least to the scope of this code sample) + Me._TcpClient.Close() 'The next While Me._TcpClient.Connected Loop Check should fail.. and raise the onClientDisconnect Event Thereafter + End If + End While + End While + RaiseEvent onClientDisconnect() + End Sub + + + Sub CheckForDataAvailability() + If (Me._TcpClient.GetStream().DataAvailable) Then + Dim stream As NetworkStream = Me._TcpClient.GetStream() + Dim frameCount = 2 + Dim bytes As Byte() + Dim data As String + ReDim bytes(Me._TcpClient.Client.Available) + stream.Read(bytes, 0, bytes.Length) 'Read the stream, don't close it.. + + Try + Dim length As UInteger = bytes(1) - 128 'this should obviously be a byte (unsigned 8bit value) + + If length > -1 Then + If length = 126 Then + length = 4 + ElseIf length = 127 Then + length = 10 + End If + End If + + 'the following is very inefficient and likely unnecessary.. + 'the main purpose is to just get the lower 4 bits of byte(0) - which is the OPCODE + + Dim value As Integer = bytes(0) + Dim bitArray As BitArray = New BitArray(8) + + For c As Integer = 0 To 7 Step 1 + If value - (2 ^ (7 - c)) >= 0 Then + bitArray.Item(c) = True + value -= (2 ^ (7 - c)) + Else + bitArray.Item(c) = False + End If + Next + + + Dim FRRR_OPCODE As String = "" + + For Each bit As Boolean In bitArray + If bit Then + FRRR_OPCODE &= "1" + Else + FRRR_OPCODE &= "0" + End If + Next + + + Dim FIN As Integer = FRRR_OPCODE.Substring(0, 1) + Dim RSV1 As Integer = FRRR_OPCODE.Substring(1, 1) + Dim RSV2 As Integer = FRRR_OPCODE.Substring(2, 1) + Dim RSV3 As Integer = FRRR_OPCODE.Substring(3, 1) + Dim opCode As Integer = Convert.ToInt32(FRRR_OPCODE.Substring(4, 4), 2) + + + + Dim decoded(bytes.Length - (frameCount + 4)) As Byte + Dim key As Byte() = {bytes(frameCount), bytes(frameCount+1), bytes(frameCount+2), bytes(frameCount+3)} + + Dim j As Integer = 0 + For i As Integer = (frameCount + 4) To (bytes.Length - 2) Step 1 + decoded(j) = Convert.ToByte((bytes(i) Xor masks(j Mod 4))) + j += 1 + Next + + + + Select Case opCode + Case Is = 1 + 'Text Data Sent From Client + + data = System.Text.Encoding.UTF8.GetString(decoded) + 'handle this data + + Dim Payload As Byte() = System.Text.Encoding.UTF8.GetBytes("Text Recieved") + Dim FRRROPCODE As Byte() = Convert.ToByte("10000001", 2) 'FIN is set, and OPCODE is 1 or Text + Dim header as byte() = {FRRROPCODE, Convert.ToByte(Payload.Length)} + + + Dim ResponseData As Byte() + ReDim ResponseData((header.length + Payload.Length) - 1) + 'NOTEWORTHY: if you Redim ResponseData(header.length + Payload.Length).. you'll add a 0 value byte at the end of the response data.. + 'which tells the client that your next stream write will be a continuation frame.. + + Dim index as integer = 0 + + Buffer.BlockCopy(header, 0, ResponseData, index, header.length) + index += header.length + + Buffer.BlockCopy(payload, 0, ResponseData, index, payload.length) + index += payload.length + stream.Write(ResponseData, 0, ResponseData.Length) + Case Is = 2 + '// Binary Data Sent From Client + data = System.Text.Encoding.UTF8.GetString(decoded) + Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("Binary Recieved") + stream.Write(response, 0, response.Length) + Case Is = 9 '// Ping Sent From Client + Case Is = 10 '// Pong Sent From Client + Case Else '// Improper opCode.. disconnect the client + _TcpClient.Close() + RaiseEvent onClientDisconnect() + End Select + Catch ex As Exception + _TcpClient.Close() + RaiseEvent onClientDisconnect() + End Try + End If + End Sub + End Class + + + + Public Class Server + Inherits System.Net.Sockets.TcpListener + + Delegate Sub OnClientConnectDelegate(ByVal sender As Object, ByRef Client As WebSocket.Client) + Event OnClientConnect As OnClientConnectDelegate + + + Dim WithEvents PendingCheckTimer As Timers.Timer = New Timers.Timer(500) + Dim WithEvents ClientDataAvailableTimer As Timers.Timer = New Timers.Timer(50) + Property ClientCollection As List(Of WebSocket.Client) = New List(Of WebSocket.Client) + + + + Sub New(ByVal url As String, ByVal port As Integer) + MyBase.New(IPAddress.Parse(url), port) + End Sub + + + Sub startServer() + Me.Start() + PendingCheckTimer.Start() + End Sub + + + + Sub Client_Connected(ByVal sender As Object, ByRef client As WebSocket.Client) Handles Me.OnClientConnect + Me.ClientCollection.Add(client) + AddHandler client.onClientDisconnect, AddressOf Client_Disconnected + client.HandShake() + ClientDataAvailableTimer.Start() + End Sub + + + Sub Client_Disconnected() + + End Sub + + + Function isClientDisconnected(ByVal client As WebSocket.Client) As Boolean + isClientDisconnected = False + If Not client.isConnected Then + Return True + End If + End Function + + + Function isClientConnected(ByVal client As WebSocket.Client) As Boolean + isClientConnected = False + If client.isConnected Then + Return True + End If + End Function + + + Private Sub PendingCheckTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles PendingCheckTimer.Elapsed + If Pending() Then + RaiseEvent OnClientConnect(Me, New CORE.TypeDef.WebSocket.Client(Me.AcceptTcpClient())) + End If + End Sub + + + Private Sub ClientDataAvailableTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles ClientDataAvailableTimer.Elapsed + Me.ClientCollection.RemoveAll(AddressOf isClientDisconnected) + If Me.ClientCollection.Count < 1 Then ClientDataAvailableTimer.Stop() + + For Each Client As WebSocket.Client In Me.ClientCollection + Client.CheckForDataAvailability() + Next + End Sub + End Class +End Namespace + +Sub Main() 'Program Entry point + Dim thread As System.Threading.Thread = New System.Threading.Thread(AddressOf StartWebSocketServer) + 'Application.Add("WebSocketServerThread", thread) 'Global.asax - context.Application .. I left this part in for web application developers + thread.Start() +End Sub + +Public Shared WebSocketServer As TypeDef.WebSocket.Server +Public Shared Sub StartWebSocketServer() + WebSocketServer = New TypeDef.WebSocket.Server("127.0.0.1", 8000) + WebSocketServer.startServer() +End Sub +</pre> diff --git a/files/zh-cn/orphaned/web/api/window/getattention/index.html b/files/zh-cn/orphaned/web/api/window/getattention/index.html new file mode 100644 index 0000000000..f17531eb18 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/window/getattention/index.html @@ -0,0 +1,33 @@ +--- +title: Window.getAttention() +slug: Web/API/Window/getAttention +translation_of: Web/API/Window/getAttention +--- +<div>{{ ApiRef() }}</div> + +<p>The <code><strong>Window.getAttention()</strong></code> method attempts to get the user's attention. The mechanism for this happening depends on the specific operating system and window manager.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.getAttention(); +</pre> + +<h2 id="Notes">Notes</h2> + +<p>On Windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.</p> + +<p>On Linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately. This may be configurable as well.</p> + +<p>On Macintosh, the icon in the upper right corner of the desktop flashes.</p> + +<p>The function is disabled for web content. Neither Gecko nor Internet Explorer supports this feature now for web content. <code>getAttention</code> will still work when used from <a href="en/Chrome">chrome</a> in a Gecko application.</p> + +<h2 id="Specification">Specification</h2> + +<p>DOM Level 0. Not part of specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.getAttention")}}</p> diff --git a/files/zh-cn/orphaned/web/guide/css/css基础/index.html b/files/zh-cn/orphaned/web/guide/css/css基础/index.html new file mode 100644 index 0000000000..922f62c536 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/css/css基础/index.html @@ -0,0 +1,57 @@ +--- +title: CSS基础 +slug: Web/Guide/CSS/CSS基础 +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +--- +<p> </p> + +<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> + +<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> + +<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> + +<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3> + +<ul> + <li>一个文本编辑器</li> + <li>一个现代浏览器</li> + <li>编辑器与浏览器的基本使用方法</li> +</ul> + +<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p> + +<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> + +<h2 id="如何使用本指南">如何使用本指南</h2> + +<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p> + +<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3> + +<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> + +<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p> + +<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> + +<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3> + +<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> + +<ol> + <li><strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript">JavaScript</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> + <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> +</ol> + +<p> </p> diff --git a/files/zh-cn/orphaned/web/guide/html/html/index.html b/files/zh-cn/orphaned/web/guide/html/html/index.html new file mode 100644 index 0000000000..ee911ca9a1 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html/index.html @@ -0,0 +1,181 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML +tags: + - HTML + - HTML5 + - Web + - Web 开发 + - 帮助 + - 指南 + - 综述 +--- +<div class="callout-box"> +<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div> + +<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p> + +<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> +</div> + +<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念：</p> + +<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素，属性和行为，</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们，</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p> + +<p>从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。</p> + +<ul> + <li><em>语义</em>：能够让你更恰当地描述你的内容是什么。</li> + <li><em>连通性</em>：能够让你和服务器之间通过创新的新技术方法进行通信。</li> + <li><em>离线 & 存储</em>：能够让网页在客户端本地存储数据以及更高效地离线运行。</li> + <li><em>多媒体</em>：使 video 和 audio 成为了在所有 Web 中的一等公民。</li> + <li><em>2D/3D 绘图 & 效果</em>：提供了一个更加分化范围的呈现选择。</li> + <li><em>性能 & 集成</em>：提供了非常显著的性能优化和更有效的计算机硬件使用。</li> + <li><em>设备访问 Device Access</em>：能够处理各种输入和输出设备。</li> + <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧！</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的节段和外观概要</a></dt> + <dd>HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> + <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> + <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。</dd> + <dt><a href="/zh-CN/docs/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt> + <dd>看一下 HTML5 中对 web 表单的改进：约束确认 API，一些新的属性，{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。</dd> + <dt>新的语义元素</dt> + <dd>除了区段，媒体和表单元素之外，众多的新元素，像 {{HTMLElement("mark")}}， {{HTMLElement("figure")}}， {{HTMLElement("figcaption")}}， {{HTMLElement("data")}}， {{HTMLElement("time")}}， {{HTMLElement("output")}}， {{HTMLElement("progress")}}， 或者 {{HTMLElement("meter")}}，也增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> + <dt>{{HTMLElement("iframe")}} 的改进</dt> + <dd>使用 {{htmlattrxref("sandbox", "iframe")}}， {{htmlattrxref("seamless", "iframe")}}， 和 {{htmlattrxref("srcdoc", "iframe")}} 属性，作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> + <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> + <dd>允许直接嵌入数学公式。</dd> + <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> + <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> + <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> + <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器，已经被扩展了，并且现在精确地定义了在所有情况下使用的行为，甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> +</dl> + +<h2 id="连通性" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">连通性</h2> + +<dl> + <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> + <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> + <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> +</dl> + +<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> + +<dl> + <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源：应用程序缓存</a></dt> + <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> + <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> + <dd>Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。</dd> + <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> + <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> + <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> + <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> + <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> +</dl> + +<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> + +<dl> + <dt><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> + <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> + <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。</dd> + <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> + <dd>允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</dd> + <dt>Track 和 WebVTT</dt> + <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> +</dl> + +<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> + +<dl> + <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> + <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> + <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> + <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> + <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> + <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> + <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> + <dt> </dt> +</dl> +</div> + +<div class="section"> +<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> + +<dl> + <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。</dd> + <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> + <dd>允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> + <dt>即时编译的 JavaScript 引擎</dt> + <dd>新一代的 JavaScript 引擎功能更强大，性能更杰出。</dd> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> + <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">conentEditable 属性：把你的网站改变成 wiki !</a></dt> + <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> + <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> + <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> + <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> + <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> + <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> + <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> + <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>允许控制动画渲染以获得更优性能。</dd> + <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> + <dd>为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。</dd> + <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> + <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> + <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> + <dd>为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。</dd> +</dl> + +<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> + +<dl> + <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> + <dd>允许使用和操作计算机的摄像头，并从中存取照片。</dd> + <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> + <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> + <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> + <dd>让浏览器使用地理位置服务定位用户的位置。</dd> + <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> + <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。</dd> + <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> + <dd>允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> +</dl> + +<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> + +<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。</p> + +<dl> + <dt>新的背景样式特性</dt> + <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影，而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> + <dt>更精美的边框</dt> + <dd>现在不仅可以使用图像来格式化边框，使用 {{cssxref("border-image")}} 和它关联的普通属性，而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> + <dt>为你的样式设置动画</dt> + <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画，或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。</dd> + <dt>排版方面的改进</dt> + <dd>作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>， 而且也可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则，现在我们可以下载并应用自定义的字体了。.</dd> + <dt>新的展示性布局</dt> + <dd>为了提高设计的灵活性，已经有两种新的布局被添加了进来：<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> +</dl> +</div> +</div> + +<p>译注：</p> + +<p>被废弃的重复链接：https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> diff --git a/files/zh-cn/orphaned/web/html/element/command/index.html b/files/zh-cn/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..9d6a7c58fd --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/command/index.html @@ -0,0 +1,139 @@ +--- +title: command +slug: Web/HTML/Element/command +translation_of: Web/HTML/Element/command +--- +<div class="warning"> +<p><strong>已废弃</strong></p> + +<p>此功能已过时。 虽然它可能仍然在某些浏览器中工作，但不鼓励使用它，因为它可能随时被删除。 尽量避免使用它。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong><code>command</code>元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持<code>command</code>元素，并且在<a href="https://developer.mozilla.org/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。</p> +</div> + +<h2 class="editable" id="概述"><span>概述</span></h2> + +<p><code>command元素</code>用来表示一个用户可以调用的命令.</p> + +<h2 id="使用规范">使用规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>内容类别</td> + <td><a href="/zh-cn/HTML/Content_categories#Flow_content" title="zh-cn/HTML/Content categories#Flow content">Flow content</a>, <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>是否允许有内容</td> + <td>否, 它是一个空元素</td> + </tr> + <tr> + <td>标签遗漏</td> + <td>必须有开始标签, 不可以有结束标签.</td> + </tr> + <tr> + <td>允许的父元素</td> + <td>任何可以包含 <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/zh-cn/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素.</td> + </tr> + <tr> + <td>规范文档</td> + <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>和其他的HTML元素一样, 该元素支持<a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">全局属性</a>.</p> + +<dl> + <dt>{{ htmlattrdef("checked") }}</dt> + <dd>表明该元素已被选择, 除非元素的<code>type</code> 属性是 <code>checkbox 或</code>者 <code>radio</code>,否则该属性必须被省略.</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>表明该command元素已经被禁用.</dd> + <dt>{{ htmlattrdef("icon") }}</dt> + <dd>用一张图片来显示该command元素.</dd> + <dt>{{ htmlattrdef("label") }}</dt> + <dd>该command元素的名称.用来显示给用户.</dd> + <dt>{{ htmlattrdef("radiogroup") }}</dt> + <dd>如果该元素的<code>type</code>属性为<code>radio</code>,则radiogroup属性用来表示这一组command元素的公用名称. 如果<code>type</code>属性不是<code>radio</code>,则radiogroup属性必须省略.</dd> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>该属性用来表明command元素的类型,可以是下面三种值: + <ul> + <li> + <p><code>command</code> 或者为空,表示一个普通的command元素.</p> + </li> + <li> + <p><code>checkbox</code>表明该command元素体现为一个复选框,可以来回切换选中状态.</p> + </li> + <li> + <p><code>radio</code> 表明该command元素体现为一个单选按钮,可以来回切换选中状态.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>接口.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>{{ languages( { "en": "en/HTML/Element/command" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/html/element/element/index.html b/files/zh-cn/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..4db9cb2471 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/element/index.html @@ -0,0 +1,112 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +<p>{{obsolete_header}}</p> + +<div class="note"> +<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> +</div> + +<h2 id="Summary" name="Summary">简介</h2> + +<p><element>元素被定义在最新的 HTML DOM 元素中。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>这个元素只有<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="Examples" name="Examples">示例</h2> + +<p>Text goes here.</p> + +<pre class="brush: html">More text goes here. +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<p><element>元素以前位于<a href="http://w3c.github.io/webcomponents/spec/custom/">自定义元素</a>的草稿规范中，但已被删除</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">另请参阅</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..316e41a944 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,94 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p><strong>dropzone</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 是个枚举属性，表示什么内容类型可以拖放到元素上，使用 <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>，它可以拥有以下值：</p> + +<ul> + <li><span style="font-family: courier new;">copy，</span>它表明拖放行为会创建被拖放元素的副本。</li> + <li><span style="font-family: courier new;">move</span>，它表明被拖放元素会移动到新的位置。</li> + <li><span style="font-family: courier new;">link</span>，它会创建被拖放数据的链接。 </li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>与最新的快照{{SpecName('HTML5.1')}} 没有区别</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} 的快照，最初定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>所有 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></li> +</ul> diff --git a/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html new file mode 100644 index 0000000000..5d4f591eb7 --- /dev/null +++ b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html @@ -0,0 +1,544 @@ +--- +title: 跨域资源共享(CORS) +slug: Web/HTTP/跨域资源共享(CORS)_ +--- +<div>{{ HTTPSidebar }}</div> + +<div></div> + +<div><span class="seoSummary">跨域资源共享({{Glossary("CORS")}}) 是一种机制，它使用额外的 {{Glossary("HTTP")}} 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。</span>当一个资源从与该资源本身所在的服务器<strong>不同的域、协议或端口</strong>请求一个资源时，资源会发起一个<strong>跨域 HTTP 请求</strong>。</div> + +<div></div> + +<div>比<font>如，站点 http://domain-a.com 的某 HTML 页面通过 <a href="/zh-CN/docs/Web/HTML/Element/Img#Attributes"><img> 的 src </a>请求 http://domain-b.com/image.jpg。网络</font>上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。</div> + +<div></div> + +<p>出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。</p> + +<p> （译者注：这段描述不准确，并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。）</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> + +<p>跨域资源共享（ {{Glossary("CORS")}} ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。</p> + +<h2 id="谁应该读这篇文章？">谁应该读这篇文章？</h2> + +<p>说实话，每个人。</p> + +<p>更具体地来讲，这篇文章适用于网站管理员、后端和前端开发者。现代浏览器处理跨域资源共享的客户端部分，包括HTTP头和相关策略的执行。但是这一新标准意味着服务器需要处理新的请求头和响应头。对于服务端的支持，开发者可以阅读补充材料 <a class="internal" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-Side_Access_Control" title="En/Server-Side Access Control">cross-origin sharing from a server perspective (with PHP code snippets)</a> 。</p> + +<h2 id="什么情况下需要_CORS_？">什么情况下需要 CORS ？</h2> + +<p>跨域资源共享标准（ <a class="external external-icon" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">cross-origin sharing standard</a> ）允许在下列场景中使用跨域 HTTP 请求：</p> + +<ul> + <li>前文提到的由 {{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> 发起的跨域 HTTP 请求。</li> + <li>Web 字体 (CSS 中通过<code> @font-face </code>使用跨域字体资源), <a class="external external-icon" href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用</a>。</li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 贴图</a></li> + <li>使用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code> 将 Images/video 画面绘制到 canvas</li> +</ul> + +<p>本文概述了跨域资源共享机制及其所涉及的 HTTP 头。</p> + +<h2 id="功能概述">功能概述</h2> + +<p>跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 MIME 类型的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 <a href="/zh-CN/docs/Web/HTTP/Cookies">Cookies </a>和 HTTP 认证相关数据）。</p> + +<p>CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。</p> + +<p>接下来的内容将讨论相关场景，并剖析该机制所涉及的 HTTP 首部字段。</p> + +<h2 id="若干访问控制场景">若干访问控制场景</h2> + +<p>这里，我们使用三个场景来解释跨域资源共享机制的工作原理。这些例子都使用 {{domxref("XMLHttpRequest")}} 对象。</p> + +<p>本文中的 JavaScript 代码片段都可以从 <a href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> 获得。另外，使用支持跨域 {{domxref("XMLHttpRequest")}} 的浏览器访问该地址，可以看到代码的实际运行结果。</p> + +<p>关于服务端对跨域资源共享的支持的讨论，请参见这篇文章： <a href="/zh-CN/docs/Web/HTTP/Server-Side_Access_Control">Server-Side_Access_Control (CORS)</a>。</p> + +<h3 id="简单请求">简单请求</h3> + +<p>某些请求不会触发 <a href="/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS 预检请求</a>。本文称这样的请求为“简单请求”，请注意，该术语并不属于 {{SpecName('Fetch')}} （其中定义了 CORS）规范。若请求满足所有下述条件，则该请求可视为“简单请求”：</p> + +<ul> + <li>使用下列方法之一： + <ul> + <li>{{HTTPMethod("GET")}}</li> + <li>{{HTTPMethod("HEAD")}}</li> + <li>{{HTTPMethod("POST")}}</li> + </ul> + </li> + <li><span class="short_text" id="result_box" lang="zh-CN"><span>Fetch 规范定义了</span></span><a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>，不得人为设置该集合之外的其他首部字段。该集合为： + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} （需要注意额外的限制）</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li>{{HTTPHeader("Content-Type")}} 的值仅限于下列三者之一： + <ul> + <li><code>text/plain</code></li> + <li><code>multipart/form-data</code></li> + <li><code>application/x-www-form-urlencoded</code></li> + </ul> + </li> + <li>请求中的任意{{domxref("XMLHttpRequestUpload")}} 对象均没有注册任何事件监听器；{{domxref("XMLHttpRequestUpload")}} 对象可以使用 {{domxref("XMLHttpRequest.upload")}} 属性访问。</li> + <li>请求中没有使用 {{domxref("ReadableStream")}} 对象。</li> +</ul> + +<div class="note"><strong>注意:</strong> 这些跨域请求与浏览器发出的其他跨域请求并无二致。如果服务器未返回正确的响应首部，则请求方不会收到任何数据。因此，那些不允许跨域请求的网站无需为这一新的 HTTP 访问控制特性担心。</div> + +<div class="note"><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。</div> + +<p>比如说，假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。http://foo.example 的网页中可能包含类似于下面的 JavaScript 代码：</p> + +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/public-data/'; + +function callOtherDomain() { + if(invocation) { + invocation.open('GET', url, true); + invocation.onreadystatechange = handler; + invocation.send(); + } +} +</pre> + +<p><span class="short_text" id="result_box" lang="zh-CN"><span>客户端和服务器之间使用 CORS 首部字段来处理跨域权限：</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> + +<p>分别检视请求报文和响应报文：</p> + +<pre class="brush: shell">GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/access-control/simpleXSInvocation.html +Origin: http://foo.example + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2.0.61 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml + +[XML Data] +</pre> + +<p>第 1~10 行是请求首部。第10行 的请求首部字段 {{HTTPHeader("Origin")}} 表明该请求来源于 <code>http://foo.example</code>。</p> + +<p>第 13~22 行是来自于 http://bar.other 的服务端响应。响应中携带了响应首部字段 {{HTTPHeader("Access-Control-Allow-Origin")}}（第 16 行）。使用 {{HTTPHeader("Origin")}} 和 {{HTTPHeader("Access-Control-Allow-Origin")}} 就能完成最简单的访问控制。本例中，服务端返回的 <code>Access-Control-Allow-Origin: *</code> 表明，该资源可以被<strong>任意</strong>外域访问。如果服务端仅允许来自 http://foo.example 的访问，该首部字段的内容如下：</p> + +<p><code>Access-Control-Allow-Origin: http://foo.example</code></p> + +<p>现在，除了 http://foo.example，其它外域均不能访问该资源（该策略由请求首部中的 ORIGIN 字段定义，见第10行）。<code>Access-Control-Allow-Origin</code> 应当为 * 或者包含由 Origin 首部字段所指明的域名。</p> + +<h3 id="预检请求">预检请求</h3> + +<p>与前述简单请求不同，“需预检的请求”要求必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。</p> + +<p>当请求满足下述任一条件时，即应首先发送预检请求：</p> + +<ul> + <li>使用了下面任一 HTTP 方法： + <ul> + <li>{{HTTPMethod("PUT")}}</li> + <li>{{HTTPMethod("DELETE")}}</li> + <li>{{HTTPMethod("CONNECT")}}</li> + <li>{{HTTPMethod("OPTIONS")}}</li> + <li>{{HTTPMethod("TRACE")}}</li> + <li>{{HTTPMethod("PATCH")}}</li> + </ul> + </li> + <li>人为设置了<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>之外的其他首部字段。该集合为： + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} (需要注意额外的限制)</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li> {{HTTPHeader("Content-Type")}} 的值不属于下列之一: + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li>请求中的{{domxref("XMLHttpRequestUpload")}} 对象注册了任意多个事件监听器。</li> + <li>请求中使用了{{domxref("ReadableStream")}}对象。</li> +</ul> + +<div class="note"> +<p><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。</p> +</div> + +<p>如下是一个需要执行预检请求的 HTTP 请求：</p> + +<pre class="brush: js">var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/post-here/'; +var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; + +function callOtherDomain(){ + if(invocation) + { + invocation.open('POST', url, true); + invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); + invocation.setRequestHeader('Content-Type', 'application/xml'); + invocation.onreadystatechange = handler; + invocation.send(body); + } +} + +...... +</pre> + +<p>上面的代码使用 POST 请求发送一个 XML 文档，该请求包含了一个自定义的请求首部字段（X-PINGOTHER: pingpong）。另外，该请求的 Content-Type 为 application/xml。因此，该请求需要首先发起“预检请求”。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p> + +<pre>OPTIONS /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Origin: http://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 0 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain</pre> + +<p>预检请求完成之后，发送实际请求：</p> + +<pre><code>POST /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: http://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: http://foo.example +Pragma: no-cache +Cache-Control: no-cache + +<?xml version="1.0"?><person><name>Arun</name></person> + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some GZIP'd payload]</code></pre> + +<p>浏览器检测到，从 JavaScript 中发起的请求需要被预检。从上面的报文中，我们看到，第 1~12 行发送了一个使用 <code>OPTIONS 方法的“</code>预检请求<code>”。</code> OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段：</p> + +<pre><code>Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type</code></pre> + +<p><code>首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。<font face="Open Sans, Arial, sans-serif">首部字段 </font></code><code><code>Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：<code>X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。</code></code></code></p> + +<p>第14~26 行为预检请求的响应，表明服务器将接受后续的实际请求。重点看第 17~20 行：</p> + +<pre><code>Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400</code></pre> + +<p><font face="Open Sans, Arial, sans-serif">首部字段</font><code><font face="Open Sans, Arial, sans-serif"> </font>Access-Control-Allow-Methods </code>表明服务器允许客户端使用<code> </code><code>POST,</code> <code>GET </code>和 <code>OPTIONS</code> 方法发起请求。该字段与 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7">HTTP/1.1 Allow: response header</a> 类似，但仅限于在需要访问控制的场景中使用。</p> + +<p>首部字段 <code>Access-Control-Allow-Headers </code>表明服务器允许请求中携带字段 <code><code>X-PINGOTHER </code></code>与<code><code> Content-Type</code></code>。<font face="Open Sans, Arial, sans-serif">与</font><code><code><font face="Open Sans, Arial, sans-serif"> </font></code></code><code>Access-Control-Allow-Methods </code>一样，<code><code>Access-Control-Allow-Headers</code></code> 的值为逗号分割的列表。</p> + +<p>最后，首部字段 <code>Access-Control-Max-Age</code> 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。</p> + +<h4 id="预检请求与重定向">预检请求与重定向</h4> + +<p>大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向，浏览器将报告错误：</p> + +<blockquote> +<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> +</blockquote> + +<blockquote> +<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> +</blockquote> + +<p>CORS 最初要求该行为，不过<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">在后续的修订中废弃了这一要求</a>。</p> + +<p>在浏览器的实现跟上规范之前，有两种方式规避上述报错行为：</p> + +<ul> + <li>在服务端去掉对预检请求的重定向；</li> + <li>将实际请求变成一个简单请求。</li> +</ul> + +<p>如果上面两种方式难以做到，我们仍有其他办法：</p> + +<ul> + <li>发出一个简单请求（使用 <a href="/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>）以判断真正的预检请求会返回什么地址。</li> + <li>发出另一个请求（真正的请求），使用在上一步通过<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a>获得的URL。</li> +</ul> + +<p>不过，如果请求是由于存在 Authorization 字段而引发了预检请求，则这一方法将无法使用。这种情况只能由服务端进行更改。</p> + +<h3 id="附带身份凭证的请求">附带身份凭证的请求</h3> + +<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 与 CORS 的一个有趣的特性是，可以基于 <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 请求，浏览器<strong>不会</strong>发送身份凭证信息。如果要发送凭证信息，需要设置 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的某个特殊标志位。</p> + +<p><code class="plain">本例中，http://foo.example 的某脚本向 <code class="plain">http://bar.other 发起一个GET 请求，并设置 Cookies：</code></code></p> + +<pre id="line1"><code>var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/credentialed-content/'; + +function callOtherDomain(){ + if(invocation) { + invocation.open('GET', url, true); + invocation.withCredentials = true; + invocation.onreadystatechange = handler; + invocation.send(); + } +}</code></pre> + +<p>第 7 行将 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的 <code>withCredentials 标志设置为 true，</code>从而向服务器发送 Cookies。因为这是一个简单 GET 请求，所以浏览器不会对其发起“预检请求”。但是，如果服务器端的响应中未携带 <code>Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。</code></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png"></p> + +<p>客户端与服务器端交互示例如下：</p> + +<pre><code>GET /resources/access-control-with-credentials/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/credential.html +Origin: http://foo.example +Cookie: pageAccess=2 + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 +X-Powered-By: PHP/5.2.6 +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + + +[text/plain payload]</code></pre> + +<p>即使第 11 行指定了 Cookie 的相关信息，但是，如果 bar.other 的响应中缺失 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true（</code>第 19 行），则响应内容不会返回给请求的发起者。</p> + +<h4 id="附带身份凭证的请求与通配符">附带身份凭证的请求与通配符</h4> + +<p>对于附带身份凭证的请求，服务器不得设置 <code style="font-style: normal;">Access-Control-Allow-Origin 的值为“*”。</code></p> + +<p><code style="font-style: normal;">这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 </code>http://foo.example，则请求将成功执行。</p> + +<p>另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。</p> + +<h2 id="HTTP_响应首部字段">HTTP 响应首部字段</h2> + +<p>本节列出了规范所定义的响应首部字段。上一小节中，我们已经看到了这些首部字段在实际场景中是如何工作的。</p> + +<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> + +<p>响应首部中可以携带一个 {{HTTPHeader("Access-Control-Allow-Origin")}}<code style="font-style: normal;"> 字段，其语法如下:</code></p> + +<pre>Access-Control-Allow-Origin: <origin> | * +</pre> + +<p>其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。</p> + +<p>例如，下面的字段值将允许来自 http://mozilla.com 的请求：</p> + +<pre>Access-Control-Allow-Origin: <span class="plain">http://mozilla.com</span></pre> + +<p>如果服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。</p> + +<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> + +<p>译者注：在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。</p> + +<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 头让服务器把允许浏览器访问的头放入白名单，例如：</p> + +<pre>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +</pre> + +<p>这样浏览器就能够通过getResponseHeader访问<code>X-My-Custom-Header</code>和 <code>X-Another-Custom-Header</code> 响应头了。</p> + +<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> + +<p>{{HTTPHeader("Access-Control-Max-Age")}} 头指定了preflight请求的结果能够被缓存多久，请参考本文在前面提到的preflight例子。</p> + +<pre>Access-Control-Max-Age: <delta-seconds> +</pre> + +<p><code>delta-seconds</code> 参数表示preflight请求的结果在多少秒内有效。</p> + +<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 头指定了当浏览器的<code>credentials</code>设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用<code>credentials</code>。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。</p> + +<pre>Access-Control-Allow-Credentials: true +</pre> + +<p>上文已经讨论了<a href="#Requests_with_credentials">附带身份凭证的请求</a>。</p> + +<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。</p> + +<pre>Access-Control-Allow-Methods: <method>[, <method>]* +</pre> + +<p>相关示例见<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">这里</a>。</p> + +<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Headers")}} 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。</p> + +<pre>Access-Control-Allow-Headers: <field-name>[, <field-name>]* +</pre> + +<h2 id="HTTP_请求首部字段">HTTP 请求首部字段</h2> + +<p>本节列出了可用于发起跨域请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。</p> + +<h3 id="Origin">Origin</h3> + +<p>{{HTTPHeader("Origin")}} 首部字段表明预检请求或实际请求的源站。</p> + +<pre>Origin: <origin> +</pre> + +<p>origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。</p> + +<div class="note"><strong>Note:</strong> 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。</div> + +<p>注意，不管是否为跨域请求，ORIGIN 字段总是被发送。</p> + +<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> + +<p>{{HTTPHeader("Access-Control-Request-Method")}} 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。</p> + +<pre>Access-Control-Request-Method: <method> +</pre> + +<p>相关示例见<a href="#Preflighted_requests">这里</a>。</p> + +<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> + +<p>{{HTTPHeader("Access-Control-Request-Headers")}} 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。</p> + +<pre>Access-Control-Request-Headers: <field-name>[, <field-name>]* +</pre> + +<p>相关示例见<a href="#">这里</a>。</p> + +<h2 id="规范">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>New definition; supplants CORS specification.</td> + </tr> + <tr> + <td>{{SpecName('CORS')}}</td> + <td>{{Spec2('CORS')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> + +<h3 id="注">注</h3> + +<ul> + <li>IE 10 提供了对规范的完整支持，但在较早版本（8 和 9）中，CORS 机制是借由 XDomainRequest 对象完成的。</li> + <li>Firefox 3.5 引入了对 XMLHttpRequests 和 Web 字体的跨域支持（但最初的实现并不完整，这在后续版本中得到完善）；Firefox 7 引入了对 WebGL 贴图的跨域支持；Firefox 9 引入了对 drawImage 的跨域支持。</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="http://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> + <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> + <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li> +</ul> + +<p>{{ languages( { "ja": "ja/HTTP_access_control" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html b/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html new file mode 100644 index 0000000000..b9cd157ec1 --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html @@ -0,0 +1,292 @@ +--- +title: javascript(起步) +slug: Web/JavaScript/javascript(起步) +tags: + - bug-840092 +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2> + +<p>作为一门计算机语言，JavaScript本身强大、复杂，且难于理解。但是，你可以用它来开发一系列的应用程序，它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子：<a class="external" href="http://local.google.com/">Google Maps</a>。</p> + +<p>JavaScript（通称为ECMAScript）最大的优势在于，它基于浏览器，但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps，它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现，你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同，JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p> + +<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2> + +<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p> + +<p>在使用 JavaScript进行开发的过程中，可能还会涉及很多其他技术，这不在本文讨论的范围之内。 所以，不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p> + +<h2 id="Getting_Started" name="Getting_Started">起步</h2> + +<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装，不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的，你所需要做的全部事情就是把你的代码保存为文本文件，然后再浏览器中打开。就这么简单！</p> + +<p>JavaScript非常适合作为入门级的编程语言。它直观形象，并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同，它们只对那些专业的软件开发者来说是有价值的。</p> + +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2> + +<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异，提供了通用性的功能函数来方便调用。</p> + +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2> + +<p>下面的例子都有相同的代码。要执行它们有多种方法，如果你有自己的个人站点，你还可以在站点上把这些例子保存为新的页面。</p> + +<p>如果你没有自己的个人站点，你可以在电脑上把这些例子保存下来，并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方，也是它适合做入门语言的原因。你不需要编译器或者开发环境，你只需要一个浏览器就可以开始起步了。</p> + +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例：捕获一个鼠标单击事件</h2> + +<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题，这个简单的例子并不能说明所有的问题。然而，如果我们不涉及JavaScript事件系统，我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西，如果你想要了解更多的内部细节，那你可以去查找更详细的相关资料。</p> + +<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件：</p> + +<ul> + <li>Click - 用户点击鼠标时触发</li> + <li>DblClick - 用户双击鼠标时触发</li> + <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li> + <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li> + <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li> + <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li> + <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li> + <li>ContextMenu - 用户点击鼠标右键时触发</li> +</ul> + +<p>捕获事件并注册处理函数最简单的办法就是使用HTML，你可以把事件当成元素属性来使用。例子：</p> + +<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> + +<p>要执行的JavaScript代码既可以作为属性值写在行内位置，也可以写成函数并用<script>包裹后放到HTML页面中：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onclick_callback () { + alert ("Hello, World!"); + } +</script> +<span onclick="onclick_callback();">Click Here</span></pre> + +<p>另外，事件对象是可以被捕获和引用，开发者可以通过访问事件对象来获取更多信息，如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onclick_callback(event) { + var eType = event.type; + /* the following is for compatability */ + /* Moz populates the target property of the event object */ + /* IE populates the srcElement property */ + var eTarget = event.target || event.srcElement; + + alert( "Captured Event (type=" + eType + ", target=" + eTarget ); + } +</script> +<span onclick="onclick_callback(event);">Click Here</span></pre> + +<p>对于事件的注册和接收还用注意一些的是，你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程：生成span对象，添加到页面中的body，给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p> + +<pre class="brush:js"><script type="text/javascript"> + function mouseevent_callback(event) { + /* The following is for compatability */ + /* IE does NOT by default pass the event object */ + /* obtain a ref to the event if one was not given */ + if (!event) event = window.event; + + /* obtain event type and target as earlier */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' event on element with id: '+ eTarget.id); + } + + function onload () { + /* obtain a ref to the 'body' element of the page */ + var body = document.body; + /* create a span element to be clicked */ + var span = document.createElement('span'); + span.id = 'ExampleSpan'; + span.appendChild(document.createTextNode ('Click Here!')); + + /* register the span object to receive specific mouse events */ + span.onmousedown = mouseevent_callback; + span.onmouseup = mouseevent_callback; + span.onmouseover = mouseevent_callback; + span.onmouseout = mouseevent_callback; + + /* display the span on the page */ + body.appendChild(span); +} +</script></pre> + +<p>{{ draft() }}</p> + +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例：捕获一个键盘事件</h2> + +<p>同上面的例子类似，键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p> + +<p>下面的列表展示了一些具体的键盘事件，同鼠标事件相比是很少的：</p> + +<ul> + <li>KeyPress - 按键被按下并且释放后触发</li> + <li>KeyDown - 按键被按下但是还没有被释放时触发</li> + <li>KeyUp - 按键被释放时触发</li> + <li>TextInput ( Webkit浏览器下可以使用，并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li> +</ul> + +<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中，键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中，但是两者不会同时存在。按键会生成一个字母 (如 'a')，这时会把字母的编码存储到<code>charCode</code> 中，注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下，编码会存储到 <code>keyCode中。</code></p> + +<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数，在元素属性中处理相关事件。 举例：</p> + +<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"></input> +</pre> + +<p>同鼠标事件类似，你的 JavaScript代码既可以写到属性值内，也可以作为函数用<script包裹后写到HTML页面中：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onkeypress_callback () { + alert ("Hello, World!"); + } +</script> + +<input onkeypress="onkeypress_callback();"></input> +</pre> + +<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似：</p> + +<pre class="brush:js"><script type="text/javascript"> + function onkeypress_callback(evt) { + var eType = evt.type; // Will return "keypress" as the event type + var eCode = 'keyCode is ' + evt.keyCode; + var eChar = 'charCode is ' + evt.charCode; + + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script> +<input onkeypress="onkeypress_callback(event);"></input></pre> + +<p>要捕获页面上所有的键盘事件，可以在document上注册和绑定相关的处理函数：</p> + +<pre class="brush:js"><script type="text/javascript"> + document.onkeypress = key_event; + document.onkeydown = key_event; + document.onkeyup = key_event; + + function key_event(evt) { + var eType = evt.type; + var eCode = "ASCII code is " + evt.keyCode; + var eChar = 'charCode is ' + evt.charCode; + + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script></pre> + +<p>下面是一个完整的键盘事件处理过程：</p> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var exampleKey = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; + var keychar = String.fromCharCode(key); + if (key==exampleKey) { metaChar = true; } + if (key!=exampleKey) { + if (metaChar) { + alert("Combination of metaKey + " + keychar) + metaChar = false; + } else { alert("Key pressed " + key); } + } + } + function metaKeyUp (event) { + var key = event.keyCode || event.which; + if (key==exampleKey) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> +</body> +</html></pre> + +<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3> + +<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下，</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键，而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同，如， 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode，因为用户按下的是相同的按键，但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同，因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p> + +<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode，他们把字母信息写到了</code><code>keyCode</code>中，而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中， <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p> + +<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p> + +<p>{{ draft() }}</p> + +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例：拖曳图片</h2> + +<p>下面的例子展示了firefox浏览器下如何实现拖动图片：</p> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<style type='text/css'> +img { position: absolute; } +</style> + +<script type='text/javascript'> +window.onload = function() { + + movMeId=document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + movMeId.style.position = "absolute"; + + document.onmousedown = coordinates; + document.onmouseup=mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove=moveImage; + return false; + } else { + return false; + } + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/> + <p>Drag and drop around the image in this page.</p> +</body> + +</html></pre> + +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例：改变大小</h2> + +<div>{{todo("Need Content. Or, remove headline")}}</div> + +<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例：绘制直线</h3> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2> + +<ul> + <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li> + <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li> + <li>最后修改: July 14 2005</li> + <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..31d65bf734 --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,178 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array.prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Array.prototype</code></strong> 属性表示 {{jsxref("Array")}} 构造函数的原型，并允许您向所有Array对象添加新的属性和方法。</p> + +<pre class="brush: js">/* +如果JavaScript本身不提供 first() 方法， +添加一个返回数组的第一个元素的新方法。 +*/ + +if(!Array.prototype.first) { + Array.prototype.first = function() { + console.log(`如果JavaScript本身不提供 first() 方法， +添加一个返回数组的第一个元素的新方法。`); + return this[0]; + } +} +</pre> + +<h2 id="Description" name="Description">描述</h2> + +<p>{{jsxref("Array")}}实例继承自 <strong>Array.prototype </strong>。与所有构造函数一样，您可以更改构造函数的原型对象，以对所有 {{jsxref("Array")}} 实例进行更改。例如，可以添加新方法和属性以扩展所有Array对象。这用于 {{Glossary("Polyfill", "polyfilling")}}， 例如。</p> + +<p>鲜为人知的事实：<code>Array.prototype</code> 本身也是一个 {{jsxref("Array")}}。</p> + +<pre class="brush: js">Array.isArray(Array.prototype); +// true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>所有的数组实例都继承了这个属性，它的值就是 {{jsxref("Array")}}，表明了所有的数组都是由 {{jsxref("Array")}} 构造出来的。</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>上面说了，因为 <code>Array.prototype</code> 也是个数组，所以它也有 <code>length</code> 属性，这个值为 <code>0</code>，因为它是个空数组。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">会改变自身的方法</h3> + +<p>下面的这些方法会改变调用它们的对象自身的值：</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> + <dd>在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。</dd> + <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> + <dd>将数组中指定区间的所有元素的值，都替换成某个固定的值。</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>删除数组的最后一个元素，并返回这个元素。</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>在数组的末尾增加一个或多个元素，并返回数组的新长度。</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>删除数组的第一个元素，并返回这个元素。</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>对数组元素进行排序，并返回当前数组。</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>在任意的位置给数组添加或删除任意个元素。</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>在数组的开头增加一个或多个元素，并返回数组的新长度。</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">不会改变自身的方法</h3> + +<p>下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。</dd> + <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>判断当前数组是否包含某指定的值，如果是返回 <code>true</code>，否则返回 <code>false</code>。</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>连接所有数组元素组成一个字符串。</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>抽取当前数组中的一段元素组合成一个新数组。</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toString()")}} 方法。</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">遍历方法</h3> + +<p>在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。</p> + +<dl> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>为数组中的每个元素执行一次回调函数。</dd> + <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> + <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>如果数组中的每个元素都满足测试函数，则返回 <code>true</code>，否则返回 <code>false。</code></dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>将所有在过滤函数中返回 <code>true</code> 的数组元素放进一个新数组中并返回。</dd> + <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> + <dd>找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 <code>undefined</code>。</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> + <dd>找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 <code>-1</code>。</dd> + <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> + <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>返回一个由回调函数的返回值组成的新数组。</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。</dd> + <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> + <dd>返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>和上面的 <code>values() 方法是同一个函数。</code></dd> +</dl> + +<h3 id="Generic_methods" name="Generic_methods">通用方法</h3> + +<p>在 JavaScript 中，很多的数组方法被故意设计成是通用的。也就是说，那些看起来像是数组的对象（类数组对象），即拥有一个 <code>length</code> 属性，以及对应的索引属性（也就是数字类型的属性，比如 <code>obj[5]</code>）的非数组对象也是可以调用那些数组方法的。其中一些数组方法，比如说 {{jsxref("Array.join", "join")}} 方法，它们只会单纯的读取当前对象的 <code>length</code> 属性和索引属性的值，并不会尝试去改变这些属性的值。而另外一些数组方法，比如说 {{jsxref("Array.reverse", "reverse")}} 方法，它们会尝试修改那些属性的值，因此，如果当前对象是个 {{jsxref("String")}} 对象，那么这些方法在执行时就会报错，因为字符串对象的 <code>length</code> 属性和索引属性都是只读的。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.Array.prototype")}}</p> +</div> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..9a8678680a --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,57 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>AsyncFunction.prototype</strong></code> 属性表示 {{jsxref("AsyncFunction")}} 的原型对象。</p> + +<h2 id="描述">描述</h2> + +<p>{{jsxref("AsyncFunction")}} 对象继承自 <code>AsyncFunction.prototype</code>。<code>AsyncFunction.prototype</code> 不能被修改。</p> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code><strong>AsyncFunction.constructor</strong></code></dt> + <dd>默认值为 {{jsxref("AsyncFunction")}}。</dd> + <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> + <dd>返回 "AsyncFunction"。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>最初定义在ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="兼容性">兼容性</h2> + +<div> +<div> + + +<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> +</div> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html new file mode 100644 index 0000000000..9c14e462bd --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html @@ -0,0 +1,119 @@ +--- +title: AsyncIterator +slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator +tags: + - 异步迭代器 + - 类 +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncIterator +--- +<p>{{JSRef}}{{Draft}}</p> + +<p><strong><code>AsyncIterator</code></strong> 全局对象是一个提供辅助方法的抽象类，与暴露在{{JSxRef("Array")}} 实例上的那些类似。</p> + +<h2 id="构造函数">构造函数</h2> + +<dl> + <dt>{{JSxRef("AsyncIterator.AsyncIterator", "AsyncIterator()")}} </dt> + <dd>一个抽象构造函数，仅能够通过 {{JSxRef("Operators/super", "super()")}} 来调用。</dd> +</dl> + +<h2 id="属性">属性</h2> + +<dl> + <dt><code>AsyncIterator.prototype</code></dt> + <dd><code>%AsyncIteratorPrototype%</code> 内部对象。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{JSxRef("AsyncIterator.from()")}} </dt> + <dd>等同于在传入的对象上调用 <code>@@asyncIterator</code> 。</dd> +</dl> + +<h2 id="AsyncIterator_原型"><code>AsyncIterator</code> 原型</h2> + +<h3 id="原型属性">原型属性</h3> + +<dl> + <dt><code>AsyncIterator.prototype.constructor</code></dt> + <dd>指定创建对的象原型的函数.</dd> + <dt><code>AsyncIterator.prototype[@@toStringTag]</code> </dt> + <dd><code>字符串 "Iterator"</code>.</dd> +</dl> + +<h3 id="原型方法">原型方法</h3> + +<dl> + <dt>{{JSxRef("AsyncIterator.prototype.map()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.filter()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.take()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.drop()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.asIndexedPairs()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.flatMap()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.reduce()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.toArray()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.forEach()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.some()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.every()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.find()")}} </dt> + <dd>...</dd> + <dt>{{JSxRef("AsyncIterator.prototype.@@iterator()", "AsyncIterator.prototype[@@iterator]()")}}</dt> + <dd>返回该 <code>AsyncIterator</code> 实例。</dd> +</dl> + +<h2 id="实现方法">实现方法</h2> + +<dl> + <dt>{{JSxRef("AsyncIterator.prototype.next()", "<<var>implementation</var>>.prototype.next()")}}</dt> + <dd>获取 <code>AsyncIterator</code> 中的下一项</dd> + <dt>{{JSxRef("AsyncIterator.prototype.return()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> + <dd>返回给出的值，并结束迭代。</dd> + <dt>{{JSxRef("AsyncIterator.prototype.throw()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> + <dd>抛出一个迭代器错误（同时也终止了迭代器，除非是在该迭代器内部被捕获）。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-iterator-helpers/#sec-asynciterator-constructor">ESNext Iterator Helpers Proposal</a></td> + <td><span class="spec-Draft">Stage 2 Draft</span></td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("javascript.builtins.AsyncIterator")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{JSxRef("Iteration_protocols", "Iteration protocols", "", "1")}}</li> + <li>{{JSxRef("Generator")}}</li> + <li>{{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}}</li> + <li>{{JSxRef("Iterator")}} </li> +</ul> diff --git a/files/zh-cn/orphaned/web/localization/index.html b/files/zh-cn/orphaned/web/localization/index.html new file mode 100644 index 0000000000..0bc89e00c7 --- /dev/null +++ b/files/zh-cn/orphaned/web/localization/index.html @@ -0,0 +1,36 @@ +--- +title: 本地化和全球化 +slug: Web/Localization +translation_of: Web/Localization +--- +<p class="summary"><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Localization" title="本地化：本地化（l10n）是使软件用户界面适应特定文化的过程。"><font><font>本地化</font></font></a></strong><font><font>（通常缩写为</font></font><strong><font><font> L10n</font></font></strong><font><font>）能够使网站、Web应用或任何其他形式的内容适用于特定语言的范围和文化圈。</font></font><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Internationalization" title="国际化：REDIRECT I18N"><font><font>国际化</font></font></a></strong><font><font>（通常缩写为</font></font><strong><font><font> I18n</font></font></strong><font><font>）被设计用来使网站或应用程序尽可能的实现本地化。</font></font></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="指南和教程">指南和教程</h2> + +<p>指南和教程可帮助您学习如何确保您的项目已准备好全球化，以及如何将其本地化。</p> + +<dl> + <dt>国际化概念</dt> + <dd>概述什么是国际化（i18n）以及可用于Web开发人员的哪些功能和技术可用于确保您的内容准备好进行本地化。</dd> + <dt>本地化简介</dt> + <dd>关于本地化网站或应用程序的入门指南，从确定需要检查和可能更改的因素到实际应用所需的更改。</dd> + <dt><a href="/en-US/docs/Web/Localization_and_Internationalization/Unicode_Bidirectional_Text_Algorithm">Unicode双向文本算法</a>（译者注：尚未翻译）</dt> + <dd>Unicode双向算法是用于确定Unicode文本的呈现顺序的标准算法，而Web浏览器在呈现内容时使用它。 本概述将使您对{{Glossary("BiDi")}}算法及其对您的国际化工作有何影响。</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="参考">参考</h2> + +<p>参考资料将在您创建可本地化的站点时提供帮助。</p> + +<dl> + <dt>可用于i18n和l10n的HTML元素</dt> + <dd>对HTML提供的元素的引用，这些元素可用于创建准备本地化的内容。</dd> + <dt>CSS和本地化</dt> + <dd>对CSS属性的参考，在生成支持10n的内容时特别重要。</dd> +</dl> +</div> +</div> diff --git a/files/zh-cn/orphaned/web/security/information_security_basics/index.html b/files/zh-cn/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..d9c1f0769f --- /dev/null +++ b/files/zh-cn/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,28 @@ +--- +title: 信息安全基础 +slug: Web/Security/Information_Security_Basics +translation_of: Web/Security/Information_Security_Basics +--- +<p>了解安全基础知识有助于你了解整个Web开发生命周期中安全性的作用和重要性。 这将帮助你避免不必要的不安全软件，使得攻击者利用漏洞获得经济利益或其他恶意用途。以下的文章提供一些基本的Web安全理论和定义。</p> + +<dl> + <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">机密性、完整性和可用性</a></dt> + <dd>描述了信息安全的基本目标，是理解信息安全的基础。</dd> + <dt><a href="https://developer.mozilla.org/en-US/Learn/Vulnerabilities">漏洞</a></dt> + <dd>明确主要漏洞策略以及讨论在所有软件中的存在的所有漏洞。</dd> + <dt><a href="/en-US/Learn/Threats">威胁 - Threats</a></dt> + <dd>对主要威胁概念的简单介绍。</dd> + <dt><a href="/en-US/Learn/Security_Controls">安全控制 - Security Controls</a></dt> + <dd>明确主要安全控制策略以及它们潜在的缺点。</dd> + <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 安全</a></dt> + <dd>TCP/IP模型的介绍，还有SSL的教程。</dd> +</dl> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Mozilla/%E5%AE%89%E5%85%A8">浏览器安全 - Browser security</a></li> + <li><a href="/en-US/docs/Web/Security">网络安全 - Web security</a></li> + <li><a href="/en-US/docs/Web/Security/Securing_your_site">让您的网站变得安全 - Securing your site</a></li> + <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">火狐浏览器安全基础开发者须知 - Firefox Security Basics for Developers</a></li> +</ul> diff --git a/files/zh-cn/orphaned/web/specification_list/index.html b/files/zh-cn/orphaned/web/specification_list/index.html new file mode 100644 index 0000000000..992d8c3814 --- /dev/null +++ b/files/zh-cn/orphaned/web/specification_list/index.html @@ -0,0 +1,405 @@ +--- +title: 规范列表 +slug: Specification_List +translation_of: Web/Specification_list +--- +<p>开放式Web平台(The Open Web Platform)是由一些列的规范组成的,本页面列出了这些规范,以及规范中各个词条所在的MDN页面.</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">API Introduction</th> + <th scope="col">Tutorial</th> + <th scope="col">Reference</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("HTML WHATWG") }}</td> + <td>{{ Spec2("HTML WHATWG") }}</td> + <td> </td> + <td> + <ul> + <li>Constraint Validation</li> + <li>Microdata API</li> + <li>Browsing context (that is <code>_blank</code>, ...)</li> + <li>Session History</li> + <li>Offline Web Applications (appcache)</li> + <li>Drag and Drop</li> + </ul> + </td> + <td> + <p>The <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML Elements</a>.<br> + <em>HTML element-related interfaces:</em><br> + {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)<br> + <em>Other DOM-related interfaces/events/... :</em><br> + {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("WindowEventHandlers")}} {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} <code>Document getter? </code>{{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}} {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (event) {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}} {{domxref("Window.window")}} {{domxref("Window.self")}} {{domxref("Window.document")}} {{domxref("Window.name")}} {{domxref("Window.location")}} {{domxref("Window.history")}} {{domxref("Window.locationbar")}} {{domxref("Window.menubar")}} {{domxref("Window.personalbar")}} {{domxref("Window.scrollbars")}} {{domxref("Window.statusbar")}} {{domxref("Window.toolbar")}} {{domxref("Window.status")}} {{domxref("Window.close()")}} {{domxref("Window.stop()")}} {{domxref("Window.focus()")}} {{domxref("Window.blur()")}} {{domxref("Window.frames")}} {{domxref("Window.length")}} {{domxref("Window.top")}} {{domxref("Window.opener")}} {{domxref("Window.parent")}} {{domxref("Window.frameElement")}} {{domxref("Window.open()")}} getter WindowProxy getter Object {{domxref("Window.navigator")}} {{domxref("Window.external")}} {{domxref("Window.applicationCache")}} {{domxref("Window.statusbar")}} {{domxref("Window.alert()")}} {{domxref("Window.confirm()")}} {{domxref("Window.prompt()")}} {{domxref("Window.print()")}} {{domxref("Window.showModalDialog()")}} {{domxref("Window.postMessage()")}} {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatoreStorageUtils")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent" title="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent">WebSockets/WebSockets_reference</a> ) {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)<br> + <em>Events on any <code>HTML*Element</code>, <code>Document</code> and <code>Window</code> objects:</em><br> + {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}<br> + Events on any <code>HTML*Element</code> (except <code>HTMLBodyElement and HTMLFrameSetElement</code>), <code>Document</code> and <code>Window</code> objects:<br> + {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}<br> + <em>Events on the <code>Window</code> objects:</em><br> + {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("fullscreenchange")}} {{event("fullscreenerror")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}<br> + <em>Events on the </em><code>Document</code><em> objects: </em>{{event("readystatechange")}}</p> + </td> + </tr> + <tr> + <td> CSS</td> + <td><em>Variable</em></td> + <td><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting Started</a></td> + <td>CSS Tutorials</td> + <td>The <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> page list them & the <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a> has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.<br> + <em>{{SpecName("CSS3 Fonts")}}</em>: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)<br> + <em>{{SpecName("CSS3 Transitions")}}</em>: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)<br> + <em>{{SpecName("CSS3 Animations")}}</em>: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}<br> + <em>{{SpecName("CSS3 Conditional")}}</em>: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}<br> + <em>{{SpecName("CSS3 Device")}}</em>: {{domxref("CSSViewportRule")}}<br> + <em>{{SpecName("CSS3 Variables")}}</em>: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}</td> + </tr> + <tr> + <td>EcmaScript</td> + <td><em>Variable</em></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>SVG</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>WebGL</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>MathML</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG") }}</td> + <td>{{ Spec2("DOM WHATWG") }}</td> + <td><a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference">DOM Reference </a></td> + <td> </td> + <td>{{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Future")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}}</td> + </tr> + <tr> + <td>{{SpecName("CSSOM")}}</td> + <td>{{ Spec2("CSSOM")}}</td> + <td><a href="/en-US/docs/Web/CSSOM" title="/en-US/docs/Web/CSSOM">CSSOM</a></td> + <td> </td> + <td>{{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}}</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View")}}</td> + <td>{{ Spec2("CSSOM View")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}</td> + </tr> + <tr> + <td>{{SpecName("Web Workers")}} (also in WHATWG HTML)</td> + <td>{{ Spec2("Web Workers")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}</td> + </tr> + <tr> + <td>{{SpecName("Element Traversal")}}</td> + <td>{{Spec2("Element Traversal")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("ElementTraversal")}}</td> + </tr> + <tr> + <td>{{SpecName("File API")}}</td> + <td>{{Spec2("File API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}}</td> + </tr> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td> </td> + <td><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Using fullscreen mode</a></td> + <td>{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}} {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("IndexedDB")}}</td> + <td>{{Spec2("IndexedDB")}}</td> + <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></td> + <td><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> <a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></td> + <td>{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}</td> + </tr> + <tr> + <td>{{SpecName("Web Audio API")}}</td> + <td>{{Spec2("Web Audio API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} <code>AudioDestinationNode</code> {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} <code>ChannelMergerNode</code> <code>ChannelSplitterNode</code> <code>complete</code> (event) <code>ConvolverNode</code> {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} <code>ended</code> (event) {{domxref("GainNode")}} <code>MediaElementAudioSourceNode</code> <code>MediaStreamAudioDestinationNode</code> <code>MediaStreamAudioSourceNode</code> <code>OfflineAudioCompletionEvent</code> <code>OfflineAudioContext</code> <code>OscillatorNode</code> {{domxref("PannerNode")}} {{domxref("ScriptProcessorNode")}} <code>WaveShaperNode</code> <code>WaveTable</code></td> + </tr> + <tr> + <td>{{SpecName("WebRTC 1.0")}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}</td> + </tr> + <tr> + <td>{{SpecName("Media Capture")}}</td> + <td>{{Spec2("Media Capture")}}</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td> + <td>{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}} {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}</td> + </tr> + <tr> + <td>{{SpecName("Vibration API")}}</td> + <td>{{Spec2("Vibration API")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></td> + <td>{{domxref("Vibration")}} {{domxref("window.navigator.vibrate()")}}</td> + </tr> + <tr> + <td>{{SpecName("Battery API")}}</td> + <td>{{Spec2("Battery API")}}</td> + <td><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></td> + <td> </td> + <td>{{domxref("window.navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("Geolocation")}}</td> + <td>{{Spec2("Geolocation")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></td> + <td>{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("window.navigator.geolocation")}} {{domxref("Positions")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}} Note that several of these interfaces are documented under {{domxref("window.navigator.geolocation.getCurrentPosition()")}}</td> + </tr> + <tr> + <td>{{SpecName("Device Orientation")}}</td> + <td>{{Spec2("Device Orientation")}}</td> + <td> </td> + <td> </td> + <td>{{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}</td> + </tr> + <tr> + <td>{{SpecName("Screen Orientation")}}</td> + <td>{{Spec2("Screen Orientation")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("Web Notifications")}}</td> + <td>{{Spec2("Web Notifications")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("AmbientLight")}}</td> + <td>{{Spec2("AmbientLight")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("Proximity Events")}}</td> + <td>{{Spec2("Proximity Events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("WebIDL")}}</td> + <td>{{Spec2("WebIDL")}}</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("XMLHttpRequest")}}</td> + <td>{{Spec2("XMLHttpRequest")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}</td> + </tr> + <tr> + <td>{{SpecName("Highres Time")}}</td> + <td>{{Spec2("Highres Time")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}</td> + </tr> + <tr> + <td>{{SpecName("Websockets")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Websockets")}}</td> + <td><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a> <a href="/en-US/docs/WebSockets/WebSockets_reference" title="/en-US/docs/WebSockets/WebSockets_reference">WebSockets reference</a></td> + <td><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></td> + <td>{{domxref("WebSocket")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/WebSocket</a> ) {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/CloseEvent</a> )</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("RequestAnimationFrame")}}</td> + <td>{{Spec2("RequestAnimationFrame")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}</td> + </tr> + <tr> + <td>{{SpecName("Server-sent events")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Server-sent events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("Network Information")}}</td> + <td>{{Spec2("Network Information")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{event("change")}} (event)</td> + </tr> + <tr> + <td>{{SpecName("Web Storage")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Web Storage")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}</td> + </tr> + <tr> + <td>{{SpecName("Progress Events")}}</td> + <td>{{Spec2("Progress Events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <td>{{SpecName("Typed Array")}}</td> + <td>{{Spec2("Typed Array")}}</td> + <td> </td> + <td><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">JavaScript Typed arrays</a></td> + <td><code><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array">Int8Array</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="/en-US/docs/JavaScript/Typed_arrays/Int16Array"><code>Int16Array</code></a> <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="/en-US/docs/JavaScript/Typed_arrays/Int32Array"><code>Int32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array">Uint8Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array">Uint16Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array">Uint32Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray">Uint8ClampedArray</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="/en-US/docs/JavaScript/Typed_arrays/Float32Array"><code>Float32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array">Float64Array</a></code>, ...</td> + </tr> + <tr> + <td>{{SpecName("Gamepad")}}</td> + <td>{{Spec2("Gamepad")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}</td> + </tr> + <tr> + <td>{{SpecName("Navigation Timing")}}</td> + <td>{{Spec2("Navigation Timing")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}</td> + </tr> + <tr> + <td>{{SpecName("WOFF1.0")}}</td> + <td>{{Spec2("WOFF1.0")}}</td> + <td><a href="/en-US/docs/WOFF" title="/en-US/docs/WOFF">About the Web Open Font Format</a></td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("WebVTT")}}</td> + <td>{{Spec2("WebVTT")}}</td> + <td> </td> + <td> </td> + <td>{{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}</td> + </tr> + <tr> + <td>WebSocket Protocol</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>CORS</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>HTTP</td> + <td> </td> + <td><a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a></td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>TLS</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>MediaFragment</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Link: header</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Content-Disposition: header</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>URL</td> + <td><a href="http://url.spec.whatwg.org/" title="http://url.spec.whatwg.org/">Living Standard</a></td> + <td> </td> + <td> </td> + <td>{{domxref("URLUtils")}} {{domxref("URLUtilsReadOnly")}}</td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html new file mode 100644 index 0000000000..d57e5adef5 --- /dev/null +++ b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html @@ -0,0 +1,51 @@ +--- +title: Status of Web Components support in Firefox +slug: Web/Web_Components/Status_in_Firefox +translation_of: Web/Web_Components/Status_in_Firefox +--- +<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p> + +<p><a href="/en-US/docs/Web/Web_Components">Web Components</a> 依旧是一项非常新的技术，它的规范正随着浏览器的实现而不断演变并且 Web 开发者正在测试和使用它。 它的实现状态是变化的并且演变的十分迅速; 这篇文章列出了在 <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 上的状态, 用于 Firefox 和Firefox OS.</p> + +<div class="blob instapaper_body" id="readme"> +<article class="markdown-body entry-content"> +<h2 id="原生支持">原生支持</h2> + +<p>下面的特征已经被实现了并且默认在 Firefox and Firefox OS 中被激活:</p> + +<ul> + <li>{{HTMLElement("template")}}</li> +</ul> + +<h2 id="即将到来的特征">即将到来的特征</h2> + +<ul> + <li>一个实现关于新的 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 共识有望在2016年第一季度达成; <a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne's</a> 和 <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson's</a> 的博客讲述了这些细节。 这依然有 <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">大量的讨论和公开问题</a> 关于这个规范.。并且所有的浏览器实现被有望在未来得到更新.</li> + <li><strong>自定义元素</strong> 是从头开始, 用一种方式来重建它们使用 ECMAScript 6 “class” 语法 (换而言之, 更少的使用基于原型的语法). 苹果公司的 Ryosuke Niwa 正在填补某些实验性功能使用新的途径. + <ul> + <li>旧的语法将可以与新的语法一起在Chrome 中工作一段时间(例如, {{domxref("Element.createShadowRoot()")}} 对应 {{domxref("Element.attachShadow()")}}), 但不能原生的在Firefox中工作。</li> + </ul> + </li> + <li>这将会有一个供应商 <a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">面对面交流的机会在2016年一月</a> 来讨论问来会出现的问题 。</li> +</ul> + +<h2 id="被摒弃的功能">被摒弃的功能</h2> + +<p>这些功能已被考虑实现了, 并且有些是实验性实现。但他们将会永远不被实现, 或者被删除。</p> + +<ul> + <li><strong>HTML imports</strong>, 因为我们想等着看看开发者如何使用ES6 模块 (虽然还没有实现; 查看 {{bug(568953)}}). imports是一个早期未完成实现，并且将会被删除从Firefox中。</li> +</ul> + +<h2 id="在Firefox中使用垫片">在Firefox中使用垫片</h2> + +<p>这有些注意事项在Firefox中使用垫片的时候：</p> + +<ul> + <li>当你激活原生Web容器支持在Firefox中通过设置 {{pref("dom.webcomponents.enabled")}} 偏好 为 <code>true</code> 在 <code>about:config 中</code>, 这个未完成的原生实现开始运作并且垫片可能会出现混淆; 这会有很大的可能性出现崩溃.</li> + <li>一个使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> 垫片生成的Shadow DOM 并没有完全包裹样式, 所以这个 样式 可能会溢出。 要注意使用垫片构建的网址当运行在不支持原生Shadow DOM的环境之下时可能会出现差异.</li> + <li>这个Shadow DOM 垫片运行时非常缓慢的以为他重写了DOM元素的原型来挂在它的功能 。</li> + <li>如果你不需要使用 Shadow DOM, 使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> 版本的 webcomponents.js 垫片是一个名明智的选择; 这个版本不填补 Shadow DOM.</li> +</ul> +</article> +</div> |