HTML行为元素和块级元素及语义化

前端开发   发布日期:2025年06月19日   浏览次数:182

div - dl - form 交互表单
h1 - h6 标题
hr 水平分割线
p 段落
ul 非排序列表
table 表格

行内元素

a 链接
br 换行
em 强调
i 斜体
img 图片
input 输入框
label 表格标签
select 项目选择
span 文本内区块
label 标签
strong 粗体强调
textarea 多行

换行是块级元素不换行的是行内元素

  1. <!DOCTYPE html>
  2. <!--当前文档为html5-->
  3. <html>
  4. <head>
  5. <!--设置文档编码-->
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta charset="utf-8" />
  8. <!--设置关键字和描述方便SEO-->
  9. <meta name="keywords" content="关键字">
  10. <meta name="description" content="网站描述">
  11. <!--设置移动端开发缩放比例-->
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
  13. </head>
  14. <body>
  15. <div>div</div>
  16. <div>
  17. <p>P</p>
  18. </div>
  19. <dl>
  20. <dt>dt</dt>
  21. <dd>dd</dd>
  22. </dl>
  23. <h1>标题h1</h1>
  24. <h2>标题h2</h2>
  25. <h3>标题h3</h3>
  26. <h4>标题h4</h4>
  27. <h5>标题h5</h5>
  28. <hr/>
  29. <!-- 无序列表 -->
  30. <ul>
  31. <li>li 1</li>
  32. <li>li 2</li>
  33. <li>li 3</li>
  34. <li>li 4</li>
  35. </ul>
  36. <!-- 有序列表 -->
  37. <ol>
  38. <li>li 1</li>
  39. <li>li 2</li>
  40. <li>li 3</li>
  41. <li>li 4</li>
  42. </ol>
  43. <b>b是加粗</b>
  44. <u>u是下滑线</u>
  45. <i>i是斜体</i>
  46. <s>s是删除</s>
  47. <strong>strongs是非常强壮</strong>
  48. <img src="" alt="图片显示失败时显示的文字" title="鼠标在图片上时的提示" width="100" height="100">
  49. <a href="https://www.baidu.com/" target="_blank">新的页面打开</a>
  50. <a href="https://www.baidu.com/" target="_self">在本身打开</a>
  51. <table border="1">
  52. <thead>
  53. <tr>
  54. <th>
  55. 头一
  56. </th>
  57. <th>
  58. 头二
  59. </th>
  60. </tr>
  61. </thead>
  62. <tbody>
  63. <tr>
  64. <td colspan="2"></td>
  65. </tr>
  66. <tr>
  67. <td rowspan="2"></td>
  68. <td></td>
  69. </tr>
  70. <tr>
  71. <td></td>
  72. </tr>
  73. </tbody>
  74. </table>
  75. <iframe src="https://www.baidu.com/" width="200" height="200"></iframe>
  76. </body>
  77. </html>

 

以上就是HTML行为元素和块级元素及语义化的详细内容,更多关于HTML行为元素和块级元素及语义化的资料请关注九品源码其它相关文章!