diff options
| author | t7yang <t7yang@gmail.com> | 2021-07-17 16:10:02 +0800 |
|---|---|---|
| committer | Irvin <irvinfly@gmail.com> | 2021-07-19 23:04:27 +0800 |
| commit | a02f4b2f60c81e09b318a090e5c9c2d2d641c878 (patch) | |
| tree | 2b1849e7a34cb367ff6624e35a35fc827eceef6b /files/zh-cn/learn | |
| parent | 8af4d5e8a260f3474b4273d573532ec6fec08ab4 (diff) | |
| download | translated-content-a02f4b2f60c81e09b318a090e5c9c2d2d641c878.tar.gz translated-content-a02f4b2f60c81e09b318a090e5c9c2d2d641c878.tar.bz2 translated-content-a02f4b2f60c81e09b318a090e5c9c2d2d641c878.zip | |
replace wiki links in zh-CN
Diffstat (limited to 'files/zh-cn/learn')
19 files changed, 34 insertions, 34 deletions
diff --git a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html index 2626700a44..fe698d1655 100644 --- a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html @@ -161,7 +161,7 @@ original_slug: Learn/Discover_browser_developer_tools <p>了解不同浏览器中的JavaScript调试器：</p> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li> + <li><a href="/zh-CN/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li> <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger">Microsoft Edge Debugger</a></li> <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Chrome Debugger</a></li> <li><a href="https://developer.apple.com/safari/tools/">Safari Debugger</a></li> diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html index ebbfda7feb..5bf5e8b8f0 100644 --- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -38,7 +38,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading和{{htmlelement("span")}}元素。</p> -<p><strong>尝试修改为任何可用的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 值。</strong></p> +<p><strong>尝试修改为任何可用的 <a href="/zh-CN/docs/Web/CSS/color_value"><color></a> 值。</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> @@ -242,7 +242,7 @@ background-position: 10px 20px, top right;</pre> } </code></pre> <div class="blockIndicator note"> -<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> +<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> </div> <p><strong>有各种各样的样式可以用于边框。在下面的例子中，为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</strong></p> diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html index 50203520bd..04abdac441 100644 --- a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <tbody> <tr> <th scope="row">必备条件:</th> - <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> </tr> <tr> <th scope="row">目标:</th> @@ -22,19 +22,19 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h2 id="如何使用浏览器开发者工具">如何使用浏览器开发者工具</h2> -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> +<p><a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> -<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> +<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> <p>我们这节课会重点看用于处理 CSS 的开发者工具中的一些有用特性。为此，我会用<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">一个示例</a>。想跟着学习的话，就在新标签页加载该网页吧，并打开开发者工具（上述文章对该工具有描述）。</p> <h2 id="比较_DOM_和_View_Source">比较 DOM 和 View Source</h2> -<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> +<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> <p>浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<code><h2></code>，结束标签是<code></h3></code>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <code><h2></code> 起始，以 <code></h2></code> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。</p> -<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> +<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> <h2 id="审查_CSS">审查 CSS</h2> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html index 3766312aff..54c4e46f08 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <tbody> <tr> <th scope="row">学习前提：</th> - <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> </tr> <tr> <th scope="row">目标：</th> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 776b149893..af123b4dc3 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <tbody> <tr> <th scope="row">学习前提：</th> - <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> </tr> <tr> <th scope="row">目标：</th> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html index 81505125b2..7d09b770d9 100644 --- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -36,7 +36,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <h2 id="设置具体的尺寸">设置具体的尺寸</h2> -<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> +<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html index cce5429572..4027d5f1f6 100644 --- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html +++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html @@ -278,7 +278,7 @@ table { <h2 id="小试牛刀！">小试牛刀！</h2> -<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> +<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> <h2 id="总结">总结</h2> diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html index 7e53a7922c..f0224db80d 100644 --- a/files/zh-cn/learn/css/css_layout/flexbox/index.html +++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html @@ -320,7 +320,7 @@ article:nth-of-type(3) { <h2 id="测试你的技能">测试你的技能</h2> -<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> +<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> <h2 id="总结">总结</h2> diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html index eca25a84b8..ab825e40e4 100644 --- a/files/zh-cn/learn/css/css_layout/grids/index.html +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -471,7 +471,7 @@ aside { <p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> <div class="blockIndicator note"> -<p><strong>注意：</strong>你也可以用<code>-1</code>来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Glossary/Grid">隐式网格</a><code>-1</code>不一定能定位到最后一条分隔线。</p> +<p><strong>注意：</strong>你也可以用<code>-1</code>来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于<a href="/zh-CN/docs/Glossary/Grid">隐式网格</a><code>-1</code>不一定能定位到最后一条分隔线。</p> </div> <h2 id="使用grid-template-areas属性放置元素">使用grid-template-areas属性放置元素</h2> @@ -679,13 +679,13 @@ aside { <p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> -<p>你可以使用<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>去查看页面中的网格线，你应该能看到这12列的网格是如何工作的。</p> +<p>你可以使用<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>去查看页面中的网格线，你应该能看到这12列的网格是如何工作的。</p> <p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png"></p> <h2 id="纸上得来终觉浅！">纸上得来终觉浅！</h2> -<p>你已经读完了这篇教程，那你记住那些最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grid_skills">技能测试：网格</a>.</p> +<p>你已经读完了这篇教程，那你记住那些最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grid_skills">技能测试：网格</a>.</p> <h2 id="小结">小结</h2> @@ -694,8 +694,8 @@ aside { <h2 id="推荐阅读">推荐阅读</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS网格指南</a></li> - <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS网格检查器：检查的你的网格版面</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS网格指南</a></li> + <li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS网格检查器：检查的你的网格版面</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index 7657c460f7..a96e967bad 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -98,7 +98,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <h2 id="弹性盒子Flexbox">弹性盒子(Flexbox)</h2> -<p>Flexbox 是CSS 弹性盒子布局模块（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照flex进行布局。我们来看一个例子。</p> +<p>Flexbox 是CSS 弹性盒子布局模块（<a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照flex进行布局。我们来看一个例子。</p> <p>下面这些HTML标记描述了一个class为<code>wrapper</code>的容器元素，它的内部有三个<code><div></code>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。</p> diff --git a/files/zh-cn/learn/css/css_layout/normal_flow/index.html b/files/zh-cn/learn/css/css_layout/normal_flow/index.html index 362c46ddf3..ccf4dfc477 100644 --- a/files/zh-cn/learn/css/css_layout/normal_flow/index.html +++ b/files/zh-cn/learn/css/css_layout/normal_flow/index.html @@ -33,9 +33,9 @@ translation_of: Learn/CSS/CSS_layout/Normal_Flow <p>首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距 --- 就是我们之前看到的盒子模型。</p> -<p>默认的，一个<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">块级元素</a>的内容宽度是其父元素的100%，其高度与其内容高度一致。<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">内联元素</a>的height width与内容一致。你无法设置内联元素的height width --- 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置<code>display: block;</code> （或者，<code>display: inline-block;</code> inline-block 混合了inline 和 block的特性。)</p> +<p>默认的，一个<a href="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>的内容宽度是其父元素的100%，其高度与其内容高度一致。<a href="/zh-CN/docs/Web/HTML/Inline_elements">内联元素</a>的height width与内容一致。你无法设置内联元素的height width --- 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置<code>display: block;</code> （或者，<code>display: inline-block;</code> inline-block 混合了inline 和 block的特性。)</p> -<p>这样解释了独立元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">书写顺序</a>(<em>默认值:</em> horizontal-tb)的<em>块流动方向(block flow direction)</em>放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。</p> +<p>这样解释了独立元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的<a href="/zh-CN/docs/Web/CSS/writing-mode">书写顺序</a>(<em>默认值:</em> horizontal-tb)的<em>块流动方向(block flow direction)</em>放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。</p> <p>内联元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。</p> diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index 3965d4bef1..d5e21680d0 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -596,7 +596,7 @@ dt { <h2 id="试试你的技术!">试试你的技术!</h2> -<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> +<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> <h2 id="总结">总结</h2> diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html index b128523809..2e794fbe9c 100644 --- a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html +++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html @@ -28,7 +28,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <p>减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的<a href="https://developer.mozilla.org/en-US/docs/HTTP">HTTP</a>请求数量，从而减少这些请求的收发时间。</p> -<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p> +<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="/zh-CN/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p> <p>If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.</p> @@ -90,7 +90,7 @@ original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages <h3 id="Chunk_your_content" name="Chunk_your_content">给内容分块</h3> -<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p> +<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p> <p>当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。</p> diff --git a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html index 6cd8ad3a68..3db44af11d 100644 --- a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -17,7 +17,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks <tbody> <tr> <th scope="row">前提:</th> - <td>熟悉基本HTML（包含在<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"> 开始学习HTML</a>中），HTML 文本格式（包含在 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML文字基础</a> 中）。</td> + <td>熟悉基本HTML（包含在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started"> 开始学习HTML</a>中），HTML 文本格式（包含在 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML文字基础</a> 中）。</td> </tr> <tr> <th scope="row">目标:</th> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 8fa670c5a3..a4fcc5a95e 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -73,13 +73,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content <h4 id="媒体文件的内容">媒体文件的内容</h4> -<p>我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">容器格式</a>。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。</p> +<p>我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做<a href="/zh-CN/docs/Web/Media/Formats/Containers">容器格式</a>。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。</p> <p>一个格式为 WebM 的电影包含视频轨道，音频轨道和文本轨道，其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道；音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道；文字轨道包含英语和西班牙语的字幕轨道，如下图所示：</p> <p><img alt="Diagram conceptualizing the contents of a media file at the track level." src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg"></p> -<p>为了编解码器（codec）编码媒体，容器中的音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。每个音频轨道都使用<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">音频编解码器</a>进行编码，而视频轨道则使用（您可能已经猜到了）<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">视频编解码器</a>进行编码。如前所述，不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频）。</p> +<p>为了编解码器（codec）编码媒体，容器中的音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。每个音频轨道都使用<a href="/zh-CN/docs/Web/Media/Formats/Audio_codecs">音频编解码器</a>进行编码，而视频轨道则使用（您可能已经猜到了）<a href="/zh-CN/docs/Web/Media/Formats/Video_codecs">视频编解码器</a>进行编码。如前所述，不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频）。</p> <p>例如:</p> diff --git a/files/zh-cn/learn/javascript/building_blocks/return_values/index.html b/files/zh-cn/learn/javascript/building_blocks/return_values/index.html index 38f9fe0eff..dfc53c87e6 100644 --- a/files/zh-cn/learn/javascript/building_blocks/return_values/index.html +++ b/files/zh-cn/learn/javascript/building_blocks/return_values/index.html @@ -39,7 +39,7 @@ console.log(newString); // replaces one substring with another, and returns // a new string with the replacement made</pre> -<p>在第一篇函数文章中，我们确切地看到了这一块代码。我们对 <code>myText</code> 字符串调用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> 功能，并通过这两个参数的字符串查找，和子串替换它。当这个函数完成（完成运行）后，它返回一个值，这个值是一个新的字符串，它具有替换的功能。在上面的代码中，我们保存这个返回值，以作为<code>newString</code>变量的内容。</p> +<p>在第一篇函数文章中，我们确切地看到了这一块代码。我们对 <code>myText</code> 字符串调用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> 功能，并通过这两个参数的字符串查找，和子串替换它。当这个函数完成（完成运行）后，它返回一个值，这个值是一个新的字符串，它具有替换的功能。在上面的代码中，我们保存这个返回值，以作为<code>newString</code>变量的内容。</p> <p>如果你看看替换功能MDN参考页面，你会看到一个<a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">返回值</a>。知道和理解函数返回的值是非常有用的，因此我们尽可能地包含这些信息。</p> @@ -49,7 +49,7 @@ console.log(newString); <h3 id="在自定义的函数中使用返回值">在自定义的函数中使用返回值</h3> -<p>要从自定义函数返回值，您需要使用…等待它… <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> 关键字。 我们最近在<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>示例中看到了这一点。 我们的 <code>draw()</code> 函数绘制100随机圆在HTML的{{htmlelement("canvas")}}:</p> +<p>要从自定义函数返回值，您需要使用…等待它… <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/return">return</a> 关键字。 我们最近在<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>示例中看到了这一点。 我们的 <code>draw()</code> 函数绘制100随机圆在HTML的{{htmlelement("canvas")}}:</p> <pre class="brush: js notranslate">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html index feef3ef243..8f11d5b389 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_fi <tr> <th scope="row">前提条件:</th> <td> - <p>熟悉<a href="https://wiki.developer.mozilla.org/zh-CN/docs/learn/HTML">HTML</a>、<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS">CSS</a>、<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/JavaScript">JavaScript</a>核心语言，了解<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">终端或命令行</a>。</p> + <p>熟悉<a href="/zh-CN/docs/learn/HTML">HTML</a>、<a href="/zh-CN/docs/Learn/CSS">CSS</a>、<a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a>核心语言，了解<a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">终端或命令行</a>。</p> <p>Vue组件是由管理应用程序数据的JavaScript对象和映射到基础DOM结构的基于HTML的模板语法组成的。对于安装，以及使用Vue的一些更高级的功能（如单文件组件或渲染函数），你需要一个安装了node和npm的终端。</p> </td> @@ -47,7 +47,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_fi export default {}; </script></pre> -<p>现在我们可以开始为<code>ToDoItem</code>添加实际内容了。Vue模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容（Vue 3 发布后会改变这种情况）。我们将为该根元素使用一个<code><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><div></a></code>。</p> +<p>现在我们可以开始为<code>ToDoItem</code>添加实际内容了。Vue模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容（Vue 3 发布后会改变这种情况）。我们将为该根元素使用一个<code><a href="/zh-CN/docs/Web/HTML/Element/div"><div></a></code>。</p> <ol> <li> diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 6822995d45..1244c6d786 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="一个更简洁的框架——Vue">一个更简洁的框架——Vue</h2> -<p>Vue是一个现代JavaScript框架提供了有用的设施渐进增强——不像许多其他框架,您可以使用Vue增强现有的HTML。这使您可以使用Vue作为<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Glossary/jQuery">jQuery</a>等库的临时替代品。</p> +<p>Vue是一个现代JavaScript框架提供了有用的设施渐进增强——不像许多其他框架,您可以使用Vue增强现有的HTML。这使您可以使用Vue作为<a href="/zh-CN/docs/Glossary/jQuery">jQuery</a>等库的临时替代品。</p> <p>也就是说,您还可以使用Vue编写整个单页应用程序(SPAs)。这允许您创建标记完全由Vue管理,可以提高开发人员的经验和性能在处理复杂的应用程序。当你需要的时候它还允许您利用其他库对客户端路由和状态进行管理。此外,Vue需要“中间地带”的方法工具客户端路由和状态管理。虽然Vue核心团队维护了建议的函数库，但他们并没有直接捆绑到 Vue 里。这样你就可以选择一个其他路由/状态管理库，来更好地适应您的应用程序。</p> @@ -40,7 +40,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="安装Vue">安装Vue</h2> -<p>要在现有站点中使用Vue，可以通过<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><script></a>元素在页面中使用。这使您可以开始在现有站点上使用Vue，这就是Vue引以为傲的渐进式框架的原因。当使用JQuery这样的库将现有项目迁移到Vue时，这是一个很好的选择。通过这种方法，您可以使用Vue的许多核心功能，例如属性、自定义组件和数据管理。</p> +<p>要在现有站点中使用Vue，可以通过<a href="/zh-CN/docs/Web/HTML/Element/script"><script></a>元素在页面中使用。这使您可以开始在现有站点上使用Vue，这就是Vue引以为傲的渐进式框架的原因。当使用JQuery这样的库将现有项目迁移到Vue时，这是一个很好的选择。通过这种方法，您可以使用Vue的许多核心功能，例如属性、自定义组件和数据管理。</p> <ul> <li> diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 0e2cd596de..90e04c85ff 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -130,7 +130,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <p><strong>注意：</strong>请参阅<a href="https://developer.mozilla.org/zh-CN/docs/preview-wiki-content#IE_conditional_comments">IE条件注释</a>以获取最佳实践。</p> </div> -<p>更复杂的元素，如HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video></a></code>、<code><a href="/zh-CN/docs/Web/HTML/Element/audio"><audio></a></code>，和 <code><a href="/zh-CN/docs/Web/HTML/Element/canvas"><canvas></a></code>（和其他功能除外）有自然的fallback加入机制，其工作原理与上述相同。您可以在开始和结束标记之间添加回退内容，非支持的浏览器将有效地忽略外部元素并运行嵌套的内容。</p> +<p>更复杂的元素，如HTML <code><a href="/zh-CN/docs/Web/HTML/Element/video"><video></a></code>、<code><a href="/zh-CN/docs/Web/HTML/Element/audio"><audio></a></code>，和 <code><a href="/zh-CN/docs/Web/HTML/Element/canvas"><canvas></a></code>（和其他功能除外）有自然的fallback加入机制，其工作原理与上述相同。您可以在开始和结束标记之间添加回退内容，非支持的浏览器将有效地忽略外部元素并运行嵌套的内容。</p> <p>例如：</p> |