摘要:標(biāo)簽里有什么每一個(gè)文檔中,都有一個(gè)不可或缺的標(biāo)簽,它作為一個(gè)容器,主要包含了用于描述文檔自身信息元數(shù)據(jù)的標(biāo)簽,這些標(biāo)簽一般不會在頁面中被顯示出來,大多情況下是給瀏覽器和搜索引擎看的。目前我只觀察到淘寶網(wǎng)使用了這個(gè)標(biāo)簽。
head 標(biāo)簽里有什么?
每一個(gè) HTML 文檔中,都有一個(gè)不可或缺的標(biāo)簽: ,它作為一個(gè)容器,主要包含了用于描述 HTML 文檔自身信息(元數(shù)據(jù))的標(biāo)簽,這些標(biāo)簽一般不會在頁面中被顯示出來,大多情況下是給瀏覽器和搜索引擎看的。
可以用在 里面的標(biāo)簽有:
定義文檔的標(biāo)題,顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁上,一般會完整地概括整個(gè)網(wǎng)頁的內(nèi)容。
給頁面上所有相對 URL 的提供一個(gè)基礎(chǔ)。一份文檔中只能有一個(gè)
目前我只觀察到「淘寶網(wǎng)」使用了這個(gè)標(biāo)簽。
規(guī)定外部資源與當(dāng)前文檔的關(guān)系,常于鏈接樣式表,如下所示:
當(dāng)然還有很多其他的作用:
比如用于 SEO,主要給搜索引擎看的:
在網(wǎng)站中常有多個(gè) url 指向同一個(gè)頁面的情況,上述標(biāo)簽告知搜索引擎頁面的主 url 是什么,以便搜索引擎保留主要頁面而去除其他重復(fù)頁面。
提供 rss 訂閱的:
上述標(biāo)簽除搜索引擎可以看懂以外,也能被很多瀏覽器插件識別。
表示頁面 icon 的:
多數(shù)瀏覽器會讀取這個(gè) link 的資源并展示在頁面上。
對頁面提供預(yù)處理的:
提前對一個(gè)域名做 dns 查詢。強(qiáng)制對域名進(jìn)行預(yù)讀取在有的情況下很有用,。
比如, 在網(wǎng)站的主頁上,強(qiáng)制在整個(gè)網(wǎng)站上對頻繁引用的域名做預(yù)解析處理,即使它們不在主頁本身上使用。雖然主頁的性能可能不受影響,但是會提高站點(diǎn)整體性能。
包含文檔的樣式信息。
一種通用的元數(shù)據(jù)信息表示標(biāo)簽,一般以鍵值對出現(xiàn),如:
charset 屬性從 HTML5 開始,上述寫法被推薦使用,用于聲明當(dāng)前文檔所使用的字符編碼,推薦放在 中的第一位。
http-equiv屬性在 HTML4 中,上述代碼用于聲明字符集,但是現(xiàn)在已不被推薦。
除了 content-type ,還有其他幾個(gè)值:
content-language (已過時(shí))、set-cookie (已過時(shí))、default-style 、refresh 、content-security-policy
因?yàn)椴怀S茫跃筒灰灰唤榻B了,也挺容易理解,感興趣可以點(diǎn)擊 這里 了解。
name 屬性其實(shí) 標(biāo)簽可以被自由定義,只要讀取和寫入的雙方約定好 name 和 content 的格式就可以了。來看一個(gè)例子:
上面這種用法并不在 HTML 標(biāo)準(zhǔn)中,但是卻移動(dòng)端開發(fā)的事實(shí)標(biāo)準(zhǔn)。這里來解釋一下 content 中的內(nèi)容:
width :頁面寬度,可以是一個(gè)正整數(shù);也可以一個(gè)字符串 "device-width" ,表示跟設(shè)備寬度相等。
height :頁面高度,可以是一個(gè)正整數(shù);也可以一個(gè)字符串 "device-height" ,表示跟設(shè)備高度相等。
initial-scale :初始縮放比例。
minimum-scale : 最小縮放比例。
maximum-scale : 最大縮放比例。
user-scalable :是否允許用戶縮放。
name 屬性的值除了可以是 viewport 之外,還有相當(dāng)多的值:
application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。
同樣的,就不一一介紹了,感興趣可以點(diǎn)擊 這里 了解。
用于嵌入或引用可執(zhí)行腳本。來看幾個(gè) script 標(biāo)簽常見的全局屬性:
async
使瀏覽器使用另一個(gè)線程下載腳本,這時(shí)不會阻塞頁面渲染。當(dāng)腳本下載完成后,瀏覽器會暫停渲染,執(zhí)行腳本,執(zhí)行完畢后繼續(xù)渲染頁面。
async 無法保證腳本的執(zhí)行順序,哪個(gè)腳本先下載結(jié)束就會先執(zhí)行。
defer
同樣會使瀏覽器并行下載腳本,但是下載完畢不會立即執(zhí)行,而是會等到 DOM 加載完成后(即剛剛讀取完 標(biāo)簽)再執(zhí)行腳本。
defer 可以保證腳本的執(zhí)行順序就是它們在頁面上出現(xiàn)的順序。
src
定義引用外部腳本的地址,指定此屬性的 script 標(biāo)簽內(nèi)不應(yīng)再有嵌入的腳本。如果腳本文件使用了非英語字符,還應(yīng)該注明字符的編碼。如:
type
默認(rèn)值是 text/javascript
想了解更多關(guān)于 標(biāo)簽的詳細(xì)內(nèi)容可以點(diǎn)擊 這里 。
如果頁面上的腳本類型不受支持或者當(dāng)前在瀏覽器中關(guān)閉了腳本,則在此中定義腳本未被執(zhí)行時(shí)的替代內(nèi)容。
總結(jié)本文到這里就結(jié)束了,其實(shí)關(guān)于 link 和 meta 標(biāo)簽還有很多沒有介紹到,很多相關(guān)標(biāo)簽都是有特殊的需求,只有在特定情況下才會使用,比如移動(dòng)端開發(fā)就會用許多在 PC 上并不需要的標(biāo)簽。
當(dāng)然平時(shí)使用也主要是看需求,就拿我目前來說,只是些許用到過一些與 viewport 和 SEO 相關(guān)的標(biāo)簽。
鑒于此我推薦一個(gè)不錯(cuò)的學(xué)習(xí)方法,就是去各大網(wǎng)站查看它們的 head 標(biāo)簽里都有什么,遇到?jīng)]見過的就去搜索一下,熟悉起來會很快。
我這邊看過的網(wǎng)站有:「淘寶網(wǎng)」、「阿里巴巴」、「京東」、「網(wǎng)易嚴(yán)選」、「起點(diǎn)中文網(wǎng)」等。
(完)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/102757.html
摘要:標(biāo)簽里有什么每一個(gè)文檔中,都有一個(gè)不可或缺的標(biāo)簽,它作為一個(gè)容器,主要包含了用于描述文檔自身信息元數(shù)據(jù)的標(biāo)簽,這些標(biāo)簽一般不會在頁面中被顯示出來,大多情況下是給瀏覽器和搜索引擎看的。目前我只觀察到淘寶網(wǎng)使用了這個(gè)標(biāo)簽。 head 標(biāo)簽里有什么? 每一個(gè) HTML 文檔中,都有一個(gè)不可或缺的標(biāo)簽: ,它作為一個(gè)容器,主要包含了用于描述 HTML 文檔自身信息(元數(shù)據(jù))的標(biāo)簽,這些標(biāo)簽一般...
摘要:下面隆重介紹簡介是一個(gè)解析的第三方庫,它提供了一套非常方便的,可使用,以及類的操作方法來取出和操作數(shù)據(jù)。一個(gè)文檔的對象模型文檔由多個(gè)和組成其繼承結(jié)構(gòu)如下繼承繼承繼承一個(gè)包含一個(gè)子節(jié)點(diǎn)集合,并擁有一個(gè)父。 前言 使用python寫爬蟲的人,應(yīng)該都聽過beautifulsoup4這個(gè)包,用來它來解析網(wǎng)頁甚是方便。那么在java里有沒有類似的包呢?當(dāng)然有啦!而且也非常好用。下面隆重介紹jso...
摘要:依賴信息是一個(gè)數(shù)組,比如上面的依賴數(shù)組是源碼如下是利用正則解析依賴的一個(gè)函數(shù)時(shí)間出發(fā)函數(shù)主要看這個(gè)部分注釋是防止拷貝該時(shí)間的回調(diào)函數(shù),防止修改,困惑了一下。對的賦值需要同步執(zhí)行,不能放在回調(diào)函數(shù)里。 sea.js想解決的問題 惱人的命名沖突 煩瑣的文件依賴 對應(yīng)帶來的好處 Sea.js 帶來的兩大好處: 通過 exports 暴露接口。這意味著不需要命名空間了,更不需要全局變量。...
摘要:標(biāo)簽相關(guān)能優(yōu)化移動(dòng)瀏覽器的顯示。會導(dǎo)致添加到主屏后以全屏模式打開頁面時(shí)出現(xiàn)黑邊如果不是響應(yīng)式網(wǎng)站,不要使用或者禁用縮放。這一對事件可以用來檢測元素上的單擊和雙擊。 meta標(biāo)簽相關(guān) viewport:能優(yōu)化移動(dòng)瀏覽器的顯示。 如果不是響應(yīng)式網(wǎng)站,不要使用initial-scale或者禁用縮放。適配 iPhone 6 和 iPhone 6plus 則需要寫: 大部分 4.7~...
閱讀 833·2021-11-22 11:59
閱讀 3251·2021-11-17 09:33
閱讀 2320·2021-09-29 09:34
閱讀 1949·2021-09-22 15:25
閱讀 1967·2019-08-30 15:55
閱讀 1330·2019-08-30 15:55
閱讀 540·2019-08-30 15:53
閱讀 3353·2019-08-29 13:55