在上一篇文章中我们介绍了一些常用标签，但是还有一个非常重要的标签没有介绍，那就是与用浏览者交互的表单标签。
表单标签
用途：用于浏览者与浏览器交互。
语法：
//method:指传输数据的方式,例如get,post
//action:被传送到的地方。比如某个php页面。
<form method="传送方式" action="服务器文件">
//提交按钮
//type：只有当type值设置为submit时，按钮才有提交作用
//value：按钮上显示的文字
<input type="submit" value="提交">
//重置按钮
<input type="reset" value="重置">
//输入框
<input type="text" name="username" />
//密码框
<input type="password" name="pass" />
//单选框
//value:提交数据到服务器的值（后台程序PHP使用）
//name:为控件命名，以备后台程序 ASP、PHP 使用
//checked:当设置 checked="checked" 时，该选项被默认选中
<input type="radio" value="值" name="名称" checked="checked"/>
//复选框
//参数同radio
<input type="checkbox" value="值" name="名称" checked="checked"/>
//文本域 cols:列书 rows:行数
<textarea cols="50" rows="10" >在这里输入内容.
//下拉列表框
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</textarea>
</form>
显示效果：
Snip20161215_1.png
CSS:层叠样式表 (Cascading Style Sheets)
作用:主要是用来定义HTML内容在浏览器内的显示样式。比如字体颜色，大小，以及边框线粗细等。
插入形式：
1.内联式
内联式是指直接将CSS代码写在HTML标签中，如：
<p style="color:red">这里文字是红色。</p>
2.嵌入式
嵌入式是将CSS代码<style type="text/css"></style>标签之间的方式
<style type="text/css">
span{
color:red;
}
</style>
3.外部式
外部式是指将CSS写在HTML文件以外的地方文件中，并用<link>标签将css样式文件链接到HTML文件内。
<link href="**base.css**" rel="stylesheet" type="text/css" />
CSS选择器
介绍选择器是为了更准确的选择指定的标签，从而对指定标签中的内容做样式的修改。
1.标签选择器
花括号外是标签名，可修改HTML文件中所有p标签下的内容样式
p{font-size:12px;line-height:1.6em;}
2.类选择器
为每一个标签规定类名，就可以根据类名来选择指定标签了。多个标签可以使用同一个类名。
//以内联式写法为例
<style type="text/css">
.stress{
color:red;
}
</style>
<p class="stress">类选择器内容</p>
3.id选择器
为每一个标签规定id，就可以根据id来选择指定标签了。id名唯一。
//以内联式为例
<style type="text/css">
#setGreen{
color:red;
}
</style>
<p id="setGreen">id选择器</p>
4.子选择器
子选择器用于选择指定标签元素的第一代子元素
<style type="text/css">
.food>li{
color:red;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
5.包含选择器
选择该标签下所有的后辈元素
<style type="text/css">
#setGreen p{color:red;}
</style>
<p id="setGreen">id选择<span>器</span></p>
6.通用选择器
选择所有的html标签元素
<style type="text/css">
*{
color:red;
}
</style>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
CSS格式化排版
1.字体 字号 颜色
*{
font-family:"宋体";
font-size:12px;
color:#666
}
3.粗体 斜体
*{
//粗体
font-weight:bold;
//斜体
font-style:italic;
}
4.下划线 删除线
*{
//underline:下划线 删除线:line-through
text-decoration:underline;
}
5.行间距 字间距
*{
//行间距
line-height:1.5em;】
//字间距
letter-spacing:50px;
}
6.对齐 缩进
*{
//left:左对齐 right:右对齐 center:居中
text-align:center;
//缩进 2em就是文字的两倍大小
text-indent:2em;
}
