標籤到底能作些什麼事情

時間 2020-08-12

標籤標籤到底作些什麼事情简体版

原文原文鏈接

<head>標籤詳解

在頁面加載完成的時候，標籤head裏的內容，是不會在頁面中顯示出來的。它包含了像頁面的 <title>(標題) ,CSS(若是你選擇用 CSS 來爲 HTML 內容添加樣式)，指向自定義圖標的連接和其餘的元數據(描述HTML的數據，好比，做者，和描述文檔的重要關鍵詞)。

什麼是HTML頭部

HTML頭部是包含在<head>元素裏面的內容。不像<body>元素的內容會顯示在瀏覽器中，head裏面的內容不會在瀏覽器中顯示，它的做用是包含一些頁面的元數據。

元數據：<title>

元素<title>是用來表示整個HTML文檔標題的元數據（不是文檔的內容）。
元素<title>也能夠用在：當你嘗試給某個網頁添加書籤，<title>標籤包裹的內容被做爲建議的書籤名。
元素<title>的內容也被用在搜索的結果中。

元數據：<meta>

元數據就是描述數據的數據，而HTML有一個「官方的」方式來爲一個文檔添加元數據 --> <meta>元素。

元素<meta>：能夠指定當前文檔中的字符編碼。css

<!-- 這個元素簡單的指定了文檔的字符編碼 —— 在這個文檔中被容許使用的字符集。 -->
<meta charset="utf-8">

元素<meta>：能夠天啊及做者和描述

元素<meta>包含了name和content特性：html

+ `name`：制定了meta元素的類型；說明該元素包含了什麼類型的信息。
+ `content`：指定了實際的元數據內容

```html
<!-- 指定做者在某些狀況下是頗有用的：若是你須要聯繫頁面的做者，問一些關於頁面內容的問題。 
一些內容管理系統可以自動獲取頁面做者的信息，而後用於某些用途。 -->

<!-- 指定包含關於頁面內容的關鍵字的頁面內容的描述是頗有用的，
由於它可能或讓你的頁面在搜索引擎的相關的搜索出現得更多 
（這些行爲術語上被稱爲 Search Engine Optimization, or SEO.） -->
<meta name="author" content="webxiang">
<meta name="description" content="A web developtor is learning HTML.">
```

其餘類型的元數據之Facebook 編寫的元數據協議 Open Graph Data 爲網站提供了更豐富的元數據。web

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

其餘類型的元數據之Twitter 還擁有本身的類型的專有元數據協議，當網站的 URL 顯示在 twitter.com 上時，它具備類似的效果。瀏覽器
```
<meta name="twitter:title" content="Mozilla Developer Network">
```

增長自定義圖標

爲了進一步豐富你的網站設計，你能夠在元數據中添加對自定義圖標的引用，這些將在特定的場合中顯示。

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

在HTML中應用CSS和JavaScript

現在，幾乎全部網站都會使用 CSS 讓網頁更加美觀，使用JavaScript讓網頁具備交互功能，好比視頻播放器，地圖，遊戲以及更多功能。這些應用在網頁中很常見，它們分別使用 <link>元素以及 <script> 元素。

<link>元素常常位於文檔的頭部。這個link元素有2個屬性，rel="stylesheet"代表這是文檔的樣式表，而 href包含了樣式表文件的路徑：ide
```
<link rel="stylesheet" href="my-css-file.css">
```
<script>部分不必非要放在文檔頭部；實際上，把它放在文檔的尾部（在 </body>標籤以前）是一個更好的選擇，這樣能夠確保在加載腳本以前瀏覽器已經解析了HTML內容（若是腳本加載某個不存在的元素，瀏覽器會報錯）。網站
```

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

爲文檔設置主語言

爲你的站點設定語言，這個能夠經過添加lang屬性到HTML開始標籤中來實現

<html lang="en-US">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。