欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端html基础知识之图片/链接/列表和表单

程序员文章站 2022-03-27 09:20:46
...

图片/链接/列表的重点属性

图片的重点

  • 1、图片，主要属性 src 和 alt,其中 src 为图片地址，可选网络地址或者本地地址，为防止网络图片地址不稳定，建议优先选择本地地址为佳
  • 2、alt 提供图片名称显示功能，如果图片无法打开时可以有效提示图片的名称以及搜索引擎更友好收录
  1. <img src="./images/xxx.jpg" alt="xxx图片" />

链接的重点

  • 1、链接中有 2 个重要属性: href 和 target,其中 href 为链接标签中要打开的网址地址，打开网址方式通常有两种常用方式，当前窗口或者新窗口打开,默认打开方式即为当前窗口(target=”_self”),如选默认打开方式可不用填写，如需在新的窗口打开把 target 属性更改为(target=”_blank”)即可,还有其它属性请查看手册
  1. <a href="http://xxx.xxx.com" target="_blank">超级链接</a>

几种常见的列表：无序列表、有序列表、自定义列表和表格

  • 1、无序列表,这种列表用途比较广，代码形式以 ul+li
  • Markdown 快速生成无序列表代码:ul>li*5{无序列表$}
    

  1. <ul>
    2. 

  2.   <li>无序列表1</li>
    3. 

  3.   <li>无序列表2</li>
    4. 

  4.   <li>无序列表3</li>
    5. 

  5.   <li>无序列表4</li>
    6. 

  6.   <li>无序列表5</li>
    7. 

  7. </ul>
    8.
  • 2、有序列表只需把 ul 改为 ol，其它不变
  • Markdown 快速生成有序列表代码:ol>li*5{有序列表$}
    

  1. <ol>
    2. 

  2.   <li>有序列表1</li>
    3. 

  3.   <li>有序列表2</li>
    4. 

  4.   <li>有序列表3</li>
    5. 

  5.   <li>有序列表4</li>
    6. 

  6.   <li>有序列表5</li>
    7. 

  7. </ol>
    8.
  • 3、自定义列表由 dl+dt+dd 组成,其中 dt 为标题，dd 为内容,其中 dd 可以为多个
  • Markdown 快速生成演示代码:dl>dt2{地址}>dd2{xxxx 中山路 xxx 号}
    

  1.   <dl>
    2. 

  2.       <dt>地址
    3. 

  3.         <dd>xxxx中山路xxx号</dd>
    4. 

  4.         <dd>xxxx中山路xxx号</dd>
    5. 

  5.       </dt>
    6. 

  6.       <dt>地址
    7. 

  7.         <dd>xxxx中山路xxx号</dd>
    8. 

  8.         <dd>xxxx中山路xxx号</dd>
    9. 

  9.       </dt>
    10. 

  10.     </dl>
    11.
  • 4、表格,这个表格优为重要，后期网站数据绑定和展示都需要用到它
  • 表格由 table+caption+thead+tbody+tfoot 组成,
  • 表格中只能有一个 caption 表格名称和一个 thead 表头内容以及一个 tfoot 表尾内容
  • 表头 thead 为（可选）,加上就更具语义性,不加也没影,建议加上,表头由 thead+tr+th 组成
  • 表内容 tbody 为主体（必选）由 tbody+tr+td 组成
  • tbody 可以出现 N 多个内容
  • 表格合并为表格中重要的方法 rowspan 为垂直方向合并，colspan 为水平方向合并(只保留要合并的行,其余的注释或删除)
  • 如从第二行增加 rowspan=”5”代表合并垂直方向 5 列，只保留当前行的 td 相邻行的 td 注释或删除即可
  • Markdown 快速生成一个 10 行 6 列代码:table>caption{xx 中学课程表}+(thead>tr>th6{时间})+tbody>tr10>td*6{数学}+tfoot>tr>td*6{备注}
    

  1. <table border="1" width="500">
    2. 

  2.     <caption>xx中学课程表</caption>
    3. 

  3.     <!-- 数据表格必须遵循"先行后列原则"tr为行,th或td为列 -->
    4. 

  4.     <!-- 表头thead 可选 加上更有语义性 -->
    5. 

  5.     <thead>
    6. 

  6.         <tr>
    7. 

  7.             <!-- 表头用th可自带加粗样式 -->
    8. 

  8.             <th>时间</th>
    9. 

  9.             <th>周1</th>
    10. 

  10.             <th>周2</th>
    11. 

  11.             <th>周3</th>
    12. 

  12.             <th>周4</th>
    13. 

  13.             <th>周5</th>
    14. 

  14.         </tr>
    15. 

  15.     </thead>
    16. 

  16.     <!-- tbody为主体,（必选） -->
    17. 

  17.     <!-- 行与列合并 -->
    18. 

  18.     <tbody>
    19. 

  19.         <tr>
    20. 

  20.             <td rowspan="5" bgcolor="lightgreen">语文</td>
    21. 

  21.             <td>语文</td>
    22. 

  22.             <td>语文</td>
    23. 

  23.             <td>语文</td>
    24. 

  24.             <td>语文</td>
    25. 

  25.             <td>语文</td>
    26. 

  26.         </tr>
    27. 

  27.         <tr>
    28. 

  28.             <!-- <td>语文</td> -->
    29. 

  29.             <td>语文</td>
    30. 

  30.             <td>语文</td>
    31. 

  31.             <td>语文</td>
    32. 

  32.             <td>语文</td>
    33. 

  33.             <td>语文</td>
    34. 

  34.         </tr>
    35. 

  35.         <tr>
    36. 

  36.             <!-- <td>语文</td> -->
    37. 

  37.             <td>语文</td>
    38. 

  38.             <td>语文</td>
    39. 

  39.             <td>语文</td>
    40. 

  40.             <td>语文</td>
    41. 

  41.             <td>语文</td>
    42. 

  42.         </tr>
    43. 

  43.         <tr>
    44. 

  44.             <!-- <td>语文</td> -->
    45. 

  45.             <td>语文</td>
    46. 

  46.             <td>语文</td>
    47. 

  47.             <td>语文</td>
    48. 

  48.             <td>语文</td>
    49. 

  49.             <td>语文</td>
    50. 

    51. 

  51.         </tr>
    52. 

  52.         <tr>
    53. 

  53.             <!-- <td>语文</td> -->
    54. 

  54.             <td>语文</td>
    55. 

  55.             <td>语文</td>
    56. 

  56.             <td>语文</td>
    57. 

  57.             <td>语文</td>
    58. 

  58.             <td>语文</td>
    59. 

    60. 

  60.         </tr>
    61. 

  61.         <!-- 第5行水平方向合并行colspan -->
    62. 

  62.         <tr>
    63. 

  63.             <td colspan="10" bgcolor="greed" >中午休息时间</td>
    64. 

  64.             <!-- <td>语文</td>
    65. 

  65.             <td>语文</td>
    66. 

  66.             <td>语文</td>
    67. 

  67.             <td>语文</td>
    68. 

  68.             <td>语文</td> -->
    69. 

  69.         </tr>
    70. 

  70.         <tr>
    71. 

  71.             <td rowspan="5" bgcolor="lightgreen">语文</td>
    72. 

  72.             <td>语文</td>
    73. 

  73.             <td>语文</td>
    74. 

  74.             <td>语文</td>
    75. 

  75.             <td>语文</td>
    76. 

  76.             <td>语文</td>
    77. 

  77.         </tr>
    78. 

  78.         <tr>
    79. 

  79.             <!-- <td>语文</td> -->
    80. 

  80.             <td>语文</td>
    81. 

  81.             <td>语文</td>
    82. 

  82.             <td>语文</td>
    83. 

  83.             <td>语文</td>
    84. 

  84.             <td>语文</td>
    85. 

  85.         </tr>
    86. 

  86.         <tr>
    87. 

  87.             <!-- <td>语文</td> -->
    88. 

  88.             <td>语文</td>
    89. 

  89.             <td>语文</td>
    90. 

  90.             <td>语文</td>
    91. 

  91.             <td>语文</td>
    92. 

  92.             <td>语文</td>
    93. 

  93.         </tr>
    94. 

  94.         <tr>
    95. 

  95.             <!-- <td>语文</td> -->
    96. 

  96.             <td>语文</td>
    97. 

  97.             <td>语文</td>
    98. 

  98.             <td>语文</td>
    99. 

  99.             <td>语文</td>
    100. 

  100.             <td>语文</td>
    101. 

  101.         </tr>
    102. 

  102.         <!-- tfoot为表尾(可选) -->
    103. 

  103.         <tfoot>
    104. 

  104.             <tr>
    105. 

  105.                 <td>备注</td>
    106. 

  106.                 <td colspan="5" bgcolor="lightgreen">备注</td>
    107. 

  107.                 <!-- <td>备注</td>
    108. 

  108.                 <td>备注</td>
    109. 

  109.                 <td>备注</td>
    110. 

  110.                 <td>备注</td> -->
    111. 

  111.             </tr>
    112. 

  112.         </tfoot>
    113. 

  113.     </tbody>
    114. 

    115. 

  115. </table>
    116.

