欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5擴(kuò)展itemscope,?itemtype,?itemprop微數(shù)據(jù)的解釋和應(yīng)用

 更新時(shí)間：2024年12月28日 09:14:43   作者：張?chǎng)涡? 
微數(shù)據(jù)是一種用于在HTML頁(yè)面中標(biāo)記內(nèi)容的規(guī)范,以便機(jī)器能夠識(shí)別和理解特定類(lèi)型的信息,通過(guò)使用特定的標(biāo)簽、屬性和格式,微數(shù)據(jù)的語(yǔ)法包括itemscope、itemprop和itemtype等屬性,可以用來(lái)定義和組織數(shù)據(jù)項(xiàng),微數(shù)據(jù)的廣泛應(yīng)用可以改善搜索結(jié)果的質(zhì)量,為用戶(hù)提供更好的瀏覽體驗(yàn)

一、微數(shù)據(jù)是？

一個(gè)頁(yè)面的內(nèi)容，例如人物、事件或評(píng)論不僅要給用戶(hù)看，還要讓機(jī)器可識(shí)別。而目前機(jī)器智能程度有限，要讓其知會(huì)特定內(nèi)容含義，我們需要使用規(guī)定的標(biāo)簽、屬性名以及特定用法等。舉個(gè)簡(jiǎn)單例子，我們使用<h1>標(biāo)簽包裹頁(yè)面標(biāo)題信息就是為了讓機(jī)器識(shí)別（搜索引擎 – SEO）。

而微數(shù)據(jù)是什么呢？在我看來(lái)，微數(shù)據(jù)也是為了方便機(jī)器識(shí)別而產(chǎn)生的東西。其有特定的規(guī)范，有特定的格式。可以豐富搜索引擎的網(wǎng)頁(yè)摘要。

先來(lái)看看比較官方的解釋?zhuān)篐TML5 微數(shù)據(jù)規(guī)范是一種標(biāo)記內(nèi)容以描述特定類(lèi)型的信息，例如評(píng)論、人物信息或事件。每種信息都描述特定類(lèi)型的項(xiàng)，例如人物、事件或評(píng)論。例如，事件可以包含 venue、starting time、name 和 category 屬性。

微數(shù)據(jù)使用 HTML 標(biāo)記（常為 <span> 或 <div>）中的簡(jiǎn)單屬性為項(xiàng)和屬性指定簡(jiǎn)要的描述性名稱(chēng)。

上面的釋義過(guò)于學(xué)術(shù)化，我們可以將其擱置一邊，先看個(gè)簡(jiǎn)單的關(guān)于微數(shù)據(jù)的例子。平時(shí)，我們要在頁(yè)面上顯示對(duì)一個(gè)人的描述，HTML代碼可能如下：

<div>
  我的名字是王富強(qiáng)，但大家叫我小強(qiáng)。我的個(gè)人首頁(yè)是：
  <a >www.example.com</a>
  我住在上海市富貴新村。我是工程師，目前在財(cái)富科技公司上班。
</div>

而如果使用針對(duì)人物的微數(shù)據(jù)標(biāo)記，則HTML會(huì)如下：

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是<span itemprop="name">王富強(qiáng)</span>，
  但大家叫我<span itemprop="nickname">小強(qiáng)</span>。
  我的個(gè)人首頁(yè)是：
  <a  itemprop="url">www.example.com</a>
  我住在上海市富貴新村。我是<span itemprop="title">工程師</span>，
  目前在<span itemprop="affiliation">財(cái)富科技公司</span>上班。
</div>

您會(huì)發(fā)現(xiàn)，HTML代碼量多了不少，還出現(xiàn)了很多自定義的屬性，如itemscope, itemtype, itemprop等。這些屬性就是方面機(jī)器識(shí)別的特定的標(biāo)記。其含義等依次如下：
itemscope
定義一組名值對(duì)，稱(chēng)為項(xiàng)。

itemprop=”屬性名”
添加一個(gè)數(shù)據(jù)項(xiàng)屬性。這個(gè)屬性名可以是個(gè)單詞或是個(gè)URL，與元素包含的文本值相關(guān)：

