初学者需要知道的 19 个常用 HTML 标签

已发表: 2022-12-08

如果你想成为一名前端开发人员，你会得到的最常见的建议之一就是学习 HTML。超文本标记语言，缩写为 HTML，是大多数网页的基础。

HTML 由不同的东西组成，例如标签、属性和元素。我们的重点将是 HTML 标签。我们使用 HTML 标签告诉浏览器如何将内容组织成标题、标题、段落、图像等等。因此，HTML 标签就像定义浏览器如何显示或格式化内容的关键字。

服务器从上到下读取 HTML 标签。网页应具有的 HTML 标记的数量没有限制。

所有 HTML 标签都包含在<>中
每个 HTML 标签执行不同的功能
大多数 HTML 标签都有开始<tag>和结束</tag>

HTML 标签与 HTML 元素与 HTML 属性

大多数人可以互换使用术语 HTML 标签和元素。但它们是一样的吗？从技术上讲，HTML 元素和 HTML 标签是不同的。

HTML 标签定义 HTML 元素。为实现这一点，内容使用与我们正在使用的标签内容相匹配的开始和结束标签名称进行包装。

这是 HTML 元素的示例：

 <p> This is a paragraph </p>

<p>是一个 HTML 标签的例子

HTML 属性提供有关文档中 HTML 元素的附加信息。属性位于 HTML 元素中。

这是一个 HTML 属性的例子

<button id=" SubmitOrder" class="btn">Order</button>

每个人都应该知道的 HTML 标签

自 Tim Berners-Lee 于 1993 年推出以来，HTML 作为一种标记语言已经发展了多年。第一个 HTML 版本有 18 个标签。每个 HTML 版本都会添加新标签；最近的升级是 2014 年的 HTML5。

仔细比较 HTML 和 HTML5 可以发现，后者具有 <article>、<header> 和 <footer> 等语义标签，可以清楚地描述内容。我们现在有超过 100 个 HTML 标签。以下是您应该知道的一些最流行的标签：

<!文档类型>

DOCTYPE 在技术上不是标签，而是告诉浏览器将加载哪种文件的声明。此标记告诉浏览器将加载的 HTML 类型。

在 HTML5 中，您可以将文件声明为

<!DOCTYPE html>

或者

<!doctype html>

注意：该声明没有结束标记并且不区分大小写。

<html> </html>

<html> ….. </html> 标签位于 DOCTYPE 标签之后。该标签将文档定义为网页；所有其他元素都将嵌套在里面。 HTML 标记指定 HTML 文档的开始和结束。

<html> 标签表示为；

 <html>Content</html>

<头></头>

HTML 文档的头部部分由 <head> 标记表示。此标记包含在 <html> 标记内，并提供有关网页的一般信息。

<head> 标签包含提供网页细节的其他标签，例如页面的标题和作者。该标签的内容不显示在网页上

这是 <head> 标签的语法；

 <head> …….. </head>

<标题></标题>

<title> 标签声明网页的标题。此标记包含在 <head> 标记中。 <title> 标签将出现在浏览器窗口的标题栏或选项卡上，但不会出现在实际网页上。

<title> 标签的语法是；

 <title>HTML Tags for Beginners</title>

当在 <head> 标签内时，它将显示为；

 <head> <title>HTML Tags for Beginners</title> </head>

<正文> </正文>

<body> 标签显示网页上所有可见的内容。图片、链接、纯文本、视频等都可以在 <body> 和 </body> 标签内找到。

您会在正文中找到的其他一些标签包括用于段落的 <p> 标签、用于图像的 <a> 标签、用于粗体文本的 <strong> 标签和用于有序列表的 <ol> 标签，仅举几例。

<body> 标签的语法是；

 <body> Content </body>

<h1> 到 <h6> 标签

一个 HTML 文档中最多可以有 6 个标题标签。每个标签都由从 1 到 6 的数字表示，如 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。

H1 是最大的标题标签，而 H6 是最小的。

