如何将 HTML 元素添加到您的网页


该系列的一部分:
如何使用 HTML 构建网站

本教程系列将指导您使用 HTML(用于在 Web 浏览器中显示文档的标准标记语言)创建和进一步自定义该网站不需要有任何编码经验,但如果您想重新创建演示网站,我们建议您从本系列开头开始

在本系列结束时,您应该有一个准备好部署到云的网站,并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能(例如 CSS 和 JavaScript)奠定坚实的基础。

本教程将引导您完成<head>向网页添加元素的步骤,这将为我们创建一个部分,以包含有关我们 Web 文档的机器可读信息此信息主要由浏览器和搜索引擎用于解释页面内容。放置在<head>元素内的内容在网页上将不可见。

注意:HTML<head>元素是一种语义元素,它告诉浏览器和开发人员其内容含义目的语义元素用于帮助 HTML 文档的人类可读性,为浏览器提供解释内容的更多信息,提高站点可访问性(屏幕阅读器使用语义标签),并可以帮助 SEO 定位。

<head>标签内添加开始和结束<html>标签。接下来,在<head>标签中添加两行额外的 HTML 代码,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sammy’s First Website</title>
  </head>
</html> 

请注意,您已将各种 HTML 元素相互嵌套。<title><meta>元件嵌套在<head>元素的内部,并且所述<head>元件嵌套在内部<html>元件。随着教程的进行,我们将经常嵌套元素。

现在让我们暂停一下,以了解我们刚刚添加的代码的用途。开始<head>标记之后的代码行<meta charset="utf-8">——将文档的字符集指定为 UTF-8,这是一种支持来自各种书面语言的大多数字符的 Unicode 格式。

下一行代码使用<title>元素设置 HTML 文档的标题您插入到此元素中的内容将显示在浏览器选项卡上,并作为搜索结果中的网站标题显示,但不会显示在网页本身上。确保将“Sammy’s First Website”替换为您的姓名或您正在构建的网站的名称。

尽管开发人员经常在该<head>部分添加附加信息,但我们现在有足够的信息来创建基本的 HTML 网页。在进入下一部分之前保存您的文件。如果您尝试在浏览器中加载文件,您应该会收到一个空白页面。

您现在应该知道 HTML <head> 元素的用途以及如何将其添加到 HTML 文件中。

觉得文章有用?

点个广告表达一下你的爱意吧 !😁