标签
<h> </h>
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。
<p> </p>
P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。
HTML 更换文本的颜色
style(样式)
<h1 style = "color: red"> TEXT </h1>
使用CSS选择器定义标签
<style>
h1 {color : red;}
</style>
<h1> text </h1>
注意：一定要在属性值的后面加上分号;。
设置标签的字体大小
font-size: 30px;
设置标签的字体样式
font-family: Sans-serif;
引入Google字体
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
font-family:Lobster
添加图片
<style>
.smaller-image{
width: 100px;
}
</style>
<img class="smaller-image" src="/statics/codecamp/images/relaxing-cat.jpg" alt="your alt text">
注意：<img>元素是自关闭的。
alt属性：当图片无法加载时显示的替代文本。
增加边框
CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)、边框半径等。
如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px; //除了像素，你还可以使用百分比来指定border-radius边框半径的值。border-radius: 50%
}
</style>
提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：
<img class = "thin-red-border smaller-image" scr="/statics/codecamp/images/relaxing-cat.jpg">
<a> </a>链接跳转
a元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
<a href='http://freecatphotoapp.com'> cat photos </a>
嵌套：
<p>view more
<a href = "http://baidu.com"> 点击 </a>
</p>
图片链接：
<a href="#"> <img src="/images/relaxing-cat.jpg"> </a>
项目符号无序列表&有序列表
HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
无序列表以<ul>元素开始，并包含一个或多个<li>元素。
有序列表以<ol>元素开始，并包含一个或多个<li>元素。
<ul>
<li>cat</li>
<li>pig</li>
</ul>
cat
pig
文本输入框
Text input(文本输入框)是用来获得用户输入的绝佳方式。
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
<input type="text" placeholder="this is placeholder text">
添加表单
<form><form>标签用于为用户输入创建 HTML 表单。
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。
表单用于向服务器传输数据。
使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。
为表单添加提交按钮
为你的form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。
表单设置为必填
在你的input元素中加上required属性就可以了。
<form action="/url-where-you-want-to-submit-form-data">
<input type="text" placeholder="cat photo URL" required>
<button type="submit"> submit </button>
</form>
单选框
按钮单选只是input输入侧框的一种类型。
一个每单选按钮都应该嵌套在它自己的label(标签)元素中。
注意：关联所有的单选按钮应该使用相同的name属性
checked属性设置复选按钮和单选按钮默认被选中
<label> <input type = "radio" name = "indoor-outdoor" checked> indoor </label>
<label> <input type = "radio" name = "indoor-outdoor"> outdoor </label>
复选框
checkboxes（复选按钮）。
复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
checked属性设置复选按钮和单选按钮默认被选中
<label> <input type = "checkbox" name = "SCORE" checked> 1ST </label>
<label> <input type = "checkbox" name = "SCORE"> 2ED </label>
div元素
div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。
添加ID属性&使用ID属性设置标签样式
除了class属性之外，每一个 HTML 元素还可以使用id属性。
声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。
#cat-photo-app {
background-color: green;
}
注意：在你的style元素内部，定义类选择器必须添加.为前缀，定义ID选择器必须添加#为前缀。
<h2 id="cat-photo-app"> <h2>
网友评论