search

博客列表 >1209-列表,表格,表单与框架

1209-列表,表格,表单与框架

吳
吳 原创
2020年12月10日 11:50:53774浏览

1209-列表,表格,表单与框架

列表元素

说明 值
无序列表 <ul> <li>
有序列表 <ol> <li>
自定义列表 <dl><dt><dd>
  • 无序列表 <ul> < li >
  1. <h3>购物车</h3>
  2. <ul>
  3.   <li>香蕉</li>
  4.   <li>苹果</li>
  5.   <ul></ul>
  6. </ul>
  • 有序列表 <ol> <li>
  1. <h3>购物车</h3>
  2. <ol>
  3.   <li>榴莲</li>
  4.   <li>番茄</li>
  5. </ol>
  • 自定义列表 dl+dt+dd..
  1. <dl>
  2.   <dt>名称：</dt>
  3.   <dd>php中文网</dd>
  4. </dl>

应用 1：导航

  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>

应用 2：图文列表

  1. <ul class="list">
  2.   <li>
  3.     <a href=""><img src="images/1.jpg" /></a>
  4.     <a href="">美女</a>
  5.   </li>
  6.   <li>
  7.     <a href=""><img src="images/1.jpg" /></a>
  8.     <a href="">美女</a>
  9.   </li>
  10.   <li>
  11.     <a href=""><img src="images/1.jpg" /></a>
  12.     <a href="">美女</a>
  13.   </li>
  14.   <li>
  15.     <a href=""><img src="images/1.jpg" /></a>
  16.     <a href="">美女</a>
  17.   </li>
  18.   <li>
  19.     <a href=""><img src="images/1.jpg" /></a>
  20.     <a href="">美女</a>
  21.   </li>
  22. </ul>

表格:商品信息表

表格也是用一组标签来描述:table,thead,tbody,tr,td/th
所有的数据必须填充到 td /th 中, th 是 td 的 PLus+,自带了一个加粗和居中的样式
表格的主体,一个表格可以有多个主体,但只能有一个表头

  1. <table class="product">
  2.   <!-- 表格标题 -->
  3.   <caption>
  4.     学生成绩表
  5.   </caption>
  6.   <!-- 表头 -->
  7.   <thead>
  8.     <tr>
  9.       <th>学号</th>
  10.       <th>姓名</th>
  11.       <th>成绩</th>
  12.     </tr>
  13.   </thead>
  14.   <!-- 表格的主体,一个表格可以有多个主体,但只能有一个表头 -->
  15.   <tbody>
  16.     <tr>
  17.       <td>001</td>
  18.       <td>张三</td>
  19.       <td>100</td>
  20.     </tr>
  21.     <tr>
  22.       <td>002</td>
  23.       <td>王五</td>
  24.       <td>99</td>
  25.     </tr>
  26.   </tbody>
  27. </table>
  28. <!-- 分页符 -->
  29. <p class="page">
  30.   <a href="">首页</a>
  31.   <a href="">1</a>
  32.   <!-- 给a标签加active为当前选中 -->
  33.   <a href="" class="active">2</a>
  34.   <a href="">3</a>
  35.   <a href="">尾页</a>
  36. </p>

表格：行与列的合并

使用 colspan=”value”来进行行的缩进，使用 rowspan=”value”来进行列的缩进

