HTML 基本标签

2025年3月17日 | 阅读 7 分钟

引言

HTML 标签是特殊的关键词,我们可以用它们来指定任何网站的格式和外观。在 HTML 中,标签用 < 和 > 括起来。所有标签都以开头的尖括号 (<) 开始,并以闭合的尖括号 (>) 结束。有些标签在标签名前以斜杠结束。我们也可以将 HTML 标签放置在另一个标签内部。

为什么要打开和关闭 HTML 标签?

所有标签都必须打开和关闭,这一点非常重要。这会告诉 Web 浏览器代码的哪一部分开始,哪一部分结束,这样浏览器就可以将其与其他网页部分区分开来。

如果我们遗漏了任何一个关闭标签,可能会导致浏览器不兼容。这也可能导致网页外观不正确。当开发人员排除 HTML 程序故障时,它会显示缺失的关闭标签。

必备 HTML 标签

每个 HTML 代码都包含一些必备标签。这些标签对于 Web 浏览器正确理解和显示网页至关重要。它们还有助于 Web 浏览器区分普通文本和 HTML 代码。创建网页需要四个基本的必备 HTML 标签。它们如下。

  1. <html></html>
  2. <head></head>
  3. <title></title>
  4. <body></body>

在讨论上述四个基本必备标签之前,我们先来谈谈 HTML 文档声明,即 <!DOCTYPE>。

<!DOCTYPE>

在 HTML 中,<!DOCTYPE> 不是一个标签;它只是一个 HTML 文档声明。它显示了我们在程序中使用的 HTML 版本。所有 HTML 代码都必须以这个声明开头,并且它不区分大小写。

HTML5 中的语法

现在让我们简要讨论主要的必备标签。

1. <html></html>

通过此标签,我们可以将文档定义为网页。我们还可以使用这些标签指定 HTML 代码的开始和结束。除 <!doctype html> 外,所有 HTML 标签都包含在此标签内。所有 HTML 标签都嵌套在 <html></html> 标签内。

语法

2. <head></head>

通过这些标签,我们可以定义 HTML 代码的头部部分。它定义了关于 Web 浏览器信息,这些信息不会显示在网页上。它还包含与网页相关的所有信息。它还包含一些标签,如 <title>、<meta>、<link> 等。

我们可以将 <head> 标签放置在 <html> 标签和 <body> 标签之间。

语法

3. <title></title>

我们可以使用此标签为网页提供标题。我们可以在 <head> 标签内定义 <title> 标签。为网页设置标题后,网页的名称会显示在浏览器窗口的标签或标题栏上。

语法

4. <body></body>

通过此标签,我们可以声明网页的所有信息和其他可见内容。<body> 标签包含所有信息,如图像、链接、纯文本、视频等。我们可以声明所有其他标签,如用于段落的 <p> 标签,用于粗体文本的 <strong> 标签,用于图像的 <a> 标签,用于有序列表的 <ol> 标签等。

语法

基本 HTML 标签

除了所有必备标签外,HTML 中还有许多基本标签。在 HTML 中,使用所有基本标签,我们可以格式化内容,还可以为网页添加标题,对内容进行对齐,并在网页上执行更多操作。下面列出了一些在每个网页上常用的基本标签。

1. <h1></h1>

通过此标签,我们可以为 HTML 网页定义标题。与普通内容相比,标题标签的内容看起来更大更粗。网页上有六种标题标签。这些标签是 h1、h2、h3、h4、h5、h6。<h1> 标签显示最重要、优先级最高的标题,而 <h6> 优先级最低。

语法

示例 1

输出

HTML Basics Tag

说明

在上面的代码中,与其它内容相比,<h1> 标签的内容更粗,优先级最高。

2. <p></p>

通过此标签,我们可以在网页上定义段落。当我们使用 <p> 标签时,浏览器会在段落内容之前和之后自动添加一个空格。

语法

示例 2

输出

HTML Basics Tag

3. <img>

通过此标签,我们可以将图像插入网页。<img> 标签没有关闭标签。<img> 标签有一些重要的属性。

  • Src: 借助此属性,我们可以提供图像标签的地址。
  • Alt: 借助此标签,如果图像加载时出现问题,我们可以提供替代文本。
  • Width: 借助此属性,我们可以为图像提供宽度。
  • Height: 借助此属性,我们可以为图像提供高度。

语法

示例 3

输出

HTML Basics Tag

4. <a></a>

通过此标签,我们可以将一个页面链接到另一个网页。<a> 标签的重要属性是 href 属性。借助此属性,我们可以以 URL 的形式提供网页的目标地址。借助 <a> 标签,我们还可以创建指向网页、文件、电子邮件地址、同一页面上的片段等的超链接。

语法

示例 4

输出

HTML Basics Tag

说明

在上面的代码中,我们创建了指向 javaTpoint 官方网站的超链接。当用户点击此超链接时,它将自动重定向到目标网页。

5. <B> </B>

通过此标签,我们可以将文本的指定部分加粗。如果我们使文本的任何部分加粗,那么该部分文本将以额外的黑色书写。

示例 5

输出

HTML Basics Tag

说明

在上面的代码中,我们使用了段落标签,并在 <p> 标签内编写了一些语句,并在 <P> 标签语句中的某些文本上实现了 <b> 标签。

6. <BR>

借助 <br> 标签,我们可以在编写任何段落时创建一个空行。在段落中使用 <br> 标签可以提高段落的可读性。

示例 6

输出

HTML Basics Tag

7. <DIV> </DIV>

通过此标签,我们可以将网页的总区域分割成独立的区域。在该独立区域内,我们可以放置不同的元素。它主要用于创建分组元素。

示例 7

输出

HTML Basics Tag

说明

在上面的代码中,我们使用了 <div> 标签。为了更好地显示 <div> 标签的区域,我们应用了一些 CSS 样式属性。

8. <I> </I>

借助这个词,我们可以强调词语的特定部分。该特定部分以斜体字书写。

示例 8

输出

HTML Basics Tag

9. <LI> </LI>

借助此标签,我们可以在 HTML 中创建有序列表 (<ol>) 和无序列表 (<ul>)。

语法

10. <OL> </OL>

通过此标签,我们可以在 HTML 中创建有序列表,它将自动编号。当我们在列表中添加一些额外项时,计数会从停止的地方自动开始,这会很有帮助。

示例 9

输出

HTML Basics Tag

说明

在上面的代码中,我们使用 <ol> 标签创建了一个有序列表,并使用 <li> 标签列出了项目。在输出中,所有项目都按有序系列编号。

11. <UL> </UL>

通过此标签,我们可以在 HTML 中创建无序列表。它会用项目符号列出项目。

示例 10

输出

HTML Basics Tag
下一个主题网站的 HTML 代码