practice_HTML

#html基础知识

代码一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>唐诗三百首</title>
<meta charset="utf-8"></meta>
<meta http-equiv="refresh" content="10;url=day1.html"></meta>
</head>
<body>
在3秒的刷新后进入该页面。<br />再等待10秒钟,再次回退到上一个页面
<h3>唐诗三百首</h3>
<hr>
<h4>目录</h4>
<p>第一首:静夜思</p>
<p>第二首:忆江南</p>
<p>第三首:长恨歌</p>
</p>
<hr>
<h4>静夜思</h4>
<p>作者:李白</p><p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
<hr>
<h5>【李白简介】</h5>
<p>李白,字太白,号青莲居士,自称与李堂皇室同宗,祖籍陇西成纪(今甘肃天水附<br />近),
剩余暗喜碎叶(遗址在今库尔吉斯坦国境内的阿克别希姆)。五岁随父迁居<br />
绵州彰明县......
</p>
<!--h1~h6是块级元素,会自动换行-->
</body>
</html>

代码二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!--html开始-->
<head><!--html头部-->
<title>第一个html</title><!--html标题-->
<meta charset="utf-8"><meta><!--html字符编码-->
<meta name="keywords" content="房产,科技,医学"></meta><!--添加关键字,实现搜索引擎优化-->
<meta name="description" content="淘宝,购物"></meta><!--对网页的内容的描述-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
<meta http-equiv="refresh" content="3;url=day_1.html"></meta><!--网页在打开后3秒钟就刷新到另外一个页面钟-->
</head><!--html头部结束-->
<body><!--html主体部分开始-->
这是内容<br />
&lt;? echo "hello" ?&gt;
<br />
版权符号:&copy; &nbsp;&nbsp;&nbsp;商标符号:&reg;<br />
<h1>北京欢迎你!</h1>
<h2>北京欢迎你!</h2>
<h3>北京欢迎你!</h3>
<h4>北京欢迎你!</h4>
<h5>北京欢迎你!</h5>
<h6>北京欢迎你!</h6>
<hr >
<p>北京欢迎你,我们来自世界的不同的地区,但是我们都有一颗中国心!</p>
<p>
这个段落
在源代码 中
包含 许多行 以及空格
但是 浏览器
忽略了 它们。
</p>
</body><!--html主体部分结束-->
</html><!--html结束-->

代码三(dl_dt_dd的使用):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>自定义列表 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META charset=utf-8>
<meta http-equiv="refresh" content="5"></meta>
</HEAD>
<BODY>
<dl>
<dt>咖啡</dt><!--自定义列表的小标题-->
<dd>一种黑色的热饮料,原料据说收咖啡豆、非洲生产的这类。一种黑色的热饮料,原料据说收咖啡豆、非洲生产的这类一种黑色的热饮料,原料据说收咖啡豆、非洲生产的这类</dd>
<dd>可以提神,刺激神经。</dd><!--自定义列表的描述内容-->
</dl>
<dl>
<dt>牛奶</dt><dt>花生</dt>
<dd>一种黑色的热饮料,原料据说收咖啡豆、非洲生产的这类</dd>
<dd>可以提神,刺激神经。</dd>
</dl>
<dl>
<dt><img src="E:\lyx-kaipu\img\yanghuojiang.jpg" height="200" width="250" /></dt>
<dd>商品名称:洋霍</dd>
<dd>商品价格:388元</dd>
<dd>商品简介:特别好吃的紫色的食物,食根部。</dd>
</dl>
<hr>
<h3>目录</h3>
<dl>
<dt>第一章:html</dt>
<dd>html简介
<dl style="margin-top:0;margin-bottom:0">
<dd>fdsf</dd>
<dd>wjke</dd>
</dl>
</dd>
<dd>html而我国</dd>
<dd>html发生的</dd>
<dt>第二章:css</dt>
<dd>css该书</dd>
<dd>css氛围</dd>
<dd>css的我被</dd>
<dt>第三章</dt>
<dd></dd>
</dl>
</BODY>
</HTML>

