首页
所有分类
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 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
html5调用摄像头实例代码
Jun 28 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
JDK(1) Foreign Key(1) hook(1) expdp(1) 内存池(1) 云服务器(1) 数据备份(2) 腾讯云(1) Vite(1) 外键约束(1)
You might like
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php三元运算符知识汇总
2015/07/02 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
在IE下：float属性会影响offsetTop的取值
2006/12/22 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
2017/03/14 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
利用python如何处理nc数据详解
2018/05/23 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
StubHub智利：购买和出售您的门票
2016/11/23 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
群众路线剖析材料（四风问题）
2014/10/08 职场文书
三好学生评语大全
2014/12/29 职场文书
电台广播稿范文
2015/08/19 职场文书