一、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" 元素的第一个或最后一个子元素的位置。

 <!DOCTYPE HTML>

 <html>

 <body>

 <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

 <figure>

   <figcaption>黄浦江上的的卢浦大桥</figcaption>

   <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />

 </figure>

 </body>

 </html>

2.details、summary

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

属性open 定义 details 是否可见。

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

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

</body>

</html>

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>HTML 5</summary>

This document teaches you everything you have to learn about HTML 5.

</details>

</body>

</html>

　　

3.mark,着重，高亮显示

 <!DOCTYPE HTML>

 <html>

 <body>

 <p>Do not forget to buy <mark>milk</mark> today.</p>

 </body>

 </html>

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

5.meter

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

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

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

 <!DOCTYPE html>

 <html>

 <body>

 <p>显示度量值：</p>

 <meter value="3" min="0" max="10">3/10</meter><br>

 <meter value="0.6">60%</meter>

 <p><b>注释：</b>Internet Explorer 不支持 meter 标签。</p>

 </body>

 </html>

6.ol

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

 <!DOCTYPE html>

 <html>

 <body>

 <ol>

   <li>咖啡</li>

   <li>牛奶</li>

   <li>茶</li>

 </ol>

 <ol start="50" reversed>

   <li>咖啡</li>

   <li>牛奶</li>

   <li>茶</li>

 </ol>

 </body>

 </html>

7.dl

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

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

 <body>

 <h2>一个定义列表：</h2>

 <dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器 ... ...</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置 ... ...</dd>

 </dl>

 </body>

 </html>

8.cite

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

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

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

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

 <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. 谈网页游戏外挂之用python模拟游戏(热血三国2)登陆

    看web看多了,想写写页游的外挂,其实原理是一样的,就是端口不一样协议字段你不知道,而这也提高了点技术门槛,看我们来一点一点突破这些门槛,这次我们来用python发包模拟flash的客户端登陆. 以热 ...

  2. UNIX环境高级编程-环境配置

    环境配置步骤如下. 1.  下载源文件:http://www.apuebook.com/src.tar.gz. 2.  复制src.tar.gz文件到/home/me/mydir/unixl/目录(自 ...

  3. [转]win7+ubuntu 13.04双系统安装方法

    win7+ubuntu 13.04双系统安装方法 http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html 当需要频繁使用ubunt ...

  4. html和css中的技巧

    1:标签不要忘记带点 2:div是否成对的出现. 3.body 前面不能加点 4.在写css时记住一定要带上class的命名这样就不会出现重复的 5.出现文字的时候下面有下划线或虚线的时候,用padd ...

  5. Linux Shell编程变量赋值和引用

    我们可以使用任意一种文字编辑器,比如gedit.kedit.emacs.vi等来编写shell脚本,它必须以如下行开始(必须放在文件的第一行):   #!/bin/sh  ...  注意:最好使用“! ...

  6. 【转】android 选取图片

    转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html 这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 由于 ...

  7. UML类图关系-转

    1.关联 双向关联: C1-C2:指双方都知道对方的存在,都可以调用对方的公共属性和方法. 在GOF的设计模式书上是这样描述的:虽然在分析阶段这种关系是适用的,但我们觉得它对于描述设计模式内的类关系来 ...

  8. PAT-乙级-1052. 卖个萌 (20)

    1052. 卖个萌 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 萌萌哒表情符号通常由“手”.“眼”. ...

  9. 高性能网络编程2----TCP消息的发送

    转 陶辉 taohui.org.cn 在上一篇中,我们已经建立好的TCP连接,对应着操作系统分配的1个套接字.操作TCP协议发送数据时,面对的是数据流.通常调用诸如send或者write方法来发送数据 ...

  10. unity3d 射线扫描 忽略图层

    原地址:http://blog.csdn.net/w88193363/article/details/38331205 函数说明 static RaycastHit2D[] RaycastAll(Ve ...