HTML 和 CSS 是网页最基本的构建块，也是您成为 Web 开发人员的第一步。 HTML 提供网页的布局和内容，CSS 定义其样式和外观。在本教程中，我们将介绍 HTML 和 CSS 的基础知识，最后，您将能够设计在各种尺寸的设备上无缝运行的响应式网页。
HTML 是用于创建网页的标准标记语言。它使用标题、段落、图像、链接、表单等 HTML 元素定义网页的结构和内容。
要开始编写 HTML 代码，您可以使用下面的 CodePen 演示：
代码演示？
在左侧，您将找到 HTML 源代码，它本质上是显示内容的蓝图。然后浏览器会将这个蓝图转换成您在右侧看到的网页。
您可以直接修改源代码，看看对显示的网页有何影响。
当然，在实践中，您不能依赖 CodePen 等工具来创建可用且功能齐全的 Web 应用程序。您需要更强大的东西，所以，让我们设置您的计算机进行 Web 开发。
首先，请确保您已安装浏览器。任何流行的网络浏览器（例如 Google Chrome、Microsoft Edge、Safari 或 Firefox）都足以完成本课程。您可以从链接的网站下载并安装浏览器。
此外，您还需要一个代码编辑器来编写和编辑代码。 Visual Studio Code 对于初学者（以及专业人士）来说是一个不错的选择。它是世界上最常用的代码编辑器。只需从其官方网站下载适合您操作系统的安装程序即可。
安装 VSCode 后，请确保还安装 Live Server 扩展。导航到左侧边栏上的扩展选项卡，然后在搜索框中输入Live Server。从那里，您将能够下载并安装扩展程序。
Live Server 将创建一个具有自动重新加载功能的本地开发服务器。例如，创建一个新的工作目录并使用 VSCode 打开它。
在此目录下创建一个名为index.html的新文件。 .html 扩展名表明这是一个 HTML 文档。输入！在 VSCode 中，你会看到这样的建议：
这是快速创建 HTML 文档的快捷方式。您可以使用 ↑ 或 ↓ 键进行导航。选择第一个选项，应该会生成以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
请注意，VSCode 窗口的右下角有一个 Go Live 按钮。
单击此按钮将激活Live Server扩展。将启动本地开发服务器，托管您刚刚创建的 index.html 文件。
当然，文件现在还是空的，所以你看不到任何东西。在
之间添加一些内容和<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
保存更改，网页将自动刷新为新内容。
典型的 HTML 文档始终具有以下结构：
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
;标签定义文档类型。当网页浏览器遇到时，它就会明白该页面应该根据最新版本的HTML标准HTML5的规范来解析和显示。这可以确保现代浏览器正确解释网页的内容和布局。
文件中的所有其他内容都应包含在 内元素，由开始标记 () 和结束标记 () 定义。
lang 称为属性，其值为“en”。这告诉浏览器和搜索引擎英语是该网页使用的主要语言。
在 内元素，有两个子元素，
和和。 <头>包含有关 HTML 文档的元数据和其他信息。此信息不会显示在浏览器中，但通常被搜索引擎用于 SEO（搜索引擎优化）目的。 另一方面， 包含用户可见的网页的主要内容，因此，它也是我们在本课程中要重点关注的 HTML 文件的部分.让我们仔细看看前面的示例，并注意到 HTML 文档包含嵌套结构中的不同元素。在 HTML 中，大多数元素都有开始标签和结束标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
在这种情况下，是开始标签，是结束标签，它们一起形成一个 HTML 元素。元素可以在开始标签和结束标签之间保存文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
元素还可以包裹其他元素，形成嵌套结构。
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
在开始标签内，您可以定义属性，这些属性用于指定元素的附加信息，例如其类、id 等。
<tag>. . .</tag>
属性通常位于键/值对中，并且值必须始终括在匹配的引号（双引号或单引号）内。
这些一般格式有一些例外。例如，
创建换行符的元素不需要结束标签。某些属性（例如 multiple）不需要值。我们将在本课程稍后遇到这些异常时讨论它们。
但是，您应该记住，如果某个元素确实需要结束标记，那么永远不应该将其遗漏。在大多数情况下，网页仍然可以正确呈现，但随着 HTML 文档的结构变得更加复杂，可能会出现意外错误。如果您有兴趣，请查看我们编写 HTML 和 CSS 的最佳实践指南。
以上是HTML 和 CSS 基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！