说明 值
行缩进 colspan=”value”
列缩进 rowspan=”value” 
  1. <table>
  2.   <caption>
  3.     小学生课程表
  4.   </caption>
  5.   <thead>
  6.     <tr>
  7.       <td colspan="2"></td>
  8.       <!-- <td></td> -->
  9.       <td>星期一</td>
  10.       <td>星期二</td>
  11.       <td>星期三</td>
  12.       <td>星期四</td>
  13.       <td>星期五</td>
  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.       <td>2</td>
  28.       <td>英语</td>
  29.       <td>数学</td>
  30.       <td>语文</td>
  31.       <td>科学</td>
  32.       <td>体育</td>
  33.     </tr>
  34.     <tr>
  35.       <td>3</td>
  36.       <td>英语</td>
  37.       <td>数学</td>
  38.       <td>语文</td>
  39.       <td>科学</td>
  40.       <td>体育</td>
  41.     </tr>
  42.     <tr>
  43.       <td>4</td>
  44.       <td>英语</td>
  45.       <td>数学</td>
  46.       <td>语文</td>
  47.       <td>科学</td>
  48.       <td>体育</td>
  49.     </tr>
  50.     <tr>
  51.       <td colspan="7">中午休息</td>
  52.     </tr>
  53.     <tr>
  54.       <td rowspan="3">下午</td>
  55.       <td>5</td>
  56.       <td>英语</td>
  57.       <td>体育</td>
  58.       <td>音乐</td>
  59.       <td>科学</td>
  60.       <td>语文</td>
  61.     </tr>
  62.     <tr>
  63.       <td>6</td>
  64.       <td>英语</td>
  65.       <td>体育</td>
  66.       <td>音乐</td>
  67.       <td>科学</td>
  68.       <td>语文</td>
  69.     </tr>
  70.     <tr>
  71.       <td>7</td>
  72.       <td>英语</td>
  73.       <td colspan="4">自由活动</td>
  74.     </tr>
  75.   </tbody>
  76. </table>

控件与隐藏域：

表单由form标签组成，其中form标签包含几个属性
action 需要提交到的地方
method 提交的方式
enctype 提交数据的模式，默认为application/x-www-form-urlencoded 如果使用表单上传文件需要修改为multipart/form-data

  1.     <h3 class="title">用户注册</h3>
  2.     <!-- action：处理表单的程序 -->
  3.     <!-- method:表单提交类型 -->
  4.     <!-- 默认为GET：数据直接放在url地址中 -->
  5.     <!-- POST:表单的数据在请求体中 -->
  6.     <form action="" method="" class="register">
  7.       <!-- 1.单行文本框 -->
  8.       <label for="username">账号：</label>
  9.       <!-- type:控件类型 -->
  10.       <!-- name:数据的变量名 -->
  11.       <!-- value:数据的内容 -->
  12.       <input type="text" name="username" id="username" value="" placeholder="admin" required/>
  13.       <!-- type="text" 这是通用文本框，还有一些是专用的 -->
  14.       <!-- 邮箱文本型 -->
  15.       <label for="email">邮箱：</label>
  16.       <input type="email" name="email" id="email" value="" placeholder="admin@mail.cn" required/>
  17.       <!-- 密码框文本框/非明文 -->
  18.       <label for="password">密码：</label>
  19.       <input type="password" name="password" id="password" value="" placeholder="不少于8位" required/>
  20.       <!-- 2.单选按钮与复选框 -->
  21.       <label for="mi">性别：</label>
  22.       <div>
  23.         <input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
  24.         <input type="radio" name="gender" value="nv" id="nv"/><label for="nv">女</label>
  25.         <input type="radio" name="gender" value="mi" id="mi"/><label for="mi">保密</label>
  26.       </div>
  27.       <label for="">兴趣：</label>
  28.       <div>
  29.       <input type="checkbox" name="hobby[]" value="game" id="game"/><label for="game">游戏</label>
  30.       <input type="checkbox" name="hobby[]" value="code" id="code" checked/><label for="code">编程</label>
  31.       <input type="checkbox" name="hobby[]" value="ly" id="ly" /><label for="ly">旅游</label>
  32.       </div>
  33.       <!-- 3.下拉框/下拉列表 -->
  34.       <label for="edu">学历：</label>
  35.       <select name="edu" id="edu">
  36.         <option value="1">初中</option>
  37.         <option value="2">高中</option>
  38.         <option value="3" selected>本科</option>
  39.         <option value="4">研究生</option>
  40.         <!-- label属性的优先级大于option内部的文本 -->
  41.         <!-- <option value="5" label="老司机">自学成才</option> -->
  42.       </select>
  43.       <!-- 4.文件域与隐藏域 -->
  44.       <label for="user-pic">头像：</label>
  45.       <!-- 隐藏域，在前端页面看不到的，它的值供后端处理时用 -->
  46.       <input type="hidden" name="MAX_FILE_SIZE" value="80000"/>
  47.       <input type="file" name="user_pic" id="user-pic" />
  48.       <!-- 头像占位符 -->
  49.       <div class="user-pic" style="grid-column:span 2"></div>
  50.       <!-- 简历占位符 -->
  51.       <label for="user-resume">简历：</label>
  52.       <input type="file"  name="user_resume" id="user-resume"/>
  53.       <!-- 简历占位符 -->
  54.       <div class="user-resume" style="grid-column:span 2"></div>
  55.       <!-- 5:文本域 -->
  56.       <label for="comment">备注：</label>
  57.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  58.       <!-- 提交按钮 -->
  59.       <button>提交</button>
  60.     </form>

