浅谈html5增强的页面元素

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

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

原文地址：http://imgbuyun.weixiu-service.com/up79/202309/3dxgtt2vh4v.html