HTML頭部詳解


HTML頭部顧名思義,即包含在<head>元素里面的內容。它包含了像頁面的標題,CSS,指向自定義圖標的鏈接,元數據(描述 HTML 的數據,比如,作者,和描述文檔的重要關鍵詞), 腳本等。即以下幾類標簽:

<title>元素

<meta>元素

<link>元素

<script>元素

我們結合下面的HTML頭部標簽的結構來詳細聊一聊HTML頭部中的各個內容。

 

 

下面分別介紹。

1、<title>元素

我們之前已經了解過<title>,它可以用來給 html 文檔添加一個標題。

你可能會將它和給 body 添加標題的 <h1>元素混淆,有些時候<h1>也會被稱作網頁標題。但是它們是不同的。

當被加載到瀏覽器中的時候,元素 <h1> 會出現在頁面中 —— 通常它應該在一個頁面中只被使用一次,它被用來標記你的頁面內容的標題(故事的標題,新聞標題或者任何適當的方式)。

元素 <title> 是用來表示整個 HTML 文檔標題的元數據(不是文檔的內容)。

被作為建議的書簽名。

被用在搜索的結果中。

2、<meta>元素

元數據就是描述數據的數據,而 HTML有一個“官方的”方式來為一個文檔添加元數據—— <meta>元素,它是一個空元素。

<meta> 元素用來表示任何不能由其它 HTML 元相關元素,即:

不能用<base>, <link>, <script>, <style> , <title>等表示的元數據信息。

有很多不同種類的<meta>元素可以被包含進<head>元素中。

1)如果設置了 name 屬性,meta 元素提供的是文檔級別(document-level)的元數據,應用於整個頁面。

2)如果設置了 http-equiv 屬性,meta 元素則是編譯指令,提供的信息與類似命名的 HTTP 頭部相同。

3)如果設置了 charset 屬性,meta 元素是一個字符集聲明,告訴文檔使用哪種字符編碼。

4)如果設置了 itemprop 屬性,meta 元素提供用戶定義的元數據。

注意: 全局屬性 name 在<meta>元素中具有特殊的語義;另外,在同一個<meta>標簽中,name, http-equiv 或者 charset 三者中任何一個屬性存在時,itemprop屬性不能被使用。

<meta charset="utf-8">

3、<link>元素

<link>元素規定了當前文檔與外部資源的關系。

該元素最常用於鏈接樣式表,此外也可以被用來創建站點圖標(比如 PC 端的“favicon”圖標和移動設備上用以顯示在主屏幕的圖標) 。

<link> 元素經常位於文檔的頭部。

<link> 元素有 2 個屬性,rel="stylesheet"表明這是文檔的樣式表,而 href 包含了樣式表文件的路徑:

要鏈接一個外部的樣式表,你需要在你的<head>中包含一個<link>元素,

舉個例子:

<link href="main.css" rel="stylesheet">

增加自定義圖標

舉個例子: 

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

4、<script>元素

<script> 部分沒必要非要放在文檔頭部;

實際上,把它放在文檔的尾部(在 </body>標簽之前)是一個更好的選擇,這樣可以確保在加載腳本之前瀏覽器已經解析了 HTML 內容(如果腳本加載某個不存在的元素,瀏覽器會報錯)。

<script src="my-js-file.js"></script>

注意:<script>元素看起來像一個空元素,但它並不是,因此需要一個結束標記。你還可以選擇將腳本放入<script>元素中,而不是指向外部腳本文件。

綜上所述,HTML頭部實際上也就涉及到了4個內容,即<title>元素、<meta>元素,<link>元素和<script>元素。相對來說,內容也很通俗易懂,稍加分析就不難理解。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM