[html5] 学习笔记-html5增强的页面元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记-html5增强的页面元素相关的知识，希望对你有一定的参考价值。
在 html5 中，不仅增加了很多表单中的元素，同时也增加和改良了可以应用在整个页面中的元素。重点包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 、small元素。
1、figure，figcaption元素
figure元素用来表示网页上一块独立的内容，可以是图片、统计图、代码实例。
figcaption元素从属figure元素，表示figure元素的标题；一个figure元素只能放置一个figcaption元素。
1 <body> 2 <figure> 3 <img src="1.jpg" alt="美女"> 4 <img src="2.jpg" alt="美女"> 5 <img src="3.jpg" alt="美女"> 6 <figcaption>美女</figcaption> 7 </figure> 8 </body>
2、detail，summary元素
detail元素表示其内部的元素可以被收缩和展开显示，内部可以放置表单、插件、统计图的详细数据等。
summary元素从属于detail元素，用鼠标单击detail元素的内容时，summary元素的内部会被展开；如果detail中没有summary元素，浏览器会提供默认文字，以供单击。
1 <body> 2 <script> 3 function detail_onclick(detail){ 4 var p = document.getElementById("p"); 5 if (detail.open) { 6 p.style.visibility = "hidden"; 7 }else{ 8 p.style.visibility = "visible"; 9 } 10 } 11 </script> 12 <details id="detail" onclick="detail_onclick(this)"> 13 <summary>速度与激情</summary> 14 <p id="p" style="visibility: hidden">你好么，这是为保罗打造的电影，看起来激情四射</p> 15 </details> 16 </body>
3、mark元素
mark元素表示页面需要突出显示或高亮显示的文字。
1 <body> 2 <p>这是一段文字，用来<mark>测试</mark>元素</p> 3 </body>
4、progress、meter元素
progress元素代表任务完成的进度，这个进度可以是不确定的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 function btn(){ 10 var i = 0; 11 function thread_one(){ 12 if (i<=100) { 13 i++; 14 updateprogress(i); 15 } 16 } 17 setInterval(thread_one,100); 18 } 19 function updateprogress(newValue){ 20 var progressBar = document.getElementById("p"); 21 progressBar.value = newValue; 22 progressBar.getElementsByTagName("span")[0].textContent = newValue; 23 } 24 </script> 25 <section> 26 <h2>progress元素的使用</h2> 27 <p>完成百分比<progress style="background-color: #269abc" id = "p" value="0" max="100"><span>0</span>%</progress></p> 28 <input type="button" value="点击" onclick="btn()"></input> 29 </section> 30 </body> 31 </html>
meter元素表示规定范围内的数值量，属性值有6个，如下例：
1 <body> 2 <meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter> 3 </body>
5、ol、dl、cite 、small元素
在html5中，对ol元素进行了改良，添加了start和reversed属性。
1 <body> 2 <ol> 3 <li>列表1</li> 4 <li>列表2</li> 5 <li>列表3</li> 6 <li>列表4</li> 7 <li>列表5</li> 8 </ol> 9 <ol start="5"> 10 <li>列表1</li> 11 <li>列表2</li> 12 <li>列表3</li> 13 <li>列表4</li> 14 <li>列表5</li> 15 </ol> 16 <ol start="5" reversed> 17 <li>列表1</li> 18 <li>列表2</li> 19 <li>列表3</li> 20 <li>列表4</li> 21 <li>列表5</li> 22 </ol> 23 </body>
dl元素在html5中重新定义，表示多个名字的列表项。每一项都包含1条或者多条带有名字的dd元素。
1 <body> 2 <dl> 3 <dt>Hello</dt> 4 <dd>你好就是hello</dd> 5 <dt>博客</dt> 6 <dd>你喜欢看博客吗？</dd> 7 </dl> 8 </body>
cite元素，表示作品的标题，可以在页面详细引用，也可以只在页面提一下。
1 <body> 2 <h3>cite元素</h3> 3 <p>我最喜欢的电影是<cite>速度与激情</cite></p> 4 </body>
small元素，在html5中改良为标识小字印刷体的元素。
1 <body> 2 <dl> 3 <dt>单人间</dt> 4 <dd>399 元 <small>含早餐，不含税</small></dd> 5 <dt>双人间</dt> 6 <dd>599 元 <small>含早餐，不含税</small></dd> 7 </dl> 8 </body>
以上是关于[html5] 学习笔记-html5增强的页面元素的主要内容，如果未能解决你的问题，请参考以下文章