對(duì)于大部分元素，屬性名值就是元素標(biāo)簽里面的文本值（不是所有標(biāo)簽）。 對(duì)于有URL屬性的元素，該值就是URL（如<img src="">, <a href="">, <object data="">等）。 對(duì)于<time>元素，該值就是datetime=""屬性。 對(duì)于<meta itemprop="" content="">， 該值就是content=""屬性。

itemref=””
允許微數(shù)據(jù)項(xiàng)通過(guò)指向特定ID（含有需要屬性的元素）包含非后代屬性。

itemtype=””
微數(shù)據(jù)定義的類(lèi)型。其值為URL，扮演詞匯表名稱(chēng)的作用。

itemid=””
允許詞匯表給微數(shù)據(jù)項(xiàng)定義一個(gè)全局標(biāo)識(shí)符，例如書(shū)的ISBN數(shù)值，在同樣元素上使用itemid作為數(shù)據(jù)項(xiàng)的itemscope和itemtype屬性。

二、微數(shù)據(jù)語(yǔ)法

itemscope和itemprop
先來(lái)個(gè)小例子：

<p itemscope>下周我要去<span itemprop="name">韓紅剛</span>家拔蘿卜</p>

<p>元素上的itemscope使其成為了一個(gè)微數(shù)據(jù)項(xiàng)，其子元素上itemprop屬性的值name為詞匯表中的一個(gè)關(guān)鍵屬性。一個(gè)微數(shù)據(jù)項(xiàng)至少有一個(gè)驗(yàn)證的itemprop.

itemprop后面的名稱(chēng)可以是單詞，也可以是URL，使用URL讓這個(gè)名稱(chēng)全局唯一。如果使用單詞的話(huà)，最好使用詞匯表，這個(gè)單詞在該詞匯表中有定義，同樣可以讓名稱(chēng)唯一。

itemprop值
對(duì)于一些元素，itemprop值來(lái)自元素的屬性，像是datetime屬性或是content屬性。還是拔蘿卜的例子：

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url"  rel="external nofollow"  rel="external nofollow" >韓紅剛</a>家拔蘿卜</p>

定義了兩個(gè)itemprop下的屬性值url和date，所包含的值就是一個(gè)url地址（不是元素內(nèi)的文本值韓紅剛）和一個(gè)特定格式的時(shí)間。

在微數(shù)據(jù)中，下面的元素以它們的URLs為值：

<a href=""><area href=""><audio src=""><embed src=""><iframe src=""><img src=""><link href=""><object data=""><source src=""><video src="">

相反，以下HTML5元素URL包含屬性不作為屬性值使用：

<base href=""><script src=""><input src="">

上面兩個(gè)例子，我們可以來(lái)個(gè)簡(jiǎn)單的整合，如下：

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url"  rel="external nofollow"  rel="external nofollow" ><span itemprop="name">韓紅剛</span></a>家拔蘿卜</p>

將itemprop="name"嵌入在鏈接之中了。

嵌套項(xiàng)
我們可以給包含itemprop的元素添加itemscope插入嵌套項(xiàng)。

<p itemscope><span itemprop="name">五月天</span>主唱是<span itemprop="members"  itemscope><span itemprop="name">阿信</span>。</span></p>

定義了一個(gè)項(xiàng)，有兩個(gè)關(guān)鍵字屬性：name和members。該name是五月天，members則是嵌套項(xiàng)，包含了一個(gè)值為阿信的屬性name。注意到members并無(wú)文本值。

像上面p標(biāo)簽這種父輩元素沒(méi)有任何一個(gè)微數(shù)據(jù)項(xiàng)的微數(shù)據(jù)項(xiàng)稱(chēng)為“頂級(jí)微數(shù)據(jù)項(xiàng)”。微數(shù)據(jù)API返回的是頂級(jí)數(shù)據(jù)項(xiàng)及其對(duì)應(yīng)的屬性，以及其中嵌套的子數(shù)據(jù)項(xiàng)。

多屬性
先看例子：

