HTML 和 CSS 基础知识

HTML 和 CSS 是网页最基本的构建块，也是您成为 Web 开发人员的第一步。 HTML 提供网页的布局和内容，CSS 定义其样式和外观。在本教程中，我们将介绍 HTML 和 CSS 的基础知识，最后，您将能够设计在各种尺寸的设备上无缝运行的响应式网页。

什么是 HTML？

HTML 是用于创建网页的标准标记语言。它使用标题、段落、图像、链接、表单等 HTML 元素定义网页的结构和内容。

要开始编写 HTML 代码，您可以使用下面的 CodePen 演示：

代码演示？

在左侧，您将找到 HTML 源代码，它本质上是显示内容的蓝图。然后浏览器会将这个蓝图转换成您在右侧看到的网页。

您可以直接修改源代码，看看对显示的网页有何影响。

为 Web 开发准备您的计算机

当然，在实践中，您不能依赖 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 文档的快捷方式。您可以使用 ↑ 或 ↓ 键进行导航。选择第一个选项，应该会生成以下代码。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

请注意，VSCode 窗口的右下角有一个 Go Live 按钮。

单击此按钮将激活Live Server扩展。将启动本地开发服务器，托管您刚刚创建的 index.html 文件。

当然，文件现在还是空的，所以你看不到任何东西。在

之间添加一些内容和标签。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

保存更改，网页将自动刷新为新内容。

HTML 文档的结构

典型的 HTML 文档始终具有以下结构：

  
    . . .
  
  
    . . .
  

;标签定义文档类型。当网页浏览器遇到时，它就会明白该页面应该根据最新版本的HTML标准HTML5的规范来解析和显示。这可以确保现代浏览器正确解释网页的内容和布局。

文件中的所有其他内容都应包含在 内元素，由开始标记 () 和结束标记 () 定义。

lang 称为属性，其值为“en”。这告诉浏览器和搜索引擎英语是该网页使用的主要语言。

在 内元素，有两个子元素，

和和。 包含有关 HTML 文档的元数据和其他信息。此信息不会显示在浏览器中，但通常被搜索引擎用于 SEO（搜索引擎优化）目的。 另一方面，

包含用户可见的网页的主要内容，因此，它也是我们在本课程中要重点关注的 HTML 文件的部分.

元素和属性

让我们仔细看看前面的示例，并注意到 HTML 文档包含嵌套结构中的不同元素。在 HTML 中，大多数元素都有开始标签和结束标签：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

在这种情况下，是开始标签，是结束标签，它们一起形成一个 HTML 元素。元素可以在开始标签和结束标签之间保存文本内容。

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

元素还可以包裹其他元素，形成嵌套结构。

  
    . . .
  
  
    . . .
  

在开始标签内，您可以定义属性，这些属性用于指定元素的附加信息，例如其类、id 等。

<tag>. . .</tag>

属性通常位于键/值对中，并且值必须始终括在匹配的引号（双引号或单引号）内。

这些一般格式有一些例外。例如，
创建换行符的元素不需要结束标签。某些属性（例如 multiple）不需要值。我们将在本课程稍后遇到这些异常时讨论它们。

但是，您应该记住，如果某个元素确实需要结束标记，那么永远不应该将其遗漏。在大多数情况下，网页仍然可以正确呈现，但随着 HTML 文档的结构变得更加复杂，可能会出现意外错误。如果您有兴趣，请查看我们编写 HTML 和 CSS 的最佳实践指南。

进一步阅读

• 介绍级联样式表 (CSS)
• JavaScript 简介
• 什么是响应式设计
• 如何使用 HTML 和 CSS 构建交互式表单

以上是HTML 和 CSS 基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！