HTML頁面頭部使用的元素


HTML代表超文字標記語言,是一種基於web的指令碼語言。HTML由一組用於建立和組織網頁的元素組成。程式設計師通常更喜歡使用HTML設計網站,因為它靈活易用。

HTML文件由三個主要部分組成:頭部、主體和頁尾。以下是HTML文件的基本佈局:

<html>
   <head>
      <!--Header section-->
   </head>
   <body>
      <!--Body section-->
   </body>
   <footer>
      <!--Footer section-->
   </footer>
</html>

HTML <head> 元素是一個容器,包含以下元素:<title>、<style>、<link>、<meta>、<script> 和 <base>。讓我們用適當的例子逐一研究它們。

HTML <title> 元素

HTML <title> 元素用於定義文件的標題。它必須是文字格式,我們可以在瀏覽器標籤中看到指定的標題。

在HTML文件中使用<title>元素很重要,因為頁面標題用於搜尋引擎演算法來決定搜尋結果中列出頁面的順序。

注意:在一個HTML文件中,我們不能有多個<title>元素。

示例

在下面的示例中,我們使用HTML <title>元素為HTML文件定義標題。

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
</head>
<body>
   <p>Body content....</p>
</body>
</html>

HTML <style> 元素

HTML <style> 元素用於指定HTML文件的樣式資訊(CSS)。

示例

在下面的示例中,我們使用<style>元素將一些樣式(CSS)應用於HTML元素。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: aquamarine;
      }
      h1 {
         color: seagreen;
         font-weight: bolder;
      }
      p {
         color: seagreen;
      }
   </style>
</head>
<body>
   <h2>Tutorialspoint</h2>
   <p>Simply Easy Learning at your fingertips...</p>
</body>
</html>

HTML <link> 元素

HTML <link> 元素用於定義當前HTML文件和外部資源之間的關係。我們經常使用<link>標籤連結外部CSS樣式表。

示例

在下面的示例中,我們嘗試將當前HTML文件連結到外部樣式表。

以下是HTML文件:

<!DOCTYPE html>
<html>
<head>
   <style>
      h1,
      p {
         color: seagreen;
      }

      body {
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Simply Easy Learning at your fingertips...</p>
</body>
</html>

正如我們在輸出中看到的,外部CSS檔案中指定的樣式已應用於HTML元素。

HTML <meta> 元素

HTML <meta> 元素允許我們指定頁面描述、字元集、關鍵字、HTML文件的作者以及視口設定。

這些指定的元資料不會顯示在網頁上,而是由Web瀏覽器和搜尋引擎(關鍵字)使用。

示例

在下面的示例中,我們使用HTML <meta>標籤定義元資訊:

<!DOCTYPE html>
<html>
<head>
   <!--defines the character set-->
   <meta charset="UTF-8">  
   <!--Defines description for the web page-->
   <meta name="description" content="Technology on finger tips"> 
   <!--Defines keywords for search engines-->
   <meta name="keywords" content="HTML, CSS, JavaScript"> 
   <!--Defines the author of the webpage-->
   <meta name="author" content="Arjun"> 
   <!--Defines the viewport settings-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body>
   <p>body content...</p>
</body>
</html>

HTML <script> 元素

HTML <script> 元素允許我們嵌入客戶端指令碼(JavaScript)。<script> 元素包含JavaScript語句,或者透過src屬性連結到外部指令碼檔案。

示例

在下面的示例中,我們在<script>元素內包含指令碼(JavaScript)語句:

<!DOCTYPE html>
<html>
<head>
   <script>
      function btn() {
         document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
      }
   </script>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p id="demo">...</p>
   <button type="button" onclick="btn()">Click here!</button>
</body>
</html>


更新於:2023年8月4日

174 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.