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

图片/链接/列表

程序员文章站 2022-06-02 19:37:06
...

图片/链接/列表

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>图片/链接/列表</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <!-- 图片 -->
    13. 

  13.     <!-- <img src="./1.jpg" alt="少女" /> -->
    14. 

    15. 

  15.     <!-- 链接 -->
    16. 

  16.     <!-- <a href="https://www.baidu.com" target="_top">百度</a> -->
    17. 

    18. 

  18.     <!-- 列表 -->
    19. 

  19.     <!-- ul>li*3{item$} -->
    20. 

  20.     <!-- <ul>
    21. 

  21.         <li>item1</li>
    22. 

  22.         <li>item2</li>
    23. 

  23.         <li>item3</li>
    24. 

  24.     </ul> -->
    25. 

    26. 

  26.     <!-- 自定义列表 -->
    27. 

  27.     <!-- ol>li*4{item$@6} -->
    28. 

  28.     <!-- <ol>
    29. 

  29.         <li>item6</li>
    30. 

  30.         <li>item7</li>
    31. 

  31.         <li>item8</li>
    32. 

  32.         <li>item9</li>
    33. 

  33.     </ol> -->
    34. 

  34.     <!-- dl+dt+dd -->
    35. 

  35.     <!-- dl>(dt+dd)*2 -->
    36. 

  36.     <!-- <dl>
    37. 

  37.         <dt></dt>
    38. 

  38.         <dd></dd>
    39. 

  39.         <dt></dt>
    40. 

  40.         <dd></dd>
    41. 

  41.     </dl> -->
    42. 

    43. 

  43.     <!-- nav>a{item$}*3 -->
    44. 

  44.     <!-- <nav>
    45. 

  45.         <a href="">item1</a>
    46. 

  46.         <a href="">item2</a>
    47. 

  47.         <a href="">item3</a>
    48. 

  48.         <a href="">item4</a>
    49. 

  49.     </nav> -->
    50. 

    51. 

  51.     <!-- 2.图文列表 -->
    52. 

  52.     <hr />
    53. 

  53.     <!-- ul.nav>li.item*3>a{link$} -->
    54. 

  54.     <!-- <ul class="nav" style="display: flex; list-style: none">
    55. 

  55.         <li class="item">
    56. 

  56.             <a href="https://www.baidu.com"> <img src="13.jpg" alt="" /></a>
    57. 

  57.             <a href=" ">少女 </a>
    58. 

  58.         </li>
    59. 

  59.         <li class="item"><a href="">link2</a></li>
    60. 

  60.         <li class="item"><a href="">link3</a></li>
    61. 

  61.     </ul>
    62. 

    63. 

  63.     <hr /> -->
    64. 

    65. 

  65.     <!-- 表格 -->
    66. 

  66.     <!-- <ul>
    67. 

  67.         <li>item1</li>
    68. 

  68.         <li>item2</li>
    69. 

  69.         <li>item3</li>
    70. 

  70.     </ul> -->
    71. 

  71.     <!-- ul>li*3{item$} -->
    72. 

  72.     <!-- table+caption+thead+tbody+tfoot -->
    73. 

  73.     <!-- 表格遵循先行后列的原则 -->
    74. 

  74.     <table border="1" width="500">
    75. 

  75.         <caption>
    76. 

  76.             广州市第八小学五年级六班
    77. 

  77.         </caption>
    78. 

  78.         <!-- 表头 -->
    79. 

  79.         <thead>
    80. 

  80.             <tr style="font-weight: bolder; text-align: center">
    81. 

  81.                 <th>id</th>
    82. 

  82.                 <th>name</th>
    83. 

  83.                 <th>email</th>
    84. 

  84.                 <th>password</th>
    85. 

  85.             </tr>
    86. 

  86.         </thead>
    87. 

  87.         <!-- 表格主体 -->
    88. 

  88.         <!-- tr*5>td*4{xx} -->
    89. 

    90. 

  90.         <tbody style="font-weight: bolder; text-align: center">
    91. 

  91.             <tr>
    92. 

  92.                 <td rowspan="2" bgcolor="cyan">xx</td>
    93. 

  93.                 <td>xx</td>
    94. 

  94.                 <td>xx</td>
    95. 

  95.                 <td>xx</td>
    96. 

  96.             </tr>
    97. 

  97.             <!-- 第2行 -->
    98. 

  98.             <!-- 水平方向合并 -->
    99. 

  99.             <tr>
    100. 

  100.                 <!-- <td>xx</td> -->
    101. 

  101.                 <td>xx</td>
    102. 

  102.                 <!-- <td colspan="3" bgcolor="lightgreen">xx</td>/ -->
    103. 

  103.                 <td>xx</td>
    104. 

  104.                 <td>xx</td>
    105. 

  105.             </tr>
    106. 

  106.             <!-- rowspan="3" bgcolor="cyan" -->
    107. 

  107.             <tr>
    108. 

  108.                 <!-- 水平方向合并 -->
    109. 

  109.                 <td colspan="4" bgcolor="lightgreen">xx</td>
    110. 

  110.                 <!-- <td>xx</td>
    111. 

    112. 

  112.                 <td>xx</td>
    113. 

  113.                 <td>xx</td> -->
    114. 

  114.             </tr>
    115. 

  115.             <tr>
    116. 

  116.                 <td rowspan="2" bgcolor="cyan">xx</td>
    117. 

  117.                 <td>xx</td>
    118. 

  118.                 <td>xx</td>
    119. 

  119.                 <td>xx</td>
    120. 

  120.             </tr>
    121. 

  121.             <tr>
    122. 

  122.                 <!-- <td>xx</td> -->
    123. 

  123.                 <td>xx</td>
    124. 

  124.                 <td>xx</td>
    125. 

  125.                 <td>xx</td>
    126. 

  126.             </tr>
    127. 

  127.         </tbody>
    128. 

  128.         <!-- 表尾 (表头和表尾都是可选的)-->
    129. 

  129.         <tfoot>
    130. 

  130.             <tr style="font-weight: bolder; text-align: center">
    131. 

  131.                 <td>yy</td>
    132. 

  132.                 <td colspan="3">yy</td>
    133. 

  133.                 <!-- <td>yy</td>
    134. 

  134.                 <td>yy</td> -->
    135. 

  135.             </tr>
    136. 

  136.         </tfoot>
    137. 

  137.     </table>
    138. 

  138. </body>
    139. 

    140. 

  140. </html>
    141.

上一篇： 在centos7服务器上安装Composer

下一篇： 学习PHP的数组总结【经验】，php数组总结_PHP教程

推荐阅读