JAVA HTMLCSSJS DAY01
1 创建 HTML 文档
1.1 问题
创建标准结构的HTML文档，设置该文档的版本，并设置文档标题和编码。
1.2 方案
声明HTML：<!DOCTYPE html>
设置标题：<title>创建HTML文档</title>
设置编码：<meta charset="utf-8" />
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
创建文件夹day01，在此文件夹下创建demo1.html，如下图：
图-1
步骤二：创建 html 文档的结构
创建文档的基本结构，并设置文档版本，代码如下：
<!--创建HTML文档 -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello, HTML.
</body>
</html>
步骤三：设置头部内容
在文档头部设置文档标题和文档编码，代码如下：
<!--创建HTML文档 -->
<!DOCTYPE html>
<html>
<head>
#cold_bold<title>创建HTML文档</title>
#cold_bold<!--设置文档编码，要和文档保存时的编码一致 -->
#cold_bold<!--
#cold_bold<meta http-equiv="content-type" content="text/html;charset=utf-8" />
#cold_bold -->
#cold_bold<meta charset="utf-8" />
</head>
<body>
Hello, HTML.
</body>
</html>
步骤四：测试
使用浏览器打开demo1.html，效果如下图：
图-2
1.4 完整代码
本案例的完整代码如下所示：
demo1.html完整代码如下：
<!-- 创建HTML文档 -->
<!DOCTYPE html>
<html>
<head>
<title>创建HTML文档</title>
<!-- 设置文档编码，要和文档保存时的编码一致 -->
<!--
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
-->
<meta charset="utf-8" />
</head>
<body>
Hello, HTML.
</body>
</html>
2 文本元素示例
2.1 问题
在HTML文档中增加标题、段落、有序列表、无序列表。
2.2 方案
标题元素：<h1>-<h6>
段落元素：<p>
有序列表：<ol></ol>
无序列表：<ul></ul>
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo2.html，并添加内容，代码如下：
<!--文本处理 -->
<!DOCTYPE html>
<html>
<head>
<title>文本处理</title>
<meta charset="utf-8"/>
</head>
<body>
<!--标题 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<!--段落 -->
Hello, HTML.Hello, HTML.
<p>Hello, HTML.</p><p>Hello, HTML.</p>
<!--有序列表 -->
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<!--无序列表 -->
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<!--列表嵌套 -->
<ol>
<li>
Web概述
<ul>
<li>Web三要素</li>
<li>常用浏览器</li>
<li>HTML工作原理</li>
</ul>
</li>
</ol>
</body>
</html>
步骤二：测试
使用浏览器打开demo2.html，效果如下图：
图-3
2.4 完整代码
本案例的完整代码如下所示：
demo2.html完整代码如下：
<!-- 文本处理 -->
<!DOCTYPE html>
<html>
<head>
<title>文本处理</title>
<meta charset="utf-8"/>
</head>
<body>
<!-- 标题 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<!-- 段落 -->
Hello, HTML.Hello, HTML.
<p>Hello, HTML.</p><p>Hello, HTML.</p>
<!-- 有序列表 -->
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<!-- 列表嵌套 -->
<ol>
<li>
Web概述
<ul>
<li>Web三要素</li>
<li>常用浏览器</li>
<li>HTML工作原理</li>
</ul>
</li>
</ol>
</body>
</html>
3 分区元素示例
3.1 问题
使用分区元素，给页面做整体的布局。
3.2 方案
分区元素：<div></div>
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo3.html，代码如下：
<!--分区元素 --> <!DOCTYPE html> <html> <head> <title>分区元素</title> <meta charset="utf-8"/> </head> <body> <div> <h1>工具栏</h1> </div> <div style="color:red;"> <p>第一段内容</p> <p>第二段内容</p> <p>第三段内容</p> </div> <div> <p>版权标识</p> </div> </body> </html>
步骤二：测试
使用浏览器打开demo3.html，效果如下图：
图-4
3.4 完整代码
本案例的完整代码如下所示：
demo3.html完整代码如下：
<!-- 分区元素 --> <!DOCTYPE html> <html> <head> <title>分区元素</title> <meta charset="utf-8"/> </head> <body> <div> <h1>工具栏</h1> </div> <div style="color:red;"> <p>第一段内容</p> <p>第二段内容</p> <p>第三段内容</p> </div> <div> <p>版权标识</p> </div> </body> </html>
4 行内元素示例
4.1 问题
使用行内元素，设置文本格式。
4.2 方案
4.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo4.html，代码如下：
<!--行内元素 --> <!DOCTYPE html> <html> <head> <title>行内元素</title> <meta charset="utf-8"/> </head> <body> <!-- span --> <p> 北三环西路甲18号<span style="color:red">中鼎大厦</span>B座7层 </p> <!--i/em --> <p> <i>北三环</i>西路甲18号<em>中鼎大厦</em>B座7层 </p> <!-- b/strong --> <p> <b>北三环</b>西路甲18号<strong>中鼎大厦</strong>B座7层 </p> <!-- del/u --> <p> <del>北三环</del>西路甲18号<u>中鼎大厦</u>B座7层 </p> <!--空格折叠 --> <p> 北京市 北三环西路甲18号中鼎大厦 B座7层 </p> <!--br --> <p> 北京市 北三环西路甲18号中鼎大厦<br>B座7层 </p> <!--实体替换 --> <p> 北京市 北三环西路甲18号<中鼎大厦>B座7层 </p> </body> </html>
步骤二：测试
使用浏览器打开demo4.html，效果如下图：
图-5
4.4 完整代码
本案例的完整代码如下所示：
demo4.html完整代码如下：
<!-- 行内元素 --> <!DOCTYPE html> <html> <head> <title>行内元素</title> <meta charset="utf-8"/> </head> <body> <!-- span --> <p> 北三环西路甲18号<span style="color:red">中鼎大厦</span>B座7层 </p> <!--i/em --> <p> <i>北三环</i>西路甲18号<em>中鼎大厦</em>B座7层 </p> <!-- b/strong --> <p> <b>北三环</b>西路甲18号<strong>中鼎大厦</strong>B座7层 </p> <!-- del/u --> <p> <del>北三环</del>西路甲18号<u>中鼎大厦</u>B座7层 </p> <!-- 空格折叠 --> <p> 北京市 北三环西路甲18号 中鼎大厦 B座7层 </p> <!--br --> <p> 北京市 北三环西路甲18号 中鼎大厦<br>B座7层 </p> <!-- 实体替换 --> <p> 北京市 北三环西路甲18号<中鼎大厦>B座7层 </p> </body> </html>
5 图像和超链接示例
5.1 问题
在HTML文档中增加图像和超链接。
5.2 方案
图像元素：<img>
超链接元素：<a>
5.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo5.html，代码如下：
<!--图像和超链接 --> <!DOCTYPE html> <html> <head> <title>图像和超链接</title> <meta charset="utf-8"/> </head> <body> <!--链接到锚点 --> <a href="#bottom">去向底部</a> <!--图片 --> <p><imgsrc="../images/pig.png" width="200"/></p> <!--超链接 --> <p><a href="http://www.tmooc.cn" target="_blank">TMOOC</a></p> <p><a href="demo1.html" target="_self">demo1</a></p> <!--一些随意的内容，为了让页面出现滚动条 --> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <!--定义锚点 --> <p><a name="bottom">底部</a></p> <!--文档顶部为默认锚点 --> <p><a href="#">回到顶部</a></p> </body> </html>
步骤二：测试
使用浏览器打开demo5.html，效果如下图：
图-6
5.4 完整代码
本案例的完整代码如下所示：
demo5.html完整代码如下：
<!-- 图像和超链接 --> <!DOCTYPE html> <html> <head> <title>图像和超链接</title> <meta charset="utf-8"/> </head> <body> <!-- 链接到锚点 --> <a href="#bottom">去向底部</a> <!-- 图片 --> <p><imgsrc="../images/pig.png" width="200"/></p> <!-- 超链接 --> <p><a href="http://www.tmooc.cn" target="_blank">TMOOC</a></p> <p><a href="demo1.html" target="_self">demo1</a></p> <!-- 一些随意的内容，为了让页面出现滚动条 --> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <!-- 定义锚点 --> <p><a name="bottom">底部</a></p> <!-- 文档顶部为默认锚点 --> <p><a href="#">回到顶部</a></p> </body> </html>
6 表格示例
6.1 问题
在HTML文档中增加表格，并实现跨行/跨列，以及设置行分组。
6.2 方案
表格相关元素：<table>、<tr>、<td>
跨行/跨列属性：rowspan、colspan
行分组：<thead>、<tbody>、<tfoot>
6.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo6.html，代码如下：
<!--表格 -->
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="utf-8"/>
</head>
<body>
<!--表格 -->
<table border="1">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
<br>
<!--跨行 -->
<table border="1" width="20%">
<tr>
<td rowspan="2">aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>ddd</td>
</tr>
</table>
<br>
<!--跨列 -->
<table border="1" width="20%">
<tr>
<td colspan="2">aaa</td>
</tr>
<tr>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>
<br>
<!--行分组 -->
<table border="1" width="30%">
<thead>
<tr>
<th>编号</th><th>名称</th><th>金额</th>
</tr>
</thead>
<tbody style="color:red;">
<tr>
<td>001</td><td>鼠标</td><td>50</td>
</tr>
<tr>
<td>002</td><td>键盘</td><td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td><td>150</td>
</tr>
</tfoot>
</table>
</body>
</html>
步骤二：测试
使用浏览器打开demo6.html，效果如下图：
图-7
6.4 完整代码
本案例的完整代码如下所示：
demo6.html完整代码如下：
<!-- 表格 --> <!DOCTYPE html> <html> <head> <title>表格</title> <meta charset="utf-8"/> </head> <body> <!-- 表格 --> <table border="1"> <tr> <td>第1行 第1列</td> <td>第1行 第2列</td> </tr> <tr> <td>第2行 第1列</td> <td>第2行 第2列</td> </tr> </table> <br> <!-- 跨行 --> <table border="1" width="20%"> <tr> <td rowspan="2">aaa</td> <td>bbb</td> </tr> <tr> <td>ddd</td> </tr> </table> <br> <!-- 跨列 --> <table border="1" width="20%"> <tr> <td colspan="2">aaa</td> </tr> <tr> <td>ccc</td> <td>ddd</td> </tr> </table> <br> <!-- 行分组 --> <table border="1" width="30%"> <thead> <tr> <th>编号</th><th>名称</th><th>金额</th> </tr> </thead> <tbody style="color:red;"> <tr> <td>001</td><td>鼠标</td><td>50</td> </tr> <tr> <td>002</td><td>键盘</td><td>100</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">合计</td><td>150</td> </tr> </tfoot> </table> </body> </html>
7 英雄联盟_达内百科
7.1 问题
使用文本元素、分区元素、图像和超链接、表格实现英雄联盟_达内百科页面。
7.2 方案
7.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建lol.html，代码如下：
<!DOCTYPE html> <html> <head> <title>英雄联盟_达内百科</title> <meta charset="utf-8" /> </head> <body> <!-- header --> <div align="center"> <imgsrc="../images/lol.png" /> </div> <!-- body --> <div style="width:960px; border:1px solid #ccc; margin:0 auto;"> <h1>英雄联盟</h1> <p> 《英雄联盟》（简称lol）是由美国<u>Riot Games</u>开发，<b>腾讯</b>游戏运营的英雄对战网游。 《英雄联盟》除了即时战略、团队作战外，还拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。 </p> <table width="70%"> <tr> <td>中文名</td> <td>英雄联盟</td> <td>发行商</td> <td><b>腾讯</b>游戏</td> </tr> <tr> <td>其他名称</td> <td>撸啊撸、lol</td> <td>发行日期</td> <td>2011年9月22日</td> </tr> <tr> <td>游戏类型</td> <td>策略、角色扮演、竞技、团队合作</td> <td>玩家人数</td> <td>多人</td> </tr> <tr> <td>游戏平台</td> <td>PC</td> <td>游戏画面</td> <td>3D</td> </tr> </table> <h2>目录</h2> <ol> <li> <a href="#g1">游戏背景</a> <ul> <li>战争学院</li> <li>德玛西亚</li> </ul> </li> <li> <a href="#g2">游戏系统</a> <ul> <li>天赋系统</li> <li>符文系统</li> </ul> </li> </ol> <h2><a name="g1">1、游戏背景</a></h2> <h3>战争学院</h3> <p> 战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土，严禁任何纷争。 违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上，由黑曜石、 贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口，刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。 </p> <p> 除了作为英雄联盟所在地，战争学院还是瓦洛兰最权威的军事培训机构。 很多图书馆都致力于收录战争学院的英雄信息，并向所有研究者开放。 </p> <h3>德玛西亚</h3> <p> 人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义 让所有人都过得更好。他们认为恶毒自私如同疾病，应当从人类灵魂中根除。来到德玛西亚并定居于此的人们， 具有和本地居民一样的理想和美德。 </p> <h2><a name="g2">2、游戏系统</a></h2> <h3>天赋系统</h3> <p> 天赋技能分为三类：攻击类、防御类、通用类，天赋技能点总共为30点。</p> <p> 攻击类：提高物理、法术攻击强化偏重攻击的召唤师技能。</p> <p> 防御类：提高物理、法术防御及抗打击回复能力，强化偏重防御和回复的召唤师技能。</p> <p> 通用类：提高召唤师其他能力，强化多用途召唤师技能，减少技能冷却时间。</p> <h3>符文系统</h3> <p> 符文有四种颜色，分别是印记（红色）、符印（黄色）、雕文（蓝色）和精华（紫色），不同的符文 类型在镶嵌时也要镶嵌到对应的符文槽里，在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。 </p> <p> 在游戏中，只是购买了符文是不能对召唤师所选择的英雄有任何帮助的， 你需要将符文镶嵌在符文页当中，才能使符文在游戏中产生作用。 </p> </div> <!-- footer --> <div> <p align="center">© 2015 Baidu使用达内百科前必读 | 百科协议 | 达内百科合作平台</p> </div> </body> </html>
步骤二：测试
使用浏览器打开lol.html，效果如下图：
图-8
7.4 完整代码
本案例的完整代码如下所示：
lol.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>英雄联盟_达内百科</title>
<meta charset="utf-8" />
</head>
<body>
<!-- header -->
<div align="center">
<imgsrc="../images/lol.png" />
</div>
<!-- body -->
<div style="width:960px; border:1px solid #ccc; margin:0 auto;">
<h1>英雄联盟</h1>
<p>
《英雄联盟》（简称lol）是由美国<u>Riot Games</u>开发，<b>腾讯</b>游戏运营的英雄对战网游。
《英雄联盟》除了即时战略、团队作战外，还拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。
</p>
<table width="70%">
<tr>
<td>中文名</td>
<td>英雄联盟</td>
<td>发行商</td>
<td><b>腾讯</b>游戏</td>
</tr>
<tr>
<td>其他名称</td>
<td>撸啊撸、lol</td>
<td>发行日期</td>
<td>2011年9月22日</td>
</tr>
<tr>
<td>游戏类型</td>
<td>策略、角色扮演、竞技、团队合作</td>
<td>玩家人数</td>
<td>多人</td>
</tr>
<tr>
<td>游戏平台</td>
<td>PC</td>
<td>游戏画面</td>
<td>3D</td>
</tr>
</table>
<h2>目录</h2>
<ol>
<li>
<a href="#g1">游戏背景</a>
<ul>
<li>战争学院</li>
<li>德玛西亚</li>
</ul>
</li>
<li>
<a href="#g2">游戏系统</a>
<ul>
<li>天赋系统</li>
<li>符文系统</li>
</ul>
</li>
</ol>
<h2><a name="g1">1、游戏背景</a></h2>
<h3>战争学院</h3>
<p>
战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土，严禁任何纷争。
违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上，由黑曜石、
贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口，刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。
</p>
<p>
除了作为英雄联盟所在地，战争学院还是瓦洛兰最权威的军事培训机构。
很多图书馆都致力于收录战争学院的英雄信息，并向所有研究者开放。
</p>
<h3>德玛西亚</h3>
<p>
人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义
让所有人都过得更好。他们认为恶毒自私如同疾病，应当从人类灵魂中根除。来到德玛西亚并定居于此的人们，
具有和本地居民一样的理想和美德。
</p>
<h2><a name="g2">2、游戏系统</a></h2>
<h3>天赋系统</h3>
<p> 天赋技能分为三类：攻击类、防御类、通用类，天赋技能点总共为30点。</p>
<p> 攻击类：提高物理、法术攻击强化偏重攻击的召唤师技能。</p>
<p> 防御类：提高物理、法术防御及抗打击回复能力，强化偏重防御和回复的召唤师技能。</p>
<p> 通用类：提高召唤师其他能力，强化多用途召唤师技能，减少技能冷却时间。</p>
<h3>符文系统</h3>
<p>
符文有四种颜色，分别是印记（红色）、符印（黄色）、雕文（蓝色）和精华（紫色），不同的符文
类型在镶嵌时也要镶嵌到对应的符文槽里，在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。
</p>
<p>
在游戏中，只是购买了符文是不能对召唤师所选择的英雄有任何帮助的，
你需要将符文镶嵌在符文页当中，才能使符文在游戏中产生作用。
</p>
</div>
<!-- footer -->
<div>
<p align="center">© 2015 Baidu 使用达内百科前必读 | 百科协议 | 达内百科合作平台</p>
</div>
</body>
</html>
8 表单示例
8.1 问题
在HTML文档中增加表单。
8.2 方案
表单元素：<form>
<input>元素：文本框、密码框、单选框、复选框、按钮、文件选择框、隐藏框
其他元素：标签、文本域、下拉选
8.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day01下创建demo7.html，代码如下：
<!--表单 --> <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset="utf-8"/> </head> <body> <form> <h1>表单</h1> <!--文本框、密码框 --> <p> <label for="user_name">账号：</label> <input type="text" id="user_name"/> </p> <p> <label for="pwd">密码：</label> <input type="password" id="pwd"/> </p> <!--单选框、复选框 --> <p> 性别： <label for="male">男</label> <input type="radio" name="sex" id="male"/> <label for="female">女</label> <input type="radio" name="sex" id="female"/> </p> <p> 爱好： <label for="basketball">篮球</label> <input type="checkbox" name="favorites" id="basketball"/> <label for="football">足球</label> <input type="checkbox" name="favorites" id="football"/> <label for="pingpang">乒乓球</label> <input type="checkbox" name="favorites" id="pingpang"/> </p> <!--按钮 --> <p> <input type="submit" value="提交" /> <input type="reset" value="重置" /> <input type="button" value="取消" /> </p> <!--隐藏域、文件选择框 --> <p> <input type="hidden" value="9"/> <label for="file">上传：</label> <input type="file" id="file"/> </p> <!--文本域 --> <p> <label for="address">地址：</label> <textarea cols="30" rows="5" id="address">北京市海淀区北三环西路甲18号中鼎大厦B座7层</textarea> </p> <!--下拉选 --> <p> <label for="course">课程：</label> <select id="course"> <option value="1">Java</option> <option value="2">php</option> <option value="3">.net</option> </select> </p> </form> </body> </html>
步骤二：测试
使用浏览器打开demo7.html，效果如下图：
图-9
8.4 完整代码
本案例的完整代码如下所示：
demo7.html完整代码如下：
<!-- 表单 -->
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
</head>
<body>
<form>
<h1>表单</h1>
<!-- 文本框、密码框 -->
<p>
<label for="user_name">账号：</label>
<input type="text" id="user_name"/>
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" id="pwd"/>
</p>
<!-- 单选框、复选框 -->
<p>
性别：
<label for="male">男</label>
<input type="radio" name="sex" id="male"/>
<label for="female">女</label>
<input type="radio" name="sex" id="female"/>
</p>
<p>
爱好：
<label for="basketball">篮球</label>
<input type="checkbox" name="favorites" id="basketball"/>
<label for="football">足球</label>
<input type="checkbox" name="favorites" id="football"/>
<label for="pingpang">乒乓球</label>
<input type="checkbox" name="favorites" id="pingpang"/>
</p>
<!-- 按钮 -->
<p>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="取消" />
</p>
<!-- 隐藏域、文件选择框 -->
<p>
<input type="hidden" value="9"/>
<label for="file">上传：</label>
<input type="file" id="file"/>
</p>
<!-- 文本域 -->
<p>
<label for="address">地址：</label>
<textarea cols="30" rows="5" id="address">北京市海淀区北三环西路甲18号中鼎大厦B座7层</textarea>
</p>
<!-- 下拉选 -->
<p>
<label for="course">课程：</label>
<select id="course">
<option value="1">Java</option>
<option value="2">php</option>
<option value="3">.net</option>
</select>
</p>
</form>
</body>
</html>