您現在的位置是:電腦技術吧?>? 故障問題 ??>??html5標簽,html常用標簽??>??正文詳情

html5標簽,html常用標簽

能傲云2019-11-19 09:21:20 人圍觀
簡介htmlHTML5中新的details標簽允許用戶創建一個可擴展和可折疊的組件,使文本或標題包含一些隱藏信息。通常,詳細信息用于進一步解釋頁面上顯示的內容。它顯示了與jHTML5

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

用法一般情況下,details用來對顯示在頁面的內容做進一步驟解釋。

其展現出來的效果和jQuery手風琴插件差不多。

其大致寫法如下:detailssummaryGoogle Nexus 6/summaryp商品詳情:/pdldt屏幕/dtdd5.96 2560x1440 QHD AMOLED display (493 ppi)/dddt電池/dtdd3220 mAh/dddt相機/dtdd13MP rear-facing with optical image stabilization 2MP front-facing/dddt處理器/dtddQualcomm Snapdragon 805 processor/dd/dl/details首先是details標簽,里面接著是標題summary,這里面的內容一般簡短,具有總結性,會展示在頁面。

接著可以跟任意類型的HTML元素作為詳情內容,這些內容需要在點擊summary才會呈現。

上面代碼呈現出來的效果會是下面這樣的:

最開始詳情是隱藏的,當點擊時都會展現。

open 屬性當然,你也可以通過給details標簽設置open屬性讓它默認為展開狀態。

details opensummaryGoogle Nexus 6/summaryp商品詳情:/pdldt屏幕/dtdd5.96 2560x1440 QHD AMOLED display (493 ppi)/dddt電池/dtdd3220 mAh/dddt相機/dtdd13MP rear-facing with optical image stabilization 2MP front-facing/dddt處理器/dtddQualcomm Snapdragon 805 processor/dd/dl/details此時默認會把詳情展開,而點擊標題后會折疊起來。

示例示例如上面那樣,預覽在線版本可點擊此處。

瀏覽器兼容性由于是HTML5新標簽,瀏覽器支持情況不是很理想。

從來自caniuse的數據來看,目前僅Chrome, Safari 8 和Opera 26 支持此標簽。

可喜的是,如果你在caniuse開啟了「顯示來自UC瀏覽器的結果」 選項的話,會發現,國產的UC瀏覽器也支持了此標簽。

版權聲明:本文由 能傲云 整理編輯。

原標題:html基礎標簽,html標簽

轉載注明出處:http://www.dn9ww09s.icu/fault/13582.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 小紙條,小紙條是什么

    小紙條,小紙條是什么 相關圖片愛心小紙條小紙條是間諜的新功能。我相信有很多小朋友不知道小紙條在哪里。現在,超人軟件想向你介紹如何看到喜歡我的人。我希望它能幫到你小費呢?小費匿名小紙條...

  • fireworks怎么用,fireworks用的多嗎

    fireworks怎么用,fireworks用的多嗎 相關圖片the fireworks對于焰火中圖標的詳細描述,在使用焰火(以下簡稱FW)進行圖標設計時要注意兩點:一是FW注重網頁設計,不適合產生一些過于復雜的PS效果,請期待FW CS5的PS過fireworks的中文...

  • 我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖

    我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖 相關圖片b612可以拼圖嗎作為一款功能強大的美容相機,用戶最關心的問題是如何制作拼圖和視頻。現在,超人軟件編輯將向您介紹關于薊門的相關內容,希望您喜歡它是怎么發生的?faceu激萌相...

  • 王者助手對局先知,王者助手怎么打開對局先知

    王者助手對局先知,王者助手怎么打開對局先知 相關圖片王者對局先知怎么設置王者榮耀作為一場競技游戲,知道你是誰,你是誰。國王榮耀助手中的火柴先知功能可以讓你知道誰在對手陣營中更強大,有利于在游戲初期鎖定目標,在搖籃中...

  • 吻合,吻合手術

    吻合,吻合手術 相關圖片神經吻合術口型匹配(交換方式)進入論壇參與討論:http://www.missyuan.com/viewthread.php?TID=417579正確的嘴型匹配是一門藝術吻合的近義詞...

  • 如何設置簽名,設置簽名

    如何設置簽名,設置簽名 相關圖片qq個性簽名設置權限如今,百度貼吧越來越注重個性化,所以在普通的回復樓里,有一個貼吧的小尾巴,還有一個個人簽名文件。今天,我們來談談如何設置簽名文件進入百度貼吧,登陸...

  • audio 標簽,audio標簽的autoplay

    audio 標簽,audio標簽的autoplay 相關圖片audio最新HTML5音頻標簽使用JS進行回放控制實例音頻標簽可以在HTML5瀏覽器中播放音頻文件。默認情況下,音頻提供一個控制面板,但有時我們只需要播放聲音。控制面板由我audio標簽自動...

  • 堅果Pro2,堅果Pro

    堅果Pro2,堅果Pro 相關圖片堅果pro2參數Nut Pro 2是hammer technology推出的最新智能手機。我相信許多孩子剛得到的第一件事就是插上SIM卡。如何安裝nut pro2的SIM卡?請堅果手機pro2...

  • 貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加

    貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加 相關圖片貼吧會員的小尾巴怎么設置經常逛棒棒的小伙伴,發現一些用戶跟帖中的棒棒小尾巴,干脆從人群中脫穎而出,有木有。那么你知道怎么設置小尾桿嗎?很多人不知道如何設置小尾巴的...

  • 微信為什么沒有搖一搖功能,微信搖一搖功能

    微信為什么沒有搖一搖功能,微信搖一搖功能 相關圖片怎么關閉微信搖一搖功能HTML5的一個重要特性是設備定向,它將方向傳感器和運動傳感器封裝在底層,并提供DOM事件支持。此功能包括兩種類型的事件:1。設備定向:封裝有沒有搖一搖...

熱評文章

  • 使用方法是什么,正確使用放大鏡的方法是什么

    使用方法是什么,正確使用放大鏡的方法是什么 相關圖片試管架使用方法什么是ipscan?對于普通用戶來說,ipscan是一個奇怪的工具。但是對于那些經常與網絡和網絡管理員聯系的人來說,這種實用的IP地址掃描軟件可以節省他們在網絡滅火器使...

  • 如何從團隊合作方面評價,如何評論一個團隊

    如何從團隊合作方面評價,如何評論一個團隊 相關圖片團隊個人評價在設計過程中,設計評審是一個重要的環節。無論是在一個獨立的設計團隊中,還是在一個具有移動性和距離感的設計團隊中,它都是整個設計過程中不可或缺的一部分。...

  • quik是什么軟件怎么用,quik是什么軟件有用嗎

    quik是什么軟件怎么用,quik是什么軟件有用嗎 相關圖片quik有什么用最近,很多華為用戶都在問什么是軟件Quik。Quik應用程序是系統庫故事相冊應用程序,它是為系統庫預制的精彩瞬間功能。為了避免干擾,默認情況下圖標隱藏在桌面上。q...

  • prtscsysrq鍵在哪,prtscsysrq鍵

    prtscsysrq鍵在哪,prtscsysrq鍵 相關圖片電腦上prtsc鍵的功能有些人知道屏幕截圖的鍵盤上有一個prtsc sysrq鍵,但是如何使用它呢?一些用戶按prtsc sysrq鍵,但沒有響應。原因是什么?實際上,prtsc syinsert鍵...

  • 如何制作導航條,導航條的制作

    如何制作導航條,導航條的制作 相關圖片ps導航條制作教程一。首先,創建一個1x6表,參數為:border=0cellpacking=3cellpadding=0;2。在表格的每個單元格中插入寬度和高度設置為100%的dreamweaver制作導航條...

  • 抖音后期自己配音,抖音里配音的圓圈怎么弄

    抖音后期自己配音,抖音里配音的圓圈怎么弄 相關圖片抖音上的siri配音自助餐作為一種流行的手機短視頻拍攝應用,受到了很多人的喜愛。最近,有很多用戶想知道如何配音和編輯視頻。現在,超人軟件會給你帶來震動的聲音抖音怎么自己...

  • 卡通動畫,卡通人物有哪些

    卡通動畫,卡通人物有哪些 相關圖片動畫可愛人物動畫分析:1。眉毛是固定的,只占一層;2。睜眼和閉眼的時間間隔:本例中,從睜眼到閉眼總共有20幀,閉眼10幀,睜眼5幀,從睜眼到閉眼3的動畫過程有5幀。注意眼睛漫...

  • 無線網絡被禁用啟用失敗,ccleaner官網怎么下載

    無線網絡被禁用啟用失敗,ccleaner官網怎么下載 相關圖片你沒有首選無線網絡 win10配置無線網絡時,有時無線適配器或訪問點有問題。有些用戶不知道如何解決。當你遇到這種情況時,你不必擔心。您通常可以通過排除故障并遵循相應的解決...

  • 藍牙的最大傳輸距離,藍牙在水中傳輸距離

    藍牙的最大傳輸距離,藍牙在水中傳輸距離 相關圖片藍牙傳輸在WiFi出現之前,藍牙是應用最廣泛的無線連接功能。即使在如今的WiFi時代,有了藍牙可穿戴設備,這項功能在手機中仍然扮演著非常重要的角色。藍牙耳機、運動手鐲等藍牙連...

  • 事件,紀湘事件

    事件,紀湘事件 相關圖片407事件HTML 5畫布事件處理引入了DOM是web前端領域非常重要的一部分。DOM不僅用于處理HTML元素,還用于圖形編程。例如SVG繪圖,各種圖形都以DOM節點的形優衣庫事件完視頻...

關注微信

变脸官网查询