html：列表、表格、表单学习 - html学习

首页 > 博客列表 > html：列表、表格、表单学习

博主信息

博文 5

粉丝 0

访问量 4358

专题推荐

更多>

1、列表

列表分为有无序列表（ul、li）、有序列表（ol、li）、自定义列表（dl、dt、dd）；一般会用无序列表做页面导航或者做图文列表。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表元素</title>
    <link rel="stylesheet" href="../style/list.css" />
  </head>
  <body>
    <!-- 无序列表  -->
    <h3>水果种类</h3>
    <ul>
      <li>苹果</li>
      <li>火龙果</li>
      <li>芒果</li>
    </ul>
    <!-- 有序列表 -->
    <h3>考试成绩</h3>
    <ol>
      <li>第一名：张三</li>
      <li>第二名：李四</li>
      <li>第三名：王五</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
      <dt>公司名称：</dt>
      <dd>牛逼格拉斯股份有限公司</dd>
      <dt>地址：</dt>
      <dd>合肥市蜀山区大蜀山光明顶</dd>
      <dt>联系方式：</dt>
      <dd>电话：<a href="tel:05510101010">05510101010</a></dd>
      <dd>
        邮箱：<a href="mailto:123456@qq.com?subject=title&body=content"
          >123456@qq.com</a
        >
      </dd>
    </dl>
    <!--应用1：导航-->
    <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>
    <ul class="list">
      <li>
        <a
          ><img
            src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"
            alt="web前端开发极速入门"
        /></a>
        <a href="">web前端开发极速入门</a>
      </li>
      <li>
        <a
          ><img
            src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"
            alt="web前端开发极速入门"
        /></a>
        <a href="">web前端开发极速入门</a>
      </li>
      <li>
        <a
          ><img
            src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"
            alt="web前端开发极速入门"
        /></a>
        <a href="">web前端开发极速入门</a>
      </li>
      <li>
        <a
          ><img
            src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg"
            alt="web前端开发极速入门"
        /></a>
        <a href="">web前端开发极速入门</a>
      </li>
    </ul>
  </body>
</html>

2、表格

表格涉及到的主要标签有：表格（table）、表格标题（caption）、表头（thead、tr、th）、表体（tbody、tr、td）；数据需要填充到th或者td中；列合并colspan、行合并rowspan。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格</title>
    <link rel="stylesheet" href="../style/table.css"/>
  <body>
    <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>a100</td>
          <td>手机</td>
          <td>9999</td>
          <td>部</td>
          <td>1</td>
          <td>9999</td>
        </tr>
        <tr>
          <td>A102</td>
          <td>电脑</td>
          <td>19999</td>
          <td>台</td>
          <td>2</td>
          <td>39998</td>
        </tr>
        <tr>
          <td>A103</td>
          <td>汽车</td>
          <td>50000</td>
          <td>台</td>
          <td>1</td>
          <td>100000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>B201</td>
          <td>猪肉</td>
          <td>30</td>
          <td>斤</td>
          <td>10</td>
          <td>300</td>
        </tr>
        <tr>
          <td>B303</td>
          <td>水杯</td>
          <td>50</td>
          <td>只</td>
          <td>5</td>
          <td>250</td>
        </tr>
        <tr>
          <td>C404</td>
          <td>住宅</td>
          <td>2500000</td>
          <td>套</td>
          <td>2</td>
          <td>5000000</td>
        </tr>
      </tbody>
    </table>
    <p class="page">
      <a href="">首页</a>
      <a href="">...</a>
      <a href="">5</a>
      <a href="" class="active">6</a>
      <a href="">7</a>
      <a href="">8</a>
      <a href="">9</a>
      <a href="">...</a>
      <a href="">尾页</a>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程表</title>
    <link rel="stylesheet" href="../style/demo3.css" />
  </head>
  <body>
    <table class="lesson">
      <caption>
        合肥市第三十六小学课程表
      </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>
  </body>
</html>

3、表单

表单form：action属性的值是表单提交后要跳转的地方；method属性的值有GET和POST，GET是默认提交方式，会将页面的元素属性值在浏览器地址上显示出来，涉及到敏感信息及大文件不建议用GET方式，POST方式不会将页面的元素属性值在浏览器地址上显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../style/form.css" />
    <title>表单</title>
  </head>
  <body>
    <h3 class="title">用户注册</h3>
    <form
      action=""
      class="register"
      method="POST"
      enctype="multipart/form-data"
    >
      <label for="username">账号：</label>
      <input
        type="text"
        id="username"
        name="username"
        placeholder="username"
        value=""
      />
      <label for="email">邮箱：</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="abc@php.cn"
        value=""
      />
      <label for="password">密码：</label>
      <input
        type="password"
        id="password"
        name="password"
        placeholder="不少于8位"
        value=""
      />
      <label for="male">性别：</label>
      <div>
        <input type="radio" name="gender" value="male" id="male" checked />
        <label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" />
        <label for="female">女</label>
        <input type="radio" name="gender" value="secrity" id="secrity" />
        <label for="secrity">保密</label>
      </div>
      <label for="#">兴趣：</label>
      <div>
        <input type="checkbox" name="hobby[]" value="game" id="game" checked />
        <label for="game">游戏</label>
        <input
          type="checkbox"
          name="hobby[]"
          value="shoot"
          id="shoot"
          checked
        />
        <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="travel" id="travel" />
        <label for="travel">旅游</label>
        <input
          type="checkbox"
          name="hobby[]"
          value="program"
          id="program"
          checked
        />
        <label for="program">编程</label>
      </div>
      <label for="edu">学历：</label>
      <select name="edu" id="edu">
        <option value="1">专科</option>
        <option value="2" selected>本科</option>
        <option value="3">硕士</option>
        <option value="4">博士</option>
        <option value="5">自学成才</option>
      </select>
      <label for="user-pic">头像</label>
      <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
      <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>
      <button>提交</button>
      <label for="comment">备注：</label>
      <textarea name="comment" id="comment" cols="10" rows="5"></textarea>
    </form>
  </body>
</html>
<script src="../js/demo7.js"></script>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

标题和段落

2020-12-14 22:40:40