-
Chapter3 有意义的标记
普通类 -
- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
-
-
回顾语义元素
上章所讲的都是页面结构方面的语义元素,除此之外还有文本级语义元素
<time> 标注时间和日期
eg. The party starts at <time datatime="2013-03-21T16:30-5:00"> March 21<sup>st</sup></time> 这其中 datatime属性是为了便于机器处理,而中间的文本部分是在浏览器上显示给用户看的
此外,<time>标签还有个pubdate属性,表示对应发表日期的时候可以使用<time datatime="2013-03-21T16:30-5:00" pubdate>2013-3-21<time><output> 显示结果
这个元素太好了,其实是一个占位符,用于使某种JavaScript驱动的页面更加清晰,可展示计算后的内容。
更好的使用语义是为<output>标签添加form 和for属性,前者表示包含相关空间的表单ID,后者的值是以空格分隔的相关控件的ID。它们虽然不干什么事,可是表明了这个部分的语义作用\
<p>Your BMI:<output id="result" form="bmicaculator" for="feet inches pounds"></output></p>
需要一直注意的是,要像第二章中介绍的那样为IE包含相应的脚本,不然它不能通过javascript来访问此元素。(笨IE)mark突出显示文本
标注突显文本。浏览器会给<mark>中的文本添加黄色背景,可使用它标注重要的内容或关键字。当然还可以结合<del>(删除的文本)和<ins>(插入的文本)组合使用,表明文档变化
-
其他语义标准
HTML5还缺少很多语义元素,可是不能无限制拓展标准。因此催生了很多其他标准
Microformats
一种在网页中嵌入元数据的简单而比较合理的方式
1.使用hCard标注联系信息
下面是使用hCard的标准形式,必须要有一个根元素为vcard属性,并且内部至少要包含一个格式化的名字,class中必须包含fn
<div class="vcard"> <a class="fn" href="http://tantek.com/">Mike Rowe Formatte</a></div>
<div class="vcard">
<div class="fn">Mike Rowe Formatte</div>
<div class="title">程序开发员</div>
<img class="photo" src="face.jpg" alt="Mike的脸"/>
<div class="tel">13588882345</div>
</div>
hCard受支持的属性可见http://microformats.org/wiki/card
使用vCard的好处,浏览器插件可以识别(http://microformats.org/wiki/browser)
比如安装Chrome的插件后:
另外还有Oomph,它可以安装到IE中,从访问的页面搜索3个微格式(hCard、hCalendar(活动列表)、hMedia(图像、音频和视频)),使用Oomph的js库还可以在页面上使用弹出的微格式按钮来增强体验
http://www.prosetech.com/html5/Chapter%2003/Microformats.html
hCalendar
标注活动的简单方式
Facebook上的所有活动页面都采用的这种威格士,这样用户可以使用Operator等浏览器提取详细信息
<div class="vevent">
<h2 class="summary">Web Developer Clam Bake</h2>
<p>I'm hosting a party!</p>
<p>It's <span class="dtstart" title="2011-10-25T13:30">Tuesday, October 25, 1:30PM</span>
at the <span class="location">Deep Sea Hotel, San Francisco, CA</span></p>
</div>
MicroData
是尝试解决语义标记问题的另一个选择。它使用自己的属性。首先要给相应元素添加itemscope和itemtype属性。在这里不是使用“class”,而是使用“itemprop”来标注重要的信息。
<div itemscope itemtype="http://data-vocabulary.org/Person">
<img itemprop="photo" src="face.jpg" alt="Mike's Face">
<p>This website is the work of
<span itemprop="title" style="display:none">Web Developer</span>
<b itemprop="name">Mike Rowe Formatte</b>.
His friends know him as <b itemprop="nickname">The Big M</b>.</p><p>You can contact him where he works, at
<span itemprop="affiliation">The Magic Semantic Company</span> (phone
<span itemprop="tel">641-545-0234</span> and ask for Mike).</p><p>Or, visit him there at:<br>
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">42 Jordan Gordon Street, 6th Floor</span><br>
<span itemprop="locality">San Francisco</span>,
<span itemprop="region">CA</span>
<span itemprop="postal-code">94105</span><br>
<span itemprop="country-name">USA</span><br>
</span>
<a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics.com</a>
</div>-
Google Rich Snippets
在网页中放入正确的语义能够使得谷歌为网站建议漂亮的搜索列表,提示用户访问网站的可能性,对某些关键词有更好的排名。
谷歌提供的测试工具:http://www.google.com.hk/webmasters/tools/richsnippets
这个工具会检测提供的页面,展示Google从中提取的语义数据以及定制页面在搜索结果中呈现的方式
测试了下学习元的,果然是什么都没有呀,估计以后还需要加强。
-
-
- 标签:
- 语义
- 页面
- 属性
- 文本
- 元素
- 语义元素
- 浏览器
- 文本浏览器
-
学习元评论 (0条)
聪明如你,不妨在这 发表你的看法与心得 ~