2017.11.2第二课-CSDN博客

本文链接：https://blog.csdn.net/gbb930920/article/details/78425856

一、路径概念

“./”:代表目前所在目录
” ../”:代表上一层目录
以“/”开头：代表根目录

二、表格标签

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

三、表单域的原理

1.什么是表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单在网页中主要负责采集数据。
form>：form>标签是成对出现的，以form>开始，以/form>结束。 action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 method：数据传送的方式（get/post）。
表单中还包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、提交按钮和文件上传框等。
2.文本框和密码框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
/form>
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”属性，则该选项就被默认选中。
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。
-5.多行文本和按钮
（1）多行文本
当用户需要在表单中输入大段文字时，需要用到文本输入域。
textarea rows=”行数” cols=”列数”>文本
标签是成对出现的，以开始，以结束。
name：指定输入框的名字。 cols ：多行输入域的列数。 rows ：多行输入域的行数。
(2)当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。

<input  type="submit"   value="提交">
<input  type="reset"    value="重置">

课后作业

（1）招聘信息页面

 <h1>coffee招聘</h1>
  <table border="1" cellpadding="25" >
 <colgroup>
   <col span="1"  style="background-color:blue">
   <col span="1"  style="background-color:grey">
   <col span="1"  style="background-color:yellow">

  </colgroup>
  <tr>
     <th>职位</th>
     <th>性别</th>
     <th>薪资</th>

  </tr>
 <tr>

     <td>总经理</td>
     <td>男</td>
     <td>5000</td>
 </tr>
  <tr>
     <td>经理</td>
     <td>女</td>
     <td>4000</td>

 </tr>
 <tr>
     <td>职员</td>
     <td>男</td>
     <td>3500</td>

 </tr>

  </table>
 </body>

这里写图片描述
（2）订购页面

<body>
  <h1>coffee在线订购</h1>
  <form action="" method="GET">  
   <p>
      类型：
      <input type="radio" name="fen" value="kfen" checked="checked">咖啡粉
      <input type="radio" name="fen" value="kdou">咖啡豆

   </p>
    <p>

       姓名：<input type="text" name="name" value=""><br>
       性别：<input type="text" name="sex" value=""><br>
       手机号：<input type="text" name="number" value=""><br>
       送货地址：<input type="text" name="adress" value=""><br>
   </p>
   <p>
       调味：<br>
      <input type="checkbox" name="la" value="辣" checked="checked">辣
      <input type="checkbox" name="tian" value="甜" >甜
       <input type="checkbox" name="ku" value="苦">苦

   </p>
   <p>
      选择：
      <select name="leixing">
        <option value="lan" selected="selected">蓝山咖啡</option>
        <option value="kabu" >卡布奇诺</option>
        <option value="hei">黑咖啡</option>

      </select>
   </p>
   <p>
      备注：<br>
       <textarea name="beizhu" rows="10" cols="40"></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;
color:blue;
border:2px solid blue;
font-size:20px;
}

th{
  color:blue;
border:2px solid blue;
}
h1{
 color:blue;
}
td{
border:2px solid blue;

}
</style>
 </head>

 <body>
  <h1 align="center">课程表</h1>
  <table border="2"  align="center" cellpadding="10">
   <tr>
     <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="5">休息</td>
   </tr>
   <tr>
   <td>数学</td>
   <td>数学</td>
   <td>地理</td>
   <td>历史</td>
   <td>化学</td>
   <td>计算机</td>

   </tr>

  </table>
 </body>