简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《列表/表格、表单用法及说明》20201209
Blogger Information
Blog 26
fans 1
comment 1
visits 19651
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《列表/表格、表单用法及说明》20201209
杨凡的博客
Original
779 people have browsed it

一、列表

1、无序列表

  1. 使用ul加li标签
    1. <h3>购物车</h3>
    2. <ul>
    3.  <li>笔记本电脑</li>
    4.  <li>数码相机</li>
    5.  <li>蓝牙耳机</li>
    6. </ul>

2、有序列表

  1. 使用ol加li标签
  2. ol标签可以设置start=""属性来控制标签的起始数值
  1. <h3>水果</h3>
  2. <ol>
  3.     <li>苹果</li>
  4.     <li>香蕉</li>
  5.     <li>橘子</li>
  6.     <li>芒果</li>
  7. </ol>

3、自定义列表

  1. 使用dl加dt和dd标签
  2. a标签href属性设置tel或mailto属性即可实现调用电话或者发邮件功能，但需要先配置相关电话功能或邮件功能
  1. <dl>
  2.     <dt>网站：</dt>
  3.     <dd>PHP中文网</dd>
  4.     <dt>网址：</dt>
  5.     <dd><a href="https://www.php.cn">点击跳转</a></dd>
  6.     <dt>联系：</dt>
  7.     <dd>电话：<a href="tel:189****5487">189****5487</a></dd>
  8.     <dd>邮件：<a href="mailto:admin@php.cn">admin@php.cn</a></dd>
  9. </dl>

总结：列表一般可以用作导航、图文列表使用，使用css样式控制可以使标签变得更加美观。

二、表格

  1. 表格也是用一组标签来描述展示的：table，thead，tbody，tr，td/th
  2. caption标签可以用来防止表格的标题
  3. thead标签中用来放置表头信息
  4. tbody标签中用来放置表格主体，一个表格可以有多个主体但是只能有一个表头
  5. tr是表格行，td/th时表格列，使用th具有加粗及居中效果，一般用于表头行
    1. <body>
    2.  <table class="product">
    3.      <!-- 表格标题 -->
    4.      <caption>商品信息表</caption>
    5.      <!-- 表头 -->
    6.      <thead>
    7.          <tr>
    8.              <td>ID</td>
    9.              <td>品名</td>
    10.              <td>单价</td>
    11.              <td>数量</td>
    12.              <td>金额</td>
    13.          </tr>
    14.      </thead>
    15.      <!-- 表格主体，一个表格可以有多个主体但是只能有一个表头 -->
    16.      <tbody>
    17.          <tr>
    18.              <td>iphone6</td>
    19.              <td>手机</td>
    20.              <td>部</td>
    21.              <td>1</td>
    22.              <td>3999</td>
    23.          </tr>
    24.          <tr>
    25.              <td>sa-471</td>
    26.              <td>电脑</td>
    27.              <td>台</td>
    28.              <td>1</td>
    29.              <td>4999</td>
    30.          </tr>
    31.          <tr>
    32.              <td>XD001</td>
    33.              <td>水杯</td>
    34.              <td>只</td>
    35.              <td>1</td>
    36.              <td>18</td>
    37.          </tr>
    38.      </tbody>
    39.  </table>
    40. </body>

课程表：自定义列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .lesson {
  9.             border-collapse: collapse;
  10.             width: 40em;
  11.             text-align: center;
  12.             margin: auto;
  13.             }
  15.             .lesson caption {
  16.             font-size: 1.2rem;
  17.             margin: 1em;
  18.             }
  19.             .lesson thead {
  20.             background-color: lightcyan;
  21.             }
  22.             .lesson th,
  23.             .lesson td {
  24.             border: 1px solid;
  25.             padding: 0.5em;
  26.             }
  27.             .lesson .rest {
  28.             background-color: #efefef;
  29.             }
  30.             .lesson td[rowspan="4"],
  31.             .lesson td[rowspan="3"] {
  32.             background-color: rgb(186, 245, 213);
  33.             }
  34.     </style>
  35. </head>
  36. <body>
  37.     <table class="lesson">
  38.         <caption>百万弟弟课程表</caption>
  39.         <thead>
  40.             <tr>
  41.                 <th colspan="2"></th>
  42.                 <th>星期一</th>
  43.                 <th>星期二</th>
  44.                 <th>星期三</th>
  45.                 <th>星期四</th>
  46.                 <th>星期五</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.             <tr>
  51.                 <td rowspan="3">上午</td>
  52.                 <td>1</td>
  53.                 <td>语文</td>
  54.                 <td>数学</td>
  55.                 <td>语文</td>
  56.                 <td>语文</td>
  57.                 <td>数学</td>
  58.             </tr>
  59.             <tr>
  60.                 <td>2</td>
  61.                 <td>数学</td>
  62.                 <td>语文</td>
  63.                 <td>数学</td>
  64.                 <td>数学</td>
  65.                 <td>语文</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>3</td>
  69.                 <td>音乐</td>
  70.                 <td>体育</td>
  71.                 <td>品德与生活</td>
  72.                 <td>美术</td>
  73.                 <td>音乐</td>
  74.             </tr>
  75.             <tr class="rest">
  76.                 <td colspan="7">中午休息</td>
  77.             </tr>
  78.             <tr>
  79.                 <td rowspan="3">下午</td>
  80.                 <td>1</td>
  81.                 <td>语文</td>
  82.                 <td>美术</td>
  83.                 <td>音乐</td>
  84.                 <td>语文</td>
  85.                 <td>美术</td>
  86.             </tr>
  87.             <tr>
  88.                 <td>2</td>
  89.                 <td>自然</td>
  90.                 <td>语文</td>
  91.                 <td>科技活动</td>
  92.                 <td>体育</td>
  93.                 <td>语文</td>
  94.             </tr>
  95.             <tr>
  96.                 <td>3</td>
  97.                 <td>班队活动</td>
  98.                 <td colspan="2"></td>
  99.                 <td>手工劳动</td>
  100.                 <td>劳动</td>
  101.             </tr>
  102.         </tbody>
  103.     </table>
  104. </body>
  105. </html>

