列表、表格及表单复习

1. 列表练习

<!-- 无序列表 ul+li -->
    <!-- 列表项目前面有个黑色圆点 -->
    <h3>科目</h3>
    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>物理</li>
        <li>化学</li>
    </ul>
    <hr>
    <!-- 有序列表 ol+li -->
    <!-- 列表项目前面有数字序号 -->
    <h3>科目顺序</h3>
    <ol>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>物理</li>
        <li>化学</li>
    </ol>
    <hr>
    <!-- 自定义列表 dl+dt+dd -->
    <!-- dt：项目标题；dd：项目内容 -->
    <dl>
        <dt>班主任：</dt>
        <dd>王五</dd>
        <dt>电话：</dt>
        <dd>130****5848</dd>
    </dl>

常用列表应用

  <!-- 导航应用 -->
  <ul class="menu">
      <li><a href="">新闻</a></li>
      <li><a href="">体育</a></li>
      <li><a href="">娱乐</a></li>
      <li><a href="">财经</a></li>
      <li><a href="">登陆</a></li>
  </ul>
  <hr>
  <!-- 图文应用 -->
  <ul class="list">
      <li>
          <a href=""><img src="images/1.jpg" alt=""></a>
          <a href="">人物一</a>
      </li>
      <li>
          <a href=""><img src="images/2.jpg" alt=""></a>
          <a href="">人物二</a>
      </li>
      <li>
          <a href=""><img src="images/3.jpg" alt=""></a>
          <a href="">人物三</a>
      </li>
      <li>
          <a href=""><img src="images/4.jpg" alt=""></a>
          <a href="">人物四</a>
      </li>
  </ul>

2. 表格练习

  <!-- 表格标签 table>thead>tr>th/td
  用caption标签描述表格标题
  th是表头行，自带居中加粗；td是内容行 -->
  <table class="product">
      <caption>学生信息表</caption>
      <thead>
          <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>学号</th>
              <th>性别</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>1</td>
              <td>王大</td>
              <td>1405</td>
              <td>男</td>
          </tr>
      </tbody>
      <tbody>
          <tr>
              <td>2</td>
              <td>李二</td>
              <td>1406</td>
              <td>女</td>
          </tr>
      </tbody>
      <tbody>
          <tr>
              <td>3</td>
              <td>张三</td>
              <td>1407</td>
              <td>男</td>
          </tr>
      </tbody>
      <tbody>
          <tr>
              <td>4</td>
              <td>马四</td>
              <td>1408</td>
              <td>男</td>
          </tr>
      </tbody>
  </table>

课程表作业

  <!-- 应用：课程表->表格合并 -->
  <!-- colspan:跨列；rowspan：跨行 -->
  <table class="lesson">
      <caption>海南中学初二（3）班课程表</caption>
      <thead>
          <tr>
              <th colspan="2"></th>
              <!-- 被跨列，这一格的内容就没有了 -->
              <th>星期一</th>
              <th>星期二</th>
              <th>星期三</th>
              <th>星期四</th>
              <th>星期五</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td rowspan="4">上午</td>
              <td>1</td>
              <td>语文</td>
              <td>数学</td>
              <td>英语</td>
              <td>物理</td>
              <td>化学</td>
          </tr>
          <tr>
              <!-- 被跨行，这一格的内容就没有了 -->
              <td>2</td>
              <td>数学</td>
              <td>英语</td>
              <td>语文</td>
              <td>化学</td>
              <td>物理</td>
          </tr>
          <tr>
              <!-- 被跨行，这一格的内容就没有了 -->
              <td>3</td>
              <td>英语</td>
              <td>数学</td>
              <td>物理</td>
              <td>语文</td>
              <td>化学</td>
          </tr>
          <tr>
              <!-- 被跨行，这一格的内容就没有了 -->
              <td>4</td>
              <td>物理</td>
              <td>英语</td>
              <td>化学</td>
              <td>语文</td>
              <td>数学</td>
          </tr>
          <tr>
              <td colspan="7">中午休息</td>
              <!-- 被跨列，下面六格的内容就没有了 -->
          </tr>
          <tr>
              <td rowspan="3">下午</td>
              <td>5</td>
              <td>语文</td>
              <td>化学</td>
              <td>英语</td>
              <td>数学</td>
              <td>物理</td>
          </tr>
          <tr>
              <!-- 被跨行，这一格的内容就没有了 -->
              <td>6</td>
              <td>数学</td>
              <td>语文</td>
              <td>物理</td>
              <td>英语</td>
              <td>化学</td>
          </tr>
          <tr>
              <!-- 被跨行，这一格的内容就没有了 -->
              <td>7</td>
              <td>课外活动</td>
              <td colspan="4">自由活动时间</td>
              <!-- 被跨列，下面三格的内容就没有了 -->
          </tr>            
      </tbody>        
  </table>

3. 表单练习

  <!-- form表单 -->
  <!-- action: 指定处理表单的脚本
  method:表单提交类型
      默认为GET: 数据直接放在url地址中
      POST: 表单的数据在请求体中，传文件必须用此方式 -->
  <h3 class="title">用户注册</h3>
  <form action="" method="POST" class="register" enctype="multipart/form-data">
    <!-- 控件通用属性：
    type: 类型，text->通用文本框，email->邮箱，password->密码框，radio->单选按钮，checkbox->复选框...等
    name: 数据的变量名
    value: 变量的数据值 -->
      <label for="username">用户：</label>
      <!-- label的for属性值与控件的id值相同，可关联，点lable会跳转到控件 -->
      <input type="text" id="username" name="username" value="root" required>
      <!-- 邮箱 -->
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" value="" placeholder="demo@email.com" required>
      <!-- 密码 -->
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" value="" placeholder="不少于8位字母或数字" required>
      <!--  单选按钮，radio -->
      <label for="secret">性别：</label>
      <!-- 一组单选按钮的name值一定要相同 -->
      <div>
          <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
          <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
          <input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">保密</label>
      </div>
      <!-- 复选框 checkbox --> 
      <!-- name要写成数组格式,才能让服务器接收到全部数据 -->
      <label for="">爱好:</label>
    <div>
        <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>        
    </div>
    <!-- 下拉列表 select->option -->
    <label for="job">职位：</label>
    <select name="job" id="job">
        <option value="1">实习生</option>
        <option value="2">助理</option>
        <option value="3" selected>主管</option>
        <option value="4">主任</option>
        <option value="5">经理</option>
    </select>
    <!-- 文件域 file
    上传文件的二个条件：
    1、form请求类型是POST；
    2、form编码是multipart/form-data。 -->
    <label for="user-pic">头像：</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="80000">
    <!-- 隐藏域，页面上不显示，供后台脚本读取使用 -->
    <input type="file" name="user_pic" id="user_pic">
    <!-- 预览占位 -->
    <div class="user-pic" style="grid-column: span 2"></div>
    <label for="user-resume">简历：</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="100000">
    <!-- 隐藏域，页面上不显示，供后台脚本读取使用 -->
    <input type="file" name="user_resume" id="user_resume">
    <!-- 预览占位 -->
    <div class="user-resume" style="grid-column: span 2"></div>
    <!-- 5. 文本域 -->
    <label for="comment">备注:</label>
    <textarea name="comment" id="comment" cols="40" rows="6"></textarea>
    <!-- 提交 -->
    <button>提交</button>
  </form>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端基础第一课作业（12.8）

2020-12-09 18:06:57