首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

浅谈html5增强的页面元素

Posted in HTML / CSS onJune 14, 2016

浅谈html5增强的页面元素

XML/HTML Code复制内容到剪贴板
  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

浅谈html5增强的页面元素

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
使用JS+CSS3技术：让你的名字动起来
Apr 27 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 #HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 #HTML / CSS
HTML5通用接口详解
Jun 12 #HTML / CSS
html5表单及新增的改良元素详解
Jun 07 #HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 #HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 #HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 #HTML / CSS
东芝(1) 电路图(1) 德劲(5) ICF-7600(1) SONY(15) PL-880(1) 短波(1) 电台(1) 天线(6) 索尼(5)
You might like
php URL跳转代码 减少外链
2011/06/25 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP文件与目录操作示例
2016/12/24 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Code：findPosX 和 findPosY
2006/12/20 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Android模拟器无法启动,报错：Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python中字符串的操作方法大全
2018/06/03 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
Python Gitlab Api 使用方法
2019/08/28 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
韩国邮政旗下生鲜食品网上超市：epost
2016/08/27 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
小学英语教师先进事迹
2014/05/28 职场文书
公司经理任命书
2014/06/05 职场文书
学校宣传标语
2014/06/18 职场文书
垃圾桶标语
2014/06/24 职场文书
加强作风建设心得体会
2014/10/22 职场文书
服务明星事迹材料
2014/12/29 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL