摘要:如果你想了解更多關(guān)于的知識(shí),可以訪問以獲得更多的元素。如果用戶代理不支持指定的類型,那么這個(gè)元素會(huì)被跳過。
想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你!
我聽過 “HTML很容易” 這種情緒的次數(shù)比我想象的要多。 雖然我同意 HTML 可能比其他編程語言更容易學(xué)習(xí),但你不應(yīng)該認(rèn)為它是理所當(dāng)然的。
HTML 是一種功能強(qiáng)大的標(biāo)記語言,可用于為我們的 web 應(yīng)用程序提供結(jié)構(gòu)并提供強(qiáng)大的可訪問性優(yōu)勢,但只有在適當(dāng)使用時(shí)才能使用。
因此,今天我們將發(fā)覺 10 個(gè)你可能不知道存在的 HTML 元素,希望你可以創(chuàng)建易訪問、結(jié)構(gòu)更健全的 web 應(yīng)用程序。
如果你想了解更多關(guān)于 HTML 的知識(shí),可以訪問W3Schools以獲得更多的 HTML 元素。
Audio運(yùn)行效果:
查看示例
Blockquote標(biāo)簽指定從另一個(gè)源引用的部分。
運(yùn)行效果:
查看示例
Output標(biāo)簽表示一個(gè)計(jì)算的結(jié)果。你可以使用加號(hào)和等號(hào)來指定應(yīng)該將第一個(gè)和第二個(gè)輸入值輸出到輸出標(biāo)記;可以使用包含要合并的兩個(gè)元素的 ID 的 for 屬性來表示這一點(diǎn)。
運(yùn)行效果:
查看示例
Picture通過包含零或多個(gè) 元素和一個(gè) 元素來為不同的顯示/設(shè)備場景提供圖像版本。瀏覽器會(huì)選擇最匹配的子 元素,如果沒有匹配的,就選擇 元素的 src 屬性中的URL。然后,所選圖像呈現(xiàn)在元素占據(jù)的空間中。
source 元素具有以下屬性:
srcset(必填):定義要顯示的圖像的URL
media:media 屬性允許你提供一個(gè)用于給用戶代理作為選擇
sizes: 定義單個(gè)寬度值,具有寬度值的單個(gè)媒體查詢,或具有寬度值的逗號(hào)分隔的媒體查詢列表
type: type 屬性允許你為
如果瀏覽器不支持該元素,或者所有
標(biāo)簽表示任務(wù)的進(jìn)度。
標(biāo)簽不能替代
運(yùn)行效果:
查看示例
Meter你可以使用
不應(yīng)該使用
運(yùn)行效果:
查看示例
TemplateHTML內(nèi)容模板()元素是一種用于保存客戶端內(nèi)容機(jī)制,該內(nèi)容在加載頁面時(shí)不會(huì)呈現(xiàn),但隨后可以在運(yùn)行時(shí)使用JavaScript實(shí)例化。
使用 JavaScript,你可以使用cloneNode()方法渲染此內(nèi)容。
Time標(biāo)簽定義了人類可讀的日期或時(shí)間。 這可以用于以機(jī)器可讀方式編碼日期和時(shí)間,以便用戶代理可以將生日提醒或預(yù)定事件添加到用戶的日歷。 此外,這允許搜索引擎產(chǎn)生“更智能”的搜索結(jié)果。
運(yùn)行效果:
查看示例
Video標(biāo)簽指定一個(gè)影片剪輯或視頻流。支持的格式包括MP4、WebM和Ogg。
運(yùn)行效果:
查看示例
Word Break Opportunity如果你有一個(gè)很長的文本塊,或者一個(gè)很長的單詞,你可以使用
運(yùn)行效果:
查看示例
希望這十個(gè)HTML元素為你提供了一些構(gòu)建出色應(yīng)用程序的新工具。
你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力,歡迎點(diǎn)贊!
交流干貨系列文章匯總?cè)缦?,覺得不錯(cuò)點(diǎn)個(gè)Star,歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智,公眾號(hào)「大遷世界」作者,對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!
關(guān)注公眾號(hào),后臺(tái)回復(fù)福利,即可看到福利,你懂的。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104092.html
摘要:如果你想了解更多關(guān)于的知識(shí),可以訪問以獲得更多的元素。如果用戶代理不支持指定的類型,那么這個(gè)元素會(huì)被跳過。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 我聽過 HTML很容易 這種情緒的次數(shù)比我想象的要多。 雖然我同意 HTML 可能比其他編程語言更容易學(xué)習(xí),但你不應(yīng)該認(rèn)為它是理所當(dāng)然的。 HTML 是一種功能強(qiáng)大的標(biāo)記語言,可用于為我們的 web 應(yīng)用程序提...
摘要:如果你并不是一個(gè)特別有經(jīng)驗(yàn)的程序員,我相信你未必知道屬性除了能用在文本顯示,還可以用作其它地方。說實(shí)話,估計(jì)這個(gè)值很少人會(huì)使用它,但你要知道確實(shí)可以使用這樣的一個(gè)值,如果以前不知道它,那么,現(xiàn)在,在有些罕見的地方,你也許就會(huì)變得聰明一點(diǎn)了。 雖然CSS并不是一種很復(fù)雜的技術(shù),但就算你是一個(gè)使用CSS多年的高手,仍然會(huì)有很多CSS用法/屬性/屬性值你從來沒使用過,甚至從來沒聽說過。 1...
摘要:歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
摘要:歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
摘要:歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...
閱讀 852·2021-11-16 11:56
閱讀 1676·2021-11-16 11:45
閱讀 3123·2021-10-08 10:13
閱讀 4113·2021-09-22 15:27
閱讀 734·2019-08-30 11:03
閱讀 651·2019-08-30 10:56
閱讀 957·2019-08-29 15:18
閱讀 1750·2019-08-29 14:05