1、figurefigcaption||detailsummary||mark学习笔记
效果图
代码为:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <figure> <img src="0fb2bcd14fd7aa2d7b046fe48e566f7a.jpg" alt="zhongguo" style="25%" /> <img src="4fdd3cb901efc1f921892a6c1b4469b4.jpg" alt="nanhai" style="25%" /> <img src="ec25e5957e76f3e5ed9d3d02191841bd.jpg" alt="beijing" style="25%" /> <figcaption>中国南海</figcaption> </figure> <script> function showorhide(detail) { var p = document.getElementById("p"); if(detail.open) { p.style.visibility = "hidden"; } else { p.style.visibility = "visible"; } } </script> <details id="detail" onclick="showorhide(this)"> <summary>中国南海</summary> <p id="p"><mark>中国南海是神圣的.</mark></p> </details> </body> </html>
2、progressmeterindeterminateimage
效果图
代码如下:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <script> function btn() { var i = 0; function thread() { if (i <= 100) { i++; updateprogress(i); } } setInterval(thread, 100); } function updateprogress(newvalue) { var progerss = document.getElementById("p") p.value = newvalue; p.getElementsByTagName("span")[0].textContent = newvalue; } </script> <section> <h2>progress元素的使用</h2> <p>完成的百分比<progress id="p" style="background-color:burlywood" max="100"><span>0</span>%</progress></p> <input type="button" onclick="btn()" value="dianji" /> </section> <meter value="90" min="0" max="100" low="10" high="80"></meter> </br> </br> <input type="checkbox" indeterminate id="checkboxtext" /> <script> var check = document.getElementById("checkboxtext"); check.indeterminate=true </script> </br> </br> <input type="image" src="4d33fe553927af2855ed237c93369706.jpg" alt="test" width="50" height="50"/> </body> </html>
其中indeterminate属性可以控制checkbox处于选中和非选中之间,在图中是一个横线,image主要展示了width和height属性,可以控制图片的宽度和高度.