使用一个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>

HTML 创建文本输入框

现在我们来创建一个Web表单。

文本输入框是获取用户输入的一种方便的方法。

你可以用如下方法创建：

<input type="text">

注意，input元素是自关闭的。

任务：在列表下创建一个type（类型）为 text 的input元素。

添加文本框设定预定值（占位符）属性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"。

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元素的结束。