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.pswp.cn/news/697441.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/697441.shtml
英文地址,請注明出處:http://en.pswp.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 等領域有深入的研究…