資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學解釋HTML中<head>和<body>標籤的意義
HTML中最常用的兩個標籤是<head>和<body>。極少有行業級別的網站在其頁面上不使用<head>和<body>標籤。它們執行不同的任務，對於確定網頁的內容、外觀和行為至關重要。讓我們深入瞭解這篇文章，學習更多關於HTML中<head>和<body>標籤的意義。
<head>標籤的意義
<head>標籤是HTML頁面中所有頭部元素的容器。我們使用<head>…</head>標籤將其新增到HTML頁面。頭部標籤包含文件標題、樣式、指令碼和其他HTML元素。<head>元素是元資料的容器——關於資料的資料，位於<html>…</html>標籤之間。
以下元素可以放在<head>元素內：
<title> − 在每個HTML頁面中使用，定義內容的標題。
<style> − 用於向HTML文件應用簡單的樣式。
<base> − 為頁面上的所有連結指定預設URL和預設目標。
<link> − 定義當前文件和外部資源之間的關係。
<meta> − 定義關於HTML文件的元資料，通常用於指定字元集、頁面描述、關鍵詞、文件作者和視口設定。
<script> − 用於嵌入客戶端指令碼（JavaScript），它透過src屬性指向外部指令碼檔案。
<noscript> − 定義要顯示給在瀏覽器中停用了指令碼或使用不支援指令碼的瀏覽器的使用者的替代內容。<noscript>元素可以在<head>和<body>中使用。
示例
在下面的示例中，我們將<title>標籤放在<head>標籤內。
<!DOCTYPE html> <html> <head> <title>Welcome to Tutorials point</title> </head> <body>Welcome to Tutorials point</body> </html>
當我們執行上面的程式碼時，它將生成一個輸出，在網頁的標題欄上顯示文字。
示例
考慮另一個場景，我們將使用<style>標籤放在<head>標籤內。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #DE3163;
font-family: verdana;
font-size: 30px;
}
body {
background-color: #D5F5E3;
}
p {
color: #6C3483;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<p>The Best E-way Learning.!</p>
</body>
</html>
執行上面的程式碼後，輸出視窗將彈出，顯示應用了CSS樣式的文字。
示例
下面是一個我們將<script>標籤放在<head>標籤內的示例。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<button onclick="mytutorial()">CLICK</button>
<p id="tp"></p>
<script>
function mytutorial() {
document.getElementById("tp").innerHTML = "WELCOME.!";
}
</script>
</body>
</html>
當我們執行上面的程式碼時，它將生成一個輸出，其中包含網頁上的點選按鈕。當用戶點選按鈕時，指令碼被啟用並顯示一條訊息。
<body>標籤的意義
使用者訪問站點時看到的可見網頁內容包含在<body>標籤中。它包括文字、圖片、影片、連結等等。網頁的結構和設計由<body>標籤內包含的內容決定。
您可以在<body>標籤內使用各種HTML元素來組織您的資訊，包括標題（<h1>，<h2>…<h6>）、段落（<p>）、列表（<ul>，<ol>和<li>）、影像（<img>）、超連結（<a>）等等。此外，您可以使用適當的HTML標籤新增多媒體元件，如音訊和影片。
示例
讓我們來看下面的例子，我們將影像新增到網頁中。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
</style>
</head>
<body>
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="LOGO" width="300" height="150">
</body>
</html>
執行上面的程式碼後，將彈出一個輸出視窗，顯示上傳到網頁的影像。
示例
在下面的示例中，我們將音訊檔案新增到網頁中。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<audio controls>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
當我們執行上面的程式碼時，它將生成一個輸出，其中包含上傳到網頁的音訊檔案。
227 次瀏覽