表单控件的form属性：

  1.     <h3>用户注册</h3>
  2.     <form action="" method="GET" id="register">
  3.     <div>
  4.         <label id="username">账户：</label>
  5.         <input type="txet" form="register" name="username" id="username" value="" placeholder="admin"/><br/>
  6.         <label id="email">邮箱：</label>
  7.         <input type="email" form="register" name="email" id="email" value="" placeholder="demo@email.cn"/><br/>
  8.         <label id="password">密码：</label>
  9.         <input type="password" form="register" name="password" id="password" value="" placeholder="不少于8位"/><br/>
  10.         <button form="register">提交</button>
  11.     </div>
  12.     </form>
  13.     <!-- 尽管form属性可以将控件写到任何地方，仍然能够获取到值，但不要这样做，第一影响布局，第二代码混乱，但是js中获取数据会非常方便 -->

作业：

  1.     <table class="product">
  2.         <caption></caption>
  3.         <thead>
  4.             <tr>
  5.                 <th colspan="2"></th>
  6.                 <!-- <th></th> -->
  7.                 <th>星期一</th>
  8.                 <th>星期二</th>
  9.                 <th>星期三</th>
  10.                 <th>星期四</th>
  11.                 <th>星期五</th>
  12.             </tr>
  13.         </thead>
  14.         <tbody>
  15.             <tr>
  16.                 <td rowspan="4">上午</td>
  17.                 <td>1</td>
  18.                 <td>早餐</td>
  19.                 <td>早餐</td>
  20.                 <td>早餐</td>
  21.                 <td>早餐</td>
  22.                 <td>早餐</td>
  23.             </tr>
  24.             <tr>
  25.                 <td>2</td>
  26.                 <td>洗漱</td>
  27.                 <td>洗漱</td>
  28.                 <td>洗漱</td>
  29.                 <td>洗漱</td>
  30.                 <td>洗漱</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>3</td>
  34.                 <td>学习</td>
  35.                 <td>学习</td>
  36.                 <td>学习</td>
  37.                 <td>学习</td>
  38.                 <td>学习</td>
  39.             </tr>
  40.             <tr>
  41.                 <td>4</td>
  42.                 <td>敲代码</td>
  43.                 <td>敲代码</td>
  44.                 <td>敲代码</td>
  45.                 <td>敲代码</td>
  46.                 <td>敲代码</td>
  47.             </tr>
  48.             <tr>
  49.                 <td colspan=7>吃饭时间</td>
  50.             </tr>
  51.             <tr>
  52.                 <td rowspan=3>下午</td>
  53.                 <td>5</td>
  54.                 <td>下午茶</td>
  55.                 <td>下午茶</td>
  56.                 <td>下午茶</td>
  57.                 <td>下午茶</td>
  58.                 <td>下午茶</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>6</td>
  62.                 <td>看书</td>
  63.                 <td>看书</td>
  64.                 <td>看书</td>
  65.                 <td>看书</td>
  66.                 <td>看书</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>7</td>
  70.                 <td>听音乐</td>
  71.                 <td colspan=4>打扫卫生</td>
  72.                 <!-- <td>玩游戏</td>
  73.                 <td>玩游戏</td>
  74.                 <td>玩游戏</td> -->
  75.             </tr>
  76.         </tbody>
  77.     </table>
上一条：Redis 缓存实现存储和读取历史搜索关键字下一条：1209—列表、表单、表格
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多