HTML連載10-details標籤&summary標籤&marquee標籤

​1.詳情（details)與概要(summary)標籤

（1）做用：咱們但願用盡量少的空間來表達更多的信息，利用summary標籤來描述概要信息，用details標籤來描述詳情信息

（2）格式：

 

<details>

    <summary>概要信息</summary>

    詳細信息

</details>

 

咱們能夠看到有一個倒三角形點擊這個三角形，即可以將詳細信息摺疊或者展開。在HTML中，例如：淘寶網的一個實例，咱們把鼠標放到漢字選項的時候，能夠看到右邊展開了一些選項，離開就收起了選項。

2.marquee（跑馬燈）標籤

（1）做用：跑馬燈效果

（2）注意：marquee標籤不是W3C推薦的標籤，在W3C官方文檔中也沒法查詢這個標籤，可是各大瀏覽器對這個標籤支持的很好

（3）格式：

<marquee scrollamount="數字" direction="right">

    隨便寫點東西展現一下

</marquee>

 

屬性diretion值：i.right:向右浮動；ii.left:向左浮動;iii.up:向上浮動;iv.down:向下浮動。

屬性scrollamount：數字表明滾動的速度，值越大越快

屬性loop：表明循環的次數

屬性behavior：i.slide表明滾動不溢出，到邊界就停了；ii.alternat表明邊界不溢出，到邊界來回反彈

這個不會用動圖工具，拍個視頻湊合看吧

視頻：https://v.qq.com/x/page/b0884d2r0su.html?vuid24=T6HdUzTbyHD8hMJ16G2vig%3D%3D&ptag=2_7.1.0.19647_copy

<marquee direction="right">隨便寫點東西展現一下</marquee>
<marquee direction="left">隨便寫點東西展現一下</marquee>
<marquee direction="up">隨便寫點東西展現一下</marquee>
<marquee direction="down">隨便寫點東西展現一下</marquee>

<hr>
<br>
<marquee scrollamount="10" direction="">666</marquee>
<marquee scrollamount="50" direction="">666</marquee>
<marquee scrollamount="100" direction="">666</marquee>
<hr>
<br>

<marquee behavior="slide" scrollamount="50">撞牆</marquee>
<marquee behavior="alternate" scrollamount="50">撞牆</marquee>

<hr>
<br>
<marquee loop="1" scrollamount="50">循環</marquee>
<marquee loop="2" scrollamount="50">循環</marquee>

 

2、源碼

d54_summary_label&marqueee_label&details_label

地址：https://github.com/ruigege66/HTML_learning/blob/master/d54_summary_label%26marqueee_label%26details_label

2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）

3.簡書：https://www.jianshu.com/u/a9169ca4f1c9（心悅君兮君不知dqr）

4.歡迎關注微信公衆號：傅里葉變換，後臺回覆「禮包」獲取Java大數據學習視頻禮包。