11.2第二节课

来源：互联网发布：最新域名升级编辑：程序博客网时间：2024/06/06 14:09

一、路径概念

相对路径：相对于当前文件的路径。
绝对路径：你的主页上的文件或目录在硬盘上真正的路径
“./”:代表目前所在的目录
“../”:代表上一层目录
以“/”开头：代表根目录

二、表格标签

（1）表格三部分：
thead—-表格的页眉
tbody—-表格的主体
tfoot—–表格的页脚
（2）colgroup的使用
colgroup标签标签用于对表格中的列进行组合，以便对其进行格式化。
col标签规定了colgroup元素内部的每一列的列属性
（3）合并单元格和表格的间距
colspan属性：合并列
rowspan属性：合并行
colpadding属性：单元格边框与内容的间距
colspacing属性：单元格之间的间距

三、表单域的原理

1、什么是表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单在网页中主要负责采集数据。
form：form标签是成对出现的，以form开始，以/form结束 action：浏览者输入的数据被传送到的地方,比如一个PHP页面
method：数据传送的方式（get/post）
2、文本框和密码框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
type：当type=”text”时，输入框为文本输入框，当type=”password”时,输入框为密码输入框。
name：告诉服务器，我们提交的这个value值代表的什么。
value：为文本输入框设置默认值。(一般起到提示作用)。
3、单选框和复选框
在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
type:当type=”radio”时，控件为单选框；当type=”checkbox”时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。 name：告诉服务器，我们提交的这个value值代表的什么。
checked：当设置checked=”checked”时，该选项被默认选中。
4、下拉列表炫酷
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
value：提交数据到服务器的值。selected=”selected”：设置selected=”selected”属性，则该选项就被默认选中。下拉列表也可以进行多选操作，在select标签中设置multiple=”multiple”属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。
5、多行文本按钮和重置按钮
1. 多行文本
  当用户需要在表单中输入大段文字时，需要用到文本输入域。
  textarea rows=”行数” cols=”列数”>文本
  标签是成对出现的，以textarea>开始，以/textarea>结束。
  name：指定输入框的名字。
  cols ：多行输入域的列数。
  rows ：多行输入域的行数。
  在textarea>/textarea>标签之间可以输入默认值。
  2.上传
  在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。在HTML中，文件上传同样也使用input标签。
  input type=”file”/>
提交按钮和重置按钮
1、提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。当我们需要重置表单信息的时候，需要用到重置按钮。提交按钮
type：只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。
input type=”submit”
2、重置按钮：当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
input type=”reset” value=”重置”
type：只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。

四、课后作业

1、咖啡馆招聘信息

<body>  <h1>欢迎加入我们</h1>  <table border="2" cellpadding="30" cellspacing="10"> <colgroup>  <col span="1" style="background-color:pink">  <col span="2" style="background-color:yellow">  </colgroup>  <tr>  <th>职位</th>  <th>学历</th>  <th>薪资</th></tr><tr><td>店员</td><td>大专以上</td><td>3000-4500</td></tr><tr><td>店长</td><td>本科以上</td><td>7000以上</td></tr><tr><td>区域经理</td><td>本科以上</td><td>1万以上</td></tr> </body>```![这里写图片描述](http://img.blog.csdn.net/20171102163813976?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaml5YW4xMjM0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)- **2、在线订购**<div class="se-preview-section-delimiter"></div>

这里写代码片
“`

 <body> <h1>CODING COFFEE在线订购</h1> <form action="" method="GET" > <P> 送货地址：<br \> </p> <p> 姓名 <input type="text" name="name" value=""><br> 年龄 <input type="text" name="age" value=""><br> 手机号 <input type="text" name="telephone" value=""><br></p><p> 选择<br> 卡布奇诺 <input name="sex" type="radio" value="0" checked="checked"><br>  蓝山咖啡 <input name="sex" type="radio" value="1" ><br> 拿铁 <input name="sex" type="radio" value="2"><br></p><p> 选择<br> 食品：<input name="coffee" type="checkbox" value="0" checked="checked"><br> 水果 <input name="fruit" type="checkbox" value="1" checked="checked"><br> 牛奶 <input name="milk" type="checkbox" value="2" checked="checked"><br></p><p>下拉菜单<br><select name="coffee"><option value="0" selected="selected">卡布奇诺</option><br><option value="1" selected="selected">拿铁</option><br><option value="2" selected="selected">蓝山咖啡</option><br></select></p><p><textarea name="coffee" rows="10" cols="30"></textarea></p><p><input  type="submit" name="submit" value="提交"><input  type="reset" name="reset" value="重置"></p></form> </body>

这里写图片描述

3、课程表

<style type="text/css">   table{ text-align:center; font-size:25px; color:blue; border:2px solid blue;  }  th{color:blue;  border:2px solid blue;  }h1{color:blue;}td{color:blue;  border:2px solid blue;  }  </style>  </head> <body>  <h1 align="center">课程表</h1> <table align="center" cellpadding="15">  <th>项目</th>  <th colspan="5">上课 </th>  <th colspan="2">休息</th>  </tr> <tr>  <td>星期</td>  <td>星期一</td>  <td>星期二</td>  <td>星期三</td>  <td>星期四</td>  <td>星期五</td>  <td>星期六</td>  <td>星期日</td></tr> <tr>  <td rowspan="4">上午</td>  <td>语文</td>  <td>数学</td>  <td>英语</td>  <td>英语</td>  <td>物理</td>  <td>计算机</td>  <td rowspan="4">休息</td></tr> <tr>  <td>数学</td>  <td>数学</td>  <td>地理</td>  <td>历史</td>  <td>化学</td>  <td>计算机</td></tr> <tr>  <td>化学</td>  <td>语文</td>  <td>体育</td>  <td>计算机</td>  <td>英语</td>  <td>计算机</td></tr> <tr>  <td>政治</td>  <td>英语</td>  <td>体育</td>  <td>历史</td>  <td>地理</td>  <td>计算机</td></tr> <tr>  <td rowspan="2">下午</td>  <td>语文</td>  <td>数学</td>  <td>英语</td>  <td>物理></td>  <td>计算机</td>  <td>英语</td>  <td rowspan="2">休息</td></tr> <tr>  <td>数学</td>  <td>数学</td>  <td>地理</td>  <td>历史</td>  <td>化学</td>  <td>计算机></td></tr>

这里写图片描述

阅读全文

0 0