为什么在 HTML 页面中使用 head 标签？

<head> 标签是 HTML 页面中所有头部元素的容器。我们使用 <head>…</head> 标签将其添加到 HTML 页面中。head 标签包含文档标题、样式、脚本和其他 HTML 元素。

<head> 元素是元数据的容器 - 关于数据的数据，它位于 <html>…</html> 标签之间。

以下元素可以放在 <head> 元素内：

  • <title> − 在每个 HTML 页面中使用，定义内容的标题。

  • <style> − 用于为 HTML 文档应用简单的样式。

  • <base> − 为页面上的所有链接指定默认 URL 和默认目标。

  • <link> − 定义当前文档和外部资源之间的关系。

  • <meta> − 定义关于 HTML 文档的元数据，通常用于指定字符集、页面描述、关键词、文档作者和视口设置。

  • <script> − 用于嵌入客户端脚本（JavaScript），它通过 src 属性指向外部脚本文件。

  • <noscript> − 定义要显示给在浏览器中禁用了脚本或使用不支持脚本的浏览器的用户的备用内容。<noscript> 元素可以在 <head> 和 <body> 中使用。

示例

以下是包含 head 标签内 title 标签的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Articles-title of the document</title>
</head>
<body>
</body>
</html>

示例

在下面的示例程序中，我们在 head 标签内使用了 style 标签。

<html>
<head>
   <style>
      h1 {color:aquamarine; background: #232323}
   </style>
</head>
<body>
   <h1>HTML Articles</h1>
</body>
</html>

示例

在下面的示例程序中，我们在 head 标签内使用了 script 标签。

<!DOCTYPE html>
<html>
<head>
   <button onclick="myFunction()">Click here</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         document.getElementById("demo").innerHTML = "HTML Articles";
      }
   </script>
</head>
</html>

单击“点击此处”按钮后，将显示文本“Html 文章”。

更新于： 2022年11月11日

2K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告