以上代码生成的演示图

前端html基础知识之图片/链接/列表和表单

最为重要 html 表单由 form+input+select+button 等组成，form 标签中有两个重要属性 action 和 method

  • 1、其中 action=”xxx.php”为表单中的数据处理程序
  • 2、method 为请求类型,常用数型有 get 和 post,默认类型为 get,如果提交表单中的数据包含有重要隐私数据一般均采用 post 方式进行提交
    

  1. `
    2. 

  2. <form action="" method="post"></form>
    3.

表单中包含 N 个表单内容标签如 input、button、select 等

  • 1、input 中包含有 4 个常用属性 type、name、 value 和 placeholder
  • type 为文本输入框类型属性,常用属性有(text 文本，password 密码,email 邮箱,radio 单选，checkbox 多选)
  • 如果 type 类型为 radio 单选或者 checkbox 多选,需要增加默认选项只需增加 checked 属性即可
  • name=”username”为必填属性如 type 类型为单选(radio)或多选(checkbox)，须把 name 设为一致，如为多选 checkbox 需改为数组形式传送，即 name=”username[]”
  • value=”admin”给文本框设置默认值
  • placeholder=”至少 8 位”为文本框中的提示信息
  • required 为设置文本输入框为必填内容,否则无法提交
    

  1. <form action="reg.php" method="post">
    2. 

  2.   <!-- 表单中语义化标签，将label中的for属性名和input中的id属性名一致即可绑定
    3. 

  3.         把点击（用户名）的光标落在文本框中 -->
    4. 

  4.   <div>
    5. 

  5.     <label for="username">用户名:</label>
    6. 

  6.     <!-- 文本框中设置为必填项加required -->
    7. 

  7.     <input
    8. 

  8.       type="text"
    9. 

  9.       name="username"
    10. 

  10.       id="username"
    11. 

  11.       value=""
    12. 

  12.       placeholder="至少输入8位"
    13. 

  13.       required
    14. 

  14.     />
    15. 

  15.   </div>
    16. 

  16.   <div>
    17. 

  17.     <label for="password">密 码:</label>
    18. 

  18.     <input type="password" id="password" />
    19. 

  19.   </div>
    20. 

  20.   <div>
    21. 

  21.     <label for="email">邮 箱：</label>
    22. 

  22.     <input type="email" id="email" />
    23. 

  23.   </div>
    24. 

  24.   <div>
    25. 

  25.     <!-- 单选属性时name的值必须一致 -->
    26. 

  26.     <!-- label中的for和input中的id一致进行绑定默认选项 -->
    27. 

  27.     <label for="secret">性 别:</label>
    28. 

  28.     <input type="radio" name="gender" value="boy" />
    29. 

  29.     <label for="boy">男</label>
    30. 

  30.     <input type="radio" name="gender" value="girl" />
    31. 

  31.     <label for="girl">女</label>
    32. 

  32.     <input type="radio" name="gender" value="secret" id="secret" checked />
    33. 

  33.     <label for="">保密</label>
    34. 

  34.   </div>
    35. 

  35.   <div>
    36. 

  36.     <label for="js">爱 好:</label>
    37. 

  37.     <!-- name属性以数组方式传送 -->
    38. 

  38.     <input type="checkbox" name="hobby[]" id="php" value="php" checked />
    39. 

  39.     <label for="php">php</label>
    40. 

  40.     <input type="checkbox" name="hobby[]" id="java" value="java" />
    41. 

  41.     <label for="java">java</label>
    42. 

  42.     <input type="checkbox" name="hobby[]" id="js" value="js" />
    43. 

  43.     <label for="js">js</label>
    44. 

  44.   </div>
    45. 

  45.   <button>提交</button>
    46. 

  46. </form>
    47.

以上代码生成的简单注册表单效果图

前端html基础知识之图片/链接/列表和表单

  • 2、button 中默认属性为 type=”submit”如要禁用 button 提交只需把属性值改为 type=”button”

上一篇： PHP中printf()函数格式化的详解

下一篇： 运用Shell 命令行获得本机IP地址

推荐阅读