首页 > 代码库 > HTML第四天学习笔记
HTML第四天学习笔记
今天老师教了下无序列表和有序列表，虽然并没有，同时做了个随堂练习：
1 <html> 2 <head> 3 <title>随堂练习00</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 </head> 6 <body> 7 <h1>列表</h1> 8 <ul> 9 <li>牛奶</li> 10 <li>咖啡</li> 11 <li>茶</li> 12 </ul> 13 <ul type = "circle"> 14 <li>牛奶</li> 15 <li>咖啡</li> 16 <li>茶</li> 17 </ul> 18 <ul type = "square"> 19 <li>牛奶</li> 20 <li>咖啡</li> 21 <li>茶</li> 22 </ul> 23 <ol> 24 <li>牛奶</li> 25 <li>咖啡</li> 26 <li>茶</li> 27 </ol> 28 <ol type = "I"> 29 <li>牛奶</li> 30 <li>咖啡</li> 31 <li>茶</li> 32 </ol> 33 <ol type = "i"> 34 <li>牛奶</li> 35 <li>咖啡</li> 36 <li>茶</li> 37 </ol> 38 <ol type = "a"> 39 <li>牛奶</li> 40 <li>咖啡</li> 41 <li>茶</li> 42 </ol> 43 </body> 44 </html>
效果如图：
==========================================================================
第二个就是关于表格的练习：
1 <html> 2 <head> 3 <title>syllabus</title> 4 <meta http-equiv = "content-type" content = "text/html;charset = utf-8"> 5 </head> 6 <body> 7 <h1 align = "middle">课程表</h1> 8 <table border = 1 width = "500" color = "#6699ff" align = "center"> 9 <tr><!--第一行--> 10 <th align = "middle" width = "50">项目</th> 11 <th colspan = "5" align = "middle">上课</th> 12 <th colspan = "2" align = "middle" width = "50">休息</th> 13 </tr> 14 <tr><!--第二行--> 15 <th C>星期</th> 16 <th align = "middle">星期一</th> 17 <th align = "middle">星期二</th> 18 <th align = "middle">星期三</th> 19 <th align = "middle">星期四</th> 20 <th align = "middle">星期五</th> 21 <th align = "middle">星期六</th> 22 <th align = "middle">星期日</th> 23 </tr> 24 <tr><!--第三行--> 25 <td rowspan = 4 align = "middle">上午</td> 26 <td align = "left">语文</td> 27 <td align = "left">数学</td> 28 <td align = "left">化学</td> 29 <td align = "left">政治</td> 30 <td align = "left">体育</td> 31 <td align = "left">体育</td> 32 <td rowspan = 4 align = "middle">休息</td> 33 </tr> 34 <tr><!--第四行--> 35 <td align = "left">计算机</td> 36 <td align = "left">英语</td> 37 <td align = "left">语文</td> 38 <td align = "left">数学</td> 39 <td align = "left">地理</td> 40 <td align = "left">政治</td> 41 </tr> 42 <tr><!--第五行--> 43 <td align = "left">语文</td> 44 <td align = "left">物理</td> 45 <td align = "left">生物</td> 46 <td align = "left">历史</td> 47 <td align = "left">地理</td> 48 <td align = "left">数学</td> 49 </tr> 50 <tr><!--第六行--> 51 <td align = "left">高数</td> 52 <td align = "left">离散</td> 53 <td align = "left">概率</td> 54 <td align = "left">C#</td> 55 <td align = "left">C语言</td> 56 <td align = "left">马克思</td> 57 </tr> 58 <tr><!--第七行--> 59 <td rowspan = "2" align = "middle">下午</td> 60 <td align = "left">代数</td> 61 <td align = "left">统计</td> 62 <td align = "left">博弈论</td> 63 <td align = "left">近代史</td> 64 <td align = "left">哲学</td> 65 <td align = "left">游戏</td> 66 <td rowspan = "2" align = "middle">休息</td> 67 </tr> 68 <tr><!--第八行--> 69 <td align = "left">体育</td> 70 <td align = "left">体育</td> 71 <td align = "left">体育</td> 72 <td align = "left">体育</td> 73 <td align = "left">体育</td> 74 <td align = "left">体育</td> 75 </tr> 76 </table> 77 </body> 78 </html>
效果如图：
======================================================================
后来又做了个学生信息表：
1 <html> 2 <head> 3 <title>随堂练习01</title> 4 <meta http-equiv = "content-type" content = "text/hteml;charset = utf-8"> 5 </head> 6 <body> 7 <h1 align = "center">学员信息表</h1> 8 <table border = "1" width = "500" align = "center"> 9 <tr bgcolor = "#ffcc99"> 10 <th align = "center">学号</th> 11 <th align = "center">姓名</th> 12 <th align = "center">性别</th> 13 </tr> 14 <tr> 15 <td align = "center">00</td> 16 <td align = "center">叶芸榕</td> 17 <td align = "center">男</td> 18 </tr> 19 <tr bgcolor = "#ffcc99"> 20 <td align = "center">01</td> 21 <td align = "center">吕天送</td> 22 <td align = "center">男</td> 23 </tr> 24 </table> 25 </body> 26 </html>
效果如图：
==============================================================================
今天主要还是学习了表单的知识：
1 <html> 2 <head> 3 <title>视频同步：表单</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 </head> 6 <body> 7 <h1 align = "center">注册界面</h1> 8 <table border = "1" width = "215" align = "center" bordercolor = "#ffffff"> 9 <form name = "form" method = "post" action = "login.php"> 10 <tr> 11 <th align = "center">用户名</th> 12 <td><input type = "text" name = "username"></td> 13 </tr> 14 <tr> 15 <th align = "center">密码</th> 16 <td><input type = "password" name = "userpwd"></td> 17 </tr> 18 <tr align = "center"> 19 <th>性别</th> 20 <td> 21 <input type = "radio" name = "sex" value = "男" checked = "checked"/>男 <!--默认选择--> 22 <input type = "radio" name = "sex" value = "女"/>女 23 </td> 24 </tr> 25 <tr align = "center"> 26 <th>兴趣爱好</th> 27 <td> 28 <input type = "checkbox" name = "like" value = "游戏" checked = "checked" />游戏 <!--默认选择--> 29 <input type = "checkbox" name = "like" value = "射箭"/>射箭<br/> 30 <input type = "checkbox" name = "like" value = "滑冰"/>滑冰 31 <input type = "checkbox" name = "like" value = "旅行"/>旅行 32 </td> 33 </tr> 34 <tr align = "center"> 35 <th>位置</th> 36 <td> 37 <select name = "city"> 38 <option value = "北京市" selected = "selected">北京市<option><!--默认选择--> 39 <option value = "南京市">南京市<option> 40 <option value = "东京市">东京市<option> 41 </select> 42 </td> 43 </tr> 44 <tr> 45 <td align = "center" colspan = "2"> 46 <input type = "submit" value = "注册"> 47 </td> 48 </tr> 49 </form> 50 </table> 51 </body> 52 </html>
以下是我在学习中记录的知识点以及效果图：
表单：
1、表单的概念：
表单不要用来获取客户端用户数据信息的。如：注册表单、查询表单、登录表单；
2、表单的工作原理：
浏览有表单的界面，填写一些必要的信息，然后点击某个按钮进行提交。
这些表单数据通过互联网，传递到服务器上。
服务器上有专门的程序，对表单数据进行验证。
表单的制作分为两部分：一是前端的制作，二是后台php对表单数据的处理。
往地址栏中追加数据的方式发送账号密码。
表单的属性：
1、属于块元素；
2、name；表单名字；名字主要是给javascript使用；js主要用来做客户端表单验证；
3、method:表单的提交方式：get和post。
4、action:指定表单的处理程序;一般是PHP文件；
如果action为空，表单数据提交给了当前文件，它自己来处理；
5、enctype：指定表单数据的编码方式，对表单数据的一个加密；这个属性只能用于当method属性等于post时；有两个值
a、application/x-form-urldecoded //无上传项时，默认为该值（默认的加密方式）；
b、multipart/form-data //上传文件时，该值必须是自己
get方法和post方法：
1、get提交方式；
是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。
如： file:///D:/文档/视频同步/login.php?username=叶芸榕&userpwd=qwe
login.php 是表单处理程序；
username=叶芸榕&userpwd=qwe 为表单提交的数据，又称之为“查询字符串”。
action文件和查询文件用“&”分隔。
每两个表单元素之间使用“&“符号分隔开来。
表单名称和表单值之间使用“=”分隔。
如果某个表单数据不想往服务器提交数据，那么，则不必给它添加name属性。因为没有name属性则无法获取其值。
get方式的特点；
1、不能提交敏感数据。如：密码。
2、只能提交少量数据。因为地址栏中的长度有限制。
3、get方式不能上传附件。
2、post提交式：
post提交方式，不是将表单数据追加到地址上，而是直接传给表单处理程序。
post方式的特点：
1、post提交的数据相对安全。
2、post可以提交海量数据。
3、post方式可以上传文件。
需要注意的是，地址栏传输数据的方式默认是get方式。
表单元素：
1、单行文本域；
语法格式：<input type = "text" 属性 = "值">
属性：
name：文本框的名字，命名规则是：可以包含字母、数字、下划线，只能以字母开头；
type：表单元素的类型。
value：表单元素的值。
size：文本框的长度。以“字符”为单位。
MaxLength:最大长度。最多可以输入多少个字符。
readonly：只读属性；可以选中不能修改；readonly = "readonly"
disabled:禁用属性；不能选中，不能修改。
2、单行密码域：
语法格式：<input type = "password" 属性 = "值">
属性与单行文本域一模一样；
3、单选按钮：
语法格式：<input type = "radio" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked: 默认选择某项；chaecked = checked;
注意：一组单选按钮，只能选择一个，但name的值必须一致。如:name = "sex"
单选按钮用户不能自己输入内容，用户只能选择，因此必须为它指默认值"value"
4、复选框：
语法格式：<input type = "checkbox" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked：默认选择。checked = "checked"
注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。
复选框可以一次选择多个，也可以一个都不选。
5、下拉列表：
语法格式：
<select name = "city">
<option value = "http://www.mamicode.com/北京市">北京市<option>
<option value = "http://www.mamicode.com/南京市">南京市<option>
<option value = "http://www.mamicode.com/东京市">东京市<option>
</select>
select 属性：只有一个name
option属性有两个：
value:元素的值；
selected：默认选择； selected = "selected"
=============================================================================
以上就是我今天的所学，虽然相对前两天可能较少，但涉及的知识还是有点多的。
HTML第四天学习笔记