<span itemprop="members" itemscope>前S˙H˙E 的成員是
  <span itemprop="name">任家萱</span>，
  <span itemprop="name">田馥甄</span>和
  <span itemprop="name">陳嘉樺</span>.</span>

項(xiàng)目可以包含不同值的多個(gè)屬性。例如上例name屬性定義了3個(gè)值：任家萱、田馥甄和陳嘉樺。

同一個(gè)元素同樣也可以有多個(gè)屬性關(guān)鍵名稱(chēng)（用空格分隔），例如下面這個(gè)例子：

<p itemscope><span itemprop="name call">志玲姐</span> 是個(gè)美女。</p>

“志玲姐”即是名字，又是稱(chēng)謂。

通過(guò)itemref頁(yè)面內(nèi)引用
還是先看個(gè)例子吧：

<p itemscope itemref="band-members">后天我要去看<span itemprop="name">
S˙H˙E</span>的演唱會(huì)，好興奮哈！</p>
……
<span id="band-members" itemprop="members" itemscope>S˙H˙E 的成員是
  <span itemprop="name">任家萱</span>，
  <span itemprop="name">田馥甄</span>和
  <span itemprop="name">陳嘉樺</span>.</span>

上面的定義通過(guò)引用ID band-members包含了members項(xiàng)的三個(gè)成員名稱(chēng)屬性，每個(gè)都是不一樣的值。

使用meta添加內(nèi)容
如果你想添加的文本并不是頁(yè)面內(nèi)容的一部分，你可以在<meta>元素上使用content屬性：<meta itemprop="" content="">

舉個(gè)小例子：

<p itemscope><span itemprop="name" itemscope>
   鐘xx<meta itemprop="likes" content="twins成員">
  </span>攝影愛(ài)好者陳老師的粉絲。</p>

不會(huì)，有些遺憾的是，某些瀏覽器會(huì)自動(dòng)把<meta>元素移動(dòng)到head標(biāo)簽中。比較靠譜的做法是使用itemref做頁(yè)面內(nèi)引用，這樣即使瀏覽器移除了，一些工具啥的還是能夠識(shí)別出微數(shù)據(jù)。具體做法如下：

<p itemscope><span itemprop="name" itemscope itemref="meta-likes">
   鐘xx<meta id="meta-likes" itemprop="likes" content="twins成員">
  </span>攝影愛(ài)好者陳老師的粉絲。</p>

項(xiàng)類(lèi)型(itemtype)及全局唯一名字
通過(guò)itemtype，我們可以給微數(shù)據(jù)項(xiàng)指定一種類(lèi)型，這個(gè)屬性需要使用在含itemscope的元素上。itemtype的值是個(gè)URL地址，代表了微數(shù)據(jù)使用的詞匯。請(qǐng)注意，這個(gè)地址只能是文本字符串，用來(lái)唯一標(biāo)示詞匯表，同時(shí)，該地址不一定非要指向真是的網(wǎng)頁(yè)地址（當(dāng)然，指向最好了）。這樣我們就可以使用詞匯表中的name名稱(chēng)作為itemprop名稱(chēng)做些定義了。

例如，下面這個(gè)例子。

<p itemscope itemtype="http://schema.org/MusicGroup">后天我要去看<span itemprop="name">S˙H˙E</span>的演唱會(huì)，好興奮哈！</p>

http://schema.org/MusicGroup詞匯表中有個(gè)名為"name"的關(guān)鍵名稱(chēng)，如下截圖： 用itemid全局標(biāo)識(shí) 有時(shí)，某些項(xiàng)需要唯一的標(biāo)識(shí)進(jìn)行標(biāo)識(shí)。例如書(shū)的ISBN數(shù)值，我們可以借助itemid屬性，如下例子：

<p itemscope itemtype="http://vocab.example.com/book"
  itemid="urn:isbn:0321687299">
  <!-- 書(shū)信息… -->
</p>

三、微數(shù)據(jù)的力量

