HTML 元素详解：从入门到精通
HTML（HyperText Markup Language）是构建网页的基础语言，而 HTML 元素则是构成网页的基本单位。无论是网页的结构、内容还是样式，都离不开 HTML 元素。本文将深入探讨 HTML 元素的概念、结构、属性以及常见的使用方法，帮助你从零开始掌握 HTML 的基础知识，并逐步进阶到更复杂的应用。
什么是 HTML 元素？
HTML 元素是构成 HTML 文档的基本单位，它由 开始标签、内容 和 结束标签 组成。每个元素都有特定的功能和用途，可以用来定义网页的结构、内容和样式。
HTML 元素的基本结构
一个典型的 HTML 元素由以下三部分组成：
- 开始标签：表示元素的开始，通常包含元素的名称和属性。
- 内容：元素的实际内容，可以是文本、其他元素或两者兼有。
- 结束标签：表示元素的结束，通常与开始标签相同，但在前面加上一个斜杠
/。
例如，一个段落元素的代码如下：
<p>这是一个段落。p>
是开始标签。这是一个段落。是内容。是结束标签。
空元素
有些 HTML 元素没有内容，这些元素被称为 空元素。空元素通常只有一个标签，例如
<br>
<img src="image.jpg" alt="示例图片">
空元素不需要结束标签，因为它们没有内容。
HTML 元素的属性
HTML 元素可以包含 属性，属性提供了有关元素的额外信息。属性通常以 键值对 的形式出现在开始标签中。
例如， 元素用于创建超链接，href 属性指定链接的目标地址：
<a href="https://www.runoob.com">访问菜鸟教程a>
常见属性
以下是一些常见的 HTML 属性：
- class：为元素定义一个或多个类名，用于 CSS 样式或 JavaScript 操作。
- id：为元素定义唯一的标识符，通常用于 CSS 或 JavaScript 操作。
- style：为元素定义内联样式。
- title：为元素提供额外的提示信息，通常在鼠标悬停时显示。
- src：指定外部资源的路径，例如图片或脚本文件。
- alt：为图片提供替代文本，当图片无法显示时显示该文本。
- href：指定链接的目标地址。
属性的使用示例
<p class="intro" id="first-paragraph" title="这是一个提示">这是一个段落。p>
<img src="image.jpg" alt="示例图片" style="width:100px;height:100px;">
<a href="https://www.runoob.com" target="_blank">访问菜鸟教程a>
常见的 HTML 元素
1. 标题元素
HTML 提供了六个级别的标题元素，从 到 ， 是最高级别的标题， 是最低级别的标题。
<h1>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>
标题元素不仅用于定义标题，还对网页的 SEO（搜索引擎优化）有重要影响。
2. 段落元素
元素用于定义段落。
<p>这是一个段落。p>
<p>这是另一个段落。p>
段落元素会自动在段落前后添加空白行。
3. 链接元素
<a href="https://www.runoob.com">访问菜鸟教程a>
可以通过 target 属性控制链接的打开方式：
_blank：在新标签页中打开链接。_self：在当前标签页中打开链接（默认行为）。
<a href="https://www.runoob.com" target="_blank">在新标签页中访问菜鸟教程a>
4. 图片元素
src 属性指定图片的路径，alt 属性提供图片的替代文本。
<img src="image.jpg" alt="示例图片">
alt 属性在图片无法加载时显示，同时对 SEO 也有帮助。
5. 列表元素
HTML 支持 有序列表 和 无序列表。
- 无序列表：使用
元素。
<ul>
<li>项目 1li>
<li>项目 2li>
<li>项目 3li>
ul>
- 有序列表：使用
元素。
<ol>
<li>第一项li>
<li>第二项li>
<li>第三项li>
ol>
6. 表格元素
表单是用户与网页交互的重要方式，常见的表单元素包括： 元素用于创建表格，表格由行
和单元格 组成。
<table border="1">
<tr>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>张三td>
<td>25td>
tr>
<tr>
<td>李四td>
<td>30td>
tr>
table>
元素用于定义表头单元格。
元素用于定义普通单元格。
7. 表单元素
：定义表单。：用于输入文本、密码、日期等。