HTML5微数据规范是标记内容的一种方式美高梅赌堵59599:,微数据规范是一种标记内容以描述特定类型的信息

2019-11-26 作者:首页   |   浏览(134)

点评:HTML5微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称

一、微数据是?

一个页面的内容,例如人物、事件或评论不仅要给用户看,还要让机器可识别。而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等。举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO)。

而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西。其有特定的规范,有特定的格式。可以丰富搜索引擎的网页摘要。

先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。

上面的释义过于学术化,我们可以将其搁置一边,先看个简单的关于微数据的例子。平时,我们要在页面上显示对一个人的描述,HTML代码可能如下:

<div>
  我的名字是王富强,但大家叫我小强。我的个人首页是:
  <a href="http://www.example.com">www.example.com</a>
  我住在上海市富贵新村。我是工程师,目前在财富科技公司上班。
</div>

而如果使用针对人物的微数据标记,则HTML会如下:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是王富强,
  但大家叫我小强。
  我的个人首页是:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在上海市富贵新村。我是工程师,
  目前在财富科技公司上班。
</div>

您会发现,HTML代码量多了不少,还出现了很多自定义的属性,如itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下:
itemscope
定义一组名值对,称为项。

itemprop=”属性名”
添加一个数据项属性。这个属性名可以是个单词或是个URL,与元素包含的文本值相关:

  • 对于大部分元素,属性名值就是元素标签里面的文本值(不是所有标签)。
  • 对于有URL属性的元素,该值就是URL(如<img src="">, <a href="">, <object data="">等)。
  • 对于<time>元素,该值就是datetime=""属性。
  • 对于<meta itemprop="" content="">, 该值就是content=""属性。

itemref=””
允许微数据项通过指向特定ID(含有需要属性的元素)包含非后代属性

itemtype=””
微数据定义的类型。其值为URL,扮演词汇表名称的作用。

itemid=””
允许词汇表给微数据项定义一个全局标识符,例如书的ISBN数值,在同样元素上使用itemid作为数据项的itemscopeitemtype属性。

Review

Canonical URL: 

HTML 规范


做网站优化已经快一个月了,对于seo的一般技术也有了一些了解,前些天开始使用谷歌的网站站长工具,在里面发现很多百度站长工具里面不曾有的内容,其中“结构化数据”这一项是出现在 “优化”栏里面,可想而知,这个结构化数据会不会是争对谷歌搜索的一个优化的方法呢?添加自己的站 进入这个页面,发现它提示我的网站上未检测到任何结构化数据,但是这么一个缺少概念的词让我们这种网站优化新手怎么理解呢?
进入谷歌的“帮助”页,谷歌提到了“丰富网页摘要(微数据、微格式、RDFa 和数据荧光笔)”,其中微数据是谷歌推荐的优化方式,而这个微数据正是现在新秀HTML5为增强网页语义化而增加的新特性,旨在构建对程序,对用户都更有价值的数据驱动的web。

二、微数据语法

itemscope和itemprop
先来个小例子:

<p itemscope>下周我要去韩红刚家拔萝卜</p>

<p>元素上的itemscope使其成为了一个微数据项,其子元素上itemprop属性的值name为词汇表中的一个关键属性。一个微数据项至少有一个验证的itemprop.

itemprop后面的名称可以是单词,也可以是URL,使用URL让这个名称全局唯一。如果使用单词的话,最好使用词汇表,这个单词在该词汇表中有定义,同样可以让名称唯一。

itemprop值
对于一些元素,itemprop值来自元素的属性,像是datetime属性或是content属性。还是拔萝卜的例子:

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://www.cnblogs.com/chiuzq/">韩红刚</a>家拔萝卜</p>

定义了两个itemprop下的属性值urldate,所包含的值就是一个url地址(不是元素内的文本值韩红刚)和一个特定格式的时间。

在微数据中,下面的元素以它们的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="">

上面两个例子,我们可以来个简单的整合,如下:

