博客列表 >详细了解列表、表格、表单、框架知识

详细了解列表、表格、表单、框架知识

残破的蛋蛋
残破的蛋蛋原创
2020年12月10日 17:54:551031浏览

一、列表

1.列表有3种:

  • 无序列表
  1. <h3>购物车</h3>
  2. <ul>
  3. <li>牛奶一箱</li>
  4. <li>蛋糕一个</li>
  5. <li>苹果10斤</li>
  6. </ul>
  • 有序列表
  1. <h3>购物车</h3>
  2. <ol>
  3. <li>牛奶一箱</li>
  4. <li>蛋糕一个</li>
  5. <li>苹果10斤</li>
  6. </ol>
  • 自定义列表
  1. <dl>
  2. <dt>名称:</dt>
  3. <dd>php中文网</dd>
  4. <dt>地址:</dt>
  5. <dd>河南省信阳市浉河区</dd>
  6. <dt>联系</dt>
  7. <dd>电话:<a href="tel:18937109272">18937109272</a></dd>
  8. <dd>邮箱:<a href="mailto:734564242@qq.com">734564242@qq.com</a></dd>
  9. </dl>

二、表格

table标签定义表格,一个HTML表格由table以及一个或多个tr、th或者td组成
tr元素定义表格行,th元素定义表头,td元素定义表格单元格。

一个表格的基本结构:

  1. <table class="table">
  2. <!-- 表格标题 -->
  3. <caption>
  4. 商品信息表
  5. </caption>
  6. <!-- 表头 -->
  7. <thead>
  8. <!-- 每添加一组表格数据,必须先添加一行 -->
  9. <tr>
  10. <td>ID</td>
  11. <td>品名</td>
  12. <td>单价</td>
  13. <td>单位</td>
  14. <td>数量</td>
  15. <td>金额</td>
  16. </tr>
  17. </thead>
  18. <!-- 一个表格可以有多个tbody,但是只能有一个thead -->
  19. <tbody>
  20. <tr>
  21. <td>1</td>
  22. <td>iPhone 12 mini</td>
  23. <td>5499</td>
  24. <td></td>
  25. <td>100</td>
  26. <td>549900</td>
  27. </tr>
  28. </tbody>
  29. </table>
  • 总结:
    1.一个表格可以有多个tbody,但是只能有一个thead。
    2.每添加一组表格数据,必须先添加一行。
    3.所有的数据必须填充到td/th中,th是td元素的一个加强版,th比td多了个加粗和居中的效果。

  • 备注:
    VS Code快捷键PDF文档:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

三、表单与常用控件

  1. form表单用于向服务器传送数据,一个表单可以包含input元素,例如:文本框、单选框、复选框、按钮等。

  2. 表单的基本格式

  1. <form action="" method="POST" class="register">
  2. <!-- 这里面可以放input元素 -->
  3. </form>

action 处理表单的程序。
method:表单数据提交类型,默认为GET:数据直接显示在url地址中;POST:表单数据在请求头体中。

  1. 控件:
    3.1 文本类型控件:
  • 单行文本框:
  1. <label for="username">账号:</label>
  2. <!-- type:控件类型 -->
  3. <!-- name:数据的变量名,后端服务器接收前端传递的参数时就用该变量 -->
  4. <!-- value:数据值 -->
  5. <input type="text" name="username" id="username" value="admin" required>
  • 邮箱型文本框:
  1. <!-- 邮箱型文本框 -->
  2. <label for="email">邮箱:</label>
  3. <input type="email" name="email" id="email" value="html@html.cn" required>
  • 密码型文本框/非明文:
  1. <!-- 密码型文本框/非明文 -->
  2. <label for="password">密码:</label>
  3. <input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>

3.2 单选框和复选框

  • 3.2.1 单选框
  1. <label for="">性别:</label>
  2. <div>
  3. <!-- 一组单选按钮必须公用同一个名称的name值,否则无法实现值的唯一性 -->
  4. <!-- checked:表示默认值 -->
  5. <input type="radio" name="gender" value="male" id="male">
  6. <label for="male"></label>
  7. <input type="radio" name="gender" value="male" id="male">
  8. <label for="female"></label>
  9. <input type="radio" name="gender" value="male" id="male" checked>
  10. <label for="secret">保密</label>
  11. </div>
  • 注意:
    单选框(radio)的name值必须全部相同,这样才能保证值的唯一性,默认选中使用checked属性。

  • 3.2.2 复选框

  1. <label for="#">兴趣:</label>
  2. <div>
  3. <input type="checkbox" name="hobby[]" value="basketball" id="basketball">
  4. <label for="basketball">篮球</label>
  5. <input type="checkbox" name="hobby[]" value="game" id="game">
  6. <label for="game">游戏</label>
  7. <input type="checkbox" name="hobby[]" value="travel" id="travel">
  8. <label for="travel">旅游</label>
  9. <input type="checkbox" name="hobby[]" value="program" id="program">
  10. <label for="program">编程</label>
  11. </div>
  • 3.2.3 下拉列表/下拉框
  1. <label for="">学历:</label>
  2. <select name="edu" id="eud">
  3. <option value="1">初中</option>
  4. <option value="2">高中</option>
  5. <option value="3" selected>本科</option>
  6. <option value="4">研究生</option>
  7. <option value="5" label="老司机">博士</option>
  8. </select>
  • 注意:
    如果option里有label值,label属性的优先级于option里的内容。因此,上述列表第5项应该显示“老司机”。

  • HTML5中新属性:

属性 描述
multiple multiple 可以选择多个选项
size 数值,如:2 下拉框里可见的选项数量
  • 3.2.4 文件域与隐藏域

上传文件需要注意两点

  1. 请求类型必须为POST;

  2. 将表单form数据编码设置为:enctype=”multipart/form-data”;

  1. <form action="" method="POST" class="register" enctype="multipart/form-data">
  2. <label for="user-pic">头像:</label>
  3. <!-- 隐藏域,在前端页面是无法看到的,它的值是用于后端处理的 -->
  4. <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
  5. <input type="file" name="user_pic" id="user-pic" />
  6. <!-- 头像占位符 -->
  7. <div class="user-pic" style="grid-column: 2;"></div>
  8. <!-- 提交按钮 -->
  9. <button>提交</button>
  10. </form>

enctype有3个值:

描述
application/x-www-form-urlencoded 默认值,在发送之前编码所有字符
multipart/form-data 使用上传文件空间时必须用该值
text/plain 将空格转换为“+”,但不对特殊字符编码

隐藏域:在前端页面是无法看到的,它的值是用于后端处理的

  1. <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
  • 3.2.5 文本域(多行文本框)
  1. <label for="comment">备注:</label>
  2. <textarea name="comment" id="comment" cols="30" rows="10"></textarea>

四、表单的form属性

  • 如果控件写在form表单外部,则控件需要使用form属性,即:form=”表单id值”,才能在提交表单的时候传递控件的值,否则无法传递。
    1. <form action="check.php" method="get" id="register">
    2. <div class="box">
    3. <!-- 使用form属性,将控件与它所属的表单进行关联/绑定 -->
    4. <label for="email">邮箱:</label>
    5. <input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
    6. <label for="password">密码:</label>
    7. <input type="password" form="register" name="password" id="password" placeholder="至少8位" />
    8. <button form="register">提交</button>
    9. </div>
    10. </form>
    11. <label for="username">帐号:</label>
    12. <input type="text" name="username" id="username" placeholder="不能为空" />
    如上述代码,账号的input控件里没有写form属性,在提交的时候是无法提交username值,只能提交email和password的值。
    如果不把表单控件写到form内部,这样会方便js获取表单元素的值,但是这样写会影响布局,造成布局混乱,建议还是按照标准的写法,写到form表单内部。

作业:用表格写一个课程表

  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. <link rel="stylesheet" href="css/table.css">
  7. <title>表格:行与列的合并</title>
  8. </head>
  9. <body>
  10. <table class="lesson">
  11. <!-- 表格标题 -->
  12. <caption>
  13. xxxx小学课程表
  14. </caption>
  15. <!-- 表头 -->
  16. <thead>
  17. <tr>
  18. <th colspan="2"></th>
  19. <th>星期一</th>
  20. <th>星期二</th>
  21. <th>星期三</th>
  22. <th>星期四</th>
  23. <th>星期五</th>
  24. </tr>
  25. </thead>
  26. <!-- tbody -->
  27. <tbody>
  28. <tr>
  29. <td rowspan="4">上午</td>
  30. <td>1</td>
  31. <td>语文</td>
  32. <td>数学</td>
  33. <td>音乐</td>
  34. <td>社会</td>
  35. <td>科学</td>
  36. </tr>
  37. <tr>
  38. <td>2</td>
  39. <td>数学</td>
  40. <td>语文</td>
  41. <td>音乐</td>
  42. <td>语文</td>
  43. <td>数学</td>
  44. </tr>
  45. <tr>
  46. <td>3</td>
  47. <td>美术</td>
  48. <td>音乐</td>
  49. <td>音乐</td>
  50. <td>数学</td>
  51. <td>音乐</td>
  52. </tr>
  53. <tr>
  54. <td>4</td>
  55. <td>社会</td>
  56. <td>体育</td>
  57. <td>音乐</td>
  58. <td>体育</td>
  59. <td>语文</td>
  60. </tr>
  61. <tr class="rest">
  62. <td colspan="7">中午休息</td>
  63. </tr>
  64. <tr>
  65. <td rowspan="4">下午</td>
  66. <td>5</td>
  67. <td>语文</td>
  68. <td>数学</td>
  69. <td>音乐</td>
  70. <td>社会</td>
  71. <td>科学</td>
  72. </tr>
  73. <tr>
  74. <td>6</td>
  75. <td>数学</td>
  76. <td>语文</td>
  77. <td>音乐</td>
  78. <td>语文</td>
  79. <td>数学</td>
  80. </tr>
  81. <tr>
  82. <td>7</td>
  83. <td>课外活动:</td>
  84. <td colspan="4">各班自行组织,自愿参加</td>
  85. <!-- <td>音乐</td>
  86. <td>数学</td>
  87. <td>音乐</td> -->
  88. </tr>
  89. </tbody>
  90. </table>
  91. </body>
  92. </html>

效果:

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