首页
所有分类
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特性绘制简易版围棋效果
Sep 28 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 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) Android Studio(4) MyBatis(5) Dijkstra(1) 迪杰斯特拉(1) exec(1) nacos(1) cv2(1) Flask Web(1) seata(1)
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php调用c接口无错版介绍
2014/03/11 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python单例设计模式实现解析
2020/01/07 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
一道输出判断型Java面试题
2014/10/01 面试题
营销与策划个人求职信
2013/09/22 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
大学生个人求职信
2014/06/02 职场文书
商品陈列协议书
2014/09/29 职场文书
个人职业及收入证明
2014/10/13 职场文书
党支部书记岗位职责
2015/02/15 职场文书
北大自主招生自荐信
2015/03/04 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
Apache POI的基本使用详解
2021/11/07 Servers