HTML页面元素解释
HTML 是 Web 开发的支柱，也是创建基于 Web 的文档的基本构建块。让我们快速看一下它是如何工作的。
（更多优质内容：java567.com）
HTML 有什么作用？
HTML 的主要作用是通过使用一组标签或元素来定义网页的结构和布局。这些标签代表不同类型的内容，例如标题、段落、图像、链接、表单和表格。
HTML 标记包含在尖括号 (<>) 中，由开始标记、内容和结束标记（由正斜杠“/”标识）组成。
通过使用 HTML，Web 开发人员可以定义网页的语义结构，指定标题、段落、列表和部分等元素。这是一个典型的 HTML 页面示例，其中<head>清楚地标识了<body>、<header>、 和<footer>部分：
<!DOCTYPE html>
<html>
<head>
<title>My Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h3>My Demo</h3>
</header>
<div>
<!--And a comment!
-->
Here are some important points to consider:<br>
<ul>
<li>Point One
<li>Point Two
<li>Point Three
</ul>
<footer>
<p>© 2023 My Demo. All rights reserved.</p>
<nav>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
此外，HTML 允许包含图像和视频等多媒体内容。它还允许您集成其他 Web 技术，例如用于样式的 CSS（层叠样式表）和用于交互的 JavaScript。
下面是一个示例代码片段，显示了将图像和视频合并到网页中。
<img src="test_image.png" width="800" alt="A test image">
<hr>
<div>
<video controls>
<source src="sample_video.mkv" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
HTML 文档由 Web 浏览器解释，呈现结构化内容并将其呈现给用户。它使浏览器能够理解网页上元素的层次结构、关系和表示。它确保一切都按预期显示，并且具有适当的交互性。
在本指南中，我们将探讨核心 HTML 元素，包括文档结构、外部链接、嵌入式媒体和简单表单。我们将通过实际创建东西来完成所有这些工作。不再有无聊的幻灯片。
了解 HTML 页面结构
好的。HTML 文档的基本结构（有时称为 HTML 骨架）为创建网页提供了基础。它由几个建立结构和定义页面内容的基本元素组成。
当我右键单击一个页面时，我可以选择查看页面源代码选项，然后我会发现自己正在查看 HTML 源代码。
好吧，从头开始。文档类型声明 (<!DOCTYPE>) 位于 HTML 文档的最开头，以指定正在使用的 HTML 版本。它确保浏览器正确解释页面。
HTML 标记是 HTML 文档的根元素。它包含页面的全部内容，并充当所有其他 HTML 元素的容器。
如果您一直滚动到页面底部，您会看到一个结束标记，如下所示：</html>。
HTML 代码的 <head> 部分是什么？
head 标签包含有关网页的元数据和其他不可见信息。它可以包括页面标题、字符编码、链接样式表和 JavaScript 文件等元素。head 标签中的内容对加载页面的用户不直接可见。
本例中的字符集标记使用UTF-8。那是怎么回事？HTML 字符编码是指在 HTML 文档中用于表示和显示字符、符号和特殊字符的方法。
这可能是这样的：
<!DOCTYPE html>
<html>
<head>
<title>My Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
由于 HTML 是一种基于文本的标记语言，因此它需要一种标准化的方式来表示大写字母 AZ、小写字母 az 和数字 0-9 等基本字母数字集之外的字符。
使用 UTF-8 编码时，ASCII 范围之外的字符使用多个字节表示。例如，像“A”这样的基本拉丁字符由单个字节 (0x41) 表示，而某些非拉丁字符可能需要两个或更多字节。
该<head>部分还可以包含样式信息，这些信息可以很容易地放在随附的 CSS 文件中。这可能是这样的：
<style>
.video-container {
width: 500px; /* Set the desired width */
}
</style>
body 标签表示网页的可见内容。它包含将在屏幕上显示的所有元素，例如文本、图像、标题、段落和链接。body 标签中的内容是用户访问页面时看到的内容。
标题标签，如 h1、h2 等，用于定义页面正文中各节的标题或标题。h1 标签代表主标题，h2 代表副标题，h3 代表副标题，依此类推。
段落标签，<p>定义页面正文中的文本块或内容。它们创建单独的段落，通常用于构建文本内容。
<p>Here is some new text:</p>
理解语义标签
最后，HTML5引入了一组语义标签，为内容提供更有意义和描述性的结构。这些标签包括页眉、导航、部分、文章、旁白和页脚。
尽管它们并不总是对页面在浏览器中的显示方式产生任何直接影响，但语义标签有助于组织并使我们更容易理解页面不同部分的用途。
以感叹号开头的标签实际上用于用户看不到的评论，并且不会影响浏览器阅读页面的方式。这是一个例子：
<!-- Here's a comment that's just for developers' eyes. -->
注释标签的目的是帮助我们记住各个代码段的用途和功能。这一切都是为了记录您的代码。
事实上，“可读性”是所有编写良好的 HTML 代码的重要特征。我们在这里看到的每个元素——无论是控制元数据、样式、脚本、导航还是纯文本——在智能呈现时都可以为用户看到的页面和代码本身的价值做出贡献。
