HTML 在页面的头部使用的元素

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

HTML文档由三个主要部分组成：头部、主体和页脚。以下是一个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>元素非常重要，因为搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。

注意 – 在HTML文档中不能有多个<title>元素。

示例

在下面的示例中，我们使用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> 元素向 HTML 元素应用一些样式（CSS）。

<!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文档的作者以及视口设置。

这些指定的元数据不会显示在网页上，而是被Web浏览器和搜索引擎（关键词）使用。

示例

在下面的示例中，我们使用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>