說(shuō)了這么多，你可能會(huì)有疑問(wèn)或不耐煩了：微數(shù)據(jù)這玩意，貌似蠻復(fù)雜，頭疼的，看上去鳥(niǎo)用都沒(méi)有，唉，還是按ctrl+w去微博轉(zhuǎn)轉(zhuǎn)吧~~

為了打消這種疑慮，有必要中間插播介紹了微數(shù)據(jù)的真正體。我們可能都知道，給元素添加額外的語(yǔ)義東西，可以使用自定義data屬性(data-*). 但是，自定義data屬性只是純粹的屬性，而微數(shù)據(jù)有特定的規(guī)范，有特定屬性名稱(chēng)的詞匯表，且更多是服務(wù)于現(xiàn)實(shí)世界，在這方面是很強(qiáng)大的。

說(shuō)得太空太虛了吧？確實(shí)，過(guò)于學(xué)術(shù)化的說(shuō)法往往不易讓人理解。通俗講，微數(shù)據(jù)就是在保證頁(yè)面內(nèi)容顯示良好的情況下清晰而準(zhǔn)確地勾勒出了數(shù)據(jù)的骨架與精髓，可以通過(guò)工具、API等進(jìn)行方便強(qiáng)大的數(shù)據(jù)交互。

我們都知道，現(xiàn)在流行的數(shù)據(jù)交換格式是什么？沒(méi)錯(cuò)，就是JSON。從某種意義上來(lái)講，微數(shù)據(jù)的本質(zhì)就是JSON，哦？沒(méi)看出來(lái)，不急，舉個(gè)例子就會(huì)知道了。

如下HTML下的微數(shù)據(jù)代碼：

<section>
  <h3><a  title="WDE-ex Vol11『iPad
  のウェブデザイン：私たちがみつけたこと 』 : ATND">WDE-ex Vol.11 — Designing
  for iPad: Our experience so far</a></h3>
  <p>On <time datetime="2010-07-21T19:00:00+09:00">July 21st 19:00
  </time>-<time datetime="2010-07-21T20:00:00+09:00">20:00</time> at
  <span itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" >
  <span itemprop="name">Apple Ginza</span></a></span>,
  <span itemscope itemtype="http://schema.org/Person">
  <a itemprop="url"  title="iA">
  <span itemprop="name">Oliver Reichenstein</span>, CEO of iA</a>
  </span>, will share the lessons they've learned while creating three
  iPad apps and one iPad website.</p>
</section>

日本，英文不懂沒(méi)關(guān)系，機(jī)器也不懂，但是它懂微數(shù)據(jù)，你也一樣。上面微數(shù)據(jù)的數(shù)據(jù)本質(zhì)是什么？很亂，不是嗎？但是，如果我們只關(guān)注微數(shù)據(jù)的部分：itemscope, itemprop等，你會(huì)發(fā)現(xiàn)什么？

我們使用Live Microdata對(duì)上面的HTML代碼跑一下，會(huì)得到下面的JSON數(shù)據(jù)：

{
  "items": [
    {
      "type": [
        "http://schema.org/Organization"
      ],
      "properties": {
        "url": [
          "http://www.apple.com/jp/retail/ginza/map/"
        ],
        "name": [
          "Apple Ginza"
        ]
      }
    },
    {
      "type": [
        "http://schema.org/Person"
      ],
      "properties": {
        "url": [
          "http://informationarchitects.jp/"
        ],
        "name": [
          "Oliver Reichenstein"
        ]
      }
    }
  ]
}

我想，您應(yīng)該大致明白機(jī)器為何可以識(shí)別微數(shù)據(jù)了。由于微數(shù)據(jù)的這種數(shù)據(jù)本質(zhì)特性，在web應(yīng)用中，我們做一些數(shù)據(jù)交互的時(shí)候，事情就會(huì)變得奇妙而輕松。例如，你訪(fǎng)問(wèn)一個(gè)你中意的女孩子的個(gè)人主頁(yè)的時(shí)候，如果使用微數(shù)據(jù)，就可以自動(dòng)把她的一些信息啊聯(lián)系方式啊什么的放到你的通訊錄中，是不是很贊！或是在你的日歷表中添加一些需要完成的事件等等。很多真實(shí)世界的應(yīng)用與web應(yīng)用有了更為輕松強(qiáng)大的結(jié)合。

