lt;title> - 定義了HTML文檔的標題
使用 <title> 標簽定義HTML文檔的標題
<base> - 定義了所有鏈接的URL
使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。
<meta> - 提供了HTML文檔的meta標記
使用 <meta> 元素來描述HTML文檔的描述,關(guān)鍵詞,作者,字符集等。
HTML <head> 元素
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
定義了瀏覽器工具欄的標題
當(dāng)網(wǎng)頁添加到收藏夾時,顯示在收藏夾中的標題
顯示在搜索引擎結(jié)果頁面的標題
一個簡單的 HTML 文檔:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標題</title></head><body>文檔內(nèi)容......</body></html>
HTML <base> 元素
<base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<base target="_blank">
</head>
HTML <link> 元素
<link> 標簽定義了文檔與外部資源之間的關(guān)系。
<link> 標簽通常用于鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你需要指定樣式文件來渲染HTML文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta標簽描述了一些基本的元數(shù)據(jù)。
<meta> 標簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上,但會被瀏覽器解析。
META元素通常用于指定網(wǎng)頁的描述,關(guān)鍵詞,文件的最后修改時間,作者,和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他Web服務(wù)。
<meta>一般放置于 <head>區(qū)域
<meta> 標簽- 使用實例
為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網(wǎng)頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>標簽用于加載腳本文件,如: JavaScript。
<script> 元素在以下章節(jié)會詳細描述。
HTML head 元素
標簽 | 描述 |
---|---|
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關(guān)系 |
<meta> | 定義了HTML文檔中的元數(shù)據(jù) |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
管現(xiàn)代Web開發(fā)更加依賴于各種MVC框架,但是開發(fā)者仍然需要對HTML和DOM有基本的了解。然而,即使對有多年經(jīng)驗的前端開發(fā)人員來說,也會遇到一些不知道的情況。
HTML<head>元素用作元數(shù)據(jù)(關(guān)于數(shù)據(jù)的數(shù)據(jù))的容器。它用在<html>標簽和<body>標簽之間。
HTML文檔的頭部內(nèi)容在頁面加載時不會顯示在瀏覽器中。它僅包含有關(guān)HTML文檔的元數(shù)據(jù)。
元數(shù)據(jù)定義HTML文檔的標題,字符集,樣式,鏈接,腳本和其他元信息。
HTML頭部可以包含很多元數(shù)據(jù)信息,也可以很少或沒有信息,這取決于我們的需求。但是頭部對HTML文檔至關(guān)重要。
<head>元素包含了所有的頭部標簽元素。在<head>元素中你可以插入腳本(scripts),樣式文件(CSS),及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。
HTML<title>元素用于定義文檔的標題。它在所有HTML/XHTML文檔中使用。<title>元素必須放在<head>元素之間,并且一個文檔只能有一個title元素。
它定義了瀏覽器選項卡中的標題。
當(dāng)用戶將頁面添加到收藏夾時,它為頁面提供標題。
它在搜索引擎結(jié)果中顯示頁面的標題。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>文檔內(nèi)容......</body>
</html>12345678復(fù)制代碼類型:[html]
HTML<base>元素
<base>標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123復(fù)制代碼類型:[html]
HTML<link>元素
HTML<link>元素用于將外部樣式表鏈接到您的網(wǎng)頁。<link>元素包含兩個主要屬性,即“rel”和“href”。rel屬性表示它是一個樣式表,href給出該外部文件的路徑。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123復(fù)制代碼類型:[html]
HTML<style>元素
HTML<style>元素用于為HTML頁面設(shè)置樣式。<style>元素只影響當(dāng)前頁面HTML頁面的CSS屬性。如果要對多個頁面應(yīng)用CSS,則應(yīng)使用單獨的CSS文件。
<head>
<style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123復(fù)制代碼類型:[html]
HTML<meta>元素
HTML<meta>元素用于指定網(wǎng)頁上的字符集,頁面描述,關(guān)鍵字,作者和其他元數(shù)據(jù)。
搜索引擎和其他Web服務(wù)使用元數(shù)據(jù)來更好地對網(wǎng)頁進行排名。
<meta>標簽提供的元數(shù)據(jù)不顯示在頁面上,但會被瀏覽器解析。
<meta>一般放置于<head>區(qū)域。
<meta>標簽定義字符集:
<meta charset="UTF-8"> 1復(fù)制代碼類型:[html]
charset屬性指定字符編碼。在此示例中,我們將其設(shè)置為“UTF-8”,這意味著它可以顯示任何語言。
<meta>標簽定義搜索引擎關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1復(fù)制代碼類型:[html]
<meta>標簽定義網(wǎng)頁描述內(nèi)容:
<meta name="description" content="免費 Web & 編程 教程">1復(fù)制代碼類型:[html]
<meta>標簽定義網(wǎng)頁作者:
<meta name="author" content="Runoon">1復(fù)制代碼類型:[html]
<meta>標簽定義每30秒鐘刷新頁面:
<meta http-equiv="refresh" content="30">1復(fù)制代碼類型:[html]
元刷新用于向瀏覽器提供指令,以在給定的時間間隔后自動刷新頁面。如上例所示,它將在30秒后自動刷新。
<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1復(fù)制代碼類型:[html]
如果添加了URL,則在指定時間結(jié)束后重定向到該頁面。
<meta>標簽定義設(shè)備尺寸
HTML5中引入了此方法,以通過使用<meta>標簽來控制視窗大小。視窗是用戶在網(wǎng)頁上的可見區(qū)域。它隨設(shè)備的不同而變化,在手機上的顯示尺寸明顯小于計算機屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1復(fù)制代碼類型:[html]
<meta>視窗元素如何設(shè)定和控制頁面的尺寸和縮放比例。
width=device-width是用來設(shè)置頁面的寬度將與設(shè)備的屏幕寬度保持一致。
當(dāng)最初由瀏覽器加載頁面時,initial-scale=1.0用于設(shè)置初始縮放級別。
HTML<script>元素
<script>標簽用于加載腳本文件,如:JavaScript。
<script>元素在以后的章節(jié)中會詳細描述。
HTMLhead元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關(guān)系 |
<meta> | 定義了HTML文檔中的元數(shù)據(jù) |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
「鏈接」
、定義
<meta> 標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他 web 服務(wù)。
2、作用
meta里的數(shù)據(jù)是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部內(nèi)容,例如我們?yōu)轫撁嬷刑砑尤缦耺eta標簽:
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段,并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r,這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content,當(dāng)然并不是說meta標簽里一定要有content,而是當(dāng)有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內(nèi)容,對一些自定義的,或者需要額外添加的http頭部內(nèi)容,需要發(fā)送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現(xiàn)在再舉個例子。例如我們不想使用js來重定向,用http頭部內(nèi)容控制,那么就可以這樣控制:
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后,5秒鐘后就會跳轉(zhuǎn)到指定頁面啦,效果可看W3school的例子
name
第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當(dāng)然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器,用webkit內(nèi)核進行解析,當(dāng)然前提是瀏覽器有webkit內(nèi)核才可以,不然就是沒有意義的啦。當(dāng)然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應(yīng)的瀏覽器的開發(fā)文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內(nèi)核控制Meta標簽說明文檔
常用meta標簽大總結(jié)
接下來就是常用的meta標簽大總結(jié)啦,我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產(chǎn)生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉(zhuǎn)碼
百度會自動對網(wǎng)頁進行轉(zhuǎn)碼,這個標簽是禁止百度的自動轉(zhuǎn)碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優(yōu)化部分
viewport
viewport主要是影響移動端頁面布局的,例如:
content 參數(shù):
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。