丰富网页摘要——HTML5中的“微数据”(MicroData)
- - 蓝飞技术博客 —— 关注前沿,追求卓越。大多数网络管理员都熟悉网页上的HTML标签,通常情况下,HTML标记告诉浏览器如何显示在标签中包含的信息. 例如,
我们为它添加微数据描述之后的代码如下:
- <div>
- <h1>阿凡达</h1>
- <span>导演:詹姆斯·卡梅隆(生于 1954年8月16日)</span>
- <span>类型:科幻</span>
- <a href="../movies/avatar-theatrical-trailer.html">电影片</a>
- </div>
- <div itemscope itemtype ="http://schema.org/Movie">
- <h1 itemprop="name">阿凡达</h1>
- <div itemprop="director" itemscope itemtype="http://schema.org/Person">
- 导演:<span itemprop="name">詹姆斯·卡梅隆</span> (生于 <span itemprop="birthDate">1954年8月16日)</span>
- </div>
- 类型:<span itemprop="genre">科幻</span>
- <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">电影片</a>
- </div>
信息的每个属性使用 itemprop 属性进行标识:
- <div itemscope itemtype="http://data-vocabulary.org/Person"></div>
某些隐藏的信息可以使用带content属性的meta标签来表示,如:
- <span itemprop="nickname">蓝飞</span>
日期或时间类信息使用 ISO日期格式表示,如:
- <meta itemprop="best" content="10" />
微数据可以嵌套,如:
- <time itemprop="startDate" datetime="2009-10-15T19:00-08:00">2009 年 10 月 15 日晚上 7 点</time>
部分元素使用URL属性值作为微数据的内容:
- <div itemscope itemtype ="http://schema.org/Movie">
- <h1 itemprop="name">阿凡达</h1>
- <div itemprop="director" itemscope itemtype="http://schema.org/Person">
- 导演:<span itemprop="name">詹姆斯·卡梅隆</span> (生于<span itemprop="birthDate">1954年8月16日)</span>
- </div>
- 类型:<span itemprop="genre">科幻</span>
- <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">预告片</a>
- </div>
相反,某些元素的URL属性不作为微数据内容:
- <a href="">
- <area href="">
- <audio src="">
- <embed src="">
- <iframe src="">
- <img src="">
- <link href="">
- <object data="">
- <source src="">
- <video src="">
- <base href="">
- <script src="">
- <input src="">