10 個你不知道的 HTML 元素
我聽過 “HTML很容易” 這種情緒的次數(shù)比我想象的要多。 雖然我同意 HTML 可能比其他編程語言更容易學習,但你不應該認為它是理所當然的。
HTML 是一種功能強大的標記語言,可用于為我們的 web 應用程序提供結構并提供強大的可訪問性優(yōu)勢,但只有在適當使用時才能使用。
因此,今天我們將發(fā)覺 10 個你可能不知道存在的 HTML 元素,希望你可以創(chuàng)建易訪問、結構更健全的 web 應用程序。
如果你想了解更多關于 HTML 的知識,可以訪問W3Schools以獲得更多的 HTML 元素。
Audio
標簽可以播放一個音頻,例如音樂或其他音頻流。目前支持三種文件格式:MP3、WAV 和 OGG。
運行效果:
Blockquote
標簽指定從另一個源引用的部分。
運行效果:
Output
標簽表示一個計算的結果。你可以使用加號和等號來指定應該將第一個和第二個輸入值輸出到輸出標記;可以使用包含要合并的兩個元素的 ID 的 for 屬性來表示這一點。
運行效果:
Picture
通過包含零或多個 元素和一個 元素來為不同的顯示/設備場景提供圖像版本。瀏覽器會選擇最匹配的子 元素,如果沒有匹配的,就選擇 元素的 src 屬性中的URL。然后,所選圖像呈現(xiàn)在元素占據(jù)的空間中。
source 元素具有以下屬性:
- srcset(必填):定義要顯示的圖像的URL
- media:media 屬性允許你提供一個用于給用戶代理作為選擇 元素的依據(jù)的媒體條件(media condition)(類似于媒體查詢)。如果這個媒體條件匹配結果為 false,那么這個 元素會被跳過。
- sizes: 定義單個寬度值,具有寬度值的單個媒體查詢,或具有寬度值的逗號分隔的媒體查詢列表
- type:type 屬性允許你為 元素的 srcset 屬性指向的資源指定一個 MIME 類型。如果用戶代理不支持指定的類型,那么這個 元素會被跳過。
如果瀏覽器不支持該元素,或者所有標簽都不匹配,則使用標簽提供向后兼容性。
Progress
標簽表示任務的進度。
標簽不能替代標簽,因此指示磁盤空間使用情況或查詢結果相關性的組件應該使用標簽。
運行效果:
Meter
標簽定義了一個定義范圍內(nèi)的標量度量,或者一個分數(shù)值。你還可以通過名稱gauge引用此標記。
你可以使用標簽來顯示磁盤使用情況統(tǒng)計數(shù)據(jù),或者指示搜索結果的相關性。
不應該使用標簽來指示任務的進度;這些類型的組件應該由元素定義。
運行效果:
Template
HTML內(nèi)容模板()元素是一種用于保存客戶端內(nèi)容機制,該內(nèi)容在加載頁面時不會呈現(xiàn),但隨后可以在運行時使用JavaScript實例化。
使用 JavaScript,你可以使用cloneNode()方法渲染此內(nèi)容。
Time
標簽定義了人類可讀的日期或時間。 這可以用于以機器可讀方式編碼日期和時間,以便用戶代理可以將生日提醒或預定事件添加到用戶的日歷。 此外,這允許搜索引擎產(chǎn)生“更智能”的搜索結果。
運行效果:
Video
標簽指定一個影片剪輯或視頻流。支持的格式包括MP4、WebM和Ogg。
運行效果:
Word Break Opportunity
如果你有一個很長的文本塊,或者一個很長的單詞,你可以使用標簽來指定文本主體中最理想的分割位置。這是一種確保瀏覽器在調(diào)整大小時不會在奇怪的位置中斷文本的方法。
運行效果: