HTML，或超文本标记语言，是一种用于定义网页结构的网络标记语言。
它是每个网站最基本的构建块之一，因此如果您想从事网络开发工作，学习这一点至关重要。
在本文中，我将详细介绍 HTML 是什么，它是如何在网页上进行操作的，我们还将介绍 HTML 中一个非常酷的部分——语义 HTML。
HTML 代表超文本标记语言。它 是用于网页创建的标准标记语言。它允许使用 HTML 元素（网页的构建块）（例如标签和属性）来创建和构建部分、段落和链接。
HTML有很多用例，即：
- 网页开发。开发人员使用 HTML 代码来设计浏览器如何显示网页元素，例如文本、超链接和媒体文件。
- 互联网导航。由于 HTML 被大量用于嵌入超链接，因此用户可以轻松地在相关页面和网站之间导航和插入链接。
- 网络文档。HTML 使组织和格式化文档成为可能，类似于 Microsoft Word。
还值得注意的是，HTML 不被视为一种编程语言，因为它不能创建动态功能。它现在被认为是官方的网络标准。万维网联盟 (W3C)维护和开发 HTML 规范，同时提供定期更新。
什么是 HTML？
要从头到尾理解“HTML”，让我们看一下组成缩写的每个单词：
超文本：为了连接相关项目而组织起来的文本（通常也包含图像等嵌入内容）
标记：用于排版任何要以硬拷贝或软拷贝格式打印的任何内容的样式指南
语言：计算机系统理解并用于解释命令的语言。
HTML 决定了网页的结构。仅此结构不足以使网页看起来不错且具有交互性。因此，您将分别使用 CSS 和 JavaScript 等辅助技术来使您的 HTML 更美观并增加交互性。
在这种情况下，我喜欢这样分解这三种技术——HTML、CSS 和 JavaScript：它们就像人体。
- HTML是骨架，
- CSS是皮肤，
- JavaScript 是使结构和皮肤栩栩如生的循环、消化和呼吸系统。
你也可以这样看待 HTML、CSS 和 JavaScript：HTML 是房子的结构，CSS 是室内外装饰，JavaScript 是电力、供水系统和许多其他使房子宜居的功能特性。
HTML 标签
由于 HTML 定义了特定网页的标记，因此您会希望文本、图像或其他嵌入以特定方式出现。
例如，您可能希望某些文本较大，另一些文本较小，以及一些粗体、斜体或项目符号形式。
HTML 有“标签”，可以让你完成这项工作。因此，有标签可以创建标题、段落、粗体字、斜体字等等。
下图描述了 HTML 标记的结构：
HTML 元素
一个元素由开始标签、字符、内容和结束标签组成。有些元素是空的——也就是说，它们没有结束标签，而是有一个源或链接到您想要嵌入网页的内容。
空元素的一个示例是<img>，您可以使用它在网页上嵌入图像。
HTML 元素通常与标签互换使用，但两者之间存在细微差别。元素是开始和结束标签的组合，然后是它们之间的内容。
我制作了另一张图片来帮助您可视化 HTML 元素的解剖结构：
HTML 属性
HTML 标记也采用所谓的属性。这些属性放置在开始标记中，范围从样式和 ID 到类。它们采用值，传递有关元素的更多信息，并帮助您使用 JavaScript 进行样式设置和操作等操作。
在下面的信息图中，开始标记包含class一个值为 的属性“text”。这可用于设置元素的样式或使用 JavaScript 选择它以进行交互。
这是一个基本 HTML 页面的剖析：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>
<!--Page content such as text and images goes in here-->
</body>
</html>
让我们看看这里的重要代码位：
<!Doctype html>：指定我们在此代码中使用 HTML5。<!Doctype>在引入 HTML5 之前，您必须使用标记明确说明您正在编写的 HTML 版本。例如，HTML4.0、3.2 等。但现在我们不再需要它了。当在代码中写入“html”时，浏览器会自动假定您正在使用 HTML5 进行编码。
<html></html>: 每个 HTML 文档的根或顶级元素。所有其他元素都必须包含在其中。
<head></head>: HTML 文档中最重要的部分之一。网络爬虫查看头部标签内部以获取有关页面的重要信息。它包含诸如页面标题、样式表、SEO 元信息等信息。
<meta />：这是一个空元素，传达有关页面的元信息。这些信息可能包括作者、它使用的编码类型（几乎总是 UTF-8）、响应能力、兼容性等等。网络爬虫总是查看元标记以获取有关网页的信息，这将在 SEO 中发挥至关重要的作用。
<title></title>：这定义了网页的标题。它始终显示在浏览器选项卡中。
<body></body>: HTML 文档的所有内容都位于 body 标记内。<body>整个页面只能有一个标签。
什么是语义 HTML？
语义 HTML 意味着您的 HTML 标签传达了它们的实际用途。
自 90 年代初出现以来，语义一直是 HTML 不可或缺的一部分。但直到 90 年代后期 CSS 开始在大多数浏览器中工作时，它才获得特别的相关性。
对于语义 HTML，语义中立的标签（如<div>和<span>）不受欢迎，因为语义上更具描述性的标签（如<header>, <nav>, <main>, <section>, <footer>and ）<article>可以做同样的事情。
使用语义标签的一个显着优势是网络爬虫能够轻松索引网页或网站，从而提高 SEO。
此外，使用语义的网站对于使用屏幕阅读器访问网站的人来说变得更具信息性、适应性和可访问性。
重要的语义标签及其作用
让我们看一些最常用的语义 HTML 标签：
<header>：该<header>元素定义网页的介绍部分。它包含诸如徽标、导航、主题切换器和搜索栏等项目。
<nav>:<nav>元素指定主页、联系人、关于、FAQ等页面的导航项。
<main>：<main>元素通常被视为标签的直接后代。它包含 HTML 文档的主要部分，除了<header>和<footer>。理想情况下，整个 HTML 文档中应该只有其中之一。
<section>:<section>元素定义网页的特定部分。这可能是展示部分、关于部分、联系部分或其他部分。您可以在单个 HTML 文档中使用多个部分。
<article>：<article>元素代表网页的某个部分，它传达了一些特定的信息。此类信息可以是文本、图像、视频和嵌入的组合。将此元素视为包含其他博客文章摘录的页面上的独立博客文章。
<aside>：顾名思义，这代表网页上的侧边栏。它通常是网页的一部分，与主要内容没有直接关系。
<footer>：该<footer>元素包含诸如快速链接、版权信息或与整个网站或网页相关的任何其他数据等项目。
请注意，由于语义元素传达了实际含义以及某些特定内容的实际作用（例如nav导航、aside侧边栏等），因此这些元素不会自动定位到它们应该在的位置。你仍然必须使用 CSS 来做到这一点。
一个超级简单的语义 HTML 文档如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
You can find me on
<a href="https://twitter.com/koladechris">Twitter</a> You can find me on
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">My Address</aside>
</main>
<footer>© 2020 All Rights Reserved</footer>
</body>
</html>
这是它在浏览器中的样子：
您可以看到<aside>标签内的内容不在侧边栏中，并且<nav>标签内的内容不会自动用作导航栏。这就是为什么您仍然必须使它们看起来像使用 CSS 时应该看起来的样子。
结论
我希望这篇文章能帮助您了解 HTML 的基础知识以及它的作用。现在您可以开始学习更高级的技术，例如 CSS 和 JavaScript，然后开始在 Web 开发中建立稳固的职业生涯。
非常感谢您的阅读，祝您度过愉快的时光。
