PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议