html5网站制作实例:改进“About Me”页面_优品建站

html5网站制作实例:改进“About Me”页面

  我们已经了解了微格式和微数据这两个语义流派的基本结构。以此为起点,大家可以自己(到http://microformats.org)去找新的微格式,或者(到http://schema.org)去找微数据词汇表,从头开始编写富有语义的标记。
  但生活往往并没有那么如意,至少对大多数Web开发者来说没有。更常见的情况则是你手头已经有了一个包含数据的网页,你需要改进其中的标记,将其语义化。如果你记住以下几点,这件事倒也不难。
  ❑ 通常,有些重要的数据会混在一些无关紧要的数据中。此时,可以给重要的数据加上新标记,比如用<div>标记块级元素,用<span>标记行内元素。
  ❑ 不用担心信息的次序。只要使用的类名(微格式)或属性名(微数据)正确,就可以按照自己的意愿组织标记。
  ❑ 想显示图片,就用<img>;想放个链接,就用<a>。除此之外,一般就是标记普通的文本。
  下面就有一个典型的例子。图3-4中的“About Me”页面包含以下内容:

图3-4:这个“About Me”页面包含网站作者的详细联系信息,但尚未添加任何微数据标记

<h1>About Me</h1>


<img src="face.jpg" alt="Mike's Face">
<p>This website is the work of <b>Mike Rowe Formatte</b>.
His friends know him as <b>The Big M</b>.</p>


<p>You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike) or email mike-f@magicsemantics.com.</p>


