当前位置:Gxlcms > html代码 > HTML块级标签汇总(小篇)

HTML块级标签汇总(小篇)

时间:2021-07-01 10:21:17 帮助过:191人阅读

块级元素,简单来说,就是自己独占一行的元素。其特点:

①总是在新行上开始;

 ②高度,行高以及外边距和内边距都可控制;

 ③宽度缺省是它的容器的100%,除非设定一个宽度。

④它可以容纳内联元素和其他块元素

汇总代码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <!-- 块状元素 独占一行 -->
  9. <!-- p无语义,称它为盒子 -->
  10. <p>盒子</p>
  11. <!-- h1-h6语义 定义标题 -->
  12. <h1>标题1</h1>
  13. <h2>标题2</h2>
  14. <h6>标题3</h6>
  15. <!-- p 语义 段落标签 写文字-->
  16. <p>文章</p>
  17. <!-- 列表多数用来存一系列的相似的数据 -->
  18. <!-- 有序列表 -->
  19. <ol>
  20. <li>导航1</li>
  21. <li>导航2</li>
  22. <li>导航3</li>
  23. </ol>
  24. <!-- 无序列表 -->
  25. <ul>
  26. <li>导航1</li>
  27. <li>导航2</li>
  28. <li>导航3</li>
  29. </ul>
  30. <!-- 定义列表 解释某个名词 -->
  31. <dl>
  32. <dt>名词</dt>
  33. <dd>解释名词的位置</dd>
  34. </dl>
  35. <!-- 表格 渲染性能不好 少用 -->
  36. <table>
  37. <caption>表格头部</caption>
  38. <!-- tr是行 -->
  39. <tr>
  40. <!-- th表头 -->
  41. <th>星期一</th>
  42. <th>星期二</th>
  43. </tr>
  44. <tr>
  45. <!-- td单元格 -->
  46. <td>上课</td>
  47. <td>上课</td>
  48. </tr>
  49. </table>
  50. </body>
  51. </html>



以上所述是小编给大家介绍的HTML块级标签汇总(小篇), 更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行