Blogger Information
Blog 14
fans 0
comment 0
visits 12056
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
列表 表格 表单 用法及定义 1209 作业
念旧
Original
747 people have browsed it

列表 表格 表单 用法及定义

一.列表

1.无序列表说明

无序列表是由ul标签和li标签组成 可以用于导航栏

  1. <h2>无序列表</h2>
  2. <ul>
  3. <li>123</li>
  4. <li>345</li>
  5. <li>678</li>
  6. </ul>

2.有序列表说明

有序列表是由ol标签和li标签组成 可以用于按顺序排列的内容

  1. <h2>有序列表</h2>
  2. <ol>
  3. <li>123</li>
  4. <li>345</li>
  5. <li>678</li>
  6. </ol>

3.自定义列表

自定义列表是由dl dtdd标签组成 可以用于分类列表

  1. <h2>自定义列表</h2>
  2. <dl>
  3. <dt>名字:</dt>
  4. <dd>某某某</dd>
  5. <dt>电话:</dt>
  6. <dd><a href="tel:17306514631">电话</a>173******12</dd>
  7. <dt>邮箱:</dt>
  8. <dd><a href="email:202078100@qq.com"></a>202078100@qq.com</dd>

二.表格 和 表格行与列的合并

1.表格

HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
还有thead标签是包裹表头 tbody标签包裹表格内容

  1. <table class="product">
  2. <caption>商品</caption>
  3. <thead>
  4. <tr>
  5. <th>名字</th>
  6. <th>金额</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>手机</td>
  12. <td>10000</td>
  13. </tr>
  14. </tbody>
  15. </table>

2.表格行与列的合并

colspan是合并行的属性rowspan是合并列的属性

  1. <h3>课程表</h3>
  2. <table>
  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. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td rowspan="4">上午</td>
  16. <td>1</td>
  17. <td>上班</td>
  18. <td>下班</td>
  19. <td>吃饭</td>
  20. <td>睡觉</td>
  21. <td>打豆豆</td>
  22. </tr>
  23. <tr>
  24. <td>2</td>
  25. <td>上班</td>
  26. <td>下班</td>
  27. <td>吃饭</td>
  28. <td>睡觉</td>
  29. <td>打豆豆</td>
  30. </tr>
  31. <tr>
  32. <td>3</td>
  33. <td>上班</td>
  34. <td>下班</td>
  35. <td>吃饭</td>
  36. <td>睡觉</td>
  37. <td>打豆豆</td>
  38. </tr>
  39. <tr>
  40. <td>4</td>
  41. <td>上班</td>
  42. <td>下班</td>
  43. <td>吃饭</td>
  44. <td>睡觉</td>
  45. <td>打豆豆</td>
  46. </tr>
  47. <tr>
  48. <th colspan="7">休息</th>
  49. </tr>
  50. <tr>
  51. <td rowspan="3">下午</td>
  52. <td>5</td>
  53. <td>上班</td>
  54. <td>下班</td>
  55. <td>吃饭</td>
  56. <td>睡觉</td>
  57. <td>打豆豆</td>
  58. </tr>
  59. <tr>
  60. <td>6</td>
  61. <td>上班</td>
  62. <td>下班</td>
  63. <td>吃饭</td>
  64. <td>睡觉</td>
  65. <td>打豆豆</td>
  66. </tr>
  67. <tr>
  68. <td>7</td>
  69. <td>上班</td>
  70. <td>下班</td>
  71. <th colspan="3">运动</th>
  72. </tr>
  73. </tbody>
  74. </table>

三.表单

<form> 标签用于为用户输入创建 HTML 表单

属性
action 提交地址
method 提交方式 GET POST

<input> 标签属性值

属性
checked 规定此 input 元素首次加载时应当被选中
type checkbox(多选) file(文件) hidden(隐藏域) image(图片) password(密码框) radio(单选) text(文本框)
value value(规定元素的值)
name 元素的名称
  1. <form action="" method="GET">
  2. <label for="user">用户名:<label>
  3. <input id="user" type="text" name="user_name" placeholder="user"/>
  4. <p>
  5. <label for="password">密码:</label>
  6. <input id="password" type="password" name="password" placeholder="不得少于6位"/>
  7. </p>
  8. <p>
  9. <label for="email">邮箱:</label>
  10. <input id="email" type="email" name="email"/>
  11. </p>
  12. <p>
  13. <label for="bm">性别:</label>
  14. <input type="radio" name="sex" value="nv" id="nv"/><label for="nv"></label>
  15. <input type="radio" name="sex" value="nan" id="nan"/><label for="nan"></label>
  16. <input type="radio" name="sex" value="bm" id="bm" checked/><label for="bm">保密</label>
  17. </p>
  18. <p>
  19. <label for="#">兴趣:</label>
  20. <input type="checkbox" name="xq[]" value="zq" id="zq"/><label for="zq">足球</label>
  21. <input type="checkbox" name="xq[]" value="lq" id="lq"/><label for="lq">篮球</label>
  22. <input type="checkbox" name="xq[]" value="ppq" id="ppq"/><label for="ppq">乒乓球</label>
  23. </p>
  24. <p>
  25. <label for="edu">学历:</label>
  26. <select id="edu">
  27. <option value="1" >初中</option>
  28. <option value="2" >高中</option>
  29. </select>
  30. </p>
  31. <p>
  32. <label for="">照片:</label>
  33. <input type="file" name="file" />
  34. </p>
  35. <p>
  36. <label for="">简历:</label>
  37. <input type="file" name="file" />
  38. </p>
  39. <p>
  40. <label>备注:</label>
  41. <textarea></textarea>
  42. </p>
  43. <button>提交</button>
  44. </form>

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post