<p itemscope><time itemprop="date" datetime="2011-12-05">下周</time>我要去 <a itemprop="url" href="http://www.cnblogs.com/chiuzq/">韩红刚</a>家拔萝卜</p>

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

嵌套项
我们可以给包含itemprop的元素添加itemscope插入嵌套项。

<p itemscope>五月天主唱是阿信。</p>

定义了一个项,有两个关键字属性:namemembers。该name是五月天,members则是嵌套项,包含了一个值为阿信的属性name。注意到members并无文本值。

像上面p标签这种父辈元素没有任何一个微数据项的微数据项称为“顶级微数据项”。微数据API返回的是顶级数据项及其对应的属性,以及其中嵌套的子数据项。

多属性
先看例子:

前S˙H˙E 的成员是
  任家萱,
  田馥甄和
  陈嘉桦.

项目可以包含不同值的多个属性。例如上例name属性定义了3个值:任家萱、田馥甄和陈嘉桦。

同一个元素同样也可以有多个属性关键名称(用空格分隔),例如下面这个例子:

<p itemscope>志玲姐
 是个美女。</p>

“志玲姐”即是名字,又是称谓。

通过itemref页面内引用
还是先看个例子吧:

<p itemscope itemref="band-members">后天我要去看
S˙H˙E的演唱会,好兴奋哈!</p>
……
S˙H˙E 的成员是
  任家萱,
  田馥甄和
  陈嘉桦.

上面的定义通过引用ID band-members包含了members项的三个成员名称属性,每个都是不一样的值。

使用meta添加内容
如果你想添加的文本并不是页面内容的一部分,你可以在<meta>元素上使用content属性:<meta itemprop="" content="">

举个小例子:

<p itemscope>
   钟欣桐<meta itemprop="likes" content="twins成员">
  摄影爱好者陈老师的粉丝。</p>

不会,有些遗憾的是,某些浏览器会自动把<meta>元素移动到head标签中。比较靠谱的做法是使用itemref做页面内引用,这样即使浏览器移除了,一些工具啥的还是能够识别出微数据。具体做法如下:

<p itemscope>
   钟欣桐<meta id="meta-likes" itemprop="likes" content="twins成员">
  摄影爱好者陈老师的粉丝。</p>

项类型(itemtype)及全局唯一名字
通过itemtype,我们可以给微数据项指定一种类型,这个属性需要使用在含itemscope的元素上。itemtype的值是个URL地址,代表了微数据使用的词汇。请注意,这个地址只能是文本字符串,用来唯一标示词汇表,同时,该地址不一定非要指向真是的网页地址(当然,指向最好了)。这样我们就可以使用词汇表中的name名称作为itemprop名称做些定义了。

例如,下面这个例子。

<p itemscope itemtype="http://schema.org/MusicGroup">后天我要去看
S˙H˙E的演唱会,好兴奋哈!</p>

http://schema.org/MusicGroup词汇表中有个名为"name"的关键名称,如下截图: 美高梅赌堵59599 1 用itemid全局标识 有时,某些项需要唯一的标识进行标识。例如书的ISBN数值,我们可以借助itemid属性,如下例子:

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

Thing > CreativeWork > Review

A review of an item - for example, of a restaurant, movie, or store.

 

Usage: Between 250,000 and 500,000 domains

[more...]

Property

Expected Type

Description

Properties from Review

itemReviewed

Thing 

The item that is being reviewed/rated.

reviewAspect

Text 

This Review or Rating is relevant to this part or facet of the itemReviewed.

reviewBody

Text 

The actual body of the review.

reviewRating

Rating 

The rating given in this review. Note that reviews can themselves be rated. The reviewRating applies to rating given by the review. The aggregateRating property applies to the review itself, as a creative work.

Properties from CreativeWork

about

Thing 

The subject matter of the content.
Inverse property: subjectOf.

accessMode

Text 

The human sensory perceptual system or cognitive faculty through which a person may process or perceive information. Expected values include: auditory, tactile, textual, visual, colorDependent, chartOnVisual, chemOnVisual, diagramOnVisual, mathOnVisual, musicOnVisual, textOnVisual.

