在 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. hibernate---一对一双向外键关联 (重要)

    husband--wife: one to one 双向外键关联: 主导方: @OneToOne @JoinColumn(name="wifeId") 被主导方: @OneToOn ...

  2. nginx 生成 缩略图 and 生成缩略图到硬盘

    nginx  编译的时候增加  ./configure --with-http_image_filter_module 配置如下 server { listen     80; server_name ...

  3. Charles从入门到精通

    Charles 从入门到精通 发表于 2015-11-14 12:00 文章目录 1. 目录 2. 简介 3. 安装 Charles 4. 将 Charles 设置成系统代理 5. Charles 主 ...

  4. (简单) POJ 1426 Find The Multiple，BFS+同余。

    Description Given a positive integer n, write a program to find out a nonzero multiple m of n whose ...

  5. java 自动备份MySQL 数据库（转载）

    1 package com.learn4j.bat; public class Backup { private String user_name;// 数据库用户名 private String u ...

  6. iOS开发——刮奖

    还是直接上代码,有什么问题的话,直接评论. 1.在YYTScratchView.h文件中 // //  YYTScratchView.h //  Demo-刮奖 // //  Created by y ...

  7. STM32驱动DS18B20

    DS18B20 是由 DALLAS 半导体公司推出的一种的“一线总线”接口的温度传感器.与传 统的热敏电阻等测温元件相比,它是一种新型的体积小.适用电压宽.与微处理器接口简单的 数字化温度传感器.一线 ...

  8. 单纯觉得是篇好文——跨终端Web之Hybrid App

    [reference]http://www.infoq.com/cn/articles/hybrid-app#theCommentsSection 编者按:InfoQ开设新栏目“品味书香”,精选技术书 ...

  9. 1.3.2. App Icon 和 Launch Image（Core Data 应用程序实践指南）

    App Icon: 选中 Assets.xcassets 选择 AppIcon ,并拖入图片(29.40.60) Launch Image: 创建 Launch Image 拖入图片(2x.R4)

  10. 导航栏项目滑过时子菜单显示/隐藏jquery代码

    ;(function(window){    $('.menuitem').hover(function(){        $('>a',this).css('background-color ...