HTML 元素类型介绍
目录
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>