在 HTML 文档中，标题标签可以表示如下：

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

<h1> 到 <h6> 标签包含在 <body> 标签内。

例如，一个 ,<H1> 标签将被包含为；

 <body> <h1> This is heading 1 >/h1> </body>

<p> </p>

<p> </p> 或简单的段落标记用于将内容结构化为段落。在代码编辑器中点击 HTML 文档中的“输入”按钮不会创建新段落。

如果您想要多个段落，则必须在文档中使用多个 <p> </p> 标记。段落标签应该包含在 <body > 标签中。

段落标签的语法是；

 <p> ….some content here….</p>

如果你想要有四个段落，你的代码将被构造为；

 <body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>

<b> </b>

<b> </b> 或简单的粗体标记会将开始 <b> 和结束 </b> 之间的任何内容格式化为粗体。

粗体标签可以位于标题（例如 H1）之间，甚至可以位于段落标签内。

这些是粗体标签的例子；

 <b> Bold Tag </b>

短语“Bold Tag”将显示为粗体。

 <h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>

第五版将加粗。

<我> </我>

斜体标签，由 <i> 表示，将标签内的文本显示为斜体。

例如，如果我们有

<i> These are italics </i>

单词“ these are italics ”将显示为斜体。

<你> </你>

下划线标记或 <u> 用于在 HTML 文档中的特定文本下划线。

例如，如果我们有；

 <u> underline these words </u>

标签之间的短语将带有下划线。

<中心> </中心>

中心标记 <center> 用于将内容置于 HTML 文档的中心。

例如，如果我们有一个 h2 标签写成<h2> Centering Content in HTML </h2> ，我们可以按如下方式将它居中；

 <center> <h2> Centering Content in HTML </h2> </center>

<跨度></跨度>

Span 标签 <span> 是一个通用的内联容器，没有默认样式。您可以使用 span 标签对要设置样式的文本进行分组。

您可以在其他标签（例如标题和段落）内跨越标签；

 <h2> Learn HTML <span> from experts </span> and be ready for the market </h2>

 <p> Learn HTML <span> from experts </span> and be ready for the market </p>

<分区></分区>

分区标签，缩写为 div，是一种允许您对 HTML 文档中的不同标签进行分组的标签。

可以为 div 标签指定一个“类”以使用 CSS 添加外部样式。

这就是包含 h1、h2 和段落标记的 div 的表示方式。

 <div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>

<em></em>

强调或 <em> 标签用于强调 HTML 文档中的某些单词。

<em> 标签之间的内容将显示为倾斜或斜体。

段落中强调的内容可以出现在代码编辑器中将显示为；

 <p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>

<sup></sup>

<sup> 或上标标签允许包含的文本位于其余部分之上。一个完美的例子是当你想对一个数字 X 求平方并用数学表示它给你 X ²

段落标记中 <sup> 的语法将是；

 <H1> Harveys <sup>TM </sup> Company Limited </H1>

<子></子>

下标或 <sub> 标签与上标标签相反。 <sub> 标签中的内容将出现在正常文本行的下方。一个完美的例子是将水的化学式写为 H ₂ 0。

下标标签的语法是；

 Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

<br> 是一个自闭合标签，代表中断。 <br> 之后的所有内容将另起一行。

段落中 <br> 的语法是；

 <p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>

<ol></ol> 和 <li> </li>

有序列表标记或 <ol> 必须与另一个标记一起使用，例如 <li>。

两者可以在代码编辑器上显示为；

 <ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>

在浏览器上呈现时，内容将显示为编号。

<img 源=””/>

您可能想要添加图像以提高视觉吸引力，甚至添加徽标。自闭合图像标签 <img src=””/> 在这种情况下会派上用场。

图片标签的语法是；

 <img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

引号中的内容代表源 URL。

包起来

存在超过 100 个 HTML 标签，但以上是您作为初学者应该知道的。大多数代码编辑器都支持 HTML，因此您可以放心，在开始学习时绝不会出错。