HTML 头部标签 - 易学教程，面试笔记经验！

在前面的章节中，我们已经了解到，典型的 HTML 文档将具有以下结构:

文件声明标签
<html>
   <head>
     文档头相关标签
   </head>
   <body>
      文档正文相关标签
   </body>
</html>

本章将详细介绍由 HTML <head> 标签表示的标头部分。 <head> 标签是各种重要标签的容器，例如 <title>、<meta>、<link>、<base>、<style>、<script> 和 <noscript> 标记。

HTML <title> 标签

HTML < title> 标签是用于指定 HTML 文档的标题。以下是为 HTML 文档提供标题的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title 标签例子</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

测试一下

HTML <meta> 标签

HTML <meta> 标签用于提供有关 HTML 文档的元数据，其中包括有关页面的过期时间、页面作者、关键字列表、页面描述等。

以下是 HTML 文档中 <meta> 标签的一些重要用法 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta 标签例子</title>

      <!-- 网站关键字 -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- 网站描述 -->
      <meta name = "description" content = "易学教程提供 Java面试题，PHP面试题，Python面试题，Mysql面试题，Redis面试题，分享面试经验笔记。">

      <!-- 作者声明 -->
      <meta name = "author" content = "易学教程">

      <!-- 文本类型 -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- 页面刷新声明 -->
      <meta http-equiv = "refresh" content = "30">

      <!-- 页面过期 -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2024 14:25:27 GMT">

      <!-- 告诉搜索引擎不要索引页面内容的标记 -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

测试一下

HTML <base> 标签

HTML <base> 标签用于指定页面中所有相对 URL 的基本 URL，这将会给页面中所有url 以base为基础拼接成新的url，看下面的例子。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base 标签例子</title>
      <base href = "https://www.yxjc123.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo"/>
      <a href = "/post/dj4dmq" title = "HTML 教程"/>HTML 教程</a> 
   </body>

</html>

测试一下

以上基本url为https://www.yxjc123.com/

后面的图像的url为 https://www.yxjc123.com/images/logo.png

链接的url为https://www.yxjc123.com/post/dj4dmq

HTML <link> 标签

HTML <link> 标签用于指定当前文档与外部资源之间的关系。这里一般放网站的css样式表地址，看下面的例子 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link 标签例子</title>
      <base href = "https://www.yxjc123.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

测试一下

HTML <style> 标签

HTML <style> 标签用于指定当前 HTML 文档的样式表。以下是在 <style> 标记内定义一些样式表规则的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style 标签例子</title>
      <base href = "https://www.yxjc123.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

测试一下

注意 - 要了解层叠样式表的工作原理，请查看 css 教程。

HTML <script> 标签

HTML 中提供的单独教程<script> 标签用于包含外部脚本文件或定义 HTML 文档的内部脚本。以下是我们使用 JavaScript 定义简单 JavaScript 函数的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script 标签例子</title>
      <base href = "http: //www.yxjc123.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

测试一下

您可以在其中可以尝试单击给定的按钮。

HTML 头部