---
title: "IT课程 HTML基础 010_元素、属性"
date: 2024-01-07T22:30:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html元素", "html属性"]
categories: ["学习", "HTML基础"]
canonical: https://www.zhaojian.net/it-course-html-010/
author: 赵健
---

### 元素

|开始标签|元素内容|结束标签|
|---|---|---|
|`<h1>`|这是一个标题|`</h1>`|
|`<p>`|这是一个段落|`</p>`|
|`<a href="https://www.zhaojian.net/" title="链接">`|这是一个链接|`</a>`|
|`<img src="/images/logo.png" alt="这是一个图像">`|这是一个图像| |
|`<br>`|换行| |

```html
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>hello HTML</title>
    </head>

    <body>
        <h1>这是一个标题</h1>
        <p>
            这是一个段落<br>
            <a href="https://www.zhaojian.net/" title="链接">这是一个链接</a>
        </p>
        <img src="/images/logo.png" alt="这是一个图像" />
        <br />
    </body>

</html>
```


> [!小结]
> - **HTML 元素** 以 **开始标签** 开始（起始），以 **结束标签** 结束（终止）
> - **HTML 元素** 的内容是开始标签与结束标签之间的内容
> - 某些 **HTML 元素** 具有 **空内容（empty content）**，这些没有内容，也没有闭合的标签被称为**空标签**或**空元素**，为了实现特定功能并保持简洁性和灵活性，如：`<br>`、`<hr>`、`<img>`、`<meta>`、`<input>`等。
> - 大多数 **HTML 元素** 可拥有 **属性**
> - **HTML 元素** 通常被称为 **HTML 标签** (HTML tag)
> - **HTML 元素** 通常是 **成对出现** 的，比如 `<p>` 和 `</p>`
> - **HTML 元素** 内可以嵌套其他 HTML 标签
> - **HTML 元素** 对大小写不敏感，推荐使用小写

***
### 属性

HTML 元素可以拥有属性（Attribute），它们提供了有关元素的更多信息，或者定义了元素的某些行为。属性总是在开始标签中定义，常常使用 "属性名=属性值" 的形式出现。例如，链接（`a`）元素可以使用 `href` 属性指定链接的目标地址：

示例：

```html
<a href="https://www.zhaojian.net">zhaoJian.Net</a>
```

效果：

![示例效果](/uploads/2024/01/20231218220631.png)


在上述代码中，`a` 元素的 `href` 属性的值为 `"https://www.zhaojian.net"`，这意味着当点击该链接时，浏览器将跳转到该 URL。

常用的属性：

1. `id`：为元素提供一个唯一标识符。
2. `class`：为元素提供一个或多个类名，不同的元素可以添加相同的类名。
3. `style`：为元素提供内联样式。
4. `title`：为链接元素增加标题内容。
5. `alt`：为图像元素增加描述内容。

> [!小结]
> - 属性总是以 名称=值对 的形式出现，比如：`name="value"`。
> - 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间加以空格符分隔。
> - 属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。
> - 属性和属性值对大小写不敏感，推荐使用小写。