在 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. Win8/8.1 下映像管理和恢复环境的配置

    以前遇过不少次这种问题了,抽空记下来...... 介绍两个东西: 1. dism 部署映像服务和管理工具 主要用途是枚举.安装.卸载.配置和更新 Windows 映像中的功能和程序包. 简单地说就是有 ...

  2. extJS4.2.0 环境搭建教程（一）

    一.环境搭建

  3. tinyxml2库的使用--MFC工程

    在编写应用程序的时候,经常需要动态加载某些数据,这种情况下微软的ini文件是蛮好的选择,但是平台的通用性比较差,使用xml的话就比较强一点,但是解析比较复杂,型号有牛人已经开发出了直接读写xml的库, ...

  4. iOS_init相关信息

    第一.initWithNibName这个方法是在controller的类在IB中创建,但是通过Xcode实例化controller的时候用的. 第二.initWithCoder 是一个类在IB中创建但 ...

  5. CodeForces 631C Print Check

    排序+构造+预处理 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm ...

  6. JDBC操作数据时中文乱码

    /** * DB地址 */ private static final String DB_URL="jdbc:mysql://localhost:3306/db_book?useUnicod ...

  7. php小知识。

    合并数组的2个方式区别 1)键名为数字时,array_merge()不会覆盖掉原来的值,但+合并数组则会把最先出现的值作为最终结果返回,而把后面的数组拥有相同键名的那些值“抛弃”掉(不是覆盖) 2)键 ...

  8. 由浅入深Mysql优化

    选Mysql优化作为我的第一篇博文,实在是因为这个东西很有意思,也是能体现后端开发人员设计细节及逻辑分析的一个知识点. 那么来吧: 作为Mysql优化,很多人大概能跟着感觉说出如下   :  (1)常 ...

  9. leetcode day5

    [242]Valid Anagram: Given two strings s and t, write a function to determine if t is an anagram of s ...

  10. 使用Python脚本操作MongoDB的教程

    Reference:  http://www.jb51.net/article/64225.htm