国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

HTML5&details標(biāo)簽屬性

時間:2024-08-31 06:56:37 HTML5 我要投稿
  • 相關(guān)推薦

HTML5&details標(biāo)簽屬性

  HTML5中新增的標(biāo)簽允許用戶創(chuàng)建一個可展開折疊的元件,讓一段文字或標(biāo)題包含一些隱藏的信息。

  HTML5標(biāo)簽用法

  一般情況下,details用來對顯示在頁面的內(nèi)容做進(jìn)一步驟解釋。其展現(xiàn)出來的效果和jQuery手風(fēng)琴插件差不多。

  其大致寫法如下:

  Google Nexus 6

  商品詳情:

  屏幕

  5.96” 2560x1440 QHD AMOLED display (493 ppi)

  電池

  3220 mAh

  相機(jī)

  13MP rear-facing with optical image stabilization 2MP front-facing

  處理器

  Qualcomm Snapdragon 805 processor

  首先是

  標(biāo)簽,里面接著是標(biāo)題,這里面的內(nèi)容一般簡短,具有總結(jié)性,會展示在頁面。接著可以跟任意類型的HTML元素作為詳情內(nèi)容,這些內(nèi)容需要在點(diǎn)擊

  才會呈現(xiàn)。

  上面代碼呈現(xiàn)出來的效果會是下面這樣的:

  最開始詳情是隱藏的,當(dāng)點(diǎn)擊時都會展現(xiàn)。

  open 屬性

  當(dāng)然,你也可以通過給

  標(biāo)簽設(shè)置open屬性讓它默認(rèn)為展開狀態(tài)。

  Google Nexus 6

  商品詳情:

  屏幕

  5.96” 2560x1440 QHD AMOLED display (493 ppi)

  電池

  3220 mAh

  相機(jī)

  13MP rear-facing with optical image stabilization 2MP front-facing

  處理器

  Qualcomm Snapdragon 805 processor

  此時默認(rèn)會把詳情展開,而點(diǎn)擊標(biāo)題后會折疊起來。

  示例

  示例如上面那樣,預(yù)覽在線版本可點(diǎn)擊此處。

  瀏覽器兼容性

  由于是HTML5新標(biāo)簽,瀏覽器支持情況不是很理想。從來自caniuse的數(shù)據(jù)來看,目前僅Chrome, Safari 8+ 和Opera 26+支持此標(biāo)簽。

  可喜的是,如果你在caniuse開啟了「顯示來自UC瀏覽器的結(jié)果」 選項的話,會發(fā)現(xiàn),國產(chǎn)的UC瀏覽器也支持了此標(biāo)簽。

【HTML5&details標(biāo)簽屬性】相關(guān)文章:

關(guān)鍵詞標(biāo)簽和描繪標(biāo)簽的寫作技巧10-10

收集的常用的HTML標(biāo)簽09-10

css屬性定位教程07-23

在HTML中的tabIndex屬性09-24

HTML字體標(biāo)記及屬性07-10

網(wǎng)頁Meta標(biāo)簽優(yōu)化教程05-24

進(jìn)口食品標(biāo)簽要求07-22

SEOer如何優(yōu)化網(wǎng)站標(biāo)簽10-23

WEB教程標(biāo)準(zhǔn)應(yīng)用標(biāo)簽10-19

站內(nèi)優(yōu)化中標(biāo)簽的使用10-14