accessModeSufficient

Text 

A list of single or combined accessModes that are sufficient to understand all the intellectual content of a resource. Expected values include: auditory, tactile, textual, visual.

accessibilityAPI

Text 

Indicates that the resource is compatible with the referenced accessibility API (WebSchemas wiki lists possible values).

accessibilityControl

Text 

Identifies input methods that are sufficient to fully control the described resource (WebSchemas wiki lists possible values).

accessibilityFeature

Text 

Content features of the resource, such as accessible media, alternatives and supported enhancements for accessibility (WebSchemas wiki lists possible values).

accessibilityHazard

Text 

A characteristic of the described resource that is physiologically dangerous to some users. Related to WCAG 2.0 guideline 2.3 (WebSchemas wiki lists possible values).

accessibilitySummary

Text 

A human-readable summary of specific accessibility features or deficiencies, consistent with the other accessibility metadata but expressing subtleties such as "short descriptions are present but long descriptions will be needed for non-visual users" or "short descriptions are present and no long descriptions are needed."

accountablePerson

Person 

Specifies the Person that is legally accountable for the CreativeWork.

aggregateRating

AggregateRating 

The overall rating, based on a collection of reviews or ratings, of the item.

alternativeHeadline

Text 

A secondary title of the CreativeWork.

associatedMedia

MediaObject 

A media object that encodes this CreativeWork. This property is a synonym for encoding.

audience

Audience 

An intended audience, i.e. a group for whom something was created. Supersedes serviceAudience.

audio

AudioObject 

An embedded audio object.

author

Organization  or 
Person 

The author of this content or rating. Please note that author is special in that HTML 5 provides a special mechanism for indicating authorship via the rel tag. That is equivalent to this and may be used interchangeably.

award

Text 

An award won by or for this item. Supersedes awards.

character

Person 

Fictional person connected with a creative work.

citation

CreativeWork  or 
Text 

A citation or reference to another creative work, such as another publication, web page, scholarly article, etc.

comment

Comment 

Comments, typically from users.

commentCount

Integer 

The number of comments this CreativeWork (e.g. Article, Question or Answer) has received. This is most applicable to works published in Web sites with commenting system; additional comments may exist elsewhere.

contentLocation

Place 

The location depicted or described in the content. For example, the location in a photograph or painting.

contentRating

Text 

Official rating of a piece of content—for example,'MPAA PG-13'.

contentReferenceTime

DateTime 

The specific time described by a creative work, for works (e.g. articles, video objects etc.) that emphasise a particular moment within an Event.

contributor

Organization  or 
Person 

A secondary contributor to the CreativeWork or Event.

copyrightHolder

Organization  or 
Person 

The party holding the legal copyright to the CreativeWork.

copyrightYear

Number 

The year during which the claimed copyright for the CreativeWork was first asserted.

creator

Organization  or 
Person 

The creator/author of this CreativeWork. This is the same as the Author property for CreativeWork.

dateCreated

Date  or 
DateTime 

The date on which the CreativeWork was created or the item was added to a DataFeed.

dateModified

Date  or 
DateTime 

The date on which the CreativeWork was most recently modified or when the item's entry was modified within a DataFeed.

datePublished

Date 

Date of first broadcast/publication.

discussionUrl

URL 

A link to the page containing the comments of the CreativeWork.

editor

Person 

Specifies the Person who edited the CreativeWork.

educationalAlignment

AlignmentObject 

An alignment to an established educational framework.

educationalUse

Text 

The purpose of a work in the context of education; for example, 'assignment', 'group work'.

encoding

MediaObject 

A media object that encodes this CreativeWork. This property is a synonym for associatedMedia. Supersedes encodings.

exampleOfWork

CreativeWork 

A creative work that this work is an example/instance/realization/derivation of.
Inverse property: workExample.

expires

Date 

Date the content expires and is no longer useful or available. For example a VideoObject or NewsArticlewhose availability or relevance is time-limited, or a ClaimReview fact check whose publisher wants to indicate that it may no longer be relevant (or helpful to highlight) after some date.

fileFormat

Text  or 
URL 

Media type, typically MIME format (see IANA site) of the content e.g. application/zip of a SoftwareApplication binary. In cases where a CreativeWork has several media type representations, 'encoding' can be used to indicate each MediaObject alongside particular fileFormat information. Unregistered or niche file formats can be indicated instead via the most appropriate URL, e.g. defining Web page or a Wikipedia entry.

funder

Organization  or 
Person 

A person or organization that supports (sponsors) something through some kind of financial contribution.

genre

Text  or 
URL 

Genre of the creative work, broadcast channel or group.

hasPart

CreativeWork 

Indicates a CreativeWork that is (in some sense) a part of this CreativeWork.
Inverse property: isPartOf.

headline

Text 

Headline of the article.

inLanguage

Language  or 
Text 

The language of the content or performance or used in an action. Please use one of the language codes from the IETF BCP 47 standard. See also availableLanguage. Supersedes language.

interactionStatistic

InteractionCounter 

The number of interactions for the CreativeWork using the WebSite or SoftwareApplication. The most specific child type of InteractionCounter should be used. Supersedes interactionCount.

interactivityType

Text 

The predominant mode of learning supported by the learning resource. Acceptable values are 'active', 'expositive', or 'mixed'.

isAccessibleForFree

Boolean 

A flag to signal that the item, event, or place is accessible for free. Supersedes free.

isBasedOn

CreativeWork  or 
Product  or 
URL 

A resource that was used in the creation of this resource. This term can be repeated for multiple sources. For example, . Supersedes isBasedOnUrl.

isFamilyFriendly

Boolean 

Indicates whether this content is family friendly.

isPartOf

CreativeWork 

Indicates a CreativeWork that this CreativeWork is (in some sense) part of.
Inverse property: hasPart.

keywords

Text 

Keywords or tags used to describe this content. Multiple entries in a keywords list are typically delimited by commas.

learningResourceType

Text 

The predominant type or kind characterizing the learning resource. For example, 'presentation', 'handout'.

license

CreativeWork  or 
URL 

A license document that applies to this content, typically indicated by URL.

locationCreated

Place 

The location where the CreativeWork was created, which may not be the same as the location depicted in the CreativeWork.

mainEntity

Thing 

Indicates the primary entity described in some page or other CreativeWork.
Inverse property: mainEntityOfPage.

material

Product  or 
Text  or 
URL 

A material that something is made from, e.g. leather, wool, cotton, paper.

mentions

Thing 

Indicates that the CreativeWork contains a reference to, but is not necessarily about a concept.

offers

Offer 

An offer to provide this item—for example, an offer to sell a product, rent the DVD of a movie, perform a service, or give away tickets to an event.

position

Integer  or 
Text 

The position of an item in a series or sequence of items.

producer

Organization  or 
Person 

The person or organization who produced the work (e.g. music album, movie, tv/radio series etc.).

provider

Organization  or 
Person 

The service provider, service operator, or service performer; the goods producer. Another party (a seller) may offer those services or goods on behalf of the provider. A provider may also serve as the seller. Supersedes carrier.

publication

PublicationEvent 

A publication event associated with the item.

publisher

Organization  or 
Person 

The publisher of the creative work.

publisherImprint

Organization 

The publishing division which published the comic.

publishingPrinciples

CreativeWork  or 
URL 

The publishingPrinciples property indicates (typically via URL) a document describing the editorial principles of an Organization (or individual e.g. a Person writing a blog) that relate to their activities as a publisher, e.g. ethics or diversity policies. When applied to a CreativeWork (e.g. NewsArticle) the principles are those of the party primarily responsible for the creation of the CreativeWork.

 

While such policies are most typically expressed in natural language, sometimes related information (e.g. indicating a funder) can be expressed using schema.org terminology.

