6.微格式

微格式

经典真题

  • 知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

微格式介绍

所谓微格式,是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到 HTML 中,以便有助于分离式开发,并通过制定一些简单的约定,来兼顾 HTML 文档的人机可读性,相当于对 Web 网页进行了语义注解。

talk is cheap,show me code

以前我们是这样写一个链接到首页的代码的:

<a href=”http://www.bbon.cn”>Web Design Blog</a>

而现在我们要为这个代码元素 a 加上 rel 属性:

<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design Blog</a>

通过上面的代码,我们可以发现,多了一个 rel 属性。这个 rel=”home” 属性显示链接的目标页面是该网站的首页。

通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。

就这?

No、No、No,我们再去微格式的官网瞅一瞅:https://microformats.org/

官网对微格式是这么介绍的:

Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.

微格式基于简单的标记约定,使您能够向web内容添加有意义的结构。

One of the key principles of microformats, is to privilege human readable content. This means that you should think first and foremost of your content design being readable and accessible to web viewers.

微格式的一个关键原则是赋予人类可读内容特权。这意味着您应该首先考虑内容设计的可读性和可访问性。

Using the most appropriate HTML elements and applying structured class names to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools.

通过使用最合适的HTML元素并将结构化类名应用到标记中,您可以生成人类观众可以清楚理解的内容,并通过自动化程序和其他在线工具以结构化方式使用这些内容。

But the point is that you shouldn’t have to go out of your way to produce such machine friendly markup - microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.

但关键是,你不应该不遗余力地制作这样的机器友好型标记——微格式可以轻松地将这种更高程度的结构集成到你的网站中,而无需学习复杂的新语言或格式。

正如前面所介绍的,微格式就是为了兼顾 HTML 文档的人机可读性,在标签中添加的语义注解。

那好,那么我们以后书写所有的 HTML 代码,都要这样书写注解么?

并不是,否则人都傻了。微格式一般用于标记人员、组织、事件、地点、博客帖子、产品、评论、简历、食谱等的 HTML

例如:

Mark-up your contact info with h-card, link to other profiles with rel=“me”

使用 h-card 标记您的联系信息,使用 rel=“me” 链接到其他个人资料

Mark-up your blog with h-entry.

h-entry 标记你的博客。

这里我们以 h-card 为例。

h-card 是一种微格式,用来发布个人,公司,组织,地点等详细的联系信息。 它可以使分析器(比如其他网站,FirefoxOperator 插件)获得详细的信息,并通过别的网站或者地图工具进行显示,或者载入到地址簿等其他程序。

例如,没有加入 h-card 微格式时,我们的 HTML 结构如下:

<div><div>Joe Doe</div><div>The Example Company</div><div>604-555-1234</div><a href="http://example.com/">http://example.com/</a>
</div>

加入微格式后,成为:

<div class="vcard"><div class="fn">Joe Doe</div><div class="org">The Example Company</div><div class="tel">604-555-1234</div><a class="url" href="http://example.com/">http://example.com/</a>
</div>

这里,正式名称(class=”fn”),组织(class=”org”),电话号码(class=”tel”)和 urlclass=”url”)分别用相应的 class 标示。

同时,所有内容都包含在 class=“vcard” 里。

再例如,我们用一个维基媒体基金会的联系方式,来作为 h-card 微格式实例。

加入 h-card 微格式之前的信息内容如下:

Wikimedia Foundation Inc.
200 2nd Ave. South #358
St. Petersburg, FL 33701-4313
USA
Phone: +1-727-231-0101
Email: info@wikimedia.org
Fax: +1-727-258-0207

加入微格式后,成为:

<div class="vcard"><div class="fn org">Wikimedia Foundation Inc.</div><div class="adr"><div class="street-address">200 2nd Ave. South #358</div><div><span class="locality">St. Petersburg</span>,<span class="region">FL</span> <span class="postal-code">33701-4313</span></div><div class="country-name">USA</div></div><div>Phone: <span class="tel">+1-727-231-0101</span></div><div>Email: <span class="email">info@wikimedia.org</span></div><div><span class="tel"><span class="type">Fax</span>:<span class="value">+1-727-258-0207</span></span></div>
</div>

在这个例子中,正式名称(class=”fn”)和组织(class=”org”)写在了一个属性中,表示这是一个组织,而不是个人。

这个时候,有的小伙伴就要提问了,这些 h-card 里面的属性名是固定的么?

