一、HTML5 改良的 input 元素的种类

1.<input type="number" id="num1">

var n1 = document.getElementById("num1").valueAsNumber;

七、HTML5 增强的页面元素

1.figure、figcaption

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <body>
  4.  <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
  5.  <figure>
  6.    <figcaption>黄浦江上的的卢浦大桥</figcaption>
  7.    <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
  8.  </figure>
  9.  </body>
  10.  </html>

2.details、summary

<details> 标签用于描述文档或文档某个部分的细节。

属性open 定义 details 是否可见。

与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.  
  5. <details>
  6. <summary>Copyright 2011.</summary>
  7. <p>All pages and graphics on this web site are the property of W3School.</p>
  8. </details>
  9.  
  10. </body>
  11. </html>
  12.  
  13. <!DOCTYPE HTML>
  14. <html>
  15. <body>
  16.  
  17. <details>
  18. <summary>HTML 5</summary>
  19. This document teaches you everything you have to learn about HTML 5.
  20. </details>
  21.  
  22. </body>
  23. </html>

　　

3.mark,着重，高亮显示

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <body>
  4.  
  5.  <p>Do not forget to buy <mark>milk</mark> today.</p>
  6.  
  7.  </body>
  8.  </html>

4.progress标签标示任务的进度（进程）

5.meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <body>
  4.  
  5.  <p>显示度量值：</p>
  6.  <meter value="3" min="0" max="10">3/10</meter><br>
  7.  <meter value="0.6">60%</meter>
  8.  
  9.  <p><b>注释：</b>Internet Explorer 不支持 meter 标签。</p>
  10.  
  11.  </body>
  12.  </html>

6.ol

<ol> 标签定义有序列表。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <body>
  4.  <ol>
  5.    <li>咖啡</li>
  6.    <li>牛奶</li>
  7.    <li>茶</li>
  8.  </ol>
  9.  <ol start="50" reversed>
  10.    <li>咖啡</li>
  11.    <li>牛奶</li>
  12.    <li>茶</li>
  13.  </ol>
  14.  </body>
  15.  </html>

7.dl

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

  1.  <body>
  2.  <h2>一个定义列表：</h2>
  3.  <dl>
  4.     <dt>计算机</dt>
  5.     <dd>用来计算的仪器 ... ...</dd>
  6.     <dt>显示器</dt>
  7.     <dd>以视觉方式显示信息的装置 ... ...</dd>
  8.  </dl>
  9.  </body>
  10.  </html>

8.cite

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

按照惯例，引用的文本将以斜体显示。

用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。

<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

  1.  <p>我最喜欢的运动是<cite>篮球</cite></p>

9.small

<small> 标签呈现小号字体效果。

<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。

HTML5 增强的页面元素的更多相关文章

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

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  2. html5增强的页面元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...

  4. html5 新增的页面 元素

    figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...

  5. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  6. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  7. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  8. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

  9. 使用 SVG 动画实现弹性的页面元素效果

    Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...

随机推荐

  1. openerp学习笔记 domain 增加扩展支持，例如支持 <field name="domain">[('type','=','get_user_ht_type()')]</field>

    示例代码1,ir_action_window.read : # -*- coding: utf-8 -*-from openerp.osv import fields,osv class res_us ...

  2. C#学习笔记一

    c#学习笔记一 c#学习笔记一    1 1.    注释    3 1.1.    ///是文档注释,用于类和方法的说明    3 1.2.    #region #endregion可以折叠代码  ...

  3. Discuz X1.5 利用添加好友处存储xss进行蠕虫worm扩散

    Discuz X1.5 在添加好友的地方有处存储xss,借助此处xss跟用户交互可以进行蠕虫指数扩散. 位置在添加好友处 x完之后的效果 点击后触发 ok 借助此存储xss,我们进行worm传播,dz ...

  4. CentOS安装 pure-ftpd

    yum -y install pam-devel cd /usr/local .tar.gz cd pure-ftpd- ./configure --prefix=/usr/local/pure-ft ...

  5. .NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标

    文章出自:http://www.cnblogs.com/ice-river/p/3475041.html 一 .NET平台技术体系梳理 .NET平台应用领域众多(桌面开发,web开发,移动开发),不断 ...

  6. SSHDroid（SSH Server for Android）通过PC或命令连接android

    1.下载berserker.android.apps.sshdroid.apk .(如果你懒的下载,给我留言,我会发给你) 2.安装到手机,显示如图: 简单解释一下:一般android系统没有root ...

  7. google calendar

    1. user guide on google https://developers.google.com/google-apps/calendar/instantiate 2. google app ...

  8. 20145120 《Java程序设计》第3周学习总结

    20145120 <Java程序设计>第3周学习总结 教材学习内容总结 基本类型与类类型的概念 在java里使用数组和字符串 封装的概念 在java定义函数 重载的概念 static的概念 ...

  9. Start my cnBlogs

    Compared to CSDN blog, althought it's my first time to use CNBlog,i felt it makes me more comfortabl ...

  10. HDU 3974 Assign the task 暴力/线段树

    题目链接: 题目 Assign the task Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...