四、一些詞匯表介紹

這里提及的微數(shù)據(jù)詞匯表有三：schema.org詞匯表，Google豐富摘要詞匯表(www.data-vocabulary.org)，WHATWG/microformats.org詞匯表。

我大致看了這幾個(gè)詞匯表，不由得心里一咯噔：媽呀，這么多，都介紹的話(huà)我這周末只能抱電腦了。因此，這里只大致提點(diǎn)部分提綱性質(zhì)內(nèi)容。

事件(Events)

人物(Person)

組織或業(yè)務(wù)(Organisation or business)

日歷(Calendar)

預(yù)覽(Review)

許可證(License)

產(chǎn)品和服務(wù)(Products and services)

Atom提要(Atom feed)

  • hAtom — http://microformats.org/wiki/hatom

食譜(Recipes)

Google豐富摘要詞匯支持微格式和RDFa這是除了微數(shù)據(jù)之外其他兩個(gè)增加內(nèi)容語(yǔ)義的方法。除了這種差異外，基本上與schema.org是想匹配的，除非他們?cè)?code>itemtype中使用www.data-vocabulary.org代替schema.org。盡管google仍然支持這類(lèi)詞匯，但是最新的schema.org提供了更多的詞匯，這些詞匯還被Bing和Yahoo支持，因此在選擇微數(shù)據(jù)上schema.org可以讓你笑得更久。不過(guò)您可能仍然希望簽出“富文檔摘要”，因?yàn)樗鼈兇a更簡(jiǎn)單，書(shū)寫(xiě)的時(shí)候要比schema.org來(lái)得更好。

五、瀏覽器支持

微數(shù)據(jù)瀏覽器支持情況(截止2011年8月16日)BrowserSupportChromeSafariFirefox進(jìn)行中...Opera最快版本12.00-1033Internet Explorer

雖然瀏覽器目前對(duì)微數(shù)據(jù)的支持基本上就是大鴨蛋，但是，由于搜索引擎還有一些三方工具都鳥(niǎo)他，微數(shù)據(jù)目前還是很有應(yīng)用價(jià)值的。例如Bing, Google, 以及Yahoo使用schema.org詞匯表定義的微數(shù)據(jù)顯示搜索結(jié)果（特定格式的搜索結(jié)果，即將展示）。

六、豐富網(wǎng)頁(yè)摘要應(yīng)用

先看國(guó)內(nèi)應(yīng)用微數(shù)據(jù)的實(shí)例。

我們打開(kāi)谷哥哥，輸入“香口魚(yú)”，輕輕地回車(chē)，稍等片刻，得到下面截圖：

我們對(duì)比可以發(fā)現(xiàn)，大眾點(diǎn)評(píng)網(wǎng)搜索顯示的樣子跟下面的蕓蕓結(jié)果不一樣，有評(píng)分顯示，評(píng)論數(shù)，日期等。怎么回事？莫非點(diǎn)評(píng)給Google塞了很多票子。非也，我們點(diǎn)擊鏈接進(jìn)入該頁(yè)面，右鍵查看源代碼，就會(huì)發(fā)現(xiàn)如下代碼：

上面截圖各種標(biāo)注的部分就是本文多次出現(xiàn)了微數(shù)據(jù)特有的關(guān)鍵屬性，名稱(chēng)等。也就是說(shuō)，點(diǎn)評(píng)的搜索結(jié)果的顯示之所以不同，是因?yàn)槠鋺?yīng)用了HTML5之微數(shù)據(jù)，使用的詞匯表是相對(duì)簡(jiǎn)單的Google豐富網(wǎng)頁(yè)摘要詞匯表中的。

七、總結(jié)

到此這篇關(guān)于HTML5擴(kuò)展itemscope, itemtype, itemprop微數(shù)據(jù)的解釋和應(yīng)用的文章就介紹到這了,更多相關(guān)HTML5微數(shù)據(jù)itemscope, itemtype, itemprop內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論