在 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. The 2014 ACMICPC Asia Invitational Xian

    上半年邀请赛的时候真是险而又险地2题拿了个铜,确实其实跟没拿一样......现场前复盘一下,长长记性 [A]签到题 [B]最短路+DFS [C]最短路 [D]构造+欧拉回路 [E]数论,最佳平方逼近 ...

  2. 转发：iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 转载来自崔江涛(KenshinCui) 链接:http://www.cnblogs.com/kenshincui/p/3950646.html 概览 iPhone的成功很大一 ...

  3. UIScroll和UIPickView

    .h #import <UIKit/UIKit.h> #define WIDTH self.view.frame.size.width #define HEIGHT self.view.f ...

  4. Python+Selenium定位不到元素常见原因及解决办法（报：NoSuchElementException）

         在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况(报selenium.common.exceptions.NoSuchElementException ...

  5. seajs的常用api简易文档

    目前使用sea.js的公司越来越多, 比如朋友网,阿里巴巴,淘宝网,百姓网,支付宝,有道云笔记等.模块化的javascript开发带来了可维护,可扩展性,尤其在多人协作开发的时候不用再担心文件依赖和函 ...

  6. MAC OS X 10.10 应用程序下载失败后lunchpad产生灰色图标的解决办法

    方法如下:打开应用程序- 实用工具 - 终端. 以此出入如下字符 defaults write com.apple.dock ResetLaunchPad -bool true killall Doc ...

  7. RestTemplate 发送Post 多个参数请求

    MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>(); requestEntity ...

  8. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  9. [转载] centos6.x x64 安装python2.7

    本文转载自: http://www.centoscn.com/image-text/install/2016/0323/6906.html CentOS的设计理念中有一点是:持久可用.要达到这个目的, ...

  10. mongodb更新数据

    1. 获取当前时间: Calendar.getInstance().getTime(); 2. 更新数据: public void updateProcessLandLog(ProcessLandLo ...