來看看 HTML 的歷史和規範常識,HTML 規範是 W3C 與 WHATWG 合作共同產出的,HTML5 因此也不例外。其中:
- W3C 指 World Wide Web Consortium
- WHATWG 指 Web Hypertext Application Technology Working Group
說好聽了是“合作產出”,但其實更像是“HTML5 有兩套規範”。但話說天下大勢合久必分,分久必合,如今它們又表示將會開發單一版本的 HTML 規範。
HTML5新增的標籤和功能,常規的我相信大家都知道,這裡就不囉嗦了,這裡介紹兩個大家可能不知道的功能,很實用!
給漢字加拼音
簡單幾行代碼
<code><ruby>
做工程師不做碼農
\t
/<ruby>/<code>
效果如下
展開收起組件
簡單幾行代碼
<code><details>
<summary>頭條號《做工程師不做碼農》/<summary>
歡迎大家關注我的頭條號,專注大前端、全棧、程序員成長的公眾號!如果對你有所啟發和幫助,可以點個關注、收藏,也可以留言討論,這是對作者的最大鼓勵。
作者簡介:Web前端工程師,全棧開發工程師、持續學習者。
/<details>/<code>
就可以實現
上圖為“收起”效果
上圖為展開效果
以往要實現這樣的內容,我們都必須依靠 JavaScript 實現。現在來看,HTML 也變得更加具有“可交互性”。
原生進度條和度量
progress 標籤顯示進度:
值得一提的是:progress 不適合用來表示度量衡,如果想表示度量衡,我們應該使用 meter 標籤代替。這又是什麼標籤?
meter 用來度量給定範圍(gauge)內的數據:
<code><meter> 十分之三
<meter> 60%/<code>
Chrome顯示效果如下
是不是很冷門但很使用?
若果你是一個初學者,推薦下面這本豆瓣8.5分的好書
如果對你有所啟發和幫助,可以點個關注、收藏,也可以留言討論,這是對作者的最大鼓勵。
作者簡介:Web前端工程師,全棧開發工程師、持續學習者。
閱讀更多 做工程師不做碼農 的文章