html5新標籤-figure、figcaption

圖文並茂!
大家在寫xhtml、html中常常用到一種圖片列表,圖片+標題或者圖片+標題+簡單描述。以前的常規寫法:


  • title


  • 而在html5中有了新標籤更能語義化的定義出這中圖片列表,那就是figure標籤。

    w3c賦予的定義:figure標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。
    實例代碼:

    黃浦江上的的盧浦大橋



    figure用來代替原來li標籤,P標籤誰來取代呢?答案就是:figcaption

    w3c賦予的定義:figcaption 標籤定義 figure 元素的標題(caption)。”figcaption” 元素應該被置於 “figure” 元素的第一個或最後一個子元素的位置。

    那麼上面的代碼就變成了:


    黃浦江上的的盧浦大橋



    這是個非常易於理解的標籤,其用法也非常清楚。即便是簡單,這裏也建議大家親自動手寫下。

    發表評論
    所有評論
    還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章