HTML <head>標籤

admin發表於2018-08-04
HTML

在HTML 基本結構一章節，已經對<head>標籤的作用了一個巨集觀的介紹。

下面再來介紹一下它內部元素的具體作用。

一.<head>包含的元素:

<head>標籤內主要包含以下幾種型別的元素:

（1）.<title>:規定網頁的標題。

（2）.<meta>:主要給瀏覽器解析或者搜尋引擎提供相關資訊。

（3）.<link>:從外部引入CSS檔案。

（4）.<style>:內部定義CSS程式碼。

（5）.<script>:從外部引入js檔案或者直接定義js程式碼。

（6）.<base>:為當前文件的所有連結設定基準連結。

二.<title>標籤:

此標籤用於定義網頁的標題，主要目的是告訴使用者此網頁是做什麼用的，或者主要主題是什麼。

它對於搜尋引擎優化有著舉足輕重的作用，當然SEO不是本教程的內容，這裡不多介紹。

三.<meta>標籤:

此標籤規定的內容不會在展現給使用者，它主要內容是告訴瀏覽器或者搜尋引擎一些網頁的資訊。

[HTML] 純文字檢視 複製程式碼
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />

（1）.第一個meta告訴瀏覽器是採用utf-8編碼。

（2）.第二個meta告訴瀏覽器本文的作者是誰。

<meta>的內容很多，具體可以參閱HTML <meta>一章節。

四.<style>標籤:

此標籤用於定義CSS程式碼，來控制頁面的表現，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

在<style>標籤中建立了一些css程式碼用來定義div元素的相關樣式。

關於CSS知識可以參閱CSS教程版塊。

五.<link>標籤:

此標籤用於引入外部css檔案，雖然可以在<style>標籤中直接定義CSS程式碼，但是如果CSS程式碼比較龐大，那麼勢必會造成頁面的龐大，不僅不容易管理，並且也無法重複利用CSS程式碼，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" type="text/css" href="common.css" />

六.<script>標籤:

此標籤不但能直接定義js程式碼，也能夠引入外部js檔案，當然格式有所不同。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementById("ant");
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    odiv.style.display="none"
  }
}
</script>
</head>
<body>
<div id="ant">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼，點選按鈕可以隱藏div元素；js程式碼直接定義在<script>標籤內。

如果js程式碼比較龐大，或者需要重複利用，最好的方式就是引入外部js檔案，如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
<script src="portal.js" type="text/javascript"></script>
</head>
<body>
<div id="ant">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面就是引入外部js檔案；僅僅是一個引入方式演示，具體程式碼沒有實現。

七.<base>標籤:

此標籤可以為當前文件的所有連結設定基準連結，對於基準連結的理解是關鍵。

在網頁程式碼中一般使用相對連結連獲取一個檔案，例如:

[HTML] 純文字檢視 複製程式碼
<img src="img.jpg" />

上面是再簡單不過的用法，其實這個連結是不完整的，因為在實際解析的時候瀏覽器會將這個路徑解析為絕對路徑，例如網站地址是http://www.softwhy.com，那麼瀏覽器就會將相對轉換為絕對地址:

[HTML] 純文字檢視 複製程式碼
<img src="http://www.softwhy.com/img.jpg" />

網站的url就是基準連結，這是預設的，當然可以人為的規定基準連結，<base>標籤就派上用場了。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<base href="http://www.163.com">
</head>
<body>
<img src="img.jpg" />
</body>
</html>

以上程式碼通過<base>標籤將基準連結設定為網易地址，那麼這個圖片的地址就是:

[HTML] 純文字檢視 複製程式碼
http://www.163.com/img.jpg

注意：<base>標籤僅對相對地址有效，對於絕對地址是無效的。

相關文章