练习仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
3.4 KiB

5 days ago
  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. <title>Document</title>
  7. </head>
  8. <body>
  9. <p>你好</p>
  10. <br>
  11. zzz
  12. <hr width="1000px" size="5px" align="center">
  13. <img src="1.jfif" alt="这是一个风景图" title="fenhgjing" width="300px">
  14. <!-- 路径分为相对和绝对路径
  15. 绝对路径从盘符开始访问
  16. 相对路径分为
  17. 子级关系 /
  18. 同级关系 ./
  19. 父级关系 ../
  20. -->
  21. <h3>超链接</h3>
  22. <a href="https://www.baidu.com"><img src="./1.jfif" width="300px"></a>
  23. <h3>文本标签</h3>
  24. <em>斜体且着重文字</em>
  25. <i>斜体</i>
  26. <b>粗体</b>
  27. <strong>加重加粗</strong>
  28. <del>删除字</del>
  29. <span>空标签</span>
  30. <h3>有序列表</h3>
  31. <ol>
  32. <li>水果
  33. <ol type="A"
  34. <li>苹果</li>
  35. <li>桃子</li>
  36. <li>栗子</li>
  37. </ol>
  38. </li>
  39. <li>
  40. 蔬菜
  41. <ol type="a">
  42. <li>白菜</li>
  43. <li>青菜</li>
  44. <li>油菜</li>
  45. </ol>
  46. </li>
  47. <li>
  48. 肉类
  49. <ol type="I">
  50. <li>zhurou</li>
  51. <li>NIUROU</li>
  52. <li>yangrou</li>
  53. </ol>
  54. </li>
  55. </ol>
  56. <h3>无序列表</h3>
  57. <!-- 快捷键 ul>li*n -->
  58. <ul type="disc">
  59. <li>shucai
  60. <ul type="circle">
  61. <li>1</li>
  62. <li>2</li>
  63. <li>3</li>
  64. </ul>
  65. </li>
  66. <li>shuiguo
  67. <ul type="square">
  68. <li>45</li>
  69. <li>5</li>
  70. <li>66</li>
  71. </ul>
  72. </li>
  73. <li>roulei
  74. <ul>
  75. <li>22</li>
  76. <li>33</li>
  77. <li>44</li>
  78. </ul>
  79. </li>
  80. </ul>
  81. <h3>表格</h3>
  82. <!-- 快捷键 table>tr*3>td{单元格} -->
  83. <table border="1" wigth="600" height="300">
  84. <tr>
  85. <td>单元格</td>
  86. <td>单元格</td>
  87. <td>单元格</td>
  88. <td>单元格</td>
  89. </tr>
  90. <tr>
  91. <td>单元格</td>
  92. <td>单元格</td>
  93. <td>单元格</td>
  94. </tr>
  95. <tr>
  96. <td>单元格</td>
  97. <td>单元格</td>
  98. <td>单元格</td>
  99. <td>单元格</td>
  100. </tr>
  101. </table>
  102. <h3>表格合并</h3>
  103. <table border="1" wigth="900" height="300">
  104. <tr>
  105. <td colspan="2">单元格1</td>
  106. <td rowspan="2">单元格3</td>
  107. <td>单元格</td>
  108. </tr>
  109. <tr>
  110. <td colspan="2" rowspan="2">单元格4</td>
  111. <td>单元格</td>
  112. </tr>
  113. <tr>
  114. <td>单元格9</td>
  115. <td>单元格</td>
  116. </tr>
  117. <tr>
  118. <td>单元格9</td>
  119. <td>单元格</td>
  120. <td>单元格</td>
  121. <td>单元格</td>
  122. </tr>
  123. </table>
  124. <h3>表单</h3>
  125. <form action="">
  126. <input type="text" value="请输入文本">
  127. <input type="submit"><br>
  128. <input type="password" value="请输入密码">
  129. <input type="submit" value="登录">
  130. </form>
  131. </body>
  132. <!-- 块级元素和行内元素 -->
  133. <!-- 常见块级元素: div,form,h1,hr,p,table, ul,ol等 独占一行,可以设置宽高,可以包含行内元素和其他块级元素 -->
  134. <!-- 常见行内元素:a,b,em,strong,span等 不能独占一行,只能设置宽,一般不包含块级元素 -->
  135. </html>