search

xgqfrms / HTML5

HTML 5 :heart: :rocket: 🎅 ❄ 🎄 🎁 🔀 ⛄ 🔔
https://html5.xgqfrms.xyz
7 stars 14 forks source link

figure #19

Open xgqfrms opened 4 years ago

xgqfrms commented 4 years ago

figure

image

xgqfrms commented 4 years ago

file:///Users/xgqfrms-mbp/Desktop/CSS%20%E6%8F%AD%E7%A7%98.pdf

xgqfrms commented 4 years ago 

<figure>
  <img src="image.jpg" alt="The Image">
  <figcaption>A Caption</figcaption>
</figure>

https://www.pluralsight.com/blog/creative-professional/whats-difference-image-figure-tags-html5

http://html5doctor.com/the-figure-figcaption-elements/

https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5

xgqfrms commented 4 years ago

picture & image srcset

https://github.com/xgqfrms/CSS3/issues/11

image

xgqfrms commented 4 years ago 

<figure>
  <img
    srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy"
  />
  <figcaption>A Caption</figcaption>
</figure>


<figure>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
  <figcaption>A Caption</figcaption>
</figure>