【基本功练习_1】 HTML/DHTML

练习如下：

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第1个练习 </ title >
 5  </ head >
 6  < body >
 7  < br > <!--  br的作用是换行  -->
 8  < p > 这是第一个练习。 </ p > <!--  p的作用是分段  -->
 9  </ body >
10  </ html >

 

第2个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第2个练习 </ title >
 5  < style >
 6  .over  { color : red ; background : yellow ; }
 7  .out  { color : black ; background : white ; }
 8  </ style >
 9  </ head >
10  < body >
11  < br >
12  < p  OnMouseOver ="this.className='over'"  OnMouseOut ="this.className='out'" > 这是第二个练习。 </ p >
13  </ body >
14  </ html >

 

第3个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第3个练习 </ title >
 5  < style >
 6  <!-- 
 7  p  { font-style : italic ; color : 336699 ; }
 8  -->
 9  </ style >
10  </ head >
11  < body >
12  < br >
13  < p >< bdo  dir ="rtl" > 这是第三个练习。 </ p >
14  <!--  bdo的作用是从右往左显示 -->
15  <!--  dir的作用范围仅限于<style>...</style> -->
16  </ body >
17  </ html >

 

第4个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第4个练习 </ title >
 5  </ head >
 6  < body >
 7  < b > <!--  b的作用是加粗  -->
 8  < u > <!--  u的作用是加下划线  -->
 9  < i > <!--  i的作用是斜体字  -->
10  < font  face ="楷体"  color ="red"  size ="6" > 这是第四个练习。 </ font >
11  </ body >
12  </ html >

 

第5个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第5个练习 </ title >
 5  </ head >
 6  < body >
 7  < p  align ="center" >
 8  < font  face ="楷体"  color ="red"  size ="6" > 木兰辞 拟古决绝词柬友 </ font >
 9  </ p >
10  < p  align ="center" >
11  < font  face ="隶书"  color ="green"  size ="3" >
12  人生若只如初见，何事秋风悲画扇？ < br >
13  等闲变却故人心，却道故人心易变。 < br >
14  骊山语罢清宵半，夜雨霖铃终不怨。 < br >
15  何如薄幸锦衣儿，比翼连枝当日愿。 < br >
16  </ font >
17  </ p >
18  </ body >
19  </ html >

 

第6个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第6个练习 </ title >
 5  </ head >
 6  < body >
 7  < table  border ="2"  width ="30%"  align ="center" >
 8  < tr  align ="center" >
 9  < td  width ="60%"  height ="40px" > 英雄 </ td >
10  < td  width ="40%"  height ="40px" > 分类 </ td >
11  </ tr >
12  < tr  align ="center" >
13  < td > 巫妖 </ td >
14  < td > 智力 </ td >
15  </ tr >
16  < tr  align ="center" >
17  < td > 闪电幽魂 </ td >
18  < td  rowspan ="2" > 敏捷 </ td >
19  </ tr >
20  < tr  align ="center" >
21  < td > 冥界亚龙 </ td >
22  </ tr >
23  </ table >
24  </ body >
25  </ html >

 

第7个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第7个练习 </ title >
 5  </ head >
 6  < body >
 7  < form  method ="post"  action ="mailto:[email protected]"  enctype ="text/plain"  onsubmit ="window.alert('发送邮件至[email protected]')"   >
 8  < P >
 9  用户姓名： < input  type ="text"  name ="username"  size ="10"  maxlength ="10" >
10  </ p >
11  < P >
12  用户密码： < input  type ="password"  name ="userpwd"  size ="8"  maxlength ="8" >
13  </ p >
14  < P >
15  用户性别：
16  < input  type ="radio"  name ="sex"  value ="male" > 男
17  < input  type ="radio"  name ="sex"  value ="femal" > 女
18  </ p >
19  < P >
20  用户爱好：
21  < input  type ="checkbox"  name ="hobby"  value ="Game" > 游戏
22  < input  type ="checkbox"  name ="hobby"  value ="Sport" > 运动
23  </ p >
24  < p > 用户国籍：
25  < select  name ="country" >
26  < option  value ="1"  selected > 中国 </ option >
27  < option  value ="2" > 美国 </ option >
28  < option  value ="3" > 日本 </ option >
29  </ select >
30  </ p >
31  < p >
32  < textarea  name ="remark"  cols ="20"  rows ="4" > 备注 </ textarea >
33  </ p >
34  < p >
35  < input  type ="submit"  value ="提交" >
36  < input  type ="reset"  value ="重置" >
37  </ p >
38  </ form >
39  </ body >
40  </ html >

 

第8个练习

 1  < html >
 2  < head >
 3  < meta  content ="text/html;charset=gbk"   />
 4  < title > 第8个练习 </ title >
 5  </ head >
 6  < body >
 7  Dota中的英雄分为：
 8  < ul >
 9  < li > 力量型 </ li >
10  < li > 敏捷型 </ li >
11  < li > 智力型 </ li >
12  </ ul >
13  < hr > <!--  hr的作用是画出一条分隔线  -->
14  星际中的种族分为：
15  < ol  start ="10" >
16  < li > 神族 </ li >
17  < li > 虫族 </ li >
18  < li > 人族 </ li >
19  </ ul >
20  </ body >
21  </ html >