使⽤⼀个CSSClass去给标签定义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>
<img class="smaller-image thick-green-border"  class="thick-green-border src="/statics/codecamp/images/relaxing-cat.jpg"> 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 添加单选框
textstyle
你可以使⽤单选按钮来解决你希望⽤户只给出⼀个答案的问题。
单选按钮是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元素的结束。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。