在本文中，您将了解 meta HTML 中的标签是什么以及如何使用它们。然后，我们将介绍 meta 每个新 HTML 项目都需要包含的一些最重要的标签。

让我们开始吧！

如何设置 HTML 项目

当设置新的 HTML 项目时，您会发现每次都必须包含相同的几个标签。

这些标签至关重要，您需要它们来按照最佳实践使您的 HTML 网站正常运行。

一些代码编辑器提供快捷方式，可自动填写并输入您在每个新 HTML 项目中使用的标签。这可以为您节省大量时间。

在 Visual Studio Code 编辑器 ，您可以按照以下方式执行此操作：

1. 确保您已经创建了一个以 结尾的文件 .html - 您将在这里编写所有 HTML 代码。
2. 在空文件中输入感叹号， ! .

3. 单击带有以下提及的是 Emmet 缩写的感叹号。

Emmet 是默认内置于 Visual Studio Code 的代码编辑器插件，它可以帮助您优化 HTML 工作流程。

然后您将看到以下代码已填写：

您在所选的浏览器中 .html 查看该

让我们放大到以下创建的代码部分：

这些 meta 标签到底是什么？它们为什么存在？在创建网页时它们起什么作用？

本文将重点讲解 meta 标签的基础知识以及它们在 HTML 文档中的使用原因。

HTML 中的标签 meta 是什么

meta 标签位于 head HTML 文档的标签内。

该 head 标签用于配置HTML文件。

您可以使用 head 标签为网页添加标题、链接到 CSS 样式表并定义有关 HTML 文档的更多信息。

meta 标签代表元数据。它们本质上用于定义和描述有关数据的数据，并用于为网页内的数据添加额外的信息。

有很多种 meta 。其中一些标签有助于改善您网站的 SEO（搜索引擎优化），确保您的网站内容与人们搜索的内容相关。

如何定义网站的字符集

<meta charset="UTF-8"> 定义将在网站中使用的字符集。

UTF-8 ，代表 8 位 Unicode 转换格式，是最新版本的 HTML（即 HTML5）使用的标准字符编码。

每个创建的网页都应包含此行，因为它可以确保世界上每种语言的每个字符都能在每个浏览器中正确显示。

通过使用通用 UTF-8 作为字符集，非拉丁语言的字符将不会失真。

Google Chrome 浏览器已自动将编码设置为 UTF-8 ，因此您在为此浏览器进行设计时无需担心这一点。但您仍需要 <meta charset="UTF-8"> 在每个 HTML 文件中包括该编码，以防其他浏览器不支持此功能。

例如，看看当未添加此行并且我用非拉丁语言（例如希腊语）写标题时 Safari 浏览器中发生的情况：

    
    
    


    
Γεία σου κόσμε!
 

当在浏览器中查看 HTML 文档时，所有字符都会被扭曲。

如何让微软的 Internet Explorer 知道使用哪个渲染视图

您可以使用 http-equiv="X-UA-Compatible" content="IE=edge" 元标记来选择并定义显示网页的 Internet Explorer 版本。

始终选择最新的一个，即 IE=edge .

微软的浏览器有很多版本。过去，不同的改进给网页设计师和网页开发者带来了很多麻烦，他们要确保网站能够在旧版浏览器上使用。

此标签将确保网站不会呈现为容易出现缺陷的旧版 Internet Explorer。

如何调整视口设置

如今，所有网站在所有设备上（尤其是手机上）看起来都很好非常重要。

因此，您需要 meta name="viewport" content="width=device-width, initial-scale=1.0" 在每个 HTML 文件中都包含该标签。

viewport 指的是网站在不同屏幕尺寸上的显示方式，以及用户可用的可视区域大小。

每个设备的视口都不同。例如，移动设备的视口较小，而台式电脑的视口较大。

content="width=device-width 是确保网站在移动设备上显示良好的第一步。

它可以防止从移动设备查看的网站看起来像在笔记本电脑上看到的一样——小而远的缩小。

这可确保 HTML 将适应设备屏幕的宽度。

initial-scale=1.0 设置网页的缩放方式，并设置浏览器首次加载页面时的初始缩放比例。

要添加到 HTML 项目中的 meta 附加

如何添加网页描述

在您的网页上使用元描述标签可帮助搜索引擎找出您的网站并根据其他网站对其进行排名。它主要用于 SEO（搜索引擎优化）目的。

元描述标签用于以简洁明了的方式解释您的网站内容。

元描述标签可能​​看起来像这样：

您使用 name 和 content 属性，并将文本值传递给 content 显示在搜索结果中：

撰写网站描述时需要考虑的事项

• 确保您的网站描述简短且不超过 160 个字符。
• 包含人们在搜索您的网站提供的服务时经常使用的有用的关键字和关键短语。
• 清楚地解释您的网站的作用和背后的使命。重要的是要让大家了解您的网站与众不同之处和您提供的价值。
• 与您的品牌的声音和基调保持一致。
• 最重要的是，坚持描述您的网站实际提供的内容。不要试图通过只追求在搜索和排名中名列前茅来欺骗您的读者。

如何添加网站作者的姓名

另一个有用的 meta 元素是作者的姓名。

这可能看起来如下：

了解该页面的作者会很有帮助。

此信息分享了谁创建并建立了网站、谁创作了内容或版权属于谁。

结论

总而言之，所有 HTML 文档至少需要包含以下三个 meta 标签：

• <meta charset="UTF-8"> ，指定字符集。
• <meta name="description>" ，添加网站以及网站向读者/客户提供的服务的清晰描述。
• <meta name="viewport> ，这是网站能够在各种屏幕设备上使用所需要采取的第一步。

要了解有关 HTML 和 CSS 的更多信息，请查看 响应式网页设计认证 ，您可以在其中以互动的方式学习，同时构建有趣的项目。

感谢您的阅读并祝您编码愉快！