代码四(form表单的使用,注册信息):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<meta charset=utf-8>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
*{
margin:0 auto;
padding:0;
}
body{}
#logo{
box-shadow: -1px 60px 49px 24px #FFFACD;
}
</style>
</HEAD>
<BODY>
<center>
<img id="logo" src="../../img/images/reg.jpg"><br>
<table >
<tr><td></td></tr>
<tr><td>名字:<input type="text"></td><br></tr>
<tr><td><br></td></tr>
<tr><td>姓氏:<input type="text"></td></tr>
<tr><td><br></td></tr>
<tr><td>登录名:<input type="text"><span>(可包含a-z、1-9和下划线)</span></td></tr>
<tr><td><br></td></tr>
<tr><td>密码:<input type="password"><span>(至少包含6个字符)</span></td></tr>
<tr><td><br></td></tr>
<tr><td>确认密码:<input type="password" /></td></tr>
<tr><td><br></td></tr>
<tr><td>电子邮箱:<input type="email"><span>必须包含@字符</span></td></tr>
<tr><td><br></td></tr>
<tr><td>性别:<input type=radio name=sex checked><img src="../../img/images/Male.gif">
<input type=radio name=sex ><img src="../../img/images/Female.gif"></td>
</tr>
<tr><td><br></td></tr>
<tr><td>头像:<input type=file></td></tr>
<tr><td><br></td></tr>
<tr ><td>爱好:<input type="checkbox">运动
<input type="checkbox">聊天
<input type="checkbox">玩游戏</td></tr>
<tr><td><br></td></tr>
<tr><td>出生年月:<input type="text" value="yyyy" size=4>
<select>
<option>[选择月份]</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<input type="text" value="dd" size=1></td>
</tr>
<tr><td><br></td></tr>
<tr align=center><td><input type="image" src="../../img/images/submit.gif"><input type="image" src="../../img/images/reset.gif"></td></tr>
</table>
</center>
</BODY>
</HTML>