recordedAt

Event 

The Event where the CreativeWork was recorded. The CreativeWork may capture all or part of the event.
Inverse property: recordedIn.

releasedEvent

PublicationEvent 

The place and time the release was issued, expressed as a PublicationEvent.

review

Review 

A review of the item. Supersedes reviews.

schemaVersion

Text  or 
URL 

Indicates (by URL or string) a particular version of a schema used in some CreativeWork. For example, a document could declare a schemaVersion using an URL such as if precise indication of schema version was required by some application.

sourceOrganization

Organization 

The Organization on whose behalf the creator was working.

spatialCoverage

Place 

The spatialCoverage of a CreativeWork indicates the place(s) which are the focus of the content. It is a subproperty of contentLocation intended primarily for more technical and detailed materials. For example with a Dataset, it indicates areas that the dataset describes: a dataset of New York weather would have spatialCoverage which was the place: the state of New York. Supersedes spatial.

sponsor

Organization  or 
Person 

A person or organization that supports a thing through a pledge, promise, or financial contribution. e.g. a sponsor of a Medical Study or a corporate sponsor of an event.

temporalCoverage

DateTime  or 
Text  or 
URL 

The temporalCoverage of a CreativeWork indicates the period that the content applies to, i.e. that it describes, either as a DateTime or as a textual string indicating a time period in ISO 8601 time interval format. In the case of a Dataset it will typically indicate the relevant time period in a precise notation (e.g. for a 2011 census dataset, the year 2011 would be written "2011/2012"). Other forms of content e.g. ScholarlyArticle, Book, TVSeries or TVEpisode may indicate their temporalCoverage in broader terms - textually or via well-known URL. Written works such as books may sometimes have precise temporal coverage too, e.g. a work set in 1939 - 1945 can be indicated in ISO 8601 interval format format via "1939/1945". Supersedes datasetTimeInterval, temporal.

text

Text 

The textual content of this CreativeWork.

thumbnailUrl

URL 

A thumbnail image relevant to the Thing.

timeRequired

Duration 

Approximate or typical time it takes to work with or through this learning resource for the typical intended target audience, e.g. 'P30M', 'P1H25M'.

translationOfWork

CreativeWork 

The work that this work has been translated from. e.g. 物种起源 is a translationOf “On the Origin of Species”
Inverse property: workTranslation.

translator

Organization  or 
Person 

Organization or person who adapts a creative work to different languages, regional differences and technical requirements of a target market, or that translates during some event.

typicalAgeRange

Text 

The typical expected age range, e.g. '7-9', '11-'.

version

Number  or 
Text 

The version of the CreativeWork embodied by a specified resource.

video

VideoObject 

An embedded video object.

workExample

CreativeWork 

Example/instance/realization/derivation of the concept of this creative work. eg. The paperback edition, first edition, or eBook.
Inverse property: exampleOfWork.

workTranslation

CreativeWork 

A work that is a translation of the content of this work. e.g. 西遊記 has an English workTranslation “Journey to the West”,a German workTranslation “Monkeys Pilgerfahrt” and a Vietnamese translation Tây du ký bình khảo.
Inverse property: translationOfWork.

Properties from Thing

additionalType

URL 

An additional type for the item, typically used for adding more specific types from external vocabularies in microdata syntax. This is a relationship between something and a class that the thing is in. In RDFa syntax, it is better to use the native RDFa syntax - the 'typeof' attribute - for multiple types. Schema.org tools may have only weaker understanding of extra types, in particular those defined externally.

alternateName

Text 

An alias for the item.

description

Text 

A description of the item.

disambiguatingDescription

Text 

A sub property of description. A short description of the item used to disambiguate from other, similar items. Information from other properties (in particular, name) may be necessary for the description to be useful for disambiguation.

identifier

PropertyValue  or 
Text  or 
URL 

The identifier property represents any kind of identifier for any kind of Thing, such as ISBNs, GTIN codes, UUIDs etc. Schema.org provides dedicated properties for representing many of these, either as textual strings or as URL (URI) links. See background notes for more details.

