HTML5教程：detalis標(biāo)簽使用詳細(xì)說明

2024-09-05 07:18:34

字體：大中小

供稿：網(wǎng)友

網(wǎng)頁制作Webjx文章簡介：details標(biāo)簽的出現(xiàn)，為我們帶來了更好的用戶體驗(yàn)，不必為這種收縮展開的效果再編寫JS來實(shí)現(xiàn)。

details標(biāo)簽的出現(xiàn)，為我們帶來了更好的用戶體驗(yàn)，不必為這種收縮展開的效果再編寫JS來實(shí)現(xiàn)。
注：目前僅Chrome支持此標(biāo)簽。

details有一個(gè)新增加的子標(biāo)簽——summary，當(dāng)鼠標(biāo)點(diǎn)擊summary標(biāo)簽中的內(nèi)容文字時(shí)，details標(biāo)簽中的其他所有元素將會(huì)展開或收縮。

detalis標(biāo)簽：

案例1：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí)</title> </head>
<body> <details> <summary>網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí)</summary> 網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí) </details> </body> </html>

如果details中不存在summary標(biāo)簽會(huì)怎樣呢，其實(shí)當(dāng)details元素內(nèi)沒有summary標(biāo)簽的時(shí)候，瀏覽器在解析的時(shí)候會(huì)提供一個(gè)默認(rèn)的文字，比如“查看詳細(xì)”諸如此類的本地化文字，瀏覽器同樣再會(huì)提供一個(gè)諸如上下箭頭之類的圖標(biāo)。比如下面的案例2就是一個(gè)不存在summary子標(biāo)簽的例子。

案例2：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí)</title> </head>
<body> <details> 網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí) </details> </body> </html>

有的時(shí)候，我們需要detalis中的內(nèi)容默認(rèn)為展開狀態(tài)怎么辦？
其實(shí)HTML5也已經(jīng)為我們想到了，如果有著方面的需求，我們只需要加入一個(gè)屬性即可，如案例3。

Open屬性：

將案例1的代碼修改后如下：

案例3：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5每日一練之details展開收縮標(biāo)簽的應(yīng)用</title> </head>
<body> <details open> <summary>網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí)</summary> 網(wǎng)頁教學(xué)網(wǎng)提供最新的網(wǎng)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效，為個(gè)人網(wǎng)站提供網(wǎng)頁素材模板和網(wǎng)頁視頻學(xué)習(xí) </details> </body> </html>

由此可見，HTML5為我們的確帶來了很大方便。

上一篇：HTML5基礎(chǔ)教程：mark標(biāo)簽使用實(shí)例

下一篇：HTML5教程：Canvas標(biāo)簽繪制坐標(biāo)變換圖形