1209作业（列表、表格、表单） - 前端学习

首页 > 博客列表 > 1209作业（列表、表格、表单）

博主信息

博文 29

粉丝 0

访问量 25182

专题推荐

更多>

1.列表

作为容器使用可以放置任何类型的元素。
往往处理单列表格

无序列表

  <ul>
      <li>牛奶</li>
      <li>蛋糕</li>
  </ul>

有序列表

  <ol start="7">
      <li>牛奶</li>
      <li>蛋糕</li>
  </ol>

自定义列表
最常用的列表

  <dl>
      <dt>x姓名：</dt>
      <dd>张三</dd>
      <dt>性别：</dt>
      <dd>男</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>
  </ul>

图文列表

  <ul class="list">
      <li>
          <a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607949307789&di=376e2f5a51e5e85e844fa3ae4bb339d1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-11-05%2F5bdfd64baf0fd.jpg" alt=""></a>
          <a href="">2020l旅行回忆</a>
      </li>
  </ul>

2.表格

基础

  <!-- 表格标签：table thead tbody tr td/th-->
  <table class="product">
      <!-- 表格标题 -->
      <caption>
          信息表
      </caption>
      <!-- 表头。表头只能有一个，主体能有多个 -->
      <thead>
          <tr>
              <th>id</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>职业</th>
              <th>地址</th>
          </tr>
      </thead>
      <!-- 表格主体 -->
      <tbody>
      <!-- tr、td：单元格。划分行和列。所以数据都要填充到td/th其中。th有加粗、居中的效果。 -->
          <tr>
              <td>1</td>
              <td>张三</td>
              <td>男</td>
              <td>33</td>
              <td>工人</td>
              <td>北京</td>
          </tr>
          <tr>
              <td>2</td>
              <td>李四</td>
              <td>女</td>
              <td>44</td>
              <td>工人</td>
              <td>上海</td>
          </tr>
      </tbody>
  </table>
  <p class="page">
      <a href="">首页</a>
      <a href="">...</a>
      <a href="">7</a>
      <a href="" class="active">8</a>
      <a href="">9</a>
      <a href="">尾页</a>
  </p>

行与列的合并
colspan，合并。
rowspan，列合并。

  <table class="lesson">
      <caption>我的课程表</caption>
      <thead>
          <tr>
              <!-- 行合并：colspan -->
              <th colspan="2"></th>
              <!-- <th></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>
              <!-- 列合并：rowspan -->
              <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.表单

文本框
使用lable与input标签

  <h3 class="title">用户注册</h3>
  <!-- action:处理表单的程序 -->
  <!-- method：表单提交类型 -->
  <!-- 默认为GET：数据直接在URl地址中【网页地址】 -->
  <!-- POST:表单的数据在请求体中 -->
  <form action="" method="POST" class="register">
      <!-- 单行文本框 -->
      <label for="username">账号：</label>
      <!-- type :控件类型 -->
      <!-- name：数据的变量名   value：数据的内容 -->
      <!-- 通用文本框 -->
      <input type="text" id="usename" name="username" value="" placeholder="username" required> 
      <!-- 邮箱文本框 -->
      <label for="enmil">邮箱：</label>
      <input type="emall" id="emall" name="emall" value="" placeholder="@emall.com" required>
      <!-- 密码文本框 -->
      <label for="password">邮箱：</label>
      <input type="password" id="password" name="password" value="" placeholder="不少于6位" required>
      <!--placeholder：提示。 required：必选 -->
      <!-- 提交按钮 -->
      <button>提交</button>
  </form>

单选按钮与复选框

      <!-- 单选按钮与复选框 -->
      <label for="secret">性别：</label>
      <div>
          <!-- 单选按钮必须用同一个name的属性值 -->
          <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
          <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
          <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">隐藏</label>
      </div>
      <!--checked，默认值  -->
      <!--for后面可随便填  -->
      <label for="">兴趣</label>
      <div>
          <!-- 复选框的name值要写成数组的格式，这样服务器才能接受到一组值 -->
          <input type="checkbox" name="hobby[]" value="game"><label for="">游戏</label>
          <input type="checkbox" name="hobby[]" value="book" checked><label for="">读书</label>
      </div>

下拉列表/下拉框
使用select标签和option

      <label for="">学历</label>
      <select name="edu" id="">
          <option value="1">小学</option>
          <option value="2">初中</option>
          <option value="3">高中</option>
          <option value="4">研究生</option>
          <option value="5" label="老司机">博士</option>
          <!-- label属性优先级高，国外常用 -->
      </select>

文件域与隐藏域

      <!-- 1.请求类型必须是：post -->
      <!-- 2.表单数据编码必须是 enctype="multipart/form-data" -->
      <label for="user-pic">头像：</label>
      <input type="hidden" name="MAX_FILE_SIZE" value="500000">
      <input type="file" name="user_pic" id="user-pic" >
      <label for="user-resume">简历：</label>
      <!-- 隐藏域hidden，前端看不到，他的值供后端处理时用 -->
      <input type="hidden" name="MAX_FILE_SIZE" value="5000000">
      <input type="file" name="user_resume" id="user-resume" >

文本域（多行文本框）
使用特殊标签：textarea
cols：列
rows：行

      <label for="comment">备注：</label>
      <textarea name="comment" id="comment" cols="30" rows="5"></textarea>

form属性
将控件与所属表单进行关联，可以写到其他地方，但不要这样做。

  <form action="" id="register">
      <p>用户名：<input type="text" form="register" name="username"></p>
      <p>邮箱：<input type="text" form="register" name="emall"></p>
      <p>秘密：<input type="password" form="register" name="password"></p>
      <p><button>提交</button></p>
  </form>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

01-03上课操作

2019-12-21 23:01:15