HTML表格
table
<table>标签表示这是一个表格，构成元素有<tr>、<td>、<th>
HTML表单
**form**
<form>标签表示这是一个表单，它的属性有action、
method,action表示提交到的地址，
method表示提交的方式，有post和get
**input**
<input>标签表示输入控件，它的属性有type,type的有：
text 表示文本框
radio 表示单选框
checkbox 表示复选框
submit 表示提交按钮
reset 表示重置按钮
button 表示按钮，它也是一个标签
file 文件上传控件
hidden 隐藏字段
color 颜色
email 邮件
date 日期
number 数字
......
**button**
<button>按钮</button>
在button元素内部，可以放置内容。比如图像、文本。
**label**
<label for ="相关标记的id">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
点击这里的文字就可以让单选框选中。
**texterea**
<texterea>这是一个多行文本域标签</texterea>
可以设置它的行 rows 列cols
**radio**
<input type="radio"/>这是一个单选框.
**checkbox**
<input type="checkbox" checked="checked"/>
这是一个复选框,当checked="checked"时
该选项被默认选中。
**select**
<select>这是一个下拉列表</select>
<select>
<option value ="volvo">Volvo</option>
<option value ="saab" selected="selected">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
当selected="selected"时表示这是默认选中.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生成绩表</title> <style> .biaoti{ color: mediumvioletred;font-size: 50px; background-color:deeppink; padding: 20px; } #biaoti{ color: black; } </style> <style type="text/css"> p{font-family:sans-serif;font-size: 30px; background-color:deeppink;} .hang{font-family:sans-serif;font-size: 30px; background-color:deeppink;} </style> </head> <body > <table border="4" align="center" cellpadding="60"> <caption class="biaoti"><strong id="biaoti">二年级3班学生成绩表</strong></caption> <tr class="hang"> <td colspan="4"><strong>姓名</strong></td> <td colspan="4"><strong>语文</strong></td> <td colspan="4"><strong>英语</strong></td> <td colspan="4"><strong>化学</strong></td> <td colspan="4"><strong>英语</strong></td> </tr> <tr> <td colspan="4"><strong>小明</strong></td> <td colspan="4">56</td> <td colspan="4">56</td> <td colspan="4">99</td> <td colspan="4">100</td> </tr> <tr> <td colspan="4"><strong>小红</strong></td> <td colspan="4">99</td> <td colspan="4">99</td> <td colspan="4">99</td> <td colspan="4">92</td> </tr> <tr> <td colspan="4"><strong>小白</strong></td> <td colspan="4">88</td> <td colspan="4">84</td> <td colspan="4">96</td> <td colspan="4">99</td> </tr> </table> <p>这是一个字体</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>为表格添加边框</title> <style> #biao-1{ font-size: 100%; background-color: aqua; } body{background-color: aqua;} .suojin{text-indent: 3em; text-align: center; } </style> </head> <body> <p><strong>1.表格标签table</strong></p> <table border="4" align="center" cellpadding="60" dotted #000; > <caption id="biao-1"><strong>二年级学生成绩表</strong></caption> <tr> <td colspan="4"><strong>姓名</strong></td> <td colspan="4"><strong>语文</strong></td> <td colspan="4"><strong>英语</strong></td> <td colspan="4"><strong>化学</strong></td> <td colspan="4"><strong>英语</strong></td> </tr> <tr> <td colspan="4"><strong>小明</strong></td> <td colspan="4">56</td> <td colspan="4">56</td> <td colspan="4">99</td> <td colspan="4">100</td> </tr> <tr> <td colspan="4"><strong>小红</strong></td> <td colspan="4">99</td> <td colspan="4">99</td> <td colspan="4">99</td> <td colspan="4">92</td> </tr> <tr> <td colspan="4"><strong>小白</strong></td> <td colspan="4">88</td> <td colspan="4">84</td> <td colspan="4">96</td> <td colspan="4">99</td> </tr> </table> <br> <ol> <li><a href="#"Title="优秀同学">优秀同学</a> </li> <li><a href="#"Title="优秀同学">优秀同学</a> </li> <li><a href="#"Title="优秀同学">优秀同学</a> </li> </ol> <br> <br> <p><strong>2.表单标签form</strong></p> <form method="post" action="#"> 用户： <div><input type="text" name="FirstName"></div> <br> 密码： <div><input type="password" name="password"></div> <br> <div> <p><strong>3.创建一个单选按钮</strong></p> 男性： <input type="radio" checked="checked" name="sex" value="male"/> <br> 女性： <input type="radio" name="Sex" value="female" /> <br> </div> <div> <p><strong>4.创建一个复选框</strong></p> <p>你对那些运动感兴趣？</p> <input type="checkbox" name="checkbox1" value="跑步"/>跑步 <input type="checkbox" name="checkbox2" value="羽毛球" checked="checked"/>羽毛球 <input type="checkbox" name="checkbox3" value="游泳" checked="checked"/>游泳 </div> <p><strong>5.创建一个文本域</strong></p> <label >个人简介：</label> <textarea name="" id="" cols="30" rows="10">输入内容：</textarea><br><br> <input type="submit" value="提交" name="提交"/> <input type="reset" value="重置" name="重置"/><br> <p><strong>6.创建一个下拉列表</strong></p> <label>水果：</label> <select> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="车厘子">车厘子</option> <option value="榴莲" selected="selected">榴莲</option> </select> <p>7.创建一个按钮</p> <input type="button" value="Hello world!"> </form> <ul style="list-style-type: none"> <li>去掉小圆点</li> </ul> <p class="suojin">设置文本首行缩进</p> </body> </html>
原文：http://www.cnblogs.com/Lixuemei/p/5164631.html