WEB前端之HTML5[5]~HTML5增强的页面元素
2016-12-17 16:47
417 查看
HTML5增强的页面元素
figure元素以及figcaption元素
details元素和summary元素
mark元素
progress元素和meter元素
meter元素
ol元素
dl元素
cite元素
small元素
figcaption元素表示figure元素的标题,他从属于figure元素,必须书写在figure元素的内部,可以书写在figure元素的内部,或其他元素的前边或者后边。一个figure元素,最多只能放一个figcaption元素,但是允许放置多个其他元素
运行结果图:
summary元素从属于details元素,用鼠标单击summary元素中的文字内容时,details元素中的所有从属元素被展开,或者收缩。如果details元素内没有summary元素,浏览器会提供默认文字以供单击。
运行结果图分别如下:
运行结果图:
运行结果图:
运行结果图:
start属性指定了ol的编号从几开始,reversed属性是把ol元素的编号倒序排列。
运行结果图:
运行结果图:
运行结果图:
figure元素以及figcaption元素
details元素和summary元素
mark元素
progress元素和meter元素
meter元素
ol元素
dl元素
cite元素
small元素
HTML5增强的页面元素
figure元素以及figcaption元素:
figure元素是一种组合元素,带有可选标题, figure元素用来表示网页上一块独立的内容,将其在网页上移除之后,不会对网页上的其他内容产生任何影响,figure元素可表示的内容,可以是图片,统计图,或者代码示例figcaption元素表示figure元素的标题,他从属于figure元素,必须书写在figure元素的内部,可以书写在figure元素的内部,或其他元素的前边或者后边。一个figure元素,最多只能放一个figcaption元素,但是允许放置多个其他元素
<!--示例代码--> <figure> <img src="imgs1.png" alt="备案截图"> <figcaption>备案截图</figcaption> </figure>
运行结果图:
details元素和summary元素
details元素,是用来标示该元素内部的子元素可以被展开,收缩显示的元素,该元素具有一个boolean类型的open属性,该属性值为true的时候,该元素内部的子元素应该是被展开显示的,当该属性值为false的时候,其内部的子元素应该是被收缩起来,不显示的。默认值是false,页面打开时,其内部子元素应该处于收缩状态。另外,details元素内部不仅放置文字,可以放置表单、插件、或者统计图数据等等.summary元素从属于details元素,用鼠标单击summary元素中的文字内容时,details元素中的所有从属元素被展开,或者收缩。如果details元素内没有summary元素,浏览器会提供默认文字以供单击。
<!--示例代码--> <details> <summary>Java</summary> <summary>Android</summary> <summary>HTML5</summary> </details> <!--js控制显示和隐藏--> <details id="details" onclick="check(this)" > <summary>Java</summary> <p id="p">Java语言是一个开源、跨平台的强大语言。</p> </details> <!--js部分--> <script> function check(details) { var p = document.getElementById("p"); //details.open()返回一个boolean类型的值 if(details.open()){ p.style.visibility = "hidden"; }else{ p.style.visibility = "visible"; } } </script>
运行结果图分别如下:
mark元素
mark元素表示页面中需要突出显示或者高亮显示的对于当前元素具有参考作用的一段文字。<!--示例代码--> <p>这是一段文字,用来<mark>测试</mark>mark元素</p>
运行结果图:
progress元素和meter元素
progress元素代表一个任务的完成进度,这个进度是不确定的,表示进度正在执行,或者不清楚当前工作量有没有完成。也可以使用从0-某个数字,比如从0-100来表示当前的任务完成进度情况。这个元素,表示当前任务完成的一个属性,value元素表示当前任务量。然后它有一个最大值和最小值,用来规定一个范围。<!--一个进度条的小例子--> <section> <h2>测试progress</h2> <p>完成的百分比:<progress id="progress" max="100" value="0"><span>0</span>%</progress></p> <input type="button" onclick="btn()" value="Click Me"> </section> <!--js部分--> <script> function btn() { //一个变量 var i = 0; //搞一个方法 function thread_one() { //如果小于等于100 if(i<= 100){ //自增 i++; updateProgress(i); } } //100毫秒执行一次这个方法 setInterval(thread_one,100); } function updateProgress(newValue) { //获取progress元素 var progressBar = document.getElementById("progress"); //把传过来的值赋给progress元素的值 progressBar.value = newValue; //随时更新span的值 progressBar.getElementsByTagName("span")[0].textContent = newValue; } </script>
运行结果图:
meter元素
meter元素表示规定范围内的数值量。例如磁盘空间的使用情况等等..属性有6个 value设置值, max最大值 ,min最小值,low下限,high上限,optimum最佳值<!--示例代码--> <meter value="40" max="100" min="0" low="10" high="90" optimum="80"></meter>
运行结果图:
ol元素
在HTML5中,对ol元素进行改良,增加了start属性和reversed属性。start属性指定了ol的编号从几开始,reversed属性是把ol元素的编号倒序排列。
<!--示例代码--> <ol start="5" reversed> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ol>
运行结果图:
dl元素
在HTML5中,将该元素进行重新定义,重新定以后的dl列表,表示多个名字的一个列表项,每一项都包含一条或多条带有名字的dt元素,用来表示术语,dt元素后边紧跟着一个或多个dd元素,在一个元素内,不允许有相同名字的dt元素,不允许有重复的术语。<!--示例代码--> <dl> <dt>iPhone7 Plus</dt> <dd>iPhone7 Plus是苹果公司最近发行的最新的苹果手机,真是不便宜</dd> <!--可以包含多个dt--> <dt>Java</dt> <dd>Java语言是一种纯粹面向对象的语言</dd> </dl>
运行结果图:
cite元素
cite元素表示作品,比如一本书,一篇文章,或者一首歌曲的一个标题等等,该作品可以在页面中被详细引用,也可以只在页面中提一下。<!--示例代码--> <p>我最喜欢的电影是<cite>你的名字</cite>,是新海诚的作品.</p>
运行结果图:
small元素
在HTML5中,对small元素进行重新的定义,使其有原来的通用展示型元素变为具体的专门用来表示小字印刷体的元素,通常例如在使用到免费声明/注意事项/法律规范/版权信息等等相关的法律文字的内容中,同时,不允许运用在页面主体内容中。只允许被当做额外的信息以依赖的方式内嵌在页面中使用。注意:small元素并不意味着元素的字号会改变,如果想改变字号,还是需要使用到css样式来改变<!--示例代码--> <p>版权所有 http://www.2345cms.com @xiaosai . version 1.0 © 2016</p>
相关文章推荐
- HTML5——增强页面元素
- Web前端教程-02.03.HTML5元素、属性、格式化
- HTML5-增强的页面元素
- WEB前端之HTML5[4]~HTML5改良的input元素的种类
- HTML5 增强的页面元素
- HTML5增强的页面元素
- html5增强的页面元素
- Web前端学习笔记(3)-html5新增表单元素
- WEB前端之HTML5[2]~HTML5新增的元素
- 浅谈html5增强的页面元素
- HTML5-增强的页面元素
- HTML5增强的页面元素
- HTML5页面增强元素
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- 使用decj简化Web前端开发二:声明式表单增强和页面初始化
- HTML5 中增强页面元素
- HTML5学习笔记7-增强的页面元素
- Web前端面试指导(四十一):html5有哪些新特性、移除了那些元素?
- html5增强的页面元素
- Web前端学习笔记(2)-html5新增的结构元素