目录
1. 块级元素（Block-level Elements）
2. 行级元素（Inline Elements）
3. 行内块级元素（Inline-block Elements）
4. 表格相关元素
5. 列表相关元素
6. 表单相关元素
示例代码
示例效果
编辑
1. 块级元素（Block-level Elements）
块级元素在页面中独占一行，通常用于定义较大的结构。常见的块级元素包括：
<div>：通用容器，用于定义文档中的分区或节。<p>：段落。<h1>至<h6>：标题，从最高级别的<h1>到最低级别的<h6>。<ul>和<ol>：无序列表和有序列表。<li>：列表项。<table>：表格。<header>：页眉。<footer>：页脚。<nav>：导航链接。<section>：独立的内容区域。<article>：独立的文章。<aside>：侧边栏或辅助内容。
2. 行级元素（Inline Elements）
行级元素在同一行显示，通常用于定义文本中的特定部分。常见的行级元素包括：
<a>：超链接。<img>：图片。<span>：通用容器，用于定义文档中的内联部分。<strong>：加粗文本。<em>：强调文本。<code>：计算机代码文本。<abbr>：缩写。<input>：输入字段。<button>：按钮。
3. 行内块级元素（Inline-block Elements）
行内块级元素结合了块级元素和行级元素的特性。它们在同一行显示，但可以设置宽度和高度，且内部可以包含块级元素。常见的行内块级元素包括：
<img>：图片。<input>：输入字段。<button>：按钮。<textarea>：多行文本输入框。<select>：下拉选择框。<object>：嵌入外部对象。<iframe>：嵌入另一个 HTML 文档。
4. 表格相关元素
表格相关元素用于创建和管理表格数据。常见的表格相关元素包括：
<table>：定义表格。<tr>：定义表格行。<td>：定义表格单元格。<th>：定义表格标题单元格。<thead>：定义表格头部。<tbody>：定义表格主体。<tfoot>：定义表格底部。
5. 列表相关元素
列表相关元素用于创建有序和无序列表。常见的列表相关元素包括：
<ul>：无序列表。<ol>：有序列表。<li>：列表项。<dl>：定义列表。<dt>：定义列表项的术语。<dd>：定义列表项的描述。
6. 表单相关元素
表单相关元素用于创建用户输入表单。常见的表单相关元素包括：
<form>：定义表单。<input>：输入字段。<button>：按钮。<textarea>：多行文本输入框。<select>：下拉选择框。<option>：定义下拉选择框中的选项。<label>：定义表单控件的标签。<fieldset>：定义表单中相关元素的组合。<legend>：定义<fieldset>的标题。
示例代码
下面是一个包含不同类型元素的 HTML 页面示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 元素示例</title><style>.inline-block {display: inline-block;margin: 5px;padding: 10px;border: 1px solid black;}</style>
</head>
<body><!-- 块级元素 --><header><h1>欢迎来到我的网站</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li></ul></nav></header><main><section><h2>最新文章</h2><article><h3>文章标题</h3><p>这是文章的内容。Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></article></section><aside><h2>热门话题</h2><ul><li><a href="#">话题1</a></li><li><a href="#">话题2</a></li><li><a href="#">话题3</a></li></ul></aside></main><!-- 行级元素 --><p>这是一个包含 <strong>加粗</strong> 和 <em>强调</em> 文本的段落。</p><p>这是一个包含 <code>代码</code> 的段落。</p><p>这是一个包含 <abbr title="HyperText Markup Language">HTML</abbr> 缩写的段落。</p><p>这是一个包含 <a href="https://www.example.com">超链接</a> 的段落。</p><p>这是一个包含 <img src="image.jpg" alt="示例图片"> 的段落。</p><p>这是一个包含 <span style="color: red;">红色文本</span> 的段落。</p><!-- 行内块级元素 --><div><span class="inline-block">这是一个行内块级元素</span><span class="inline-block">这是另一个行内块级元素</span></div><!-- 表格相关元素 --><table><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>工程师</td></tr><tr><td>李四</td><td>30</td><td>设计师</td></tr></tbody></table><!-- 表单相关元素 --><form><label for="name">姓名：</label><input type="text" id="name" name="name"><br><br><label for="email">邮箱：</label><input type="email" id="email" name="email"><br><br><label for="message">消息：</label><textarea id="message" name="message"></textarea><br><br><button type="submit">提交</button></form><footer><p>© 2023 我的网站</p></footer>
</body>
</html>