代码五:(form表单使用,注册信息2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META charset=utf-8>
<meta http-equiv=refresh content=>
<META NAME="Description" CONTENT="">
<style type="text/css">
input {
border:1px solid #1E90FF ;
}
select{
width:91px;
height:21px;
line-height:21px;
/*background:#00BFFF;*/
box-shadow:#00BFFF 0px 0px 5px inset;
}
</style>
</HEAD>
<BODY>
<center >
<form action="" method="post">
<table border=0>
<tr><td><span>登录名:&nbsp;&nbsp;</span><input type=text /><span>(可包含 a-z、0-9和下划线)</span></td></tr>
<tr><td><span >密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input type=password /><span>(至少包含6个字符)</span></td><tr>
<tr><td><span>确认密码:</span><input type=password/></td></tr>
<tr><td>
<span>电子邮箱:</span><input type=text /><span>(必须包含@符号)<span></td></tr>
<tr><td>
<span>性别:&nbsp;&nbsp;&nbsp;&nbsp;</span><input type=radio name=sex /><img src="../../img/images/Male.gif" width=20 height=20>
<input type=radio name=sex /><img src="../../img/images/Female.gif" width=20 height=20></td></tr>
<tr><td><span>头像:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input type=text name=file>&nbsp;<input type=file style="border:0" value=浏览.../></td></tr>
<tr><td><span>爱好:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input type=checkbox />运动
<input type=checkbox />聊天
<input type=checkbox />玩游戏</td></tr>
<tr><td><span>居住城市:</span>
<select>
<option>[请选择]</option>
<option>北京</option>
<option>上海</option>
<option>成都</option>
<option>贵州</option>
</select>
</td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=submit name=ok value=提交注册信息 style="border-radius:7px; box-shadow: #00BFFF 0px 0px 5px inset;" />&nbsp;<input type=reset name=reset value=重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;填 style="border-radius:7px;" /></td></tr>
</table>
</form>
</center>
</BODY>
</HTML>

代码六(框架设置大小)

1
2
3
4
5
6
7
8
9
<frameset rows=10%,*,20%>
<frame src=top1.html frameborder=0 scrolling=no noresize name=top>
<frameset cols=13%,*>
<frame src=left1.html frameborder=0 scrolling=no noresize name=left>
<frame src=right1.html frameborder=1 scrolling=no noresize name=right>
</frameset>
<frame src="foot1.html" frameborder=1 scrolling=no noresize name=footer></frame>
</frameset>

代码七(frameset框架设置大小2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META charset="utf-8">
</HEAD>
<frameset cols=15%,70%,*>
<frame src="left2.html" frameborder=1 scrolling=no bordercolor="#FFF5EE" noresize name=left></frame>
<frame src="middle2.html" name=middle1 frameborder=1 scrolling=no bordercolor="#E6E6FA" noresize></frame>
<frame src="right2.html" name=right frameborder=1 scrolling=no bordercolor="#FFE4E1" noresize></frame>
</frameset>
</HTML>

代码八(分隔线(hr))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<meta charset=utf-8></meta>
</head>
<body>
默认:<br>
<hr>
屏幕宽度80%:
<hr width="80%">
屏幕70%切居右,且高度为10像素:
<hr width="70%" align="right" size=10 color=#00ffff>
屏幕的30像素且居左:
<hr width="30" align="left">
</body>
</html>

代码九(img图片的设置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<meta http-equiv="refresh" content=4>
<meta charset=utf-8>
</head>
<body>
<img src="../img/images/78.gif" alt="这是狗狗" title="狗狗图片" height=200 width=200 align=>
<img src="../img/images/meinv1.jpg" height="200" width=150 alt=beautiful title="可爱" border=3 style="border-color:#CD5C5C;" align=top>
<img src="../img/images/meinv1.jpg" height="200" width=150 alt=beautiful title="可爱" border=3 style="border-color:#CD5C5C;">
<img src="../img/images/78.gif" alt="这是狗狗" title="狗狗图片" height=200 width=300 align=>
<img src="../img/images/meinv1.jpg" height="200" width=150 alt=beautiful title="可爱" border=3 style="border-color:#CD5C5C;" align=top>
<img src="../img/images/meinv1.jpg" height="250" width=150 alt=beautiful title="可爱" border=3 style="border-color:#CD5C5C;">
</body>
</html>

十(导航栏设置以及退出登录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META charset="utf-8">
</HEAD>
<BODY>
<ul>
<li>学籍
<ul>
<li><a href="login1.html" target="right">登陆</a></li>
<li><a href="../img/images1/p1.jpg" target="right">学籍</a></li>
<li>学籍</li>
<li>学籍</li>
</ul>
</li>
<li>专业
<ul>
<li>计算机科学与技术</li>
<li>软件工程</li>
<li>信管</li>
</ul>
</li>
<li>课程
<ul>
<li>计算机科学与技术</li>
<li>软件工程</li>
<li>信管</li>
</ul>
</li>
<li><a href="login1.html" target=_top>退出</a></li>
</ul>
</BODY>
</HTML>

十一(登录——table)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META charset="utf-8">
</HEAD>
<BODY>
<form action="" method="post">
<table border=0 align="center">
<caption><h3>登陆</h3></caption>
<tr>
<td>用户名</td><td><input type="text" name="name"></td>
</tr>
<tr>
<td>密码</td><td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="登录">&nbsp;<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>

十二:(有序列表ol_li)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>有序列表ol</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h3>注册步骤:</h3>
<ol type="a">
<li>填写信息</li>
<li>收电子邮件</li>
<li>注册成功</li>
</ol>
</BODY>
</HTML>

十三(ul,p等标签得我使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>练习二</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1>CSS教程</h1>
<p>欢迎学习CSS</p>
<ul type="squre">
<li>在这里,你可以学习到:
<ul type="circle">
<li >HTML</li>
<li >CSS</li>
<li>Javascript</li>
</ul>
</li>
</ul>
<p>第一章:CSS基础语法</p>
<ol type="1">
<li>CSS简介
<ol type="A">
<li>CSS简介</li>
<li>CSS选择器</li>
<li>CSS样式表种类</li>
<li>CSS文字样式</li>
</ol>
</li>
<li>CSS选择器
<ol type="I">
<li>CSS简介</li>
<li>CSS选择器</li>
<li>CSS样式表种类</li>
<li>CSS文字样式</li>
</ol>
</li>
<li>CSS样式表种类</li>
<li>CSS文字样式</li>
</ol>
<p>如果您有任何问题,欢迎联系我们</p>
</BODY>
</HTML>

十四(dl_dt_dd的使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<title></title>
<meta charset=utf-8></meta>
<meta http-equiv="refresh" content="4"></meta>
<style>
img{
width:50px;
height:50px;
}
dl dd{
}
.select{
width:70px;
border-color:#00BFFF;
}
</style>
</head>
<body>
<dl><dt>
<img src=img/Computer256.png alt="" title=""></dt>
<dd><a href=http://www.baidu.com>大牌狂降价</a></dd>
<dt>
<img src=img/Computer256.png alt="" title=""></dt>
<dd><a href="https://temai.taobao.com/index.htm" >大学生要求</a></dd>
<dt>
<img src=img/Computer256.png alt="" title=""></dt>
<dd><a href="https://www.jd.com/" target=" _blank" >大学生</a></dd>
<dt>
<img src=img/Computer256.png alt="" title=""></dt>
<dd><a href="http://www.5jie.cn/" target=" _parent" >大学生儿放入</a></dd>
<br>
<dd>运营商
<select class="select">
<option>cw</option>
<option>yw</option>
<option>jw</option>
</select>
</dd>
<dd>地区
<select class="select">
<option>hg</option>
<option>hw</option>
<option>iw</option>
</select>
</dd>
<dd>面值
<select class="select">
<option>33</option>
<option>53</option>
</select>
</dd>
<dd><img src="img/png-0494.png" alt="" title="查看折扣价"></dd>
</dl>
</body>
</html>

十五(简单页面的设计:列表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<title></title>
<meta charset=utf-8></meta>
<meta http-equiv=refresh content=4></meta>
</head>
<body>
<h2 style="font-family:宋体">商品信息</h2>
<h4 style="font-family:宋体">产品类别</h4>
<hr>
<ul>
<li>数码
<ul>
<li>笔记本</li>
<li>手机</li>
<li>家电</li>
</ul>
</li>
<li>美容</li>
<li>服装</li>
</ul>
<hr>
<dl>
<dt>联想电脑</dt>
<dd>产品型号:联想电脑IdePad</dd>
<dd>价格:7788&yen;</dd>
<dd>所在地:北京</dd>
</dl>
<hr>
<h3 style="font-family:宋体">购物流程</h3>
<!--有序列表开始-->
<ol>
<li>确认购买信息</li>
<li>付款到贵美</li>
<li>确认收货</li>
<li>付款给商家</li>
<li>双方评价</li>
</ol>
<!--有序列表结束-->
<hr>
<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>&yen;</p>
</body>
</html>

十六(table表格的用法:)

tr表示行,td表示单元格,th表示每一列的单元格的小标题,还有一个表格的大标题,需要用到caption来设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> table表格</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>课程</th>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>java</td>
<td>1</td>
<td>小明</td>
<td>88</td>
</tr>
<tr>
<td>html</td>
<td>3</td>
<td>小花</td>
<td>89</td>
</tr>
<tr>
<td>css</td>
<td>3</td>
<td>小一</td>
<td>87</td>
</tr>
</table>
</BODY>
</HTML>

表格的使用2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<head>
<title></title>
<meta charset=utf-8></meta>
<meta http-equiv=refresh content=4></meta>
</head>
<body>
<table border=1 cellspacing=0 width=300 height=200>
<tr>
<td colspan=4><h2>商品类目</h2></td>
</tr>
<tr>
<td rowspan=3>虚拟</td>
<td>移动</td>
<td>联通</td>
<td>小灵通</td>
</tr>
<tr>
<td>充值卡</td>
<td>彩票</td>
<td>双色球</td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
<td>游戏币</td>
</tr>
<tr>
<td rowspan=3>护肤</td>
<td>美容养护</td>
<td>美体</td>
<td>精油</td>
</tr>
<tr>
<td>彩妆</td>
<td>香水</td>
<td>美发</td>
</tr>
<tr>
<td>个人护理</td>
<td>保健</td>
<td>按摩器械</td>
</tr>
</table>
</body>
</html>

表格的使用3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META http-equiv="refresh" CONTENT="4">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<center>
<table border=1 cellspacing=0 bgcolor=#40E0D0 bordercolor=#DAA520 width=600 height=180>
<tr bgcolor=#E0FFFF align=center><td colspan=6><font size=3 face="黑体" style="font-weight:bold;">课程表</font></td></tr>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan=2>下午</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td rowspan=2>上午</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
</table>
</center>
</BODY>
</HTML>

表格的使用4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>数据年终数据报表</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META http-equiv="refresh" CONTENT="4">
<meta charset=utf-8>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table border=0 cellspacing=2 cellpadding=0 align=center width=500>
<caption><font face="楷体" size=5>年终工资报表</font></caption>
<tr bgcolor="#00EEEE">
<th>区域办事处</th><th>岗位</th><th>姓名</th><th>工资(RMB)</th></tr>
<tr bgcolor="#96CDCD">
<td rowspan=3 >华东区</td>
<td rowspan=2>人事专员</td>
<td>张民</td>
<td>3500</td>
</tr>
<tr bgcolor="#96CDCD">
<td>王洪</td>
<td>3500</td>
</tr>
<tr bgcolor="#96CDCD">
<td rowspan=3 >软件开发工程师</td>
<td>李开元</td>
<td>6000</td>
</tr>
<tr bgcolor="#96CDCD">
<td rowspan=2 >中南区</td>
<td>杨桃</td>
<td>8000</td>
</tr>
<tr bgcolor="#96CDCD">
<td>梁朝</td>
<td>8000</td>
</tr>
<tr bgcolor=#FFFF00><td colspan=3 >总计</td><td>29000</td></tr>
</table>
</BODY>
</HTML>

表格的使用5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<meta charset=utf-8>
<meta http-equiv=refresh content=5>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<center>
<table border=0 cellpadding=0 cellspacing=1 width=800>
<tr ><caption>年终数据报表</caption></tr>
<tr bgcolor=#00FFFF><th>月份</th><th>收入(rmb)</th></tr>
<tr bgcolor=#7AC5CD><td>1月</td><td>100</td></tr>
<tr bgcolor=#7AC5CD><td>2月</td><td>65</td></tr>
<tr bgcolor=#7AC5CD><td>3月</td><td>90</td></tr>
<tr bgcolor=#7AC5CD><td>4月</td><td>89</td></tr>
<tr bgcolor=#7AC5CD><td>5月</td><td>290</td></tr>
<tr bgcolor=#7AC5CD><td>6月</td><td>923</td></tr>
<tr bgcolor=#FFFF00><td>平均月收入</td><td>197.90</td></tr>
<tr bgcolor=#FFFF00><td>总计</td><td>1900</td></tr>
</table>
</center>
</BODY>
</HTML>

表格的使用6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta http-equiv="refresh" content=4></meta>
<meta charset=utf-8></meta>
</head>
<body>
<table border=1 cellspacing=0 width=200 height=200>
<tr>
<td rowspan=2 colspan=2>1</td>
<td colspan=2>2</td>
</tr>
<tr>
<td colspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td colspan=2 width="50%">5</td>
<td rowspan=2>6</td>
</tr>
<tr>
<td colspan=2>7</td>
</tr>
</table>
</body>
</html>

表格的使用7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<meta charset=utf-8></meta>
<meta http-equiv="refresh" content=4></meta>
</head>
<body>
<center>
<table border=0 cellspacing=0>
<tr align=center ><td colspan=10 height=30><font style=" font-weight:bold;" size=2 face="" color="#CD2626" >勤&nbsp;学&nbsp;如&nbsp;春&nbsp;起&nbsp;之&nbsp;苗&nbsp;,&nbsp;不&nbsp;见&nbsp;其&nbsp;增&nbsp;,&nbsp;日&nbsp;有&nbsp;所&nbsp;长&nbsp;;&nbsp;辍&nbsp;学&nbsp;如&nbsp;磨&nbsp;刀&nbsp;之&nbsp;石&nbsp;,&nbsp;不&nbsp;见&nbsp;其&nbsp;损&nbsp;,&nbsp;日&nbsp;有&nbsp;所&nbsp;亏&nbsp;。</font></td></tr>
<tr><td colspan=10><img src=img/images/header.jpg alt= title=></td></tr>
<tr background="img/images/daohang2.gif" align=center>
<td><font style=" font-weight:bold;" size=2 face="" color="#CD2626">赛期公告</font></td>
<td><font style=" font-weight:bold;"size=2 face="" color="#CD2626">擂台比赛登录</font></td>
<!-- <td background="img/images/a_over.gif"><font color="#ffffff" >英文练习</font></td>-->
<td background="img/images/a_over.gif" style="background-repeat:no-repeat;"><font color="#ffffff" >英文练习</font></td>
<td><font style=" font-weight:bold;" size=2 face="" color="#363636">中文练习</font></td>
<td><font style=" font-weight:bold;" size=2 face="" color="#363636">数字练习</font></td>
<td><font size=2 face="" color="#B5B5B5">榜上有名</font></td>
<td><font size=2 face="" color="#B5B5B5" >个人中心</font></td>
<td><font style=" font-weight:bold;" size=2>软件教程下载</font></td>
<td><font style=" font-weight:bold;" size=2>使用帮助</font></td>
<td><font style=" font-weight:bold;" size=2>联系我们</font></td>
</tr>
<tr style="margin-top:0;"><td colspan=10><img src=img/images/1.jpg></td></tr>
<tr background="img/images/footer.gif" align=center height=90><td colspan=10><font size=2 face="宋体" color=#696969 >陕西经济管理职业技术学院中英文、数字录入测速系统&nbsp;版权所有&nbsp;&nbsp;&nbsp;
[计算机应用系&nbsp;联系电话:029-88419466]&nbsp;|&nbsp;管理员登录<br />
<p>管理员邮箱:ynysai@163.com&nbsp;&nbsp;QQ:57693247&nbsp;&nbsp;&nbsp;欢迎访问:<font style=" font-weight:bold;">西安绵途软件科技公司</font><p>
</font>
</td>
</tr>
<tr></tr>
</table>
</center>
</body>
</html>

表格的使用8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.sub{
border:0;
width:96px;
height:31px;
color:#A0522D;
font-weight:bold;
background-image:url(../img/images/a_over.gif);
}
</style>
</HEAD>
<BODY>
<table>
<tr><td>贵美网站邮箱:<input type=text name=mail /></td></tr>
<tr><td>输 入 密 码:<input type=password name=pwd /></td></tr>
<tr><td>再次输入密码:<input type=password name=pwd1 /></td></tr>
<tr><td><input type=reset name="reset" value="重置"></td></tr>
<tr><td ><input type="submit" class=sub name=submit value=登&nbsp;&nbsp;陆 / ></td></tr>
<tr><td><input type=hidden name="userid" value="999" /></td></tr>
</table>
</BODY>
</HTML>

十七(textarea的使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<meta charset=utf-8>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1><img src="../../img/imgs/png-0120.png" alt="阅读协议" title="阅读协议">阅读贵美网服务协议</h1>
<p><textarea name="textarea" cols=30 rows=7 readonly>欢迎阅读服务条款协议</textarea></p>
</BODY>
</HTML>

textarea的使用2(当选中复选框时,被禁用的注册按钮就可以使用了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<textarea name=content cols=60 rows=9 readonly>
欢迎阅读服务条款协议,贵美的权利和义务
</textarea><br><br>
同意以上协议<input id=agree name=agree type="checkbox" onclick="agree()" />
<input id=btn name="bttn" type=submit value=注册 disabled >
<script type="text/javascript">
function agree(){
if(document.getElementById('agree').checked) document.getElementById('btn').disabled=false;
else document.getElementById('btn').disabled='disabled';
}
</script>
</BODY>
</HTML>

textarea使用3(和方法2差不多)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META charset="utf-8">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h3>申请表</h3>
<form>
<span>姓名:</span><input type="text"><br>
<span>密码:</span><input type="text"><br>
<span>照片:</span><input type="file" size=30><br>
<span>感兴趣的职位:</span>
<input type="radio" name="box" checked>Web设计
<input type="radio" name="box">Web开发<br>
<span>向往城市:</span>
<select name=select>
<option selected value="请选择城市" >请选择</option>
<option value=0>北京</option>
<option value=1>上海</option>
<option value=2>广州</option>
<option value=3>银川</option>
</select><br>
<span>经验:</span>
<select name="sle">
<option value="4">无经验</option>
<option value="5">3 年</option>
</select><br>
<span>协议:</span><br><textarea cols=30 rows=6 disabled>
求职信息必须真实、准确,本网站只负责向企业推荐。
</textarea><br>
<input type="checkbox" id="cb" onclick="c()"><span>我认真阅读并接受以上协议。</span><br>
<input type="button" id="btn" name="button" value="提交" disabled>
<input type="reset" name="cz" id="cz" value="重置"><br>
</form>
<!-- 取消提交按钮的disabled-->
<script type="text/javascript">
function c(){
if(document.getElementById('cb').checked)
document.getElementById('btn').disabled=false;
else
document.getElementById('btn').disabled='disabled';
}
</script>
</BODY>
</HTML>