html5 itemscope itemtype

最新推荐文章于 2021-07-14 17:23:12 发布

沈纵情

最新推荐文章于 2021-07-14 17:23:12 发布

阅读量6.3k

点赞数

分类专栏： html5-web 文章标签： html5 class email header div date

本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7633829

版权

html5-web 专栏收录该内容

34 篇文章

订阅专栏

自测代码如下：

<!DOCTYPE html>
<html  charset="utf-8">
<body>
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Person"> 
  <div class="header">
   <h1><span itemprop="name">liaojianguo</span></h1>
   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
	<ul class="info">
		<li class="address">
                     <span itemprop="street">nanjing </span>
                </li>
        </ul> 
        <ul class="info">
                <li class="phone">
                          <span itemprop="telephone">
                                1595052****
                          </span>
                </li>
                <li class="email">
                          <a href="mailto:jianguoliao19840726@gmail.com" itemprop="email">
                                jianguoliao19840726@gmail.com
                          </a>
                </li>
                <li class="renren">
                         <a rel="me" itemprop="url" href="http://renren.com/renren-screen-name" title="Follow Me on RenRen">
                                @renren-screen-name
                         </a>
                </li>
	</ul>
   </div> 
  </div>
</div>
</section>
</body>
</html>

另一个测试的例子：

<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
		<body>
			<div itemscope itemtype="http://data-vocabulary.org/Person">
				我叫
				<span itemprop="name">廖建国</span>
				， 你也可以叫我
				<span itemprop="nickname">小廖</span>
				。 我的个人首页是：
				<a
					href="http://blog.csdn.net/jianguo_liao19840726/article/category/1155166"
					itemprop="url">www.html5demo.com</a>
				我住在南京江宁玉树路文鼎雅苑14#。我是
				<span itemprop="title">工程师</span>
				， 目前在
				<span itemprop="affiliation">一家产品公司</span>
				上班。
			</div>

			<p itemscope>
				<time itemprop="date" datetime="2011-12-05">我</time>
				喜欢
				<a itemprop="url"
					href="http://blog.csdn.net/jianguo_liao19840726/article/category/1155166">
					<span itemprop="name">廖建国</span>
				</a>
				这个大笨蛋
			</p>


			<p itemscope>
				<span itemprop="name">中国近代史</span>
				著者是
				<span itemprop="members" itemscope>
					<span itemprop="name">徐中约</span>
					。
				</span>
			</p>


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


			<p itemscope>
				<span itemprop="name call">志玲姐</span>
				是个美女。
			</p>

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


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


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

		</body>
</html>