没错,常用的 h-card 属性还包括:bday(生日)、email(邮箱)、tel(电话)、nickname(昵称)等。

目前已具备完整规范的微格式还包括:hCard、hCalendar、XOXO、XFN、VoteLinks3 个 “rel-” 的微格式:rel- license、rel-nofollowrel-tag

至于每一种微格式的规范(里面有哪些属性)是什么,我们可以在官网进行查阅。

例如: h-card 的规范就可以参阅:https://microformats.org/wiki/h-card

真题解答

  • 知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

参考答案:

所谓微格式,是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到 HTML 中,以便有助于分离式开发,并通过制定一些简单的约定,来兼顾 HTML 文档的人机可读性,相当于对 Web 网页进行了语义注解。

采用微格式的 Web 页面,在 HTML 文档中给一些标签增加一些属性,这些属性对信息的语义结构进行注解,有助于处理 HTML 文档的软件,更好的理解该 HTML 文档。

在前端构建中微格式的意义

微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:

  1. 在爬取 Web 内容时,能够更为准确地识别内容块的语义;
  2. 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。

总结: 微格式可以对网站进行 SEO 优化,如果需要可以考虑。

-EOF-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697441.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过SSH 可以访问Ubuntu Desktop吗?

你可以在 Ubuntu Desktop 上开启 SSH 服务&#xff0c;以便其他机器可以通过 SSH 连接到你的服务器。以下是在 Ubuntu Desktop 上开启 SSH 服务的步骤&#xff1a; 打开终端 (Terminal) 应用程序。 输入以下命令安装 OpenSSH 服务器&#xff1a; sudo apt-get update sudo ap…

多任务爬虫(多线程和多进程)

在一台计算机中&#xff0c;我们可以同时打开多个软件&#xff0c;例如同时浏览网页、听音乐、打字等&#xff0c;这是再正常不过的事情。但仔细想想&#xff0c;为什么计算机可以同时运行这么多软件呢? 这就涉及计算机中的两个名词&#xff1a;多进程和多线程。 同样&#xf…

通信入门系列——锁相环、平方环、Costas环

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、锁相环 1、压控振荡…

重磅!MongoDB推出Atlas Stream Processing公共预览版

日前&#xff0c;MongoDB宣布推出Atlas Stream Processing公共预览版。 在Atlas平台上有兴趣尝试这项功能的开发者都享有完全的访问权限&#xff0c;可前往“阅读原文”链接点击了解更多详细信息或立即开始使用。 开发者喜欢文档型数据库的灵活性、易用性以及Query API查询方…

使用k-近邻算法改进约会网站的配对效果(kNN)

目录 谷歌笔记本&#xff08;可选&#xff09; 准备数据&#xff1a;从文本文件中解析数据 编写算法&#xff1a;编写kNN算法 分析数据&#xff1a;使用Matplotlib创建散点图 准备数据&#xff1a;归一化数值 测试算法&#xff1a;作为完整程序验证分类器 使用算法&…

js过滤取出对象中改变的属性和值

朋友公司的面试题 &#xff0c;取出对象中被改变的属性和值 const obj1 { a: 1, b: 2, c: 4 }; const obj2 { a: 1, b: 2, c: 5 }; 方法1 function testFun(obj1, obj2) {const diff {};const keys1 Object.keys(obj1);const keys2 Object.keys(obj2);const allKyes keys…

【深度学习】Gemini 1.0 Pro 如何让chatGPT扮演stable diffusion的提示词工程师

google也出了一个chatGPT&#xff0c;免费申请使用&#xff1a; https://aistudio.google.com/app/prompts/new_chat https://github.com/google/generative-ai-docs/blob/main/site/en/tutorials/rest_quickstart.ipynb 模型信息&#xff1a; $ curl https://generativelan…

SpringCloud(14)之SpringCloud Consul

我们知道 Eureka 2.X 遇到困难停止开发了&#xff0c;所以我们需要寻找其他的替代技术替代Eureka&#xff0c;这一小 节我们就讲解一个新的组件Consul。 一、Consul介绍 Consul 是 HashiCorp 公司推出的开源工具&#xff0c;用于实现分布式系统的服务发现与配置。与其它分布式…

kali xrdp

Kali Linux 使用远程桌面连接——xrdp&xfce_kali xfce桌面-CSDN博客 Ubuntu/Debian/Kali xrdp远程桌面黑屏/空屏/无画面解决办法 - 知乎 (zhihu.com) sudo apt-get install xrdp -y sudo apt-get install xfce4 -ysudo systemctl enable xrdp --now systemctl status xrd…

