fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@@ -0,0 +1,18 @@
title: Add a Submit Button to a Form
localeTitle: undefined
--- ## 向表单添加提交按钮
在此挑战中,您希望将提交按钮作为表单的最后一个元素(在`</form>`结束标记之前)插入,并为其提供属性`type="submit"` (全部小写)和文本内容“提交” “(第一个字母大写),在挑战指令中指定。
1属性`type` `submit`值也在`input`标记内有效,它将呈现具有几乎相同行为的按钮,但这不是您要在此挑战中使用的标记。
```
<input type="submit">
```
如果您未指定值,则该按钮将具有您的用户代理选择的默认值(通常这类似于“提交”或“提交查询”)。
如果您希望指定类似“发送请求”的值,您可以这样做:
```
<input type="submit" value="Send Request">
```

View File

@@ -0,0 +1,11 @@
---
title: Add Images to Your Website
localeTitle: 添加图片到您的网站
---
## 添加图片到您的网站
属性是插入标记的键值对。语法为`<tag key1="value1" key2="value2"> </tag>`或者,在自闭标签的情况下, `<tag key1="value1" key2="value2" />` - 注意对是由空格字符分隔,而不是逗号。
### 资源
* [HTML属性](https://guide.freecodecamp.org/html/attributes)

View File

@@ -0,0 +1,14 @@
---
title: Add Placeholder Text to a Text Field
localeTitle: 将占位符文本添加到文本字段
---
## 将占位符文本添加到文本字段
`placeholder`是属性,而不是标记。它可以与`input`标记的属性`text`一起使用,以创建在输入框为空时可视化的文本。
如果您遇到这些问题,请检查:
* 您应该将`placeholder`属性添加到代码中已存在的`input`标记中,而不删除任何内容;如果您意外删除或修改了某些内容,请记住您可以通过单击`reset all code`按钮重新启动干净代码
* 语法与每个属性相同: `<tag attributeName="attributeValue" >`并且要插入的值由质询的指令指示(检查拼写错误)。
祝你好运!

View File

@@ -0,0 +1,11 @@
---
title: Check Radio Buttons and Checkboxes by Default
localeTitle: 默认情况下检查单选按钮和复选框
---
## 默认情况下检查单选按钮和复选框
`checked`属性,只能与`type="radio"``type="checkbox"` ,是一个布尔属性(你可以在这个链接上检查有关`required`属性的挑战,布尔也是如此: [使用html5来要求一个字段](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field/) )。
作为布尔属性,您只需将`checked`的单词添加到默认情况下要设置的`input` HTML元素挑战要求您默认设置代码中已存在_的第一个_复选框和单选按钮
祝你好运!

View File

@@ -0,0 +1,18 @@
---
title: Comment out HTML
localeTitle: 评论HTML
---
## 评论HTML
注释语法与其他每个HTML元素相同
例:
```
<!-- code -->
```
子元素|描述 ---------- | ----------- `<!--` |打开标签 代码|评论文字 `-->` |关闭标签
如果你想在代码中只注释一些你希望将它们包装在注释元素中的元素 - 在它们之前创建一个开始标记,在它之后创建一个结束标记。
玩的开心!

View File

@@ -0,0 +1,29 @@
---
title: Create a Bulleted Unordered List
localeTitle: 创建项目符号无序列表
---
## 创建项目符号无序列表
要通过挑战,您应该执行的第一个操作是删除包含其所有内容的`p`元素。
之后你必须实现列表:它必须在`ul`元素中包含至少三个`li`元素,并且这些`li`必须在同一级别上,而不是彼此嵌套:
正确:
```
<ul>
<li></li>
<li></li>
</ul>
```
不正确:
```
<ul>
<li>
<li>
</li>
</li>
</ul>
```
祝你好运!

View File

@@ -0,0 +1,13 @@
---
title: Create a Form Element
localeTitle: 创建表单元素
---
`<form>`是用于直接从用户输入收集信息的元素。当您使用此HTML元素时您将识别用于收集用户选择的部分。
在此HTML元素中您可以插入一些`input`标记,用于根据`type`属性以不同方式收集数据。
所有这些数据都将被发送到表单的`action`属性中指定的页面。这只是一个相对路径,指示希望接收此数据的页面。
在这个挑战中,您已经有了一个`input`元素。您需要做的就是在它周围包装一个`form`标签。不要忘记`action`属性。使用质询指示的值(双击语法)。
祝你好运!

View File

@@ -0,0 +1,13 @@
---
title: Create a Set of Checkboxes
localeTitle: 创建一组复选框
---
## 创建一组复选框
`type="checkbox"`属性基本上与`type="radio"`属性的作用相同:主要区别在于复选框用于收集一个或多个选项,当您需要独占选择(一个或另一个)时使用单选按钮。
`name`属性表示该复选框所属的组,并且作为组的一部分将更容易管理服务器端的数据。
要解决这个难题,您需要创建三个`input` HTML元素其属性为`type="checkbox"` `name`属性设置为`"personality"` (大写问题);标签的文本内容由您决定。
祝你好运!

View File

@@ -0,0 +1,17 @@
---
title: Create a Set of Radio Buttons
localeTitle: 创建一组单选按钮
---
## 创建一组单选按钮
要解决这一挑战,您可以将其分解为更好地理解步骤:
* 创建“容器”:放下两个`label`元素并向他们提供挑战所要求的文本内容(一个必须有“室内”文本,一个“室外”,大写字母);
* 创建'content':一个单选按钮,它只是一个`input`元素, `type=radio` (创建其中两个);
* 创建一_组_单选按钮将两个单选按钮的属性`name`设置为相同的值(挑战说明指出该组必须命名为`indoor-outdoor` ;
* 将每个单选按钮嵌套在标签中;
祝你好运!

View File

@@ -0,0 +1,15 @@
---
title: Create a Text Field
localeTitle: 创建文本字段
---
## 创建文本字段
`input`可以被归类为通用标签:实际上它的特征在于其属性`type` ,其可以假设一系列不同的值并且基于该值,然后`input`将被呈现为不同的对象。
一些不同`type`值的示例:
类型值|码 - | - 文字| `<input type="text" />` 复选框| `<input type="checkbox" />` 收音机| `<input type="radio" />` 按钮| `<input type="button" />` ...
挑战要求您在不修改现有代码的情况下设置类型设置为`text``input`标记;如果出现问题,请仔细检查标签错误(因为`input`是自动关闭的,您只需要一个标签,而不是一对开关)。 如果您修改或删除了所提供代码的某些部分,则可以使用`reset all code`按钮重新启动。
祝你好运!

View File

@@ -0,0 +1,19 @@
---
title: Create an Ordered List
localeTitle: 创建有序列表
---
## 创建有序列表
有时人们会过度思考这种挑战:有序列表与无序列表具有完全相同的模式,它只是更改标记: `<ul>`表示无序, `<ol>`表示有序。
不同的效果是一个有子弹,另一个有数字(或其他渐进标记):
类型|代码|影响 - | - | - 无序的| `<ul><li>Bulleted item</li></ul>` |
* 项目符号项目
订购| `<ol><li>Numbered item</li></ol>` |
1. 编号项目
如果您不记得列表的工作原理,可以查看过去的挑战: [创建项目符号无序列表](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list) 。

View File

@@ -0,0 +1,13 @@
---
title: Declare the Doctype of an HTML Document
localeTitle: 声明HTML文档的Doctype
---
## 声明HTML文档的Doctype
Doctype的声明必须在第一行因为它向浏览器提供有关如何解释以下代码行的说明。
它后面可能跟一个`<html>`元素,即使它不是强制性的;这是文档的根元素,如果你不写它,大多数浏览器都会推断它。但是,明确地编写它是一个好习惯。
所有html元素都必须嵌套在`<html>` :在此挑战中,系统会要求您使用带有您选择内容的`<h1>`元素。
祝你好运!

View File

@@ -0,0 +1,18 @@
---
title: Define the Head and Body of an HTML Document
localeTitle: 定义HTML文档的头部和正文
---
## 定义HTML文档的头部和正文
`head`元素用于对文档的所有元数据进行分组, `body`用于显示文档的内容。
`head`你可以找到用于_描述_文档的任何类型的标签它将使用什么语言什么样式规则通过样式表链接它的标题文字描述......
无论如何, `head`元素中的任何内容都不会呈现在页面中您可以在浏览器的选项卡或书签栏中看到标题和图标但这不是_页面_ ,而是链接到它的浏览器元素。
相反, `body`包含了呈现在页面中的所有内容:也许不仅如此,而且确保所有这一切。
挑战为您提供了一个简单的html页面并要求您在正确的位置插入`head``body` html元素;换句话说,您应该使用`<body></body>`标记包装您可以看到在页面右侧呈现的所有元素,并使用`<head></head>`标记包装所有描述性内容。
请记住, `head``body`都必须是`<html>`元素的子元素。
祝你好运!

View File

@@ -0,0 +1,11 @@
---
title: Delete HTML Elements
localeTitle: 删除HTML元素
---
## 删除HTML元素
要删除HTML元素您必须删除其标记子元素内容无论它是什么都可以保留因为它不代表任何HTML元素。
请记住:如果您要求修改的部分以外的某些代码已更改,则可以通过单击“ `reset all code`按钮重新启动挑战。
祝你好运!

View File

@@ -0,0 +1,9 @@
---
title: Fill in the Blank with Placeholder Text
localeTitle: 使用占位符文本填充空白
---
## 使用占位符文本填充空白
您被要求将您在段落( `p`元素中看到的文本替换为挑战介绍提供的文本当您阅读_几个单词时_它意味着至少2个最多全部;如果您偶然删除或修改了除段落文本之外的某些代码,您可以单击`reset all code`按钮以使用干净的代码重新启动。
祝你好运!

View File

@@ -0,0 +1,28 @@
---
title: Headline with the h2 Element
localeTitle: 标题与h2元素
---
## 标题与h2元素
在第一课中您已经了解了HTML元素是什么并且您已经修改了一个。
现在你被要求自己写代码编辑器中已存在的第一个HTML元素 `<h1>Hello World</h1>` 使用h1标记检查其他元素
代码|效果 ----- | ------- `<h2> This is how an h2 heading looks like</h2>` |
## 这就是h2标题的样子
`<h3> Followed by this h3 tag </h3>` |
### 其次是这个h3标签
`<h4> Look at the h4, the middle </h4>` |
#### 看看h4中间
`<h5> Here is a tiny h5 </h5>` |
##### 这是一个小小的h5
`<h6> The last - h6 </h6>` |
###### 最后 - h6

View File

@@ -0,0 +1,11 @@
---
title: Basic HTML and HTML5
localeTitle: 基本的HTML和HTML5
---
## 基本的HTML和HTML5
这是一个存根。 [帮助我们的社区扩展它](https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md) 。
[这种快速风格指南有助于确保您的拉取请求被接受](https://github.com/freecodecamp/guides/blob/master/README.md) 。
#### 更多信息:

View File

@@ -0,0 +1,13 @@
---
title: Inform with the Paragraph Element
localeTitle: 通知段落元素
---
系统会要求您创建另一个HTML元素。简要回顾一下如何实现这一目标
* 创建一个开始标记。
* 写一些内容(通常是纯文本)
* 创建结束标记。
祝你好运!

View File

@@ -0,0 +1,17 @@
---
title: Introduction to HTML5 Elements
localeTitle: HTML5元素简介
---
## HTML5元素简介
将HTML元素包装在其他HTML元素周围意味着将_内部_元素放在包装器的开始标记之后和结束标记之前。
下面的示例表示包含在`header`元素中的`h1`元素和`h4`元素:
```
<header>
<h1> Big title </h1>
<h4> Tiny subtitle </h4>
</header>
```
正如您所看到的, `header`包含最终位于同一级别的其他元素( `h1``h4`开始之前结束,并且两者都嵌套在`header` )。

View File

@@ -0,0 +1,23 @@
---
title: Link to External Pages with Anchor Elements
localeTitle: 链接到具有锚元素的外部页面
---
## 链接到具有锚元素的外部页面
在这个挑战中,你应该使用到目前为止所学到的一切。 HTML元素语法
* 打开标签
* 内容
* 关闭标签
标签属性语法:
* `<tag`
* 键=“值”
* `>` `/>`在自动关闭标签的情况下)
你被要求给一个`a`标记的属性(键) `href`与价值`"http://freecatphotoapp.com"` ,并使用文本“猫的照片”为相同的内容`a`标签
### 资源
* [`<a>`标签 - href属性](https://guide.freecodecamp.org/html/attributes/a-href-attribute)

View File

@@ -0,0 +1,21 @@
---
title: Link to Internal Sections of a Page with Anchor Elements
localeTitle: 链接到具有锚元素的页面的内部部分
---
## 链接到具有锚元素的页面的内部部分
如说明中所述,内部链接由两个元素组成: `a`标签和html元素`id``a`标签的`href`属性中使用。
所有这些都是有效的内部链接:
主播标签|带来 ----- | ------ `<a href="#destination">I am an internal link</a>` | `<p id="destination">I am the destination of the link</p>` `<a href="#inlinestuff">I am an internal link</a>` | `<span id="inlinestuff">I am the destination of the link</span>` `<a href="#title">I am an internal link</a>` | `<h1 id="title">I am the destination of the link</h1>` `<a href="#mainarticle">I am an internal link</a>` | `<article id="mainarticle">I am the destination of the link</article>`
系统会要求您使用现有的锚元素来创建内部链接,因此请勿编写其他锚标记。
要改变实际的锚标签并不是挑战要求你做的唯一事情,还有两点:
* 要删除`a`标记的`target`属性:您不再希望在浏览器中打开新标签页,它将是向上/向下“移动”的实际页面。
* 要修改的文本内容`a`标签:从`cat photos``Jump to Bottom` (仔细检查大小写)。
祝你好运!

View File

@@ -0,0 +1,13 @@
---
title: Make Dead Links Using the Hash Symbol
localeTitle: 使用哈希符号制作死链接
---
## 使用哈希符号制作死链接
死链接只是一个锚点元素语法正确点击时点击页面顶部而不刷新内容您可以在FCC论坛上查看此问题以获得更深入的分析 [Dead Link on HTML和CSS呢](https://forum.freecodecamp.org/t/what-does-dead-link-on-html-and-css-do/164550/7)
要创建一个死链接,首先应该编写一个普通的锚元素(挑战提供一个,不要重写它),然后按照说明中的说明修改`href`属性。
如果您已删除或比现有的href属性的其他原始代码修改的东西`a`标签记住,你可以点击`reset all code`按钮,用干净的代码重新启动。
祝你好运!

View File

@@ -0,0 +1,12 @@
---
title: Nest an Anchor Element within a Paragraph
localeTitle: 在段落中嵌入锚元素
---
## 在段落中嵌入锚元素
仔细阅读指令:即使这是一个关于挑战`a`标签并不一定意味着你应该处理它!
挑战介绍说明了现有`a`元素,它要求你编写嵌套的段落:换句话说,你只需要编写`p` HTML元素其中内容由一些文本组成 - “查看更多” (仔细检查大小写和最终空格) - 以及页面中已存在`a` HTML元素。
您可以按如下方式显示`p`元素的最终结构:
desc |码 ------- | --------- 打开标签| `<p>` 一些文字内容| `View more` 现有`a`元素| `<a>...</a>` 关闭标签| `</p>`

View File

@@ -0,0 +1,11 @@
---
title: Nest Many Elements within a Single div Element
localeTitle: 在单个div元素中嵌套许多元素
---
## 在单个div元素中嵌套许多元素
使用通用目标标记作为`div`来包装多个元素允许开发人员将共同样式应用于每个包装元素,对具有相同含义的元素进行分组,以创建不同的布局“包”等。
关于此挑战您必须对代码中已存在的列表进行分组您可以在段落用作无序列表标题之前使用开始div标记并将结束标记放在有序列表的正下方。
祝你好运!

View File

@@ -0,0 +1,19 @@
---
title: Say Hello to HTML Elements
localeTitle: 向HTML Elements说你好
---
## 向HTML Elements说你好
请考虑以下示例:
`<p>This is a paragraph</p>`
你可以称之为**_'p元素'_** ;分解成碎片你可以找到以下子元素:
子元素|描述 ----------- ---------- `<p>` |这是开场标签 `This is a paragraph` |这是元素的文本 `</p>` |这是结束标记
记住挑战请求:
> 将你的h1元素的文本更改为“Hello World”
祝你好运!

View File

@@ -0,0 +1,11 @@
---
title: Turn an Image into a Link
localeTitle: 将图像转换为链接
---
## 将图像转换为链接
在之前的挑战中您已经完成了将HTML元素嵌套到另一个中的任务例如 [在段落中嵌套锚元素](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph)
现在要求您使用不同的标签解决相同的问题:只需将图像(按原样)放在锚元素中,它就会成为该锚点的可点击内容。
祝你好运!

View File

@@ -0,0 +1,39 @@
---
title: Uncomment HTML
localeTitle: 取消注释HTML
---
## 取消注释HTML
评论主题在开始时通常有点令人困惑。 看看这个例子:
```
<!-- This is a commented block.
It doesn't matter how long it is, if it has <h1>HTML elements</h1> in it or if it develops
into
few lines,
everything between the first weird series of character and the last is commented out -->
```
你也可以在线使用评论: `<!-- Uh, I does not exists! -->`在这里!
唯一要考虑的是当你看到这组char `<!--`从那里看到的所有东西都被注释掉了,因为你找到了镜面反射`-->` ;这些是HTML元素的开始和结束标记
##### 取消注释
取消注释意味着从注释文本中取出取消注释后面句子的h3元素全部注释掉
```
<!-- <h1>Comment header</h1> <h3>Comment subtle</h3> <article>I am the text of the comment</article> -->
```
就像这样简单:
```
<!-- <h1>Comment header</h1> --> <h3>Comment subtle</h3> <!-- <article>I am the text of the comment</article> -->
```
注意如何在h3 HTML元素之前添加一个结束注释标记 `-->` )以匹配句子开头的开始注释标记,并在它之后添加一个开始注释标记( `<!--` 以匹配结束最后的标签这样你就创建了两个内联注释一个在h3元素之前一个在之后。
如果你想取消注释一切都更容易:
```
<h1>Comment header</h1> <h3>Comment subtle</h3> <article>I am the text of the comment</article>
```
只需删除评论的开始和结束标记即可。

View File

@@ -0,0 +1,15 @@
---
title: Use HTML5 to Require a Field
localeTitle: 使用HTML5需要字段
---
## 使用HTML5需要字段
`required`属性适用于几乎所有可能类型的`input`标记(它不起作用,因为它对类似按钮的类型或具有默认值的`type=range`没有意义,例如`type=range` 并强制用户离开提交_时至少_与所需输入交互的最小标记选择_至少_一个复选框 _在_文本框中键入_至少_一个字符等
它的使用阻止了表单提交,直到`required`条件没有被填满
您可以使用特定语法的`required`属性:因为它是一个布尔值,您可能只`required`编写而没有任何值。
在这个挑战中,你已经有了一个表单和一个输入元素:它要求你将`required`属性添加到input元素;请记住,如果原始代码的某些内容被意外修改或删除,您可以使用`reset all code`按钮始终使用干净的代码重新启动。
祝你好运!