<header> HTML 中的标签

2025年3月25日 | 阅读 4 分钟

什么是 <header> 标签？

<header> 元素定义了页面或部分的页眉。通常包括徽标、搜索栏、导航链接等。

此标签不引入新的大纲部分。它所围绕部分的标题（h1>-h6> 元素）通常包含在 header> 元素中。但这并非必要。

<header> 标签是 HTML5 组件之一。一个 HTML 页面中可以使用多个 <header> 标签，并可放置在内容的任何位置。

<header> 标签不能用于另一个 <header> 标签以及 <address> 和 <footer> 组件之间。

语法

Header 标签成对使用。内容位于开始 (header) 标签和结束 (/header) 标签之间。

<head>
?..
</head>

HTML 文档结构

我们已经了解到，典型的 HTML 文档将具有以下结构。

<html>
   <head>
       Page-related header tags
   </head>
   <body>
       Page-related body tags
    </body>
   </html>

我们将在本文中详细介绍 header 部分，它由 HTML head> 标签表示。"head" 标签是多个重要标签的容器，包括 <title>、<meta>、<link>、<base>、<style>、<script> 和 <noscript>。

HTML 的 Header 元素

HTML 页面的 head 部分定义了文档信息，由 <head> 元素定义。<head> 标签包含 header 组件，例如 <title>、<meta>、<link>、<style> 等。

HTML 文档的 head 是文档的一部分，当页面在浏览器中加载时，其内容不会被用户看到。只包含有关 HTML 文档的 HTML 文档元数据信息。

1. HTML 中的 <title> 元素

使用 HTML 中的 title 元素为网页添加标题。搜索引擎使用页面标题对网站进行排名和索引。在下面的示例中，我们为一个 Hello World 网页提供了标题。

<!DOCTYPE html>
   <html>
   <head>
   <title>Hello World</title>
   </head>
   <body>
   </body>
   </html>

当您运行上述 HTML 代码时，浏览器中显示的结果如下。

输出

HTML <title> 元素通过 HTML <title> 元素指定文档的标题。页面的选项卡或浏览器的标题栏显示标题，标题必须仅为文本。HTML 页面必须包含 <title> 元素。

为浏览器工具栏创建标题
当页面添加到您的收藏夹时，它会显示页面的标题。
它将在搜索引擎结果中显示页面的标题。

因此，请确保标题尽可能精确和相关。

2. HTML 中的 <style> 元素

HTML style 元素用于为网页添加内部样式。在 HTML 页面中，style 组件始终包含在 head 标签内。如果我们只想为少数项目设置样式，内部样式是一个绝佳的选择。

示例

<!DOCTYPE html>
   <html>

   <head>
      <title>An example of a style tag</title>
      <style>
         .example{
            background-color: pink;
            padding: 30px;
         }
      </style>
   </head>
   <body>
      <p class = "example">Hello, World!</p>
   </body>
   </html>

当您运行上述 HTML 代码时，浏览器中显示的结果如下。

输出

3. HTML 中的 <link> 元素

在 HTML 页面中使用 link 元素链接外部文件、样式表、图标等。语法如下所示。

HTML 中的 rel 属性用于指定链接文档和 HTML 文档之间的连接。

示例

<!DOCTYPE html>
   <html>

   <head>
      <title>HTML link tag example</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <p>Welcome to the page</p>
   </body>
   </html>

上述程序将产生如下所示的结果。

输出

4. HTML 中的 <meta> 元素

HTML <meta> 标签包含浏览器和搜索引擎使用的信息或元数据，但不会显示在页面上。<meta> 元素通常用于描述字符集、页面描述、关键字、文档作者和视口设置。请看下面的示例以更好地理解。

<!DOCTYPE html>
   <html>

   <head>
      <title>An example of an HTML meta tag</title>

      <meta name = "keywords" content = "C, C++, Java, PHP, Python">

      <meta name = "description" content = "We can learn the above languages">

      <meta name = "author" content = "ABC">

      <meta http-equiv = "expires" content = "Tue, May 6th, 2008, 5:32:54 IST">

   </head>

   <body>
      <p>Welcome to the page</p>
   </body>
   </html>

输出

5. HTML 中的 <base> 元素

HTML base> 元素用于为相对链接提供基本 URL。如果基本 URL 设置在页面 head 元素内，则文档中的所有相对链接都将使用该 URL 作为其起点。

例如，如果 base 标签定义的 URL 是 www.abc.com，则页面上的每个相对 URL 都将以 www.abc.com/ 开头。一个 HTML 页面中只能有一个 base 元素，并且必须具有 href 和 target 属性。

示例

<!DOCTYPE html>
   <html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://en.wikipedia.org/wiki/Sachin_Tendulkar" />
   </head>

   <body>
      <img src = "C:\Users\Maram Ujwala\Pictures\Saved Pictures\Images/sachin.jpeg"                       h   height="200px" width="180px" alt = "sachin"/>
      <a href = "./">Sachin Tendulkar</a> 
      <p>click the link above </p>
   </body>

   </html>

输出

6. HTML 中的 <script> 元素

HTML script 元素可用于添加内部和外部脚本。在 HTML 页面中，script 标签始终位于 body 标签内。脚本打开元素中找到的 src 属性可用于包含外部脚本。

内部脚本

<script>
   Code
   </script>

外部脚本

示例

<!DOCTYPE html>
   <html>
   <head>
      <title>An example for HTML script tag</title>
      <script type = "text/JavaScript">
         function example() {
            alert("Hello");
         }
      </script>
   </head>
   <body>
      <input type = "button" onclick = "example();" name = "yes" value = "click" />
   </body>
   </html>

输出

当我们点击按钮时，会得到以下结果。

下一主题HTML hr 标签

<header> HTML 中的标签

什么是 <header> 标签？

HTML 文档结构

HTML 的 Header 元素

1. HTML 中的 <title> 元素

2. HTML 中的 <style> 元素

3. HTML 中的 <link> 元素

4. HTML 中的 <meta> 元素

5. HTML 中的 <base> 元素

6. HTML 中的 <script> 元素

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

<header> HTML 中的标签

什么是 <header> 标签？

HTML 文档结构

HTML 的 Header 元素

1. HTML 中的 <title> 元素

2. HTML 中的 <style> 元素

3. HTML 中的 <link> 元素

4. HTML 中的 <meta> 元素

5. HTML 中的 <base> 元素

6. HTML 中的 <script> 元素

相关帖子

HTML acronym 标签

HTML strong 标签

HTML rt 标签

HTML tfoot 标签

HTML param 标签

HTML source 标签

HTML thead 标签

HTML hr 标签

HTML blockquote 标签

HTML style 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器