HTML5 增强的页面元素
一、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 增强的页面元素的更多相关文章
- [html5] 学习笔记-html5增强的页面元素
在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
- html5增强的页面元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5实现本页面元素拖放和本地文件拖放
HTML5拖放 拖放本地数据 1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...
- html5 新增的页面 元素
figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
- 使用 SVG 动画实现弹性的页面元素效果
Codrops 分享了一些给SVG元素加上弹性动画的灵感.实现的思路是把一个SVG元素整合成一个组件,然后从一个路径弹性动画到另一个.这种效果可以应用到像菜单,按钮或其它元素,使得交互更有趣,看起更原 ...
随机推荐
- 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 ...
- C#学习笔记一
c#学习笔记一 c#学习笔记一 1 1. 注释 3 1.1. ///是文档注释,用于类和方法的说明 3 1.2. #region #endregion可以折叠代码 ...
- Discuz X1.5 利用添加好友处存储xss进行蠕虫worm扩散
Discuz X1.5 在添加好友的地方有处存储xss,借助此处xss跟用户交互可以进行蠕虫指数扩散. 位置在添加好友处 x完之后的效果 点击后触发 ok 借助此存储xss,我们进行worm传播,dz ...
- CentOS安装 pure-ftpd
yum -y install pam-devel cd /usr/local .tar.gz cd pure-ftpd- ./configure --prefix=/usr/local/pure-ft ...
- .NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标
文章出自:http://www.cnblogs.com/ice-river/p/3475041.html 一 .NET平台技术体系梳理 .NET平台应用领域众多(桌面开发,web开发,移动开发),不断 ...
- SSHDroid(SSH Server for Android)通过PC或命令连接android
1.下载berserker.android.apps.sshdroid.apk .(如果你懒的下载,给我留言,我会发给你) 2.安装到手机,显示如图: 简单解释一下:一般android系统没有root ...
- google calendar
1. user guide on google https://developers.google.com/google-apps/calendar/instantiate 2. google app ...
- 20145120 《Java程序设计》第3周学习总结
20145120 <Java程序设计>第3周学习总结 教材学习内容总结 基本类型与类类型的概念 在java里使用数组和字符串 封装的概念 在java定义函数 重载的概念 static的概念 ...
- Start my cnBlogs
Compared to CSDN blog, althought it's my first time to use CNBlog,i felt it makes me more comfortabl ...
- HDU 3974 Assign the task 暴力/线段树
题目链接: 题目 Assign the task Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...