首页
所有分类
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-sizing属性使用参考指南
Jan 08 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
CSS 实现角标效果的完整代码
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
乱码(3) Excel(4) 信息校验(1) greenlet(1) 分区(2) 自动播放(1) Coroutine(1) 静态压缩(1) 正则表达式(3) 驱动模型(1)
You might like
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP aes （ecb）解密后乱码问题
2015/06/22 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
解析Python中的异常处理
2015/04/28 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python能开发游戏吗
2020/06/11 Python
python右对齐的实例方法
2020/07/05 Python
德国户外商店：eXXpozed
2020/07/25 全球购物
网络通讯中，端口有什么含义，端口的取值范围
2012/11/23 面试题
学习十八大报告感言
2014/02/04 职场文书
采购部部长岗位职责
2014/02/06 职场文书
八一建军节活动方案
2014/02/10 职场文书
办公室岗位职责
2014/02/12 职场文书
市场部岗位职责范本
2015/04/15 职场文书
老员工辞职信范文
2015/05/12 职场文书
安全教育片观后感
2015/06/17 职场文书
教师节联欢会主持词
2015/07/04 职场文书
小学大队长竞选稿
2015/11/20 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL