• 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条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部