元素分类 - 内联元素 - 典型内联元素列举

在 HTML5 中，元素可以根据其显示特性分为不同的类型，其中内联元素是一类非常重要的元素。内联元素通常用于在文本流中标记特定的文本部分，它们不会换行，而是与周围的文本一起显示在同一行上。下面我们来详细介绍一些典型的内联元素。

1. `<a>` 元素（锚点元素）

<a> 元素用于创建超链接，允许用户从一个页面跳转到另一个页面，或者跳转到当前页面的其他位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anchor Element Example</title>
</head>
<body>
    <p>点击下面的链接访问百度：</p>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

在这个例子中，<a> 元素创建了一个指向百度网站的链接，用户点击“百度”文本时，就会跳转到百度的主页。

2. `<img>` 元素（图像元素）

<img> 元素用于在网页中插入图像。它是一个空元素，不需要闭合标签，通过 src 属性指定图像的源文件路径。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Element Example</title>
</head>
<body>
    <p>下面是一张示例图片：</p>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

在这个例子中，<img> 元素插入了一个占位符图像，src 属性指定了图像的 URL，alt 属性提供了图像的替代文本，当图像无法加载时会显示该文本。

3. `<input>` 元素（输入元素）

<input> 元素用于创建各种表单输入字段，如文本框、密码框、复选框、单选框等。它也是一个空元素，通过 type 属性指定输入字段的类型。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Element Example</title>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，我们创建了一个简单的登录表单，包含一个文本框用于输入用户名，一个密码框用于输入密码，以及一个提交按钮。

4. `<span>` 元素（通用内联容器）

<span> 元素是一个通用的内联容器，用于对文本进行分组或样式化，本身没有特定的语义。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Span Element Example</title>
    <style>
       .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>这是一段包含 <span class="highlight">高亮文本</span> 的段落。</p>
</body>
</html>

在这个例子中，<span> 元素用于将“高亮文本”部分进行分组，并通过 CSS 类 highlight 为其添加了黄色背景。

5. `<strong>` 元素（强调元素）

<strong> 元素用于表示文本的重要性，通常会以粗体显示。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strong Element Example</title>
</head>
<body>
    <p>请 <strong>务必</strong> 按时完成任务。</p>
</body>
</html>

在这个例子中，<strong> 元素强调了“务必”这个词，提醒用户该词的重要性。

典型内联元素总结表格

元素名称	描述	示例代码
`<a>`	创建超链接	`<a href="https://www.example.com">示例链接</a>`
`<img>`	插入图像	`<img src="image.jpg" alt="示例图像">`
`<input>`	创建表单输入字段	`<input type="text" name="username">`
`<span>`	通用内联容器	`<span class="style">文本</span>`
`<strong>`	强调文本	`<strong>重要内容</strong>`

通过以上介绍，我们了解了 HTML5 中一些典型的内联元素及其用法。内联元素在网页开发中起着重要的作用，它们可以帮助我们更好地组织和展示文本内容。在实际开发中，我们可以根据需要灵活运用这些内联元素，创建出更加丰富和交互性强的网页。

元素分类 - 内联元素 - 典型内联元素列举