figure 和 figcaption元素
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form> <figure> <img src="海豚.png" alt="海豚"></img> <img src="火烈鸟.png" alt="火烈鸟"></img> <img src="鹿鹿.png" alt="鹿鹿"></img> <figcaption>动物</figcaption> </figure> </form> </body> </html>
图片
效果:
detail和summary元素
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <script> function detail_onclick(detail) { var p=document.getElementById("p"); if(detail.open) { p.style.visibility='hidden'; }else { p.style.visibility="visible"; } } </script> <details id="detail" onclick="detail_onclick(this)"> <summary>战狼2</summary> <p id="p" style="visibility:hidden ">吴京自导自演的电影,是一部红遍全国的动作片,广受国人的好评,央视多次报道</p> </details> </body> </html>
效果:
mark元素
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p>这是用来测试<mark>mark</mark>元素的例子</p> </body> </html>
效果:
meter
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <meter value="45" min="0" max="100" low="10" high="90" optimum="60"> </meter> </body> </html>
效果:
2017-09-03 12:18:15