基本的HTML标签简要介绍和如何使用它

250 阅读5分钟

你好,读者朋友们,欢迎来到本博客,在本博客中,你将学习基本的HTML标签,如何使用它们,使用它们的目的以及代码片断,这将帮助你获得这些基本标签的正确解释。因此,你将能够编写你的第一个HTML文档。这些标签对任何HTML文档都非常关键,因为它们是任何HTML文档的基础,也是编写HTML文档的必经之路。

但是,在深入了解基本的HTML标签之前,让我们先快速回顾一下什么是HTML?

什么是HTML?

HTML是超文本标记语言的意思。现在让我们打破这个定义,以便更清楚地了解HTML,"超文本 "是指带有一些链接的文本,而 "标记语言 "帮助文本看起来更有活力,更容易区分。

HTML有助于开发网页的骨架(结构),它有助于创建一个基本的布局(结构),说明我们的网页将如何拥有不同的元素,以及它们将被放置在屏幕上的位置。为了实现这一点,我们使用了HTML提供的不同标签,但其中一些标签对获得预期的结果是最重要的。

因此,在了解了什么是HTML之后,我们就可以去了解基本的HTML标签了。

让我们来看看这些基本的HTML标签,了解它们是如何工作的,以及它们在文档中的作用。

容器HTML标签

这个标签作为所有(除了<!DOCTYPE>声明)HTML元素的容器,它将所有其他标签如、等绑定在自己体内。这个标签出现在HTML文档的顶部和底部。它代表了一个HTML文档的根。

<!DOCTYPE>声明是为了告知浏览器文档的类型。

在HTML5中,该声明很简单:<!DOCTYPE html>。

标题标签

就像一个元数据(关于数据的数据)的容器,这是唯一一个其内容不在浏览器中显示的标签,但在网站设计中发挥着重要作用。它只是包含关于HTML文档的元数据。Head标签包含网页的脚本和样式。 标签被放置在和标签之间。

样式标签

样式标签为网页添加样式,它包含有关文档样式(CSS)的信息。这个标签对网页在浏览器上的呈现方式负责,你可以在这个标签中提供所有类型的样式,如颜色、边距、填充等。这个标签为网页增加了美感,是我们想看到的样子。

脚本标签

脚本标签包含有助于向网页添加互动性的JavaScript代码。交互性是指你的网页如何对某些活动做出反应,比如当点击事件发生或改变事件发生时。你可以在这个标签中提供所有的逻辑,以处理你网页上的用户活动。这个标签有助于使用户体验更好。

链接标签

链接标签在外部资源和当前文档之间建立了一种关系,它将外部资源如样式表和脚本链接到当前工作文档。在使用外部CSS文件或JavaScript文件时,该标签将该外部文件添加到我们的文档中,帮助我们明智地实现分离关注。

标题标签

标签是用来给HTML文档添加标题的,<title>标签放在<head>标签里面。一个文件在整个文档中只能有一个<title>元素。 元素的使用。 在浏览器标签上添加一个标题
  • 在搜索引擎的结果页上显示网页的标题。
  • 在将内容或网页加入书签后给出书签的标题。
  • 身体标签

    标签是编写实际内容的标签,显示在网络浏览器上。它定义了HTML文档的主要内容,如段落、文本、标题、视频、链接、图像、表格、表单等。 标签放在和标签之间。

    标题标签

    标签定义了HTML文档中的标题级别,其中

    标签最为常见,因为它们用于定义文档的标题和副标题。HTML包含六个级别的标题,即h1、h2、h3、h4、h5、h6。因此,使用这些标签中的任何一个,写在这些标签中的文本就会出现粗体,并根据所使用的级别有不同大小。除此之外,它还有助于网页进入搜索引擎的搜索结果中。

    是最大的标题标签,而

    是最小的标签。

    段落标签

    HTML文档中的

    标签定义了段落,这个标签内的任何内容都会在网页上显示为一个段落。这个标签负责在网页上添加内容,正文,或者我们在网页上看到的解释,通常是段落元素。

    它是一个块级元素,意味着它在网页中占据了一整块空间。

    让我们来看看

    标签的例子。

    断句标签


    在文档中添加一个单行断点,它占用了单行的空间。它是一个自动关闭的标签,这意味着我们不需要在
    后面加上一个结束标签,如

    。这个标签不仅在网页内容之间创造了空间,同时也有助于将一个内容或元素与另一个内容或元素分开,帮助浏览者轻松区分不同网页的内容。

    让我们看看下面的例子,了解如何使用它以及它在网页上显示的内容。

    结论

    因此,我们已经熟悉了基本的HTML标签,以及如何明智地使用它们。因此,我们现在可以开始使用Html了。