HTML第四天学习笔记

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

 <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>

 <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>

 <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>

 <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>

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

表单：
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"

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

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

HTML第四天学习笔记的更多相关文章

《Linux内核设计与实现》第四章学习笔记
<Linux内核设计与实现>第四章学习笔记 ——进程调度姓名:王玮怡学号:20135116 一.多任务 1.多任务操作系统的含义多任务操作系统就是能同时并发地交 ...
《Linux内核设计与实现》第四章学习笔记——进程调度
<Linux内核设计与实现>第四章学习笔记——进程调 ...
Spring实战第四章学习笔记————面向切面的Spring
Spring实战第四章学习笔记----面向切面的Spring 什么是面向切面的编程我们把影响应用多处的功能描述为横切关注点.比如安全就是一个横切关注点,应用中许多方法都会涉及安全规则.而切面可以帮我 ...
Go语言核心36讲（Go语言实战与应用二十四）--学习笔记
46 | 访问网络服务前导内容:socket 与 IPC 人们常常会使用 Go 语言去编写网络程序(当然了,这方面也是 Go 语言最为擅长的事情).说到网络编程,我们就不得不提及 socket. s ...
Day4 《机器学习》第四章学习笔记
决策树前几天学习了<机器学习>的前三章,前三章介绍机器学习的基础知识,接下来,第四章到第十章介绍一些经典而常用的机器学习方法,这部分算是具体的应用篇,第四章介绍了一类机器学习方法——决策 ...
Go语言核心36讲（Go语言实战与应用四）--学习笔记
26 | sync.Mutex与sync.RWMutex 从本篇文章开始,我们将一起探讨 Go 语言自带标准库中一些比较核心的代码包.这会涉及这些代码包的标准用法.使用禁忌.背后原理以及周边的知识. ...
Go语言核心36讲（Go语言实战与应用十四）--学习笔记
36 | unicode与字符编码在开始今天的内容之前,我先来做一个简单的总结. Go 语言经典知识总结在数据类型方面有: 基于底层数组的切片: 用来传递数据的通道: 作为一等类型的函数: 可实现 ...
nodejs的第四天学习笔记
一. ECMAScript6(es2015)es6语法 es6/es2015,在es5的基础上扩展了很多新的功能,我们要学习仅仅是es6中的部分常用新功能,这些功能在使用的时候一定要慎重,因为他们之中 ...
Linux第四次学习笔记
程序的机器级表示寻址方式的演变 DOS → 8086 → IA32 Inter处理器系列俗称x86,其演变过程(根据其所需要的晶体管数量来说明): 8086 → 80286 → i386 → i48 ...
sql必知必会(第四版) 学习笔记
还有一个<Sqlserver2008技术内幕>的笔记,也很好!~ http://www.cnblogs.com/liupeng61624/p/4354983.html 温习一遍简单的sql ...

随机推荐

Hadoop学习总结之三：Map-Reduce入门
1.Map-Reduce的逻辑过程假设我们需要处理一批有关天气的数据,其格式如下: 按照ASCII码存储,每行一条记录每一行字符从0开始计数,第15个到第18个字符为年第25个到第29个字符为温 ...
更新Code First生成的数据库
1,首次访问时会自动生成数据库 2,某个Model增加一个字段后,再次访问会报,数据库不是最新操作 1,Enable-Migrations 注意选择Default project为Star.Core ...
$(function(){})和jQuery(function(){})
$(function(){})和jQuery(function(){})有没有区别,群里的屌丝争吵起来,各自讲着各种理论大道理.但还是有人给出了简而有力的证明: 区分大小写(jQuery) 但jQue ...
查一下 excel中某一列是否有重复
另一列中写入 =IF(COUNTIF(C:C,C1)>1,"有重复","") 其余往下拖拉公式我在想如果可以有不往下拖的呢? 不过好像筛选中也有类似的选 ...
BITMAP CONVERSION FROM ROWIDS
在有些执行计划中,可以会看到 BITMAP CONVERSION FROM ROWIDS这样的东东,也许你会感觉奇怪,我没有使用位图索引怎么出现了bitmap.我通过一个sql和大家分析下原因:sql ...
[转]Linux下which、whereis、locate、find 命令的区别
转自:http://312788172.iteye.com/blog/730280 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有 ...
XposedNoRebootModuleSample 不需要频繁重启调试的Xposed 模块源码例子
XposedNoRebootModuleSample(不需要频繁重启调试的Xposed 模块源码例子) Xposed Module Sample No Need To Reboot When Debu ...
c#中格式化导出Excel数据
在项目开发过程中经常会遇到数据导出Excel.如果只是导出数据就好办了.但往往用户会有各种格式要求.加粗.边框.合并单元格.汇总等功能. 以下的方法是基于Excel模版方式写入数据导出的功能.可以最大 ...
60个响应式的Web设计教程–能够手机访问！
想要学习响应式[responsive:屏幕自适应的效果]的网页设计和开发技术?在这个超大的收藏集合中,我想你定会找到想要开始学习的响应式网页设计教程. 面对超过1亿的手机互联网用户,开发专业和用户友好 ...
C#获取ftp文件最后修改时间
public static DateTime GetFileModifyDateTime(string ftpServerIP,string ftpFolder,string ftpUserID,st ...

HTML第四天学习笔记

HTML第四天学习笔记的更多相关文章

随机推荐

热门专题