Add a Submit Button to a Form
让我们来为你的form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。
下面是submit按钮的例子：
this button submits the form
为你的form元素添加一个type为submit的提交按钮，用"Submit"作按钮文本。
Use HTML5 to Require a Field
当你设计表单时，你可以指定某些选项为必填项(required)，只有当用户填写了该选项后，用户才能够提交表单。
例如，如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用：
任务：给你的输入框添加required属性，这样用户不填写输入框就无法提交表单。
试试输入框不填写任何文本，然后点击Submit提交表单，看看浏览器如何提示你该字段为必填项。
注意：required属性在Safari浏览器中不起作用，请用其他浏览器来学习，推荐使用Chrome。
Create a Set of Radio Buttons
类比是最好的学习方式，当你搞不清一个概念时，最好在生活中找到对应的案例。
单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。
多选一的场景就用radio button(单选按钮)
单选按钮只是input输入框的一种类型。
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：所有关联的单选按钮应该使用相同的name属性。
下面是一个单选按钮的例子：
Indoor
给你的表单添加两个单选按钮，一个叫indoor，另一个叫outdoor。
Create a Set of Checkboxes
当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门。
这样的场景就用checkboxes（复选按钮）。
复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
下面是复选按钮的例子：
Loving
任务：为你的表单添加三个复选按钮，每个复选按钮都应该嵌套进它自己的label元素，所有复选按钮的name属性必须为personality。
Check Radio Buttons and Checkboxes by Default
使用checked属性，你可以设置复选按钮和单选按钮默认被选中。
为此，只需在input元素中添加属性checked
把你的第一个radio button和第一个checkbox都设置为默认选中。
Nest Many Elements within a Single Div Element
div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。
你可以用
来标记一个div元素的开始，然后用
来标记一个div元素的结束。
试着在你的"Things cats love"p元素之前放置div的开始标记，在你的ol结束标记之后放置div的结束标记，这样你的两个列表就都嵌套在div中了。
把"Things cats love"和"Things cats hate"两个列表都嵌套进同一个div元素中。
相当于把一些东西框在了一起，可以作为一个整体。联系盒子模型~
Give a Background Color to a Div Element
你可以用background-color属性来设置一个元素的背景颜色。
例如，如果你想把一个元素的背景颜色设置为green，你应该把这些加到你的style元素中：
.green-background {
background-color: green;
}
创建一个叫做gray-background的类选择器，设置其background-color为 gray，最后应用到div元素。
Set the ID of an Element
除了class属性之外，每一个 HTML 元素还可以使用id属性。
使用id属性有若干好处，一旦当你开始使用 jQuery 的时候你会有更深的体会。
id属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的id属性。
下面举例说明了如何设置h2元素的id属性为cat-photo-app。
任务：设置form元素的id属性为cat-photo-form。
Use an ID Attribute to Style an Element
和类选择器一样，你也可以使用ID选择器来声明样式。
声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：
#cat-photo-element {
background-color: green;
}
注意：在你的style元素内部，定义类选择器必须添加.为前缀，定义ID选择器必须添加#为前缀。
任务：试着给你的表单，添加一个值为cat-photo-form的 id 属性，一个绿色的背景。
Adjusting the Padding of an Element
现在让我们把 Cat Photo App 暂时搁置，以学习更多的 HTML 样式。
你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的padding控制元素内容content和元素边框border之间的距离。
在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的padding。
当你加大绿方块的padding, 它将扩大元素内容和元素边框的距离。
任务：修改绿方块的padding以使它与红方块相匹配。
Adjust the Margin of an Element
元素的外边距margin控制元素边框border和元素实际所占空间的距离。
在这儿，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距margin，使得它看起来更小。
当你增大绿方块的margin时，将会增加元素边框和元素实际所占空间之间的距离。
修改绿方块的margin以使它与红方块匹配。
Add a Negative Margin to an Element
元素的margin控制元素的border和元素实际所占空间的距离。
如果你将一个元素的margin设置为负值，元素将会变大。
具体可以看看红方块的margin值。
任务：把绿方块的margin设置为-15px，以使它将父容器(黄方块)的横向宽度填满。
Add Different Padding to Each Side of an Element
有时你想要自定义元素，使它的每一个边具有不同的padding。
CSS 允许你使用padding-top、padding-right、padding-bottom和padding-left来控制元素上右下左四个方向的padding。
使你的绿方块的顶部和左侧具有40px的padding，而底部和右侧则是20px。
Add Different Margins to Each Side of an Element
有时你想要自定义元素，使它的每一个边具有不同的margin。
CSS 允许你使用margin-top、margin-right、margin-bottom和margin-left来控制元素上右下左四个方向的margin。
使你的绿方块的顶部和左侧具有40px的margin，而底部和右侧则是20px。
Use Clockwise Notation to Specify the Padding of an Element
除了分别指定元素的padding-top、padding-right、padding-bottom和padding-left属性外，你还可以集中起来指定它们，举例如下：
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
使用顺时针方式设置 ".green-box" class，使其顶部和左侧具有40px的padding，而底部和右侧具有20px的padding。
Use Clockwise Notation to Specify the Margin of an Element
让我们再试一次，但这次是用于margin。
除了分别指定元素的margin-top、margin-right、margin-bottom和margin-left属性外，你还可以集中起来指定它们，举例如下：
margin: 10px 20px 10px 20px;
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
使用顺时针表示法设置含有 ".green-box" class 的元素，使其顶部和左侧具有40px的margin，而底部和右侧具有20px的margin。
Style the HTML Body Element
现在让我们来一个全新的开始，讲一讲 CSS 继承。
每一个 HTML 页面都有一个body元素。
通过将其background-color设置为黑色，我们可以证明body元素的存在
我们可以通过将下面的代码添加到我们的style元素来做到这一点：
body {
background-color: black;
}
Inherit Styles from the Body Element
现在我们证明了每一个 HTML 页面都有一个body元素，并且其body元素同样能够应用样式。
记住，你可以像对其他 HTML 元素一样对你的body元素应用样式，并且所有其他元素将继承你的body元素的样式。
首先，创建一个文字为Hello World的h1元素。
然后，让我们通过向body元素的样式声明部分添加color: green;使页面上的所有元素的颜色为green。
最后，通过向body元素的样式声明部分添加font-family: Monospace;将body元素的 font-family（字体）设置为Monospace。
Prioritize One Style Over Another
有时你的 HTML 元素会得到相互冲突的多个样式。
例如，你的h1元素不能同时为绿色和粉色。
让我们来看看当我们创建一个使其文字为粉色的 class 时会发生什么，然后将其应用到某元素。我们的 class 会override（覆盖）body元素的color: green;CSS 属性吗？
创建一个使元素颜色成为粉色的名为pink-text的 CSS class。
设置h1元素的 class 为pink-text。
Override Styles in Subsequent CSS
我们的 "pink-text" class 覆盖了body元素的 CSS 声明！
我们刚刚证明了我们的 class 会覆盖body元素的 CSS，那么下一个合乎情理的问题就是，我们怎样才能覆盖我们的pink-textclass 呢？
再创建一个把元素设置为蓝色的名为blue-text的 CSS class，确保它在你的pink-textclass 声明的下面。
除了pink-textclass 之外，再把blue-textclass 应用到你的h1元素，让我们来看看谁会赢。
如下例，通过用空格分隔多个 class 属性，可对 HTML 元素应用多个 class 属性：
class="class1 class2"
注意：在 HTML 中这些 class 如何排序是无所谓的。
然而，