HTML - 首页

HTML 头部是 HTML 文档的一部分，用于包含有关文档的元信息，例如标题、字符编码、样式和脚本链接以及其他元数据。<head> 标签用于定义文档的头部。

HTML <head> 标签用作元数据的容器，并放置在 html 标签之后。元数据基本上是头部部分中存在的数据的相关数据。

头部元素中提供的信息对于浏览器正确呈现页面以及搜索引擎和其他服务理解页面内容至关重要。不建议在 head 标签内包含文档其他部分的详细信息。

HTML 头部元素

以下是文档头部中常用的标签。

元素	描述
<title>	标题标签用于表示网页标题。
<meta>	指定元数据以及有关文档的其他重要信息。
<base>	对于 HTML 文档中的每个相对 URL，Base 标签定义一个绝对 (base) URL。
<style>	Style 标签包含 HTML 文档的样式信息。
<link>	指定当前文档和外部资源之间的关系。
<script>	Script 标签用于嵌入客户端脚本。

HTML 头部元素示例

以下是一些示例，展示了在 HTML 中使用不同头部元素的方法。

指定 HTML 文档的标题

HTML <title> 标签用于指定 HTML 文档的标题。标题必须描述网页的内容，其格式应仅为文本。它显示在浏览器标签的标题栏中。

以下示例展示了如何使用 <title> 标签为 HTML 文档指定标题。将此代码另存为文件后运行，即可在浏览器标签顶部看到标题。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Title Tag Example</title>
</head>

<body>
   <p>
      Save this code (.html) and run in your 
      browser to see title of the document
   </p>
</body>

</html>

添加文档元数据

HTML <meta> 标签用于提供有关 HTML 文档的元数据。元数据只不过是有关网页的其他信息，包括页面过期时间、页面作者、关键字列表、页面描述等等。此信息进一步用于搜索引擎优化。请记住，<meta> 标签指定的元数据不会显示在网页上，但它是机器可读的。

以下示例描述了在 HTML 文档中使用 <meta> 标签的一些重要用法。

<!DOCTYPE html>
<html>

<head>
   <!-- Provide list of keywords -->
   <meta name="keywords" 
         content="C, PHP, Perl, Python">

   <!-- Provide description of the page -->
   <meta name="description" 
         content="HTML by TutorialsPoint">

   <!-- Author information -->
   <meta name="author" 
         content="Tutorials Point">

   <!-- Page content type -->
   <meta http-equiv="content-type" 
         content="text/html; charset=UTF-8">

   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" 
         content="30">

   <!-- Setting expiry time for page-->
   <meta http-equiv="expires" 
         content="Wed, 21 June 2006 14:25:27 GMT">

   <!-- Prevent bots from indexing page -->
   <meta name="robots" 
         content="noindex, nofollow">
</head>

<body>
   <p>  
      Describing the use of HTML meta tag
   </p>

</body>

</html>

设置 URL 的基本地址

HTML <base> 标签用于指定页面中所有相对 URL 的基本 URL，这意味着在查找给定项目时，所有其他 URL 将与基本 URL 连接。我们只允许在 HTML 文档中使用一个 base 元素。<base> 标签最常用的属性是 href 和 target。

在此示例中，所有给定的页面和图像都将在使用基本 URL 'https://tutorialspoint.com/' 目录作为前缀后进行搜索。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Base Tag Example</title>
   <base href = "https://tutorialspoint.com" />
</head>

<body>
   <img src="/images/logo.png" 
        alt="Logo Image"/>
   <br> <br>

   <a href="/html/index.htm" 
      title="HTML Tutorial"/>
         HTML Tutorial
   </a>
   <br> <br>

   <a href="/css/index.htm" 
      title="CSS Tutorial"/>
         CSS Tutorial
   </a>

   <p>
      Instead of using full url, we reduced it 
      to "html/index.htm" because we mentioned 
      base url as "www.tutorialspoint.com"
   </p>
</body>

</html>

将外部资源链接到 HTML 文档

在 HTML 中，<link> 标签用于指定当前网页和另一个外部资源之间的关系。外部资源的来源放置在 href 属性中。<link> 标签的其他属性是 rel、type 和 media。它最常见的用途是将样式表嵌入到 HTML 文档中。

以下是一个示例，用于链接位于 Web 根目录中 CSS 子目录中的外部样式表文件。

<!DOCTYPE html>
<html>

<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" 
         type="text/css" 
         href="/css/style.css">
</head>

<body>
  <p>
      This is an example of linking stylesheet 
      to the current HTML document.
   </p>
</body>

</html>

向 HTML 文档添加样式

HTML <style> 标签用于为整个 HTML 文档或特定元素指定样式。其最常见的属性是 title 和 media。

在下面的示例中，我们将看到为 <p> 和 <div> 标签使用不同的样式方法。

<!DOCTYPE html>
<html>

<head>
   <style>
      /*Styles to every tags*/
      *{
         margin: 0px;
         padding: 10px;
      }  
      
      /*Style only applied to Body tag*/
      body{
         background-color: lightblue;
      }

      /*Styles applied to all div tags*/
      div{
         background-color: coral;
         border:5px solid;
      }

      /*Styles applied to 'myclass' class*/
      .myclass{
         border:5px solid;
      }
      
      /*Styles only applied to 'myid' id*/
      #myid{
         height:40px;
      }
   </style>
</head>

<body>
   <div></div>
   
   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <div id="myid">
      Height = 40 px
   </div>
   
</body>

</html>

注意：要了解级联样式表的工作原理，请查看我们免费的 CSS 教程。

HTML 中的客户端脚本

HTML <script> 标签用于包含外部脚本文件或为 HTML 文档定义内部脚本。脚本是可以执行代码，执行某些操作。

以下是一个示例，我们使用 script 标签定义一个简单的 JavaScript 函数。当用户单击按钮时，将弹出一个带有 Hello, World 消息的警告框。

<!DOCTYPE html>
<html>

<head>
   <script type="text/JavaScript">
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>

<body>
   <br>
   <input type="button" 
          onclick="Hello();" 
          value="Click Me"  />

</body>

</html>

注意：要了解 JavaScript 的工作原理，请查看我们免费的 JavaScript 教程。

打印页面