前端基础之列表、表格及表单复习（12.09）

列表、表格及表单复习

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>