<p>Or, visit Mike on the job at:<br>
42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a href="http://www.magicsemantics.com">www.magicsemantics.com</a>
</p>
  很明显,这个例子用我们熟悉的Person词汇表(http://schema.org/Person)正合适。我们试着给“About Me”页面中的重要信息添加微数据标记。新增的微数据标记都加粗了。

<h1>About Me</h1>


<div itemscope itemtype="http://schema.org/Person">
  <img itemprop="image"src="face.jpg" alt="Mike's Face">
  <p>This website is the work of
  <span itemprop="jobTitle"style="display:none">Web Developer</span>
  <b itemprop="name">Mike Rowe Formatte</b>.
  His friends know him as <b itemprop="additionalname">The Big M</b>.</p>
  <p>You can contact him where he works, at
  The Magic Semantic Company</span> (phone
  <span itemprop="telephone">641-545-0234</span> and ask for Mike)
  or email <span itemprop="email">mike-f@magicsemantics.com</span>.</p>
  <p>Or, visit Mike on the job at:<br>
  42 Jordan Gordon Street, 6th Floor<br>
  San Francisco, CA 94105<br>
  USA<br>
  <a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics.
com</a>
  </p>
</div>
  这个例子用了几种技巧。
  ❑ 使用新<span>包含了需要标注微数据的内容。
  ❑ 给原有合适的元素添加了itemprop属性。比如,<b>里面是名字,因此没必要再多此一举弄个<span>了。(当然,你加上也可以。就像这样:<b><span itemprop="name">Mike Rowe Formatte</span></b>。)
  ❑ 使用看不见的<span>表示人的职务。(文本使用行内样式将display设为none。)这个技巧经常用于隐藏多余信息,但又可以让搜索引擎和其他工具找得到。也有人说这种做法会导致一些工具(如Google)对其视而不见,因为这些信息对用户不可见。
  微数据经常会有嵌套的结构,即一个词汇表会套住另一个。比如,可以在Person词汇表的个人详细信息中套上地址信息,而地址信息使用的词汇可能来自PostalAddress词汇表。
  标记地址信息时,要使用带有itemprop、itemscope或itemtype属性的<div>或<span>元素。itemprop是属性名,itemscope属性表示要使用新词汇表提供属性数据,而itemtype属性是以XML命名空间表示的词汇表(在这里是http://schema.org/PostalAddress)。下面是两个词汇表嵌套的结果:

<div itemscope itemtype="http://schema.org/Person">
  <img itemprop="image" src="face.jpg" alt="Mike's Face">
  <p>This website is the work of
  ...
  <p>Or, visit Mike on the job at:<br>
  <span itemprop="address" itemscope
  itemtype="http://schema.org/PostalAddress">
    ...
  </span>
</div>
接下来就可以在新区域中标注地址信息了:

<div itemscope itemtype="http://schema.org/Person">
  <img itemprop="image" src="face.jpg" alt="Mike's Face">
  <p>This website is the work of
  ...


  <p>Or, visit Mike on the job at:<br>
  <span itemprop="address" itemscope
  itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">42 Jordan Gordon Street,
    6th Floor</span><br>
    <span itemprop="addressLocality">San Francisco</span>,
    <span itemprop="addressRegion">CA</span>
    <span itemprop="postalCode">94105</span><br>
    <span itemprop="addressCountry">USA</span><br>
  </span>
  ...
</div>
  这样完全没有问题。或许你不太清楚什么时候可以在一个微数据区域中再新开一个微数据区域,那就看看这个参考页面吧:http://schema.org(参见图3-5)。
  图3-5:Person词汇表的属性很多(图中只显示了一少部分)。大多数属性用于标注普通文本、数值或日期。但有一些(如这里能看到的address属性)会使用自己的词汇表(PostalA ddress)。单击相应链接,可以了解更多内容
  在标注公司名称时,同样可以采用这种嵌套的方式。在此,需要把人的affiliation属性设置为使用Organizatioin词汇表:
<p>You can contact him where he works, at
<span itemprop="affiliation" itemscope
 itemtype="http://schema.org/Organization">
  <span itemprop="name">The Magic Semantic Company</span>
</span>
  提示 如果你不喜欢手工输入itemtype或itemprop等属性名,可以找一个在线工具来帮你自动生成。比如,http://schema-creator.org和http://www.microdatagenerator.com。这两个网站的用法差不多,你选择词汇表,然后在文本框里输入数据,最后复制生成的标记。
在浏览器中提取语义数据
  说到这儿,我们还应该了解一下这么做的好处。尽管目前还没有浏览器能原生识别微格式(至少在本书写作时没有),但还是有不少插件和脚本可以赋予浏览器这种能力。至于这些语义数据的用途,当然也不少。比如,浏览器可以检测页面中的联系信息,把它们单列在一个面板中,让你像添加页面书签一样,迅速地添加联系人信息。再比如,浏览器检测到会议信息后,你可以只单击一下,就把该会议添加到自己的活动日历中,或者在地图中标出会议地点。
  目前还没有插件能做到这些。不过,一些骨灰级的Web开发人员已经写了不少JavaScript脚本,用于搜索微格式或微数据,通过弹出层显示它们,或者用于其他用途。(比如用JavaScript写的微格式工具:http://krofdrakula.github.io/microdata-tool/。)某些浏览器也有相应的插件可以发现网页中不同的元数据(图3-6)。
  图3-6:Chrome扩展Semantic Inspector可以提取当前页面中的所有元数据。单击其工具条中的按钮,就可以看到语义数据层。这个图是使用该扩展提取“About Me”页面中元数据的结果

  将来,主流浏览器很可能原生支持微格式,就像IE和Firefox原生支持数据源一样。数据源是一种特殊的标记文档,可以提供最新内容,比如最新文章汇总等。如果你使用Firefox打开某个博客,它会自动检测博客的RSS数据源,为你提供一个“实时”的新内容书签。微格式将来也可以为网页提供类似的附加价值。

  优品建站免费提供网站制作报价服务。

  • html5实例:改进“About Me”页面
    本文我们将试着给“About Me”页面进行修改完善。
  • html5+css3+javascript实用案例:分组标签制作联系方式
    本案例将实现明日学院网站的“联系我们”页面。将介绍<div>和<span>分组标签,对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。
  • HTML5案例实战:访问用户位置的方法和应用技巧
    由于国家网络限制,内地访问谷歌地图不是很顺畅,建议读者选用高德地图或百度地图开发API,也可以直接使用本书提供的用户key(http://lbs.amap.com/)进行上机练习。
  • html5的<audio>标签和<video>标签
    在HTML5中,新增了两个标签——<video>标签与<audio>标签。<video>标签专门用来播放网络上的视频或电影,而<audio>标签则专门用来播放网络上的音频数据。
  • HTML5提供网站制作的表单验证属性
    HTML5为表单验证提供了极大的方便,在验证表单的方式上显得更加灵活。表单验证,首先会基于前面讲解的表单类型的规则进行验证;其次是为表单元素提供了一些用于辅助表单验证的属性。
  • 浏览器对HTML5语义元素的支持情况
    HTML5的这些语义元素已经基本得到了所有现代浏览器的支持。就算你想找到一个不支持它们的Chrome、Firefox、Safari或Opera的版本,都不太可能。最大的绊脚石还是IE9之前的Internet Explorer,包括仍然占很大比例的IE8。
  • HTML5与移动Web开发
    HTML5技术早在2011年就已经被各大浏览器厂商所支持,但是该标准真正制定的完成时间是2014年10月29日。HTML5具有以下特性,以适应移动Web开发。
  • html5网站制作层叠样式表(CSS)简介
    CSS(Cascading Style Sheet,一般翻译为“层叠样式表”或“级联样式表”)是一组HTML元素外观的设置规则,用于控制Web页面的表现形式。
  • HTML5网站制作语法的新变化
    为了兼容各个不统一的页面代码,HTML5的设计在语法方面做了以下变化。
  • 基于HTML5的移动Web开发
    作为新一代的Web技术标准,HTML5标准定义的规范非常广泛,以下标准在目前的移动Web浏览器中已得到很好的支持。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC