Top

JAVA HTMLCSSJS DAY01

  1. 创建 HTML 文档
  2. 文本元素示例
  3. 分区元素示例
  4. 行内元素示例
  5. 图像和超链接示例
  6. 表格示例
  7. 英雄联盟_ 百科
  8. 表单示例

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>
		北京市&nbsp;&nbsp;&nbsp;北三环西路甲18号&lt;中鼎大厦&gt;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>
		北京市&nbsp;&nbsp;&nbsp;北三环西路甲18号&lt;中鼎大厦&gt;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="/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="/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>
&nbsp;&nbsp;《英雄联盟》(简称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>
&nbsp;&nbsp;战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土,严禁任何纷争。
违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上,由黑曜石、
贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口,刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。
</p>
<p>
&nbsp;&nbsp;除了作为英雄联盟所在地,战争学院还是瓦洛兰最权威的军事培训机构。
很多图书馆都致力于收录战争学院的英雄信息,并向所有研究者开放。
</p>
<h3>德玛西亚</h3>
<p>
&nbsp;&nbsp;人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义
让所有人都过得更好。他们认为恶毒自私如同疾病,应当从人类灵魂中根除。来到德玛西亚并定居于此的人们,
具有和本地居民一样的理想和美德。
</p>

<h2><a name="g2">2、游戏系统</a></h2>
<h3>天赋系统</h3>
<p>&nbsp;&nbsp;天赋技能分为三类:攻击类、防御类、通用类,天赋技能点总共为30点。</p>
<p>&nbsp;&nbsp;攻击类:提高物理、法术攻击强化偏重攻击的召唤师技能。</p>
<p>&nbsp;&nbsp;防御类:提高物理、法术防御及抗打击回复能力,强化偏重防御和回复的召唤师技能。</p>
<p>&nbsp;&nbsp;通用类:提高召唤师其他能力,强化多用途召唤师技能,减少技能冷却时间。</p>
<h3>符文系统</h3>
<p>
&nbsp;&nbsp;符文有四种颜色,分别是印记(红色)、符印(黄色)、雕文(蓝色)和精华(紫色),不同的符文
类型在镶嵌时也要镶嵌到对应的符文槽里,在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。
</p>
<p>
&nbsp;&nbsp;在游戏中,只是购买了符文是不能对召唤师所选择的英雄有任何帮助的,
你需要将符文镶嵌在符文页当中,才能使符文在游戏中产生作用。
</p>
</div>
<!-- footer -->
<div>
<p align="center">&copy; 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>
&nbsp;&nbsp;《英雄联盟》(简称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>
&nbsp;&nbsp;战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土,严禁任何纷争。
              违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上,由黑曜石、
              贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口,刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。
</p>
<p>
&nbsp;&nbsp;除了作为英雄联盟所在地,战争学院还是瓦洛兰最权威的军事培训机构。
              很多图书馆都致力于收录战争学院的英雄信息,并向所有研究者开放。
</p>
<h3>德玛西亚</h3>
<p>
&nbsp;&nbsp;人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义
                让所有人都过得更好。他们认为恶毒自私如同疾病,应当从人类灵魂中根除。来到德玛西亚并定居于此的人们,
                具有和本地居民一样的理想和美德。
</p>

<h2><a name="g2">2、游戏系统</a></h2>
<h3>天赋系统</h3>
<p>&nbsp;&nbsp;天赋技能分为三类:攻击类、防御类、通用类,天赋技能点总共为30点。</p>
<p>&nbsp;&nbsp;攻击类:提高物理、法术攻击强化偏重攻击的召唤师技能。</p>
<p>&nbsp;&nbsp;防御类:提高物理、法术防御及抗打击回复能力,强化偏重防御和回复的召唤师技能。</p>
<p>&nbsp;&nbsp;通用类:提高召唤师其他能力,强化多用途召唤师技能,减少技能冷却时间。</p>
<h3>符文系统</h3>
<p>
&nbsp;&nbsp;符文有四种颜色,分别是印记(红色)、符印(黄色)、雕文(蓝色)和精华(紫色),不同的符文
                类型在镶嵌时也要镶嵌到对应的符文槽里,在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。
</p>
<p>
&nbsp;&nbsp;在游戏中,只是购买了符文是不能对召唤师所选择的英雄有任何帮助的,
                你需要将符文镶嵌在符文页当中,才能使符文在游戏中产生作用。
</p>
</div>
<!-- footer -->
<div>
<p align="center">&copy; 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>