image

ImageObject  or 
URL 

An image of the item. This can be a URL or a fully described ImageObject.

mainEntityOfPage

CreativeWork  or 
URL 

Indicates a page (or other CreativeWork) for which this thing is the main entity being described. See background notes for details.
Inverse property: mainEntity.

name

Text 

The name of the item.

potentialAction

Action 

Indicates a potential Action, which describes an idealized action in which this thing would play an 'object' role.

sameAs

URL 

URL of a reference Web page that unambiguously indicates the item's identity. E.g. the URL of the item's Wikipedia page, Wikidata entry, or official website.

subjectOf

CreativeWork  or 
Event 

A CreativeWork or Event about this Thing..
Inverse property: about.

url

URL 

URL of the item.

Instances of Review may appear as values for the following properties

Property On Types Description
resultReview ReviewAction  A sub property of result. The review that resulted in the performing of the action.
review Brand  or
CreativeWork  or
Event  or
Offer  or
Organization  or
Place  or
Product  or
Service 
A review of the item. Supersedes reviews.

文档类型

推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>.

(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。

HTML 中最好不要将无内容元素[1] 的标签闭合,例如:使用 <br> 而非 <br />.


HTML5微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。每种信息都描述特定类型的项,例如人物、活动或评论。例如,活动可以包含 venue、starting time、name 和 category 属性。

三、微数据的力量

说了这么多,你可能会有疑问或不耐烦了:微数据这玩意,貌似蛮复杂,头疼的,

为了打消这种疑虑,有必要中间插播介绍了微数据的真正体。我们可能都知道,给元素添加额外的语义东西,可以使用自定义data属性(data-*). 但是,自定义data属性只是纯粹的属性,而微数据有特定的规范,有特定属性名称的词汇表,且更多是服务于现实世界,在这方面是很强大的。

说得太空太虚了吧?确实,过于学术化的说法往往不易让人理解。通俗讲,微数据就是在保证页面内容显示良好的情况下清晰而准确地勾勒出了数据的骨架与精髓,可以通过工具、API等进行方便强大的数据交互。

我们都知道,现在流行的数据交换格式是什么?没错,就是JSON。从某种意义上来讲,微数据的本质就是JSON,哦?没看出来,不急,举个例子就会知道了。

如下HTML下的微数据代码:

<section>
  <h3><a href="http://www.cnblogs.com/chiuzq/" 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

  <a itemprop="url" href="http://www.apple.com/jp/retail/ginza/map/">
  Apple Ginza</a>,

  <a itemprop="url" href="http://informationarchitects.jp/" title="iA">
  Oliver Reichenstein, CEO of iA</a>
  , will share the lessons they've learned while creating three
  iPad apps and one iPad website.</p>
</section>

日本,英文不懂没关系,机器也不懂,但是它懂微数据,你也一样。上面微数据的数据本质是什么?很乱,不是吗?但是,如果我们只关注微数据的部分:itemscope, itemprop等,你会发现什么?

我们使用Live Microdata对上面的HTML代码跑一下,会得到下面的JSON数据:

{
  "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"
        ]
      }
    }
  ]
}

美高梅赌堵59599 2

我想,您应该大致明白机器为何可以识别微数据了。由于微数据的这种数据本质特性,在web应用中,我们做一些数据交互的时候,事情就会变得奇妙而轻松。例如,你访问一个你中意的女孩子的个人主页的时候,如果使用微数据,就可以自动把她的一些信息啊联系方式啊什么的放到你的通讯录中,是不是很赞!或是在你的日历表中添加一些需要完成的事件等等。很多真实世界的应用与web应用有了更为轻松强大的结合。

Available properties in extensions

  • For Review in the pending extension: reviewAspect
  • For CreativeWork in the bib extension: publisherImprint, translationOfWork, workTranslation
  • For CreativeWork in the pending extension: contentReferenceTime
  • For Thing in the pending extension: subjectOf

