自己写的web标准教程，帮你走进web标准设计的世界——第三讲（html终结篇）
声明：本教程源于本人学习的一些经验的总结，希望大家帮忙完善与指正，也希望会给初学者带来方便，希望大家不要随便转载，写的不是很好，还不完善，不过转载时要注明作者和出处，附加原文的链接地址，谢谢了
已出：
自己写的web标准教程，帮你走进web标准设计的世界——第一讲
自己写的web标准教程，帮你走进web标准设计的世界——第二讲
上讲回顾：上一讲我主要讲解了一下网页常用的几个html标签。
非常感谢网友对我的大力支持，谢谢你们给我的鼓励！
本节我将给大家讲解表单标签和table标签，ok，Begin！Right now！
标签10：表单标签
功能：构造一个表单，用来向服务器提交数据
基本结构与详细标签：
a：input标签
使用指数：*****
功能：通过改变type类型来构造表单元素
类型：内联元素
常用属性：id，class，name（与ID类似，方便后台程序获取标签的值），accept（accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。） type与对应值一览
其中值img很少使用，他与值submit的功能是相同的，hidden值对于一个前台开发者而言几乎是用不到的，button值暂时不做介绍，毕竟我们现在离javascript还很遥远，呵呵
b: textarea标签
使用指数：****
功能：无限的向其中输入文本，比较适合做留言板，其中的文本的默认字体是等宽字体（通常是 Courier）
类型：内联元素
常用属性：id，class，name
特殊属性：cols，rows来设置他的区域大小，不过不推荐这种设置，还是建议通过css来设置（又是后话了）！
c: fieldset和legend标签
使用指数：**
功能：用来给你的表单划分区域，在legend中设置区域的标题（不是很常用）
类型：块级元素
常用属性：id，class，title
d:label标签
使用指数：***
功能：没有任何效果，只是为input标签提供一个标记不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
特殊属性for:
标签的 for 属性应当与相关元素的 id 属性相同。通过这种方法来与对应标签绑定
例子：
2 <p><input type="radio" name="fru" id="apple" /><label for="li">苹果</label></p>
3 <p><input type="radio" name="fru" id="li" /><label for="apple">梨</label></p>
4 <p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
5 <p><input type="radio" name="fru" id="ban" />草莓</p>
6 </form>
点击梨，苹果会被选中，点击苹果，梨会被选中，点击香蕉，香蕉会被选中，点击草莓，草莓不会被选中，因为他没有应用label，这时只有点击按钮（
）才会被选中。
e:select标签
使用指数：***
功能：创建单选或者多选的下拉菜单
结构：
2 <option value ="volvo">Volvo</option>//每一个选项
3 <option value ="saab">Saab</option>
4 <option value="opel">Opel</option>
5 <option value="audi">Audi</option>
6 </select>
这些属性就不详细讲了，大家去实践一下就明白了，很简单
下面通过一个例子在具体应用表单标签要注意的事项：
2 <form name="form1" action="#" method="get">
3 //form标签开始一个表单，action值为数据表单数据的传向页面，method为数据的传递形式，这些内容对于初学者不用理会
4 <fieldset>
5 <legend>输入的文本</legend>//为表单划分区域
6 <p><input type="text" name="user" id="user"/></p>//单行文本输入
7 <p><input type="password" name="pwd" id="pwd" /></p> //单行密文输入
8 <p><textarea cols="2" rows="2" id="msg" name="msg"></textarea></p>//多行文本输入
9 </fieldset>
10 <fieldset>
11 <legend>选择的文本</legend>
12 <p><input type="radio" name="fru" id="apple" /><label for="apple">苹果</label></p>
13 <p><input type="radio" name="fru" id="li" checked="checked" /><label for="li">梨</label></p>
14 //上面两个是单选按钮，注意每组单选按钮的name属性要相同，梨默认为被选
15
16 <p><input type="radio" name="fru" id="ban" /><label for="ban">香蕉</label></p>
17 <p><input type="checkbox" name="men1" id="a" /><label for="a">成龙</label></p>
18 <p><input type="checkbox" name="men2" id="b" /><label for="b">铁拐李</label></p>
19 <p><input type="checkbox" name="men3" id="c" /><label for="c">绿茶</label></p>
20 //上面是多选按钮组合，注意他们的name属性不能相同
21
22 <select name="sec" id="sec" multiple="multiple">
23 <option value="1">11111111</option>
24 <option value="2" selected="selected">22222222</option>
25 <option value="3" selected="selected">33333333</option>
26 <option value="4">44444444</option>
27 </select>
28 //上面是下拉式选择，并且可以多选，2，3行默认为被选
29
30 </fieldset>
31 <fieldset>
32 <fieldset>
33 <legend>上传的文件</legend>
34 <p><input type="file" name="file" id="file" accept="image/gif, image/jpeg" /></p>
35 //上面为文件上传，规定只能上传格式为gif和jpeg的图片
36 </fieldset>
37 <fieldset>
38 <legend>提交与重置</legend>
39 <p><input type="submit" value="提交表单" /><input type="reset" value="重置表单" /></p>
40 //表单的提交与重置
41 </fieldset>
42 </form>
43 </div>
标签11：table
使用指数：***
功能：构造一个表格
类型：块级元素
常用属性：id，class
width：设置表格的宽度
border：设置表格的边框
标签a：caption
使用指数：*
功能：为表格定义一个标题
类型：块级元素
标签b：tr
使用指数：***
功能：为表格定义一个行
类型：块级元素
标签c：th
使用指数：**
功能：为表格的每一列定义一个小标题，默认字体加粗
类型：块级元素
标签d：td
使用指数：***
功能：为表格定义一个列
类型：内联元素
特殊属性：1.colspan：合并单元格（列合并）
2.rowspan：合并单元格（行合并）
例子：
2 <caption>标题</caption>
3 <tr>
4 <th>Month</th>
5 <th>Savings</th>
6 </tr>
7 <tr>
8 <td rowspan="2">January</td>//行合并，所以要占据两行空间
9 <td>$100</td>
10 </tr>
11 <tr>
12 <td>January</td>//由于上面是行合并，故这里少了一列
13 </tr>
14 <tr>
15 <td colspan="2">January</td>//列合并，故这里少了一列
16 </tr>
17 </table>
效果：
到这里html就讲完了，不要惊讶，我指的是主要的常用的部分讲完了，其他的就大家自己去学习吧，相信掌握了学习方法之后的工作是愉快的，哈哈
下一讲，我将带领大家步入css的世界当中！
今天的教程就到这里了明天再见，谢谢！
交流QQ群： 71019430（菜鸟居多，请大家见谅！）
