亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

善用meta

fengxiuping / 918人閱讀

摘要：列表好的使用，能更好地提高頁面的可用性及被檢索的幾率。假設(shè)頁面使用了標(biāo)準(zhǔn)的，那么此定義效果等同假設(shè)頁面并沒有使用標(biāo)準(zhǔn)的，那么將使用來渲染。需要注意的是并不是所有搜索引擎都支持，比較保守的做法是配合使用。

前言

在移動(dòng)前端第一彈：viewport詳解中，我們講了viewport，那是一個(gè)關(guān)于meta的故事。這次我們會(huì)就將meta這個(gè)故事講得更廣闊、更有意思一些。

寫過HTML的童鞋，應(yīng)該都對(duì)這個(gè)不陌生，或用它來定義頁面編碼，或用它來定義搜索引擎抓取方式，或用它定義頁面關(guān)鍵字，描述等等。

meta列表

好的meta使用，能更好地提高頁面的可用性及被檢索的幾率。

這里并不會(huì)列出所有的meta使用方式，只挑選一些常用及實(shí)際意義比較大的講講，當(dāng)然也包括一些廠商私有定制的。

常規(guī) 聲明文檔使用的字符編碼

該聲明用來指定文檔的編碼，除了utf-8，可選值還有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

當(dāng)然，你可能還見過使用另外一種方式來定義文檔字符編碼：

相對(duì)于這種方式，更推薦你使用第1種，言外之意，就是推薦使用HTML5。

聲明頁面刷新或跳轉(zhuǎn)

該聲明用來指定頁面自刷新或者跳轉(zhuǎn)到其它頁面，其中的時(shí)間單位是s。

聲明頁面過期時(shí)間

該聲明用來指定頁面的過期時(shí)間，一旦網(wǎng)頁過期，從服務(wù)器上重新請(qǐng)求，其中時(shí)間必須使用GMT格式，或者直接是0（即不緩存）

聲明頁面是否緩存

上述語句都可以用來指定文檔不被緩存。一些仍然在使用HTTP/1.0的可以使用第1條，第2條由HTTP/1.1提供，常用值還有：public, no-cache, no-store等

聲明作者信息
聲明文檔關(guān)鍵字

多關(guān)鍵字之間以半角逗號(hào)分隔

聲明文檔描述

文檔描述內(nèi)容最好是完整的一句話，以不超過50個(gè)字符為宜

聲明使用的瀏覽器及版本

x-ua-compatible設(shè)置是從IE8開始增加的（很明顯，只適用于IE），對(duì)于過往的版本無法識(shí)別。
開發(fā)者可以通過設(shè)置x-ua-compatible來指定渲染引擎的類型和版本，并且因?yàn)樾枨蟛煌梢杂卸喾N不同的設(shè)置：

Case1:

當(dāng)直接指定content為IE的某個(gè)具體版本，如上述代碼第1條，客戶端的IE將會(huì)使用IE7.0標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染，并忽略Doctype定義。

當(dāng)指定的IE版本在客戶端IE中不存在時(shí)，IE將會(huì)嘗試將該值轉(zhuǎn)換為最為接近的版本。

例如指定一個(gè)錯(cuò)誤的或者低于5.0的IE版本，如上述代碼第2，3條，客戶端的IE將會(huì)使用IE5.0對(duì)頁面進(jìn)行渲染，由于IE5.0并沒有標(biāo)準(zhǔn)模式，所以將會(huì)直接使用quirks mode來渲染；
如果指定一個(gè)大于客戶端IE的版本，如上述代碼第4條，假定客戶端IE的最高版本為9.0，那么IE會(huì)將該值轉(zhuǎn)換為IE=9，即使用IE9.0標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染。

Case2:

當(dāng)指定的content值加了Emulate前綴時(shí)，如上述代碼，客戶端IE將會(huì)根據(jù)Doctype定義來決定如何來對(duì)頁面進(jìn)行渲染。假設(shè)頁面使用了標(biāo)準(zhǔn)的Doctype，那么此定義效果等同Case1；假設(shè)頁面并沒有使用標(biāo)準(zhǔn)的Doctype，那么將使用quirks mode來渲染。

Case3:

當(dāng)指定的content值為IE=Edge時(shí)，如上述代碼，客戶端的IE將會(huì)使用最高的標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染。

Case4:

當(dāng)指定的content值有多個(gè)版本時(shí)，如上述代碼，假定客戶端IE版本為8.0或者9.0，則使用IE7.0標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染；假定客戶端IE版本為10.0或者11.0，則直接使用對(duì)應(yīng)版本的標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染。

Case5:

當(dāng)指定的content值為IE=Edge, chrome=1時(shí)，如上述代碼，假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，否則，將會(huì)使用客戶端IE最高的標(biāo)準(zhǔn)模式對(duì)頁面進(jìn)行渲染。

聲明搜索引擎抓取方式

通知搜索引擎文檔是否需要被索引。可選值有：

all（默認(rèn)值，索引當(dāng)前頁并跟蹤鏈接，相當(dāng)于：index, follow）

none（忽略當(dāng)前頁，相當(dāng)于：noindex, nofollow）

index（索引當(dāng)前頁）

noindex（不索引當(dāng)前頁）

follow（跟蹤當(dāng)前頁鏈接，不論當(dāng)前頁是否被索引）

nofollow（不跟蹤當(dāng)前頁鏈接，不論當(dāng)前頁是否被索引）

如果聲明沖突，某些引擎可能會(huì)做嚴(yán)格處理：

類似上述代碼，在Google引擎中，會(huì)執(zhí)行noindex這個(gè)更為嚴(yán)格的聲明。

需要注意的是并不是所有搜索引擎都支持robots meta，比較保守的做法是配合robots.txt使用。

聲明搜索引擎抓取間隔

有時(shí)候你可能并不希望站點(diǎn)一直被搜索引擎抓取，而是每間隔一段時(shí)間才來訪問一次，這時(shí)，可以聲明revisit-after meta。

移動(dòng) 聲明viewport視口

該聲明用于指定在移動(dòng)設(shè)備上頁面的布局視口如何設(shè)置。對(duì)于viewport meta的詳細(xì)設(shè)置，請(qǐng)參考：viewport詳解

聲明添加到主屏幕的Web App標(biāo)題

iOS Safari允許用戶將一個(gè)網(wǎng)頁添加到主屏幕然后像App一樣來操作它。我們知道每個(gè)App下方都會(huì)有一個(gè)名字，iOS Safari提供了一個(gè)私有的meta來定義這個(gè)名字，代碼如下：

Android Chrome31.0，Android Browser5.0也開始支持添加到主屏幕了，但并沒有提供相應(yīng)的定義標(biāo)題的方式，所以如果你想統(tǒng)一iOS和Android平臺(tái)定義Web app名稱的方式，可以使用title標(biāo)簽來定義，代碼如下：

Web App名稱

但如果你想要網(wǎng)頁標(biāo)題和App名字不一樣的話，那就只有iOS才行。

聲明添加到主屏幕時(shí)隱藏地址欄和狀態(tài)欄（即全屏）

當(dāng)我們將一個(gè)網(wǎng)頁添加到主屏幕時(shí)，會(huì)更希望它能有像App一樣的表現(xiàn)，沒有地址欄和狀態(tài)欄全屏顯示，代碼如下：

該方案在 iOS 和 Android5.0+ 上都通用。

聲明添加到主屏幕時(shí)設(shè)置系統(tǒng)頂欄顏色

當(dāng)我們將一個(gè)網(wǎng)頁添加到主屏幕時(shí)，還可以對(duì) 系統(tǒng)顯示手機(jī)信號(hào)、時(shí)間、電池的頂部狀態(tài)欄 顏色進(jìn)行設(shè)置，前提是開啟了：

有了這個(gè)前提，你可以通過下面的方式來進(jìn)行定義：

content只有3個(gè)固定值可選：default | black | black-translucent

如果設(shè)置為 default，狀態(tài)欄將為正常的，即白色，網(wǎng)頁從狀態(tài)欄以下開始顯示；

如果設(shè)置為 black，狀態(tài)欄將為黑色，網(wǎng)頁從狀態(tài)欄以下開始顯示；

如果設(shè)置為 black-translucent，狀態(tài)欄將為灰色半透明，網(wǎng)頁將充滿整個(gè)屏幕，狀態(tài)欄會(huì)蓋在網(wǎng)頁之上；

該設(shè)置只在 iOS 上有效。

電話號(hào)碼識(shí)別

