首页 > 代码库 > 第十四天学习笔记

第十四天学习笔记

今天继续学习了表单和框架以及HTML5相关的知识点:

先是测试了下html,用表单和表格相关的知识点,以下是代码部分:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>html阶断测试</title>
 6     <meta name="keywords" content="关键字列表" />
 7     <meta name="description" content="网页描述" />
 8     <link rel="stylesheet" type="text/css" href="" />
 9     <style type="text/css"></style>
10     <script type="text/javascript"></script>
11 </head>
12 <body>
13     <form action="receive.php" method="post">
14         <table align = "center" border = 1 width = "280" cellpadding = "0" cellspacing = "0">
15             <!--标题表格-->
16             <tr>
17                 <th colspan = "2" height = "50">信息登记表</th>
18             </tr>
19             <!--姓名-->
20             <tr align = "middle" bgcolor = "#33cccc">
21                 <td size = "10" cols = "5">姓名</td>
22                 <td>
23                     <input type = "text" name = "user">
24                 </td>
25             </tr>
26             <!--性别-->
27             <tr align = "middle">
28                 <td>性别</td>
29                 <td>
30                     <input type = "radio" name = "sex" value = "男" checked = "checked"/><!--默认选择-->
31                     <input type = "radio" name = "sex" value = "女"/>32                 </td>
33             </tr>
34             <!--爱好-->
35             <tr align = "middle" bgcolor = "#33cccc">
36                 <td>爱好</td>
37                 <td>
38                     <input type = "checkbox" name = "like" value = "看电影" checked = "checked"/>看电影
39                     <input type = "checkbox" name = "like" value = "听音乐"/>听音乐
40                     <input type = "checkbox" name = "like" value = "旅行"/>旅行
41                 </td>
42             </tr>
43             <!--月薪-->
44             <tr align = "middle">
45                 <td>月薪</td>
46                 <td><input type = "text" name = "yuexing"></td>
47             </tr>
48             <!--国籍-->
49             <tr align = "middle" bgcolor = "#33cccc">
50                 <td>国籍</td>
51                 <td>
52                     <select name = "city">
53                         <option value = "中国" selected = "selected">中国<option><!--默认选择-->
54                         <option value = "USA">USA<option>
55                         <option value = "English">English<option>
56                     </select>
57                 </td>
58             </tr>
59             <!--备注-->
60             <tr align = "middle">
61                 <td>备注</td>
62                 <td>
63                     <textarea name = "beizhu" cols = "20"></textarea>
64                 </td>
65             </tr>
66             <!--按钮栏-->
67             <tr align = "middle">
68                 <td colspan = "2">
69                     <button>提交信息</button>
70                     <input type="reset" name = "tj" value = "重置">
71                 </td>
72             </tr>
73         </table>
74     </form>
75 </body>
76 </html>

效果如图:

技术分享

对于表单,个人感觉还是需要多加练习,不太熟练的掌握

===============================================================================

接下来是关于框架的一些复习,因为部分原因,今天的框架并没有写完,以下是部分代码和效果图:

主界面的代码如下

1 <frameset rows = "64px,*" border = 1px >
2         <frame src = "job_16_11_28_00_top.html" name = "top" noresize="noresize">
3         <frameset cols = "15%,*">
4         <frame src = "job_16_11_28_00_left.html" name = "left" noresize="noresize">
5         <frame src = "job_16_11_28_00_right.html" name = "right">
6 </frameset>

_top页的代码:

 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 4     <title>网页标题</title>
 5     <meta name="keywords" content="关键字列表" />
 6     <meta name="description" content="网页描述" />
 7     <link rel="stylesheet" type="text/css" href="" />
 8     <style type="text/css">
 9         body{
10             margin:5px;
11         }
12     </style>
13     <script type="text/javascript"></script>
14 </head>
15 <body background = "Images/top-bg.gif">
16     <table align = "right" cellspacing = 0>
17         <tr>
18             <td>
19                 <font color = "white">早上好<font color = "green">admin</font> ,欢迎你</font>
20                 <input type = "button" value = "退出" name = "etx">
21             </td>
22         </tr>
23         <tr>
24             <td align = "right">
25                 <a href = "#">返回首页</a>
26             </td>
27         <tr>
28     </table>
29 </body>
30 </html>

_left导航栏的代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>网页标题</title>
 6     <meta name="keywords" content="关键字列表" />
 7     <meta name="description" content="网页描述" />
 8     <link rel="stylesheet" type="text/css" href="" />
 9     <style type="text/css"></style>
10     <script type="text/javascript"></script>
11 </head>
12 <body>
13     <table align = "center" cellpadding = 2>
14         <tr>
15             <th background = "Images/menu_bg.gif" width = 300 align = "left"><font color = "blue">  网站管理菜单</font></th>
16         </tr>
17         <tr>
18             <td background = "Images/menu_topline.gif" width = 182 ></td>
19         </tr>
20         <tr>
21             <th background = "Images/menu_bg.gif" width = 182 align = "left">  新闻资讯</th>
22         </tr>
23         <tr>
24             <th background = "Images/menu_bg.gif" width = 182 align = "left">  公司介绍</th>
25         </tr>
26         <tr>
27             <th background = "Images/menu_bg.gif" width = 182 align = "left">  成功案例</th>
28         </tr>
29         <tr>
30             <th background = "Images/menu_bg.gif" width = 182 align = "left">  送花常识</th>
31         </tr>
32     </table>
33 </body>
34 </html>

_right页暂无代码,且导航栏并未添加链接,所以其效果如图:

 

技术分享

关于剩下的功能,由于时间关系,只能明天补全~

第十四天学习笔记