在 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增强的页面元素的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. HTML5学习笔记（四）语义元素

    语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...

  3. HTML5学习笔记一：新增主体结构元素

    Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...

  4. HTML5学习笔记----html5与传统html区别

    一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...

  5. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  8. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  9. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. 使用maven管理后,依然找不到需要的jar包

    使用maven管理后,依然报错,找不到,比如如下错误java.lang.ClassNotFoundException: org.springframework.web.context.ContextL ...

  2. 内置Web Server

    在终端输入命令:php -S localhost:8000 -t xxx(某个目录或文件) 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目 ...

  3. (简单) POJ 2029 Get Many Persimmon Trees，暴力。

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  4. [iOS Animation]-CALayer 绘图效率

    绘图 不必要的效率考虑往往是性能问题的万恶之源. ——William Allan Wulf 在第12章『速度的曲率』我们学习如何用Instruments来诊断Core Animation性能问题.在构 ...

  5. Delphi2010生成GB2312字库乱码问题

    用Delphi2010做一个点阵字库软件,字库生成部分是从一个用Delphi2007做旧的程序里扣出来的.点阵字库软件完成后生成GB2312字库在LED控制卡上显示为乱码.知道Delphi版本高于20 ...

  6. dedecms标签使用

    关键描述调用标签: <meta name="keywords" content="{dede:field name='keywords'/}">&l ...

  7. php上传zip文件在线解压文件在指定目录下，CI框架版本

    我从网上找的文件php在线解压zip压缩文件 文件为jy.php可以直接执行,但是怎样将其加到CI框架中呢?? jy.php文件 <?php header("content-Type: ...

  8. spring 5种通知

    方法实现接口 package com.cn.spring.aop.impl; //加减乘除的接口类 public interface ArithmeticCalculator { int add(in ...

  9. 试水MongoDB

    1)安装好后启动mongodb 服务 1_1) 建立data/db     ,保证至少有3g大小的盘 1_2) 建立log 文件夹 1_3)配置文件 内容,指定数据存放位置.日志文件位置 dbpath ...

  10. 重拾python

    前一段碰到几次关于日期计算的题:给出一个日期,计算下一天的日期.虽然不限语言,可是我就C/C++还算熟悉,别的都是刚了解皮毛,根本不会用现成的库啊,无奈啊...只好用c语言一点点实现了,当时真是无比怀 ...