在 iOS Safari （其他瀏覽器和Android均不會(huì)）上會(huì)對(duì)那些看起來像是電話號(hào)碼的數(shù)字處理為電話鏈接，比如：

7位數(shù)字，形如：1234567

帶括號(hào)及加號(hào)的數(shù)字，形如：(+86)123456789

雙連接線的數(shù)字，形如：00-00-00111

11位數(shù)字，形如：13800138000

可能還有其他類型的數(shù)字也會(huì)被識(shí)別，但在具體的業(yè)務(wù)場(chǎng)景中，有些時(shí)候這是不必須的，所以你可以關(guān)閉電話自動(dòng)識(shí)別，然后在需要撥號(hào)的地方，開啟電話呼出和短信功能。

關(guān)閉電話號(hào)碼識(shí)別：

開啟撥打電話功能：

123456

開啟發(fā)送短信功能：

123456

在 Android （iOS不會(huì)）上，瀏覽器會(huì)自動(dòng)識(shí)別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當(dāng)你在這個(gè)字符串上長(zhǎng)按，會(huì)彈出發(fā)郵件的提示。

關(guān)閉郵箱地址識(shí)別：

開啟郵件發(fā)送：

dooyoe@gmail.com

如果想同時(shí)關(guān)閉電話和郵箱識(shí)別，可以把它們寫到一條 meta 內(nèi)，代碼如下：

附注

部分meta定義來自于trip

轉(zhuǎn)載：http://web.jobbole.com

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/49835.html

相關(guān)文章

  • Vue+Express全棧購物商城

    摘要：一前言提綱基于和框架寫的一個(gè)全棧購物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請(qǐng)證書全站升級(jí)到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個(gè)全棧購物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看 這個(gè)分支版本是一兩年前...

    Richard_Gao 評(píng)論0 收藏0

  • Vue+Express全棧購物商城

    摘要：一前言提綱基于和框架寫的一個(gè)全棧購物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認(rèn)證機(jī)制，來實(shí)現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請(qǐng)證書全站升級(jí)到，配置的協(xié)議。 一、前言提綱 基于Vue和Express框架寫的一個(gè)全棧購物商城，記錄項(xiàng)目過程中遇到的一些問題以及經(jīng)驗(yàn)和技巧。 二、歷史版本 基于Vue-CLI2.0:點(diǎn)我查看這個(gè)分支版本是一兩...

    luzhuqun 評(píng)論0 收藏0

  • 善用Object.defineProperty巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置

    摘要：我今天的工作又遇到一個(gè)難題。前端右下角這個(gè)按鈕被設(shè)置為禁用狀態(tài)。這個(gè)按鈕的可用狀態(tài)由屬性控制。而行執(zhí)行之前，還沒有這個(gè)的屬性。我成功找到了我在尋找的給添加了的代碼位置。 我今天的工作又遇到一個(gè)難題。前端UI右下角這個(gè)按鈕被設(shè)置為禁用(disabled)狀態(tài)。 showImg(https://segmentfault.com/img/remote/1460000016811187); 這...

    Turbo 評(píng)論0 收藏0

  • 善用Object.defineProperty巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置

    摘要：我今天的工作又遇到一個(gè)難題。前端右下角這個(gè)按鈕被設(shè)置為禁用狀態(tài)。這個(gè)按鈕的可用狀態(tài)由屬性控制。而行執(zhí)行之前，還沒有這個(gè)的屬性。我成功找到了我在尋找的給添加了的代碼位置。 我今天的工作又遇到一個(gè)難題。前端UI右下角這個(gè)按鈕被設(shè)置為禁用(disabled)狀態(tài)。 showImg(https://segmentfault.com/img/remote/1460000016811187); 這...

    happyhuangjinjin 評(píng)論0 收藏0

  • 善用CSS偽類，不用JS也能做出選項(xiàng)卡功能

    摘要：取決于你的高度咦還是不能動(dòng)因?yàn)槲覀冞€需要運(yùn)用的兩個(gè)重要技巧偽類和通用兄弟元素選擇器，才能讓選項(xiàng)卡與內(nèi)容塊做切換。加入偽類與通用兄弟元素選擇器我們?yōu)榧由蟼晤?，表示?dāng)這個(gè)被選中時(shí)等于對(duì)應(yīng)的標(biāo)簽被選中使才會(huì)呈現(xiàn)的樣式。 先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面 講到選項(xiàng)卡（...

    XUI 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<