三、表单

  1. form表单中action用于处理表单的程序，method用于填写提交表单的类型
  2. method属性中，默认GET属性值，数据直接放在url地址上展示，明文模式；POST表单的数据在请求头体中，加密模式
  3. label标签的for属性可以与input标签的id属性绑定进行联动
  4. input标签type类型可以分为多种：文本类型、邮件类型、密码类型、单选框、多选框、文件类型等
    5.select加option为下拉框组件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>组件测试</title>
  7. </head>
  8. <body>
  9.     <h3 class="title">用户注册</h3>
  10.     <form action="" method="">
  11.         <label for="username">账号：</label>
  12.         <!-- type空间类型name控件名字标识符，value数据内容 -->
  13.        <input type="text" id="username" name="username" value="用户名">
  14.        <br>
  15.         <!-- 邮件类型文本框 -->
  16.         <label for="email">邮箱：</label>
  17.        <input type="email" id="email" name="email" value="admin@php.cn">
  18.        <br>
  19.         <!-- 密码类型文本框 -->
  20.         <label for="password">密码：</label>
  21.        <input type="password" id="password" name="password" value="">
  22.        <br>
  23.        <!-- 单选按钮 -->
  24.        <label for="">性别：</label>
  25.         <div>
  26.             <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  27.             <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
  28.             <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  29.         </div>
  30.         <!-- 复选框 -->
  31.         <label for="">兴趣：</label>
  32.         <div>
  33.             <!-- 复选框的name属性值应该写成数组的格式名称，这样才能确保服务器可以接受到一组值 -->
  34.             <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label>
  35.             <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
  36.             <input type="checkbox" name="hobby[]" value="trvel" id="trvel"><label for="trvel">旅游</label>
  37.             <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">旅游</label>
  38.         </div>
  39.         <!-- 下拉列表下拉框 -->
  40.         <label for="edu">学历：</label>
  41.         <!-- multiple size="2" -->
  42.         <select name="edu" id="edu">
  43.             <option value="1">初中</option>
  44.             <option value="2">高中</option>
  45.             <option value="3" selected>本科</option>
  46.             <option value="4">研究生</option>
  47.             <!-- option中label属性的优先级大于option内部的文本 -->
  48.             <option value="5" label="老司机"></option>
  49.         </select>
  50.         <br>
  51.         <label for="user-pic">头像:</label>
  52.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  53.       <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  54.       <input type="file" name="user_pic" id="user-pic" />
  55.       <!-- 头像占位符 -->
  56.       <div class="user-pic" style="grid-column: span 2"></div>
  57.       <br>
  58.       <label for="user-resume">简历:</label>
  59.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  60.       <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  61.       <input type="file" name="user_resume" id="user-resume" />
  62.       <!-- 简历占位符 -->
  63.       <div class="user-resume" style="grid-column: span 2"></div>
  64.       <br>
  65.       <!-- 5. 文本域 -->
  66.       <label for="comment">备注:</label>
  67.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  68.         <br>
  69.        <!-- 提交按钮 -->
  70.        <button>提交</button>
  71.     </form>
  72. </body>
  73. </html>

总结：form表单实现向服务端提交数据等操作，可以满足各类文件的提交工作，非常强大，表单中各类组件级相关属性还需待熟悉。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！