使用一个CSS Class去给标签定义Style
使用一个CSS Class去给标签定义Style
类是可重用的样式，可以添加到HTML元素。
下面是一个CSS类声明的例子：
<style>
.blue-text {
color: blue;
}
</style>
你可以看到我们已经在 <style> 标签中创建了一个名为 blue-text 的CSS类。
你可以将类应用于HTML元素，如下所示：
<h2 class="blue-text">CatPhotoApp</h2>
注意，在CSS样式元素中，类选择器应该添加.为前缀。而在HTML元素的类声明中，类属性不能添加.为前缀。
在你的style元素中，将h2选择器修改为.red-text选择器，并将颜色值从blue修改为red。
最后，给你的 h2 元素的 class 属性的值为.red-text。
HTML 给标签增加边框
CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性。
例如，如果我们想要设定一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid)，代码如下所示:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
任务：创建一个叫 thick-green-border的class，设定它的边框宽度为10px、边框样式为solid、边框颜色为绿色，并将该class应用于你的猫咪照片上。
请记住，你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：
<img class="class1 class2">
<style>
.thick-grenn-border{border-width:10px;
border-style:solid;
border-color:green;}
</style>
</style>
HTML 创建文本输入框
现在我们来创建一个Web表单。
文本输入框是获取用户输入的一种方便的方法。
你可以用如下方法创建：
<input type="text">
注意，input元素是自关闭的。
任务：在列表下创建一个type（类型）为 text 的input元素。
<input type="text">
添加文本框设定预定值（占位符）属性placeholder
用法<input type="text" placceholder="预设文本">
效果
HTML 添加表单
你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作。
action属性的值指定了表单提交到服务器的地址。
例如：
<form action="/url-where-you-want-to-submit-form-data"></form>
把你的文本输入框嵌套到form元素中。并为此form元素添加action="/submit-cat-photo"。
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
HTML 为表单添加提交按钮
我们在form中添加一个 submit (提交)按钮。点击此按钮，表单中的数据将会被发送到你使用表单 action 属性指定的地址上。
以下是一个submit按钮的例子：
<button type="submit">this button submits the form</button>
在你的 form 元素中添加一个提交按钮，并以类型为 submit， "Submit"为按钮文本。
<form action="/submit-cat-photo">
<button type="submit">Submit</button>
<input type="text" placeholder="cat photo URL">
</form>
效果
HTML 添加单选框
你可以使用单选按钮来解决你希望用户只给出一个答案的问题。
单选按钮是 input 输入框的一种类型。
每个单选按钮都应该嵌套在自己的 label(标签) 元素中。
所有关联的单选按钮应具有相同的 name 属性。
下面是一个单选按钮的例子：
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在你的表单中添加两个单选按钮，一个叫 indoor，另一个叫 outdoor。
<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>
HTML 添加复选框
checkboxes（复选按钮）通常用于可能有多个答案的问题的形式。
复选按钮是 input 的输入框的一种类型。
每一个复选按钮都应嵌套在其自己的 label元素中。
所有关联的复选按钮输入应该具有相同的 name属性。
以下是一个复选按钮的示例：
<label><input type="checkbox" name="personality"> Loving</label>
任务：为你的表单添加三个复选按钮，每个复选按钮都应嵌套在其自己的 label 元素，所有复选按钮的name属性必须为personality。
<label><input type="checkbox" name="personality">Loving</label>
<label><input type="checkbox" name="personality">like</label>
<label><input type="checkbox" name="personality">hate</label>
效果
HTML 在div元素中嵌套多个元素
div 元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
div 元素是最常用的HTML元素。所以可以利用CSS的继承关系把 div 上的CSS传递给它所有子元素。
你可以使用<div>来标记一个div元素的开始，并使用</div>来标记一个div元素的结束。
