HTML第四天学习笔记

时间:2021-02-12 11:26:17

今天老师教了下无序列表和有序列表,虽然并没有,同时做了个随堂练习:

 <html>
<head>
<title>随堂练习00</title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
</head>
<body>
<h1>列表</h1>
<ul>
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ul>
<ul type = "circle">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ul>
<ul type = "square">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ul>
<ol>
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ol>
<ol type = "I">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ol>
<ol type = "i">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ol>
<ol type = "a">
<li>牛奶</li>
<li>咖啡</li>
<li>茶</li>
</ol>
</body>
</html>

效果如图:

HTML第四天学习笔记

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

第二个就是关于表格的练习:

 <html>
<head>
<title>syllabus</title>
<meta http-equiv = "content-type" content = "text/html;charset = utf-8">
</head>
<body>
<h1 align = "middle">课程表</h1>
<table border = 1 width = "500" color = "#6699ff" align = "center">
<tr><!--第一行-->
<th align = "middle" width = "50">项目</th>
<th colspan = "5" align = "middle">上课</th>
<th colspan = "2" align = "middle" width = "50">休息</th>
</tr>
<tr><!--第二行-->
<th C>星期</th>
<th align = "middle">星期一</th>
<th align = "middle">星期二</th>
<th align = "middle">星期三</th>
<th align = "middle">星期四</th>
<th align = "middle">星期五</th>
<th align = "middle">星期六</th>
<th align = "middle">星期日</th>
</tr>
<tr><!--第三行-->
<td rowspan = 4 align = "middle">上午</td>
<td align = "left">语文</td>
<td align = "left">数学</td>
<td align = "left">化学</td>
<td align = "left">政治</td>
<td align = "left">体育</td>
<td align = "left">体育</td>
<td rowspan = 4 align = "middle">休息</td>
</tr>
<tr><!--第四行-->
<td align = "left">计算机</td>
<td align = "left">英语</td>
<td align = "left">语文</td>
<td align = "left">数学</td>
<td align = "left">地理</td>
<td align = "left">政治</td>
</tr>
<tr><!--第五行-->
<td align = "left">语文</td>
<td align = "left">物理</td>
<td align = "left">生物</td>
<td align = "left">历史</td>
<td align = "left">地理</td>
<td align = "left">数学</td>
</tr>
<tr><!--第六行-->
<td align = "left">高数</td>
<td align = "left">离散</td>
<td align = "left">概率</td>
<td align = "left">C#</td>
<td align = "left">C语言</td>
<td align = "left">马克思</td>
</tr>
<tr><!--第七行-->
<td rowspan = "2" align = "middle">下午</td>
<td align = "left">代数</td>
<td align = "left">统计</td>
<td align = "left">博弈论</td>
<td align = "left">近代史</td>
<td align = "left">哲学</td>
<td align = "left">游戏</td>
<td rowspan = "2" align = "middle">休息</td>
</tr>
<tr><!--第八行-->
<td align = "left">体育</td>
<td align = "left">体育</td>
<td align = "left">体育</td>
<td align = "left">体育</td>
<td align = "left">体育</td>
<td align = "left">体育</td>
</tr>
</table>
</body>
</html>

效果如图:

HTML第四天学习笔记

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

后来又做了个学生信息表:

 <html>
<head>
<title>随堂练习01</title>
<meta http-equiv = "content-type" content = "text/hteml;charset = utf-8">
</head>
<body>
<h1 align = "center">学员信息表</h1>
<table border = "1" width = "500" align = "center">
<tr bgcolor = "#ffcc99">
<th align = "center">学号</th>
<th align = "center">姓名</th>
<th align = "center">性别</th>
</tr>
<tr>
<td align = "center">00</td>
<td align = "center">叶芸榕</td>
<td align = "center">男</td>
</tr>
<tr bgcolor = "#ffcc99">
<td align = "center">01</td>
<td align = "center">吕天送</td>
<td align = "center">男</td>
</tr>
</table>
</body>
</html>

效果如图:

HTML第四天学习笔记

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

今天主要还是学习了表单的知识:

 <html>
<head>
<title>视频同步:表单</title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
</head>
<body>
<h1 align = "center">注册界面</h1>
<table border = "1" width = "215" align = "center" bordercolor = "#ffffff">
<form name = "form" method = "post" action = "login.php">
<tr>
<th align = "center">用户名</th>
<td><input type = "text" name = "username"></td>
</tr>
<tr>
<th align = "center">密码</th>
<td><input type = "password" name = "userpwd"></td>
</tr>
<tr align = "center">
<th>性别</th>
<td>
<input type = "radio" name = "sex" value = "男" checked = "checked"/>男 <!--默认选择-->
<input type = "radio" name = "sex" value = "女"/>女
</td>
</tr>
<tr align = "center">
<th>兴趣爱好</th>
<td>
<input type = "checkbox" name = "like" value = "游戏" checked = "checked" />游戏 <!--默认选择-->
<input type = "checkbox" name = "like" value = "射箭"/>射箭<br/>
<input type = "checkbox" name = "like" value = "滑冰"/>滑冰
<input type = "checkbox" name = "like" value = "旅行"/>旅行
</td>
</tr>
<tr align = "center">
<th>位置</th>
<td>
<select name = "city">
<option value = "北京市" selected = "selected">北京市<option><!--默认选择-->
<option value = "南京市">南京市<option>
<option value = "东京市">东京市<option>
</select>
</td>
</tr>
<tr>
<td align = "center" colspan = "2">
<input type = "submit" value = "注册">
</td>
</tr>
</form>
</table>
</body>
</html>

以下是我在学习中记录的知识点以及效果图:

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 = "北京市">北京市<option>
    <option value = "南京市">南京市<option>
    <option value = "东京市">东京市<option>
   </select>
  select 属性:只有一个name
  option属性有两个:
   value:元素的值;
   selected:默认选择; selected = "selected"

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

以上就是我今天的所学,虽然相对前两天可能较少,但涉及的知识还是有点多的。