More specific Types

  • ClaimReview

HTML 验证

一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线,它促进了 HTML 被更好地运用。

不推荐

  1. <title>Test</title>
  2. <article>This is only a test.

推荐

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Test</title>
  4. <article>This is only a test.</article>

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。以下示例是一个简短的HTML 文本块,显示的是 Bob Smith 的基本联系信息。

应用

Google丰富网页摘要词汇表

Google提供了一个丰富摘要测试的工具(仍测试阶段):Rich Snippets Testing Tool

 

More specific Types available in extensions

  • CriticReview, EmployerReview, UserReview

Examples

Example 1

Without Markup Microdata RDFa JSON-LD

  1. <div itemscope itemtype=";

  2.   <span itemprop="name">Kenmore White 17" Microwave</span>

  3.   <img itemprop="image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />

  4.   <div itemprop="aggregateRating"

  5.     itemscope itemtype=";

  6.    Rated <span itemprop="ratingValue">3.5</span>/5

  7.    based on <span itemprop="reviewCount">11</span> customer reviews

  8.   </div>

  9.   <div itemprop="offers" itemscope itemtype=";

  10.     <!--price is 1000, a number, with locale-specific thousands separator

  11.     and decimal mark, and the $ character is marked up with the

  12.     machine-readable code "USD" -->

  13.     <span itemprop="priceCurrency" content="USD">$</span><span

  14.           itemprop="price" content="1000.00">1,000.00</span>

  15.     <link itemprop="availability" href="" />In stock

  16.   </div>

  17.   Product description:

  18.   <span itemprop="description">0.7 cubic feet countertop microwave.

  19.   Has six preset cooking categories and convenience features like

  20.   Add-A-Minute and Child Lock.</span>

  21.   Customer reviews:

  22.   <div itemprop="review" itemscope itemtype=";

  23.     <span itemprop="name">Not a happy camper</span> -

  24.     by <span itemprop="author">Ellie</span>,

  25.     <meta itemprop="datePublished" content="2011-04-01">April 1, 2011

  26.     <div itemprop="reviewRating" itemscope itemtype=";

  27.       <meta itemprop="worstRating" content = "1">

  28.       <span itemprop="ratingValue">1</span>/

  29.       <span itemprop="bestRating">5</span>stars

  30.     </div>

  31.     <span itemprop="description">The lamp burned out and now I have to replace

  32.     it. </span>

  33.   </div>

  34.   <div itemprop="review" itemscope itemtype=";

  35.     <span itemprop="name">Value purchase</span> -

  36.     by <span itemprop="author">Lucas</span>,

  37.     <meta itemprop="datePublished" content="2011-03-25">March 25, 2011

  38.     <div itemprop="reviewRating" itemscope itemtype=";

  39.       <meta itemprop="worstRating" content = "1"/>

  40.       <span itemprop="ratingValue">4</span>/

  41.       <span itemprop="bestRating">5</span>stars

  42.     </div>

  43.     <span itemprop="description">Great microwave for the price. It is small and

  44.     fits in my apartment.</span>

  45.   </div>

  46.   ...

  47. </div>

Example 2

