---
title: "IT课程 HTML基础 011_文本"
date: 2024-01-11T22:30:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html文本"]
categories: ["学习", "HTML基础"]
canonical: https://www.zhaojian.net/it-course-html-011/
author: 赵健
---
HTML 提供了大量的文本标签，以供我们在制作网页时使用。这些标签可以帮助我们更好地组织和格式化我们的文本内容。以下是一些常用的 HTML 文本标签。
### 标题
标题元素用于定义HTML文档的标题或子标题，它通常表示文档结构的层次。标题元素有六个级别，从 h1 到 h6，级别越高，标题的重要性越高。
示例：
```html
这是一个 h1 标题
这是一个 h2 标题
...
这是一个 h6 标题
```
效果：
> [!小结]
> - 请确保 **标题元素** 只用于标题，不应仅为了**粗体**或**大号字体**而使用 **标题元素**。
> - 搜索引擎使用标题为您的网页结构和内容编制索引。
> - 正确使用标题元素，可以使页面更具有可读性、可访问性，同时有利于 SEO。
> - 应该将 h1 用作 **唯一** 的主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
***
### 段落
段落元素用于定义文本的段落结构，使文本更有组织和可读性。它会在上下内容前后各添加一个换行，将文本分组成独立的部分，使得段落之间有明显的区分。段落元素主要包括 `` 标签，它表示一个段落。
示例：
```html
这是一个段落。
这是另一个段落。
```
效果：
> [!小结]
> - HTML 文档中可存在若干段落
> - 浏览器会自动地在段落的前后添加空行
> - 不要忘记结束标签（即使忘了结束标签，大多数浏览器也会正常显示）
> - 如果不喜欢段落元素添加的上下文空行，想缩小行距，请使用 `
` 标签
> - 默认情况下，段落元素中一行代码显示的字符数是根据屏幕宽度决定的
***
### 超链接
`` 元素用于定义超链接，使用户能够点击链接并跳转到其他页面或资源。``标签内部一般包含一些文本或者图片，这些内容将成为链接的可点击部分。同时，我们通过``标签的 `href` 属性指定链接的目标地址。超链接是 HTML 中的一项基本功能，它可以链接到网页的其他部分，或者链接到其他网页，甚至是其他网站。
示例：
```html
zhaoJian.Net
```
效果：
##### 超链接属性
- `href`：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- `target`（可选）：指定链接如何在浏览器中打开。常见的值包括 `_blank`（在新标签或窗口中打开链接）和 `_self`（在当前标签或窗口中打开链接，默认状态）。
- `title`（可选）：提供链接的文本信息，通常在鼠标悬停在链接上时显示。
- `rel`（可选）：指定与链接目标的关系，如 `nofollow`（不跟踪）、`noopener`（不打开新的上下文）、`noreferrer`（不传递引用信息） 等。
- `class`：指定链接的 CSS 类。
- `id`：指定链接的 CSS ID。
##### 锚链接
在一个长的网页中，我们可能希望创建链接到页面内部某个部分的链接。这可以通过锚链接来实现。首先，我们需要使用 `` 标签的 `name` 或 `id` 属性来标记目标位置，然后在链接的 `href` 属性中使用 `#` 加上目标的 `name` 或 `id` 值来创建链接。
示例：
```html
跳转到 a1
一些内容
```
效果：
点击超链接 “跳转到 a1” 后，页面将会跳转到 “a1内容” 部分。
##### 邮箱链接
除了链接到其他网页，`` 标签还可以链接到电子邮件地址。通过在 `href` 属性值前面添加 `mailto:`，可以创建一个点击后会启动用户默认的邮件客户端，并创建一封新邮件的链接。
示例：
```html
发送邮件到 757118@qq.com
```
效果：
点击这个超链接，系统将启动默认的邮件客户端，并创建一封发送到 `757118@qq.com` 的新邮件。
> [!小结]
> - 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
> - 超链接不必一定是文本，图片或其他 HTML 元素都可以成为链接。
> - 默认情况下，链接将以以下形式出现在浏览器中：
> 一个未访问过的链接显示为蓝色字体并带有下划线。
> 访问过的链接显示为紫色并带有下划线。
> 点击链接时，链接显示为红色并带有下划线。
***
### 换行
换行元素`
`用于在文本中插入换行符，强制文本换到新的一行。
示例：
```html
这是一行文本。
这是另一行文本。
```
效果：
> [!小结]
> - `
` 标签中的斜杠 / 是可选的。
> 在 HTML 4 中，`
` 标签必须包含斜杠；
> 在 HTML 5 中，斜杠是可选的。
***
### 加粗
`` 元素是一种基本的文本样式标签，用于将文本设定为粗体，但没有强调文本的语义。`` 元素是语义化的标签，用于表示文本的强调，通常浏览器会以加粗的形式显示。
示例：
```html
这是普通文本
这是加粗的文本
这是强调语义的加粗文本
```
效果：
***
### 斜体
`` 元素用于表示文本的斜体效果，但没有强调文本的语义。`` 元素用于表示斜体文本，通常用于强调文本的重要性或创造视觉效果。
示例：
```html
这是普通文本
这是一个斜体文本
这是一个强调语义的斜体文本
```
效果：
***
### 下划线
下划线元素 `` 用于表示下划线文本。
示例：
```html
这是一个带下划线的文字
```
效果：
> [!小结]
> - HTML 5 中，下划线元素 `` 被弃用了。这意味着它仍然是有效的 HTML 元素，但它不被推荐使用。
***
### 删除线
删除线元素 `` 用于显示已经被删除或废弃的文本，浏览器通常会在此文本上添加一条横线。
示例：
```html
这是一个删除线文本
```
效果：
> [!小结]
> - HTML5 中删除线元素 `` 被弃用了。这意味着它仍然是有效的 HTML 元素，但它不被推荐使用。
***
### 高亮
`` 元素用于标记文本中的一部分，以便突出显示或标记这部分文本。通常，被 `` 元素标记的文本会以黄色背景进行突出显示，以使其在文档中更为显眼。
示例：
```html
这是一个高亮的文本
```
效果：
***
### 下标和上标
`` 元素表示文本的下标（subscript），`` 元素表示文本的上标（superscript）。下标和上标元素通常用于数学、化学式、日期、温度等场景。
示例：
```html
H2O 是水的分子式。
210 等于 1024。
```
效果：
***
|元素|作用|
|---|---|
|``|定义超链接|
|``|表示强调的文本，通常以斜体显示|
|``|表示强调的文本，通常以粗体显示|
|``|表示缩写或首字母缩写|
|``|标记作品的标题|
|``|定义计算机代码文本|
|`
`|换行|
|``|表示斜体文本|
|``|表示粗体文本|
|``|表示小号文本|
|``|表示下标文本|
|``|表示上标文本|
|``|表示带有记号的文本|
|``|表示被删除的文本|
|``|表示插入的文本|
|``|定义术语（定义元素）|
|`