中级.NET开发工程师面试经历

文章目录 前言面试题目&#xff08;只记录了还记得的部分&#xff09;一.简单说下.NETCORE的生命周期&#xff1f;二.C#如何保证在并发情况下接口不会被重复触发&#xff1f;三.引用类型和值类型有什么区别&#xff1f;四.那怎样能让引用类型和值类型一样&#xff0c;在赋值的时…

【Latex】TeXstudio编译器选项修改

1、动机 编译国科大博士毕业答辩论文latex时报错 Package ctable Error: You must load ctable after tikz. 2、方法 经过搜索发现是因为这是中文模板&#xff0c;编译的选项不对&#xff0c;需要从 PDFLaTeX 调整到 XeLaTeX。于是操作如下 1&#xff09;点击选项 2&#xf…

linux 文件目录操作命令【重点】

目录 ls cd cat more tail【工作中使用多】 mkdir rmdir rm ls 作用: 显示指定目录下的内容 语法: ls [-al] [dir] 说明: -a 显示所有文件及目录 (. 开头的隐藏文件也会列出) -l 除文件名称外&#xff0c;同时将文件型态(d表示目录&#xff0c;-表示文件)、权限…

SpringMVC POST请求传参 属性名字母大写注入失败解决方案

问题描述&#xff1a; 我现在有一个接口通过一个实体(RequestBody)去接收一系列的参数&#xff0c;前端传参为一个JSON字符串&#xff0c;但是当我的属性名以大写字母开头(有的中间还有下划线)&#xff0c;或者第二个字母是大写字母的时候&#xff0c;我发现后端接收不到参数值…

Flask——基于python完整实现客户端和服务器后端流式请求及响应

文章目录 本地客户端Flask服务器后端客户端/服务器端流式接收[打字机]效果 看了很多相关博客&#xff0c;但是都没有本地客户端和服务器后端的完整代码示例&#xff0c;有的也只说了如何流式获取后端结果&#xff0c;基本没有讲两端如何同时实现流式输入输出&#xff0c;特此整…

C++字符串类

C中有两种主要的字符串类&#xff1a;std::string 和 std::wstring。 std::string std::string 是 C 标准库中用于处理 ASCII 字符串的类。它提供了丰富的方法来操作字符串&#xff0c;包括插入、删除、查找子串、比较等功能。使用 std::string 需要包含头文件 <string>…

8.CSS层叠继承规则总结

CSS 层叠继承规则总结 经典真题 请简述一下 CSS 中的层叠规则 CSS 中的层叠继承规则 在前面《CSS属性的计算过程》中&#xff0c;我们介绍了每一个元素都有都有所有的属性&#xff0c;每一个属性都会通过一系列的计算过程得到最终的值。 这里来回顾一下计算过程&#xff0…

Node.js中如何处理异步编程

在Node.js中&#xff0c;处理异步编程是至关重要的技能。由于Node.js的单线程执行模型&#xff0c;异步编程可以极大地提高程序的性能和响应速度。本文将介绍几种常见的异步编程处理方式&#xff0c;并附上示例代码&#xff0c;帮助您更好地理解和应用异步编程技术。 回调函数…

家政小程序开发,引领家庭服务新时代的科技革命

随着科技的飞速发展&#xff0c;人们的生活方式正在发生深刻的变化。其中&#xff0c;家政服务作为日常生活的重要组成部分&#xff0c;也在经历着一场由小程序技术引领的科技革命。本文将探讨家政小程序的发展趋势、功能特点以及对家庭服务的深远影响。 一、家政小程序的发展…

Linux命令-chattr命令(用来改变文件属性)

说明 chattr命令 用来改变文件属性。这项指令可改变存放在ext2文件系统上的文件或目录属性&#xff0c;这些属 性共有以下8种模式。 语法 chattr(选项)选项 a&#xff1a;让文件或目录仅供附加用途&#xff1b; b&#xff1a;不更新文件或目录的最后存取时间&#xff1b; c…

NFTScan Labs,一个聚焦在 NFT 领域的开发者组织

NFTScan Labs 是一个聚焦在 NFT 领域的开发者组织&#xff0c;成立于 2021 年 3 月份。NFTScan Labs 核心成员从 2016 年开始涉足区块链领域&#xff0c;有多年开发经验和前沿行业认知&#xff0c;对加密钱包、区块链安全、链上数据追踪、DeFi、预言机、NFT 等领域有深入的研究…