Without Markup Microdata RDFa JSON-LD

  1. <body itemscope itemtype=";

  2. ...

  3. <div itemprop="breadcrumb">

  4.   <a href="category/books.html">Books</a> >

  5.   <a href="category/books-literature.html">Literature & Fiction</a> >

  6.   <a href="category/books-classics">Classics</a>

  7. </div>

  8. <div itemprop="mainEntity" itemscope itemtype=";

  9. <img itemprop="image" src="catcher-in-the-rye-book-cover.jpg"

  10.      alt="cover art: red horse, city in background"/>

  11. <span itemprop="name">The

    Catcher in the Rye</span>

  12.  <link itemprop="bookFormat" href=" Market Paperback

  13. by <a itemprop="author" href="/author/jd_salinger.html">J.D. Salinger</a>

  14. <div itemprop="aggregateRating" itemscope itemtype=";

  15.   <span

    itemprop="ratingValue">4</span> stars

  16.   <span itemprop="reviewCount">3077</span> reviews

  17. </div>

  18. <div itemprop="offers" itemscope itemtype=";

  19.   Price: $<span itemprop="price">6.99</span>

  20.   <meta itemprop="priceCurrency" content="USD" />

  21.   <link itemprop="availability" href=" Stock

  22. </div>

  23. Product details

  24. <span itemprop="numberOfPages">224</span> pages

  25. Publisher: <span itemprop="publisher">Little, Brown, and Company</span> -

  26.  <meta itemprop="datePublished" content="1991-05-01">May 1, 1991

  27. Language: <span itemprop="inLanguage">English</span>

  28. ISBN-10: <span itemprop="isbn">0316769487</span>

  29. Reviews:

  30. <div itemprop="review" itemscope itemtype=";

  31.   <span

    itemprop="reviewRating">5</span> stars

  32.   <b>"<span itemprop="name">A masterpiece of literature</span>"</b>

  33.   by <span itemprop="author">John Doe</span>,

  34.   Written on <meta itemprop="datePublished" content="2006-05-04">May 4, 2006

  35.   <span itemprop="reviewBody">I really enjoyed this book. It captures the essential

  36.   challenge people face as they try make sense of their lives and grow to adulthood.</span>

  37. </div>

  38. <div itemprop="review" itemscope itemtype=";

  39.   <span

    itemprop="reviewRating">4</span> stars

  40.   <b>"<span itemprop="name">A good read.</span>" </b>

  41.   by <span itemprop="author">Bob Smith</span>,

  42.   Written on <meta itemprop="datePublished" content="2006-06-15">June 15, 2006

  43.   <span itemprop="reviewBody">Catcher in the Rye is a fun book. It's a good book to read.</span>

  44. </div>

  45. </div>

  46. ...

  47. </body>

省略可选标签

HTML5 规范中规定了 HTML 标签是可以省略的。但从可读性来说,在开发的源文件中最好不要这样做,因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少,这很有用,尤其是对于一些大型网站来说。为了达到这一目的,我们可以在开发后期对页面进行压缩处理,在这个环节中这些可选的标签完全就可以省略掉了。


代码如下:

脚本加载

出于性能考虑,脚本异步加载很关键。一段脚本放置在 <head> 内,比如 <script src="main.js"></script>,其加载会一直阻塞 DOM 解析,直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本,对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+,可将 HTML5 的 async 属性加至脚本中,它可防止阻塞 DOM 的解析,甚至你可以将脚本引用写在 <head> 里也没有影响。

如需兼容老旧的浏览器,实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是:一直要等到 CSS 对象文档已就绪,它们才开始加载(短暂地在 CSS 加载完毕之后),这就对需要及时触发的 JS 造成了一定的延迟,这多多少少也影响了用户体验吧。

终上所述,兼容老旧浏览器(IE9-)时,应该遵循以下最佳实践。

脚本引用写在 body 结束标签之前,并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本,但它只阻塞了 body 结束标签之前的 DOM 解析,这就大大降低了其阻塞影响。而在现代浏览器中,脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载,此时加载属于异步加载,不会阻塞 CSSOM(但其执行仍发生在 CSSOM 之后)。

所有浏览器中,推荐

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="main.css">
  4. </head>
  5. <body>
  6. <!-- body goes here -->
  7.  
  8. <script src="main.js" async></script>
  9. </body>
  10. </html>

只在现代浏览器中,推荐

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="main.css">
  4. <script src="main.js" async></script>
  5. </head>
  6. <body>
  7. <!-- body goes here -->
  8. </body>
  9. </html>

本文由美高梅赌堵59599发布于首页,转载请注明出处:HTML5微数据规范是标记内容的一种方式美高梅赌堵59599:,微数据规范是一种标记内容以描述特定类型的信息

关键词:

  • 上一篇:没有了
  • 下一篇:没有了