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