简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

择善而从
择善而从原创
2020年12月10日 20:25:14762浏览

列表、表格及表单复习

1. 列表练习

  1. <!-- 无序列表 ul+li -->
  2.     <!-- 列表项目前面有个黑色圆点 -->
  3.     <h3>科目</h3>
  4.     <ul>
  5.         <li>语文</li>
  6.         <li>数学</li>
  7.         <li>英语</li>
  8.         <li>物理</li>
  9.         <li>化学</li>
  10.     </ul>
  11.     <hr>
  12.     <!-- 有序列表 ol+li -->
  13.     <!-- 列表项目前面有数字序号 -->
  14.     <h3>科目顺序</h3>
  15.     <ol>
  16.         <li>语文</li>
  17.         <li>数学</li>
  18.         <li>英语</li>
  19.         <li>物理</li>
  20.         <li>化学</li>
  21.     </ol>
  22.     <hr>
  23.     <!-- 自定义列表 dl+dt+dd -->
  24.     <!-- dt：项目标题；dd：项目内容 -->
  25.     <dl>
  26.         <dt>班主任：</dt>
  27.         <dd>王五</dd>
  28.         <dt>电话：</dt>
  29.         <dd>130****5848</dd>
  30.     </dl>
  • 常用列表应用
    1.   <!-- 导航应用 -->
    2.   <ul class="menu">
    3.       <li><a href="">新闻</a></li>
    4.       <li><a href="">体育</a></li>
    5.       <li><a href="">娱乐</a></li>
    6.       <li><a href="">财经</a></li>
    7.       <li><a href="">登陆</a></li>
    8.   </ul>
    9.   <hr>
    10.   <!-- 图文应用 -->
    11.   <ul class="list">
    12.       <li>
    13.           <a href=""><img src="images/1.jpg" alt=""></a>
    14.           <a href="">人物一</a>
    15.       </li>
    16.       <li>
    17.           <a href=""><img src="images/2.jpg" alt=""></a>
    18.           <a href="">人物二</a>
    19.       </li>
    20.       <li>
    21.           <a href=""><img src="images/3.jpg" alt=""></a>
    22.           <a href="">人物三</a>
    23.       </li>
    24.       <li>
    25.           <a href=""><img src="images/4.jpg" alt=""></a>
    26.           <a href="">人物四</a>
    27.       </li>
    28.   </ul>

    2. 表格练习

    1.   <!-- 表格标签 table>thead>tr>th/td
    2.   用caption标签描述表格标题
    3.   th是表头行，自带居中加粗；td是内容行 -->
    4.   <table class="product">
    5.       <caption>学生信息表</caption>
    6.       <thead>
    7.           <tr>
    8.               <th>序号</th>
    9.               <th>姓名</th>
    10.               <th>学号</th>
    11.               <th>性别</th>
    12.           </tr>
    13.       </thead>
    14.       <tbody>
    15.           <tr>
    16.               <td>1</td>
    17.               <td>王大</td>
    18.               <td>1405</td>
    19.               <td>男</td>
    20.           </tr>
    21.       </tbody>
    22.       <tbody>
    23.           <tr>
    24.               <td>2</td>
    25.               <td>李二</td>
    26.               <td>1406</td>
    27.               <td>女</td>
    28.           </tr>
    29.       </tbody>
    30.       <tbody>
    31.           <tr>
    32.               <td>3</td>
    33.               <td>张三</td>
    34.               <td>1407</td>
    35.               <td>男</td>
    36.           </tr>
    37.       </tbody>
    38.       <tbody>
    39.           <tr>
    40.               <td>4</td>
    41.               <td>马四</td>
    42.               <td>1408</td>
    43.               <td>男</td>
    44.           </tr>
    45.       </tbody>
    46.   </table>

  • 课程表作业

    1.   <!-- 应用：课程表->表格合并 -->
    2.   <!-- colspan:跨列；rowspan：跨行 -->
    3.   <table class="lesson">
    4.       <caption>海南中学初二（3）班课程表</caption>
    5.       <thead>
    6.           <tr>
    7.               <th colspan="2"></th>
    8.               <!-- 被跨列，这一格的内容就没有了 -->
    9.               <th>星期一</th>
    10.               <th>星期二</th>
    11.               <th>星期三</th>
    12.               <th>星期四</th>
    13.               <th>星期五</th>
    14.           </tr>
    15.       </thead>
    16.       <tbody>
    17.           <tr>
    18.               <td rowspan="4">上午</td>
    19.               <td>1</td>
    20.               <td>语文</td>
    21.               <td>数学</td>
    22.               <td>英语</td>
    23.               <td>物理</td>
    24.               <td>化学</td>
    25.           </tr>
    26.           <tr>
    27.               <!-- 被跨行，这一格的内容就没有了 -->
    28.               <td>2</td>
    29.               <td>数学</td>
    30.               <td>英语</td>
    31.               <td>语文</td>
    32.               <td>化学</td>
    33.               <td>物理</td>
    34.           </tr>
    35.           <tr>
    36.               <!-- 被跨行，这一格的内容就没有了 -->
    37.               <td>3</td>
    38.               <td>英语</td>
    39.               <td>数学</td>
    40.               <td>物理</td>
    41.               <td>语文</td>
    42.               <td>化学</td>
    43.           </tr>
    44.           <tr>
    45.               <!-- 被跨行，这一格的内容就没有了 -->
    46.               <td>4</td>
    47.               <td>物理</td>
    48.               <td>英语</td>
    49.               <td>化学</td>
    50.               <td>语文</td>
    51.               <td>数学</td>
    52.           </tr>
    53.           <tr>
    54.               <td colspan="7">中午休息</td>
    55.               <!-- 被跨列，下面六格的内容就没有了 -->
    56.           </tr>
    57.           <tr>
    58.               <td rowspan="3">下午</td>
    59.               <td>5</td>
    60.               <td>语文</td>
    61.               <td>化学</td>
    62.               <td>英语</td>
    63.               <td>数学</td>
    64.               <td>物理</td>
    65.           </tr>
    66.           <tr>
    67.               <!-- 被跨行，这一格的内容就没有了 -->
    68.               <td>6</td>
    69.               <td>数学</td>
    70.               <td>语文</td>
    71.               <td>物理</td>
    72.               <td>英语</td>
    73.               <td>化学</td>
    74.           </tr>
    75.           <tr>
    76.               <!-- 被跨行，这一格的内容就没有了 -->
    77.               <td>7</td>
    78.               <td>课外活动</td>
    79.               <td colspan="4">自由活动时间</td>
    80.               <!-- 被跨列，下面三格的内容就没有了 -->
    81.           </tr>            
    82.       </tbody>        
    83.   </table>

    3. 表单练习

    1.   <!-- form表单 -->
    2.   <!-- action: 指定处理表单的脚本
    3.   method:表单提交类型
    4.       默认为GET: 数据直接放在url地址中
    5.       POST: 表单的数据在请求体中，传文件必须用此方式 -->
    6.   <h3 class="title">用户注册</h3>
    7.   <form action="" method="POST" class="register" enctype="multipart/form-data">
    8.     <!-- 控件通用属性：
    9.     type: 类型，text->通用文本框，email->邮箱，password->密码框，radio->单选按钮，checkbox->复选框...等
    10.     name: 数据的变量名
    11.     value: 变量的数据值 -->
    12.       <label for="username">用户：</label>
    13.       <!-- label的for属性值与控件的id值相同，可关联，点lable会跳转到控件 -->
    14.       <input type="text" id="username" name="username" value="root" required>
    15.       <!-- 邮箱 -->
    16.       <label for="email">邮箱：</label>
    17.       <input type="email" id="email" name="email" value="" placeholder="demo@email.com" required>
    18.       <!-- 密码 -->
    19.       <label for="password">密码：</label>
    20.       <input type="password" id="password" name="password" value="" placeholder="不少于8位字母或数字" required>
    22.       <!--  单选按钮，radio -->
    23.       <label for="secret">性别：</label>
    24.       <!-- 一组单选按钮的name值一定要相同 -->
    25.       <div>
    26.           <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
    27.           <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
    28.           <input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">保密</label>
    29.       </div>
    31.       <!-- 复选框 checkbox --> 
    32.       <!-- name要写成数组格式,才能让服务器接收到全部数据 -->
    33.       <label for="">爱好:</label>
    34.     <div>
    35.         <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
    36.         <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
    37.         <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>        
    38.     </div>
    40.     <!-- 下拉列表 select->option -->
    41.     <label for="job">职位：</label>
    42.     <select name="job" id="job">
    43.         <option value="1">实习生</option>
    44.         <option value="2">助理</option>
    45.         <option value="3" selected>主管</option>
    46.         <option value="4">主任</option>
    47.         <option value="5">经理</option>
    48.     </select>
    50.     <!-- 文件域 file
    51.     上传文件的二个条件：
    52.     1、form请求类型是POST；
    53.     2、form编码是multipart/form-data。 -->
    54.     <label for="user-pic">头像：</label>
    55.     <input type="hidden" name="MAX_FILE_SIZE" value="80000">
    56.     <!-- 隐藏域，页面上不显示，供后台脚本读取使用 -->
    57.     <input type="file" name="user_pic" id="user_pic">
    58.     <!-- 预览占位 -->
    59.     <div class="user-pic" style="grid-column: span 2"></div>
    61.     <label for="user-resume">简历：</label>
    62.     <input type="hidden" name="MAX_FILE_SIZE" value="100000">
    63.     <!-- 隐藏域，页面上不显示，供后台脚本读取使用 -->
    64.     <input type="file" name="user_resume" id="user_resume">
    65.     <!-- 预览占位 -->
    66.     <div class="user-resume" style="grid-column: span 2"></div>
    68.     <!-- 5. 文本域 -->
    69.     <label for="comment">备注:</label>
    70.     <textarea name="comment" id="comment" cols="40" rows="6"></textarea>
    72.     <!-- 提交 -->
    73.     <button>提交</button>
    75.   </form>
上一条：VSCODE 常用插件下一条：1208 学习笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多