[html5] 学习笔记-html5增强的页面元素

在 HTML5 中，不仅增加了很多表单中的元素，同时也增加和改良了可以应用在整个页面中的元素。重点包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 、small元素。

1、figure，figcaption元素

figure元素用来表示网页上一块独立的内容，可以是图片、统计图、代码实例。

figcaption元素从属figure元素，表示figure元素的标题；一个figure元素只能放置一个figcaption元素。

 <body>
     <figure>
         <img src="1.jpg" alt="美女">
         <img src="2.jpg" alt="美女">
         <img src="3.jpg" alt="美女">
         <figcaption>美女</figcaption>
     </figure>
 </body>

2、detail，summary元素

detail元素表示其内部的元素可以被收缩和展开显示，内部可以放置表单、插件、统计图的详细数据等。

summary元素从属于detail元素，用鼠标单击detail元素的内容时，summary元素的内部会被展开；如果detail中没有summary元素，浏览器会提供默认文字，以供单击。

 <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>速度与激情</summary>
         <p id="p" style="visibility: hidden">你好么，这是为保罗打造的电影，看起来激情四射</p>
     </details>
 </body>

3、mark元素

mark元素表示页面需要突出显示或高亮显示的文字。

 <body>
     <p>这是一段文字，用来<mark>测试</mark>元素</p>
 </body>

4、progress、meter元素

progress元素代表任务完成的进度，这个进度可以是不确定的。

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title></title>
 </head>
 <body>
     <script>
         function btn(){
             var i = 0;
             function thread_one(){
                 if (i<=100) {
                     i++;
                     updateprogress(i);
                 }
             }
             setInterval(thread_one,100);
         }
         function updateprogress(newValue){
                 var progressBar = document.getElementById("p");
                 progressBar.value = newValue;
                 progressBar.getElementsByTagName("span")[0].textContent = newValue;
         }
     </script>
     <section>
         <h2>progress元素的使用</h2>
         <p>完成百分比<progress style="background-color: #269abc" id = "p" value="0" max="100"><span>0</span>%</progress></p>
         <input type="button" value="点击" onclick="btn()"></input>
     </section>
 </body>
 </html>

meter元素表示规定范围内的数值量，属性值有6个，如下例：

 <body>
     <meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
 </body>

5、ol、dl、cite 、small元素

在html5中，对ol元素进行了改良，添加了start和reversed属性。

 <body>
     <ol>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
     </ol>
     <ol start="5">
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
     </ol>
     <ol start="5" reversed>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
     </ol>
 </body>

dl元素在html5中重新定义，表示多个名字的列表项。每一项都包含1条或者多条带有名字的dd元素。

 <body>
     <dl>
         <dt>Hello</dt>
         <dd>你好就是hello</dd>
         <dt>博客</dt>
         <dd>你喜欢看博客吗？</dd>
     </dl>
 </body>

cite元素，表示作品的标题，可以在页面详细引用，也可以只在页面提一下。

 <body>
     <h3>cite元素</h3>
     <p>我最喜欢的电影是<cite>速度与激情</cite></p>
 </body>

small元素，在html5中改良为标识小字印刷体的元素。

 <body>
     <dl>
     <dt>单人间</dt>
      <dd>399 元 <small>含早餐，不含税</small></dd>
      <dt>双人间</dt>
      <dd>599 元 <small>含早餐，不含税</small></dd>
     </dl>
 </body>

巴特西

[html5] 学习笔记-html5增强的页面元素

最新文章

热门文章