浅谈html5增强的页面元素

浅谈htML5增强的页面元素

1. !DOCTYPE html>   
2. html>   
3.     head>   
4.         meta charset="UTF-8">   
5.         tITle> 浅谈html5增强的页面元素/title>   
6.     /head>   
7.     body>   
8.         !--figure与figcaption:带有可选标题的元素组合-->   
9.         figure>   
10.             img src="img/QQ截图20160103144626.png"  alt="图片"/>   
11.             img src="img/webp.jpg" alt="图片" width="211" height="191"/>   
12.             figcaption> 我的图片组合/figcaption>   
13.         /figure> br />   
14.         !--detail与summary元素：用于标示该元素内部的子元素可以展开收缩显示-->   
15.         details id="details" ontoggle="detailfn(this)" style=" cursor: pointer; " >   
16.             summary> 精武风云/summary>   
17.             p id="p" style="visibility: hidden; "> 陈真（甄子丹 饰）当年为报杀师之仇，独闯虹口道场。。。/p>   
18.         /details> br />   
19.         !--mark:突出显示或高亮显示-->   
20.         mark> html5/mark> 的高亮显示br />   
21.         !--PRogress:进度条-->   
22.         section>   
23.             h2> progress元素的使用实例/h2>   
24.             p> 完成的百分比progress id="p" max="100"> span> 0/span> %/progress>  /p>   
25.         /section> br />   
26.         !--meter:规定范围内的数量值--->   
27.         p> 磁盘使用量：meter value="40" min="0" max="160"> 40/160/meter> GB/p> br />   
28.         !--diaLOG:对话框，默认隐藏，js控制-->   
29.         input type="button" value="打开对话框"  onclick="document.getElementById('dg').show(); "/>   
30.         input type="button" value="打开对话框showModal" onclick="document.getElementById('dg').showModal(); " />   
31.         dialog id="dg" style="width:15%; text-align: center; ">   
32.               form>   
33.                  label for="txtName" value="用户名："> /label>   
34.                  input type="text"  id="txtName"/> br />   
35.                  label for="pwd" value="密码："> /label>   
36.                  input type="text"  id="pwd"/> br />   
37.                  input type="button" value="登录" />   
38.                  input type="button" value="关闭" onclick="document.getElementById('dg').close(); " />   
39.               /form>   
40.         /dialog> br /> hr />   
41.         !--改良的a元素：download属性直接下载-->   
42.         a href="img/QQ截图20160103144626.png" download="文件名"> img src="img/QQ截图20160103144626.png" />  /a> br />   
43.         !--ol:改良的 start与reversed属性：自定义开始编号与反编号-->   
44.         h3> start与reversed实例/h3>   
45.         ol start="5" reversed="">   
46.             li> 内容1/li>   
47.             li> 内容2/li>   
48.             li> 内容3/li>   
49.             li> 内容4/li>   
50.             li> 内容5/li>   
51.         /ol> br />   
52.         !--dl:定义术语列表： dt表示术语，dd表示定义-->   
53.         术语解释：   
54.         dl>   
55.             dt> rss/dt>   
56.             dt> rss也叫聚合rss是在线共享内容的一种简易方式（也叫聚合内容）/dt>   
57.         /dl> br />   
58.         !--cite:表示作品-->   
59.         p> 最近上映的cite> 美国队长3/cite>  这个电影不错！/p> br />   
60.         !--iframe:sandbox属性添加限制增强安全性-->   
61.         !--script:async与defer属性加快加载速度-->   
62.     /body>   
63. /html>   

以上这篇浅谈html5增强的页面元素就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/qinyi173/archive/2016/06/13/5582194.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！