微格式
經典真題
- 知道什么是微格式嗎?談談理解。在前端構建中應該考慮微格式嗎?
微格式介紹
所謂微格式,是建立在已有的、被廣泛采用的標準基礎之上的一組簡單的、開放的數據格式。
具體表現是把語義嵌入到 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 是一種微格式,用來發布個人,公司,組織,地點等詳細的聯系信息。 它可以使分析器(比如其他網站,Firefox 的 Operator 插件)獲得詳細的信息,并通過別的網站或者地圖工具進行顯示,或者載入到地址簿等其他程序。
例如,沒有加入 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”)和 url(class=”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、VoteLinks 和 3 個 “rel-” 的微格式:rel- license、rel-nofollow 和 rel-tag。
至于每一種微格式的規范(里面有哪些屬性)是什么,我們可以在官網進行查閱。
例如: h-card 的規范就可以參閱:https://microformats.org/wiki/h-card
真題解答
- 知道什么是微格式嗎?談談理解。在前端構建中應該考慮微格式嗎?
參考答案:
所謂微格式,是建立在已有的、被廣泛采用的標準基礎之上的一組簡單的、開放的數據格式。
具體表現是把語義嵌入到 HTML 中,以便有助于分離式開發,并通過制定一些簡單的約定,來兼顧 HTML 文檔的人機可讀性,相當于對 Web 網頁進行了語義注解。
采用微格式的 Web 頁面,在 HTML 文檔中給一些標簽增加一些屬性,這些屬性對信息的語義結構進行注解,有助于處理 HTML 文檔的軟件,更好的理解該 HTML 文檔。
在前端構建中微格式的意義
微格式按照某種已有的被廣泛應用的標準,通過對內容塊的語義標記,可以讓外部應用程序、聚合程序和搜索引擎能夠做以下事情:
- 在爬取 Web 內容時,能夠更為準確地識別內容塊的語義;
- 對內容進行操作,包括提供訪問、校對,還可以將其轉化成其他的相關格式,提供給外部程序和Web服務使用。
總結: 微格式可以對網站進行 SEO 優化,如果需要可以考慮。
-EOF-