HTML - Header - 極客書

我們已經了解到，典型的HTML文檔將具有以下結構−

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

本章將詳細介紹由HTML<head>標記表示的頭部分。<head>標記是各種重要標記的容器，如<title>、<meta>、<link>、<base>、<style>、<script>和<noscript>標記。

The HTML <title> Tag

HTML<title>標記用於指定HTML文檔的標題。下面是一個給HTML文檔命名的例子−

Live Demo

<!DOCTYPE html>
<html>

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

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

</html>

這將產生以下結果&負;

The HTML <meta> Tag

HTML<meta>標記用於提供有關HTML文檔的元數據，其中包括有關頁面過期、頁面作者、關鍵字列表、頁面描述等信息。

下面是HTML文檔中標記的幾個重要用法;

Live Demo

<!DOCTYPE html>
<html>

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

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

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- 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">

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

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

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

這將產生以下結果&負;

The HTML <base> Tag

HTML<base>標記用於指定頁面中所有相對URL的基URL，這意味著在定位給定項時，所有其他URL將連接到基URL。

Live Demo

<!DOCTYPE html>
<html>

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

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

這將產生以下結果&負;

The HTML <link> Tag

HTML<link>標記用於指定當前文檔與外部資源之間的關係。下面是一個連結web根目錄中css子目錄中可用的外部樣式表文件的示例−

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

這將產生以下結果&負;

The HTML <style> Tag

HTML<style>標記用於指定當前HTML文檔的樣式表。下面是在<style>tag−中定義一些樣式表規則的示例;

Live Demo

<!DOCTYPE html>
<html>

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

</html>

這將產生以下結果&負;

注意−要了解層疊樣式表的工作原理，請查看css上的單獨教程

The HTML <script> Tag

HTML<script>標記用於包含外部腳本文件或定義HTML文檔的內部腳本。下面是一個使用JavaScript定義簡單JavaScript函數的示例−

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

這將產生以下結果，您可以嘗試單擊給定的按鈕−

注意−要了解JavaScript的工作原理，請查看JavaScript上的單獨教程