search

博客列表 >列表、表格、表单练习

列表、表格、表单练习

波元的PHP学习
波元的PHP学习原创
2020年12月12日 19:58:29564浏览

有序和无序列表

  1. <h3>购物篮</h3>
  2. <ul>
  3.     <li>冰糖葫芦</li>
  4.     <li>串串香</li>
  5.     <li>大闸蟹</li>
  6. </ul>
  7. <h3>购物篮</h3>
  8. <ol>
  9.     <li>冰糖葫芦</li>
  10.     <li>串串香</li>
  11.     <li>大闸蟹</li>
  12. </ol>

其它列表

  1. <dl>
  2.     <dt>地址 </dt>
  3.     <dd>歼20</dd>
  4.     <dt>电话</dt>
  5.     <dd>强5歼击机</dd>
  6.     <dt>邮件</dt>
  7.     <dd>MAIL</dd>
  8.     <dt>联系方式</dt>
  9.     <dd>电话 <a href="tel:10000" >10000</a></dd>
  10.     <dd>邮箱 <a href="mailto:chen@qq.com">chen@qq.com</a></dd>
  11.     <dd><img src="https://www.php.cn/static/images/index_yunv.jpg" width="300" alt="玉女心经">二维码</dd>
  12. </dl>

首页列表

  1. <ul class="menu">
  2.     <li> <a href="">首页</a>  </li>
  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. </ul>

图片列表

  1.   <ul>
  2.     <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
  3.     <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
  4.     <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
  5.     <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
  6.     <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
  7. </ul>

表格

<!-- 表格用 TABLE THEAD CAPTION TBODY TR TD TH -->

<!-- 所有的数据都必须放到td和th中 th居中 加粗--> 

  1. <TABLE class="product">
  2. <caption> 飞机外部损伤清单 </caption>
  3. <THEAD>
  4.     <tr>
  5.         <th >机号</th >
  6.         <th >描述</th >
  7.         <th >参考章节</th >
  8.         <th >损伤处理</th >
  9.         <th >日期</th >
  10.         <th >日期</th >
  11.     </tr>
  13. </THEAD>
  14. <tbody>
  15.     <tr>
  16.         <td>6976 </td>
  17.         <td>右大翼前缘损伤 </td>
  18.         <td> 57-40 </td>
  19.         <td> 保留故障 </td>
  20.         <td> 2020-12-02 </td>
  21.         <td> 2020-12-02 </td>
  22.     </tr>
  23.     <tr>
  24.         <td> 6976 </td>
  25.         <td>右大翼前缘损伤 </td>
  26.         <td> 57-40 </td>
  27.         <td> 保留故障 </td>
  28.         <td> 2020-12-02 </td>
  29.         <td> 2020-12-02 </td>
  30.     </tr>
  31.     <tr>
  32.         <td> 6976 </td>
  33.         <td>右大翼前缘损伤 </td>
  34.         <td> 57-40 </td>
  35.         <td> 保留故障 </td>
  36.         <td> 2020-12-02 </td>
  37.         <td> 2020-12-02 </td>
  38.     </tr>
  39.     <tr>
  40.         <td> 6976 </td>
  41.         <td>右大翼前缘损伤 </td>
  42.         <td> 57-40 </td>
  43.         <td> 保留故障 </td>
  44.         <td> 2020-12-02 </td>
  45.         <td> 2020-12-02 </td>
  46.     </tr>
  47.     <tr>
  48.         <td> 6976 </td>
  49.         <td>右大翼前缘损伤 </td>
  50.         <td> 57-40 </td>
  51.         <td> 保留故障 </td>
  52.         <td> 2020-12-02 </td>
  53.         <td> 2020-12-02 </td>
  54.     </tr>
  55. </tbody>
  56. </TABLE>

分页标签

  1. <!-- 分页用P标签 -->
  2. <p class="page">
  3. <a href="">首页</a>
  4. <a href="">...</a>
  5. <a href="">5</a>
  6. <a href="" class="active">6</a>
  7. <a href="">7</a>
  8. <a href="">8</a>
  9. <a href="">...</a>
  10. </p>

表单

  1. <h3 class="title">用户注册</h3>
  2. <!-- form属性可以将控件写在任何位置 from写入 id=register   input中写入 form="register" -->
  3. <form id="register" action="" method="" class="register" enctype="multipart/form-data">
  4.  <label for="username">用户名</label>
  5.     <input type="text" id="username" name="username" value="" placeholder="用户名" required>
  6.     <label for="email">邮箱</label>
  7.     <input type="email" id="email" name="email" value="" required>
  8.     <label for="password">密码</label>
  9.     <input type="password" id="password" name="password" value="" required>

单选

  1. <label for="">性别</label>
  2.     <div>
  4.                    <input type="radio" id="gender" name="male" value="male"  > <label for="">男</label>
  5.         <input type="radio" id="gender" name="female" value="female"  > <label for="">女</label>
  7.     </div>

多选

  1. <label for="">兴趣</label>
  2. <div>
  3. <input type="checkbox" name="hobby"     value="game" id="game" > <label for="game">游戏</label>
  4. <input type="checkbox" name="hobby" value="photo" id="photo" > <label for="photo">摄影</label>
  5. <input type="checkbox" name="hobby" value="learn" id="learn" > <label for="learn">学习</label>
  6. </div>  <label for="apartment">部门:</label>

下拉选择

  1. <select name="apartment" id="apartment">
  4. <option value="1">航线车间</option>
  5. <option value="2">宽全车间</option>
  6. <option value="3">生产支援</option>
  7. <option value="4">生产计划</option>

</select>

文件域

  1. <!-- 文件域与隐藏域 请求类型必须 是POST   label 后的FOR跟的user-pic内容要各JS中一致，且和下一栏input中ID，DIV中class内容一致-->
  2. <label for="user-pic">头像</label>
  3. <!-- 隐藏域前端看不到，它的值供后端处理时使用 -->
  4. <input type="hidden" name="max_pic_size" value="80000" >
  5. <input type="file" id="user-pic" name="pic">
  6. <!-- 头像占位符 -->
  7. <div class="user-pic" style="grid-column: span 2;"  ></div>
  9. <!-- 上传简历 -->
  10. <label for="user-resume">简历</label>
  11. <input type="hidden" name="max_file_size" value="200000">
  12. <input type="file" name="resume" id="user-resume" >
  13. <div class="user-resume" style="grid-column: span 2;"></div>

文本域

  1. <label for="comment"  >备注</label>
  3.   <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  5. <button>提交</button>
  6. </form></body></html>
  7. <script src="yulan.js"> </script>
上一条：用iframe写的一个简单的小后台，及CSS样式优先级和元素样式的四个引入方式汇总下一条：初识列表表格与表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多