search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.38k stars 3.25k forks source link

[软技能] 第136天 你知道什么是微格式(microformat)吗？说说你的理解，它有什么运用场景？ #1131

Open haizhilin2013 opened 5 years ago

haizhilin2013 commented 5 years ago

第136天 你知道什么是微格式(microformat)吗？说说你的理解，它有什么运用场景？

xxf1996 commented 5 years ago

查了一下资料，这个微格式可以看做是在HTML内约定俗成的数据展示方式或协议？方便搜索引擎或是聚合器这类数据抓取工具获取某类特定信息。

EmiyaYang commented 5 years ago

microformats官方定义 Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

应用场景:

  1. 手机通信录使用vCard, 这是一种电子名片的微格. 导出文件格式为vcf
  2. 使用hCard定义的一系列语义化属性作为dom的class进行添加, 增强语义化, 有利于SEO
censek commented 4 years ago

微格式，利用 HTML 的 class 属性来对网页添加附加信息。

应用举例：当你用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示你“是否保存到通讯录”，于是你可以很经松地保存所需要的信息。

<div class="vcard">
    <div class="fn">Joe</div>
    <div class="org">Company A</div>
    <div class="tel">400-800-12345</div>
    <a href="http://companyA.com" class="url">http://companyA.com</a>
</div>

这里，正式名称 class=”fn”，组织 class=”org”，电话号码 class=”tel” 和 url class=”url” 分别用相应的 class 标示；同时，所有内容都包含在 class="vcard" 里。