HTML 简介

HTML代表超文本标记语言,使用这种语言的文档创建网页。每个网站都使用它,因此了解它的工作原理很重要。

在本教程文章中,您将了解有关HTML 的所有知识。

什么是 <!DOCTYPE > 声明?

<!DOCTYPE>声明是每个HTML文件中的第一行代码。它告诉 Web 浏览器特定文件中的HTML版本。

每个版本的HTML都是独一无二的,并且有自己的一套规则。 HTML 5是该语言的最新版本。它是开发人员推荐的版本,也是最简单的声明版本。要声明HTML 5文档,只需将HTML元素添加到<!DOCTYPE>声明即可。

您可以在下面看到一个示例:

 <!DOCTYPE html>

<head> 标签是什么?

在每个HTML文档中, <!DOCTYPE>声明后跟<html>标记。这个标签标识了文档的根,它包含了<head><body>标签。

<head>标签是第一部分,它包含<title><meta>标签。但是,在某些情况下,当开发人员选择使用内部 CSS 时, <style>标签也会放置在<head>标签内。

一个HTML文档中只有一个<title>标签。 <title>标签包含网页的标题,该信息显示在网页浏览器的标签区域。

您可以在下面看到标题标签示例:

 <title>An Introduction to HTML</title>

具有上述<title>标签的HTML文件将在浏览器的选项卡区域中显示为“HTML 简介”。

<meta>标签描述网页上的内容,通常具有名称和内容属性。三种比较流行的<meta>标签类型是描述、关键字和视口。

下面是一个描述<meta>标签示例:

 <mete name="description" content="This is a simple page, which demonstrates the basics of HTML">

description <meta>标记内容属性包含对您的网页的描述。这是显示在搜索引擎结果中的数据,它告诉潜在访问者可以在网站上看到什么。

下面是一个关键字<meta>标签示例:

 <meta name="keywords" content="HTML, web development, etc">

关键字 <meta>标签包含与您的网站相关的单词或短语。分配给关键字内容属性的每个新词或词组都用逗号分隔,如您在上面的示例中所见。

下面是一个视口<meta>标签示例:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

视口 <meta>标签有助于创建响应式设计,让您的网页响应不同的设备类型。

<body> 标签是什么?

<body>标签是<html>根标签内的第二个主要部分。 <body>标签包含网页上显示的每个元素。

带有<body>标签的元素被归类为行内元素或块元素。如果您想查看完整的 HTML 要点备忘单,我们已将其放在一起,以便您可以更轻松地理解所有内容。

什么是块元素?

块元素总是从一个新行开始,并且占据它们所在行的整个宽度。

您将使用的一些块元素包括:

  • 标题标签
  • <p> 标签
  • <div> 标签
  • <ol> 标签
  • <ul> 标签
  • <li> 标签

块元素用于以连贯、易消化的格式将文本划分到网站上。

什么是标题标签?

有六种不同类型的标题标签: <h1><h2><h3><h4><h5><h6><h1>标签生成最大的标题, <h6>生成最小的标题,所有其他标题位于两者之间的位置(取决于其数值)。

标题标签用于网页的标题。特定标题标签的使用取决于标题在网页上的位置。例如, <h1>标记用于网页的第一个标题,而网页仅使用一个 h1 元素(尽管它可能有多个 h2、h3 和 h4 元素)。

您可以在下面看到 <h1> 标记的示例:

 <h1> Learning the Basics of HTML </h1>

<p> 标签是什么?

<p>是在网页正文中使用的另一个块元素,它创建段落。以下是使用此标签的示例:

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

什么是 <div> 标签?

<div>标签代表一个部门。它用于为其他HTML元素组创建容器以用于样式或功能目的。

例如,如果您正在使用网格,则必须将所有网格元素放在一个容器中。您需要使用<div>标记来创建容器。

相关:学习如何使用 CSS 网格构建二维网站

<ol> 和 <ul> 标签是什么?

<ol><ul>标签用于在HTML 中创建列表。 <ol>标签创建有序列表,而<ul>标签创建无序列表。但是,这两个标签都使用<li>标签,它创建列表项。

使用 <ol> 标签

默认情况下,有序列表使用数字。但是, <ol>标签有一个 type 属性,您可以使用它来明确声明要用于对列表进行排序的元素。您可以对包含大写或小写罗马数字、大写或小写字母或数字的列表进行排序。

您可以在下面看到一个示例:

 <ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

上面的代码使用小写字母创建了一个有序列表。

使用 <ul> 标签

<ul>标签还有一个 type 属性,它采用以下几个值之一:即圆盘、圆或正方形。但是,光盘是无序列表中新列表项的默认指示符。

下面是代码形式的无序列表的示例:

 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

什么是内联元素?

内联元素不会从新行开始。它从下一个可用位置开始,该位置可能位于或可能不在新行上,并且仅使用必要的宽度。您最有可能使用的一些内联元素包括:

  • <span> 标签
  • <a> 标签
  • <img> 标签
  • <label> 标签
  • <button> 标签

我们将在下面更深入地讨论每一个。

<span> 标签是什么?

<span>标签用于内联样式目的。例如,如果您想更改段落中特定单词或短语的样式,则可以使用<span>标签。

下面是这个标签的一个例子:

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

在上述确保了例如使用<span>标记的<跨度>内的两个单词标签可以现在有一个独特的风格。

<a> 标签是什么?

<a>标签用于在网页上创建链接。 <a>标签允许开发人员链接到不同的网站(外部链接)或同一网站上的不同网页(内部链接)。 <a>标签有两个重要的属性——href 和 target。

href 属性是必不可少的,因为它存储链接位置的值。并且 target 属性是必需的,因为它允许用户在新选项卡中打开链接。如果没有 target 属性,将在当前选项卡中打开一个链接,如果它是外部链接,它会将流量从您的网站上带走。

请参阅下面的<a>标签示例:

 <a href="http://google.com" target="_blank">Click this link to Google</a>

学习 HTML 对程序员至关重要

学习HTML对所有程序员来说都是至关重要的,应该构成你学习的基础。幸运的是,它也不太复杂。

阅读本指南后,您应该拥有开始更好地格式化网站所需的一切。