HTML 页面 head 部分使用的元素

htmlweb developmentfront end technology更新于 2024/11/16 6:36:17

HTML 代表超文本标记语言，是一种基于 Web 的脚本语言。HTML 包含一组用于创建和构建网页的元素。程序员通常更喜欢使用 HTML 来设计网站，因为它灵活且易于使用。

HTML 文档由三个主要部分组成:head、body 和 footer。以下是 HTML 文档的基本布局:

<html>
   <head>
      <!--Header section-->
   </head>
   <body>
      <!--Body section-->
   </body>
   <footer>
      <!--Footer section-->
   </footer>
</html>

HTML <head> 元素是以下元素的容器 - <title>、<style>、<link>、<meta>、<script> 和 <base>。让我们通过适当的示例逐一了解它们。

HTML <title> 元素

HTML <title> 元素用于定义文档的标题。它必须是文本格式，我们可以在浏览器选项卡中看到指定的标题。

在 HTML 文档中使用 <title> 元素非常重要，因为搜索引擎算法会使用页面标题来决定在搜索结果中列出页面的顺序。

注意 - 我们不能有多个 <title> HTML 文档中的元素。

示例

在下面的示例中，我们使用 HTML <title> 元素为 HTML 文档定义标题。

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
</head>
<body>
   <p>Body content....</p>
</body>
</html>

HTML <style> 元素

HTML <style> 元素用于指定 HTML 文档的样式信息 (CSS)。

示例

在下面的示例中，我们使用 <style> 元素将一些样式 (CSS) 应用于 HTML 元素。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: aquamarine;
      }
      h1 {
         color: seagreen;
         font-weight: bolder;
      }
      p {
         color: seagreen;
      }
   </style>
</head>
<body>
   <h2>Tutorialspoint</h2>
   <p>Simply Easy Learning at your fingertips...</p>
</body>
</html>

HTML <link> 元素

HTML <link> 元素用于定义当前 HTML 文档与外部资源之间的关系。我们经常使用 <link> 标签链接外部 CSS 样式表。

示例

在下面的示例中，我们尝试将当前 HTML 文档链接到外部样式表。

以下是 HTML 文档 -

<!DOCTYPE html>
<html>
<head>
   <style>
      h1,
      p {
         color: seagreen;
      }

      body {
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Simply Easy Learning at your fingertips...</p>
</body>
</html>

正如我们在输出中看到的，外部 CSS 文件中指定的样式已应用于 HTML 元素。

HTML <meta> 元素

HTML <meta> 元素允许我们指定页面描述、字符集、关键字、HTML 文档的作者以及视口设置。

这些指定的元数据不会显示在网页上，而是由网络浏览器和搜索引擎(关键字)使用。

示例

在下面的示例中，我们使用 HTML <meta> 标签定义元信息 -

<!DOCTYPE html>
<html>
<head>
   <!--defines the character set-->
   <meta charset="UTF-8">  
   <!--Defines description for the web page-->
   <meta name="description" content="Technology on finger tips"> 
   <!--Defines keywords for search engines-->
   <meta name="keywords" content="HTML, CSS, JavaScript"> 
   <!--Defines the author of the webpage-->
   <meta name="author" content="Arjun"> 
   <!--Defines the viewport settings-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body>
   <p>body content...</p>
</body>
</html>

HTML <script> 元素

HTML <script> 元素允许我们嵌入客户端脚本 (JavaScript)。<script> 元素可以包含 JavaScript 语句，也可以通过 src 属性链接到外部脚本文件。

示例

在以下示例中，我们将脚本 (JavaScript) 语句包含在 <script> 元素中 -

<!DOCTYPE html>
<html>
<head>
   <script>
      function btn() {
         document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
      }
   </script>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p id="demo">...</p>
   <button type="button" onclick="btn()">Click here!</button>
</body>
</html>