增强的页面元素

figure元素

一种元素的组合,带有可选标题。用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生任何影响。所表示的内容可以是图片、统计图或代码示例,也可以用来表示音频插件、视频插件或统计表格等。<figure></figure>类似于<dl></dl>;
figcaption元素

表示figure元素的标题,从属于figure元素,必须书写在figure元素内部的其他从属元素的前面或后面。一个figure元素内最多只允许放置一个figcaption元素,但允许放置多个其他元素。

details元素

    details元素:用户要求得到并且可以得到的细节信息。summary提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。summary应该是details的第一个子元素。

提供了一种替代JS的、将画面上局部区域进行展开或收缩的方法。其内可放置文字、表单、插件或对于一个统计图提供的详细数据表格。
    summary元素从属于details元素,如果其内没有summary元素,浏览器会提供一个诸如上下箭头之类的图标,标示该区域可以被展开或收缩。
     details元素具有一个属性“open”,<details open>在画面打开时details元素所表示的局部区域则会处于展开状态。
mark元素

能够体现mark元素作用的最好例子是对网页全文检索某个关键词时显示的检索结果。
     另一个主要作用是在引用原文的时候,为了某种特殊的目的而把原文作者没有特别重点标示的内容给标示出来。
     mark元素的标示目的与原文作者无关,在引用时加上去的,目的是为了能吸引当前用户的注意力,供用户参考对其能有帮助。strong元素是原文作者用来强调一段文字的重要性的,譬如警告信息、错误信息等,em元素是作者为了突出文章重点而使用的。
5 progress元素

运行中的进程,可以用来显示JS中耗时间的函数的进程;

代表一个任务的完成进度,进度可以是不确定的,也可以用0到某个最大数字之间的数字来表示准确的进度完成情况(或百分比)。
    value属性表示已经完成了多少工作量,max属性表示总共有多少工作量(工作量的单位是随意的,不要指定)。二者的属性设定时,只能指定为有效的浮点数,value的值必须大于0,且小于或等于max的值;max的值必须大于0。
6 meter元素

表示规定范围内的数量值。如磁盘使用量,投票比例等。
value属性:在元素中特地表示出来的实际值。默认为0,可以给该属性指定一个浮点小数值。
min属性:指定规定范围时允许使用的最小值,默认为0,设定值不能小于0。
max属性:指定规定范围时允许使用的最大值,默认为1,若设定的值小于min的值,则将把min的值视为最大值。
low属性:规定范围的下限值。必须<=high的值。若设定的值小于min的值,则将把min的值视为low的值。
high属性:规定范围的上限值。若设定的值小于low的值,则将把low的值视为high的值。若设定的值大于max的值,则将把max的值视为high的值。
optimum属性:最佳值,属性值必须在min和max之间,可以大于high。(Safari 4、Firefox 4、 Google Chrome 2、 Opera 10浏览器都支持)
                     在IE6/7/8中,需要在Js中添加脚本:

<!--[if IE]><script src="http://HTML 5shiv.googlecode.com/svn/trunk/HTML 5.js"></script><![endif]-->
7 menu元素和command元素

用于Web应用程序的元素,用于菜单、工具条及弹出菜单。

menu元素相当于其他语言开发工具中的菜单,菜单列表。当希望列出表单控件时使用该标签。

command元素相当于其他开发语言工具中的菜单项,命令按钮,比如单选按钮、复选框或按钮。(目前还没有浏览器支持)

8 改良的ol列表

start属性:用来自定义编号的初始值。

reversed属性:用来对列表进行反向排序。(目前还没有浏览器支持)

9 改良的dl列表

在HTML 4中,dl专门用来定义术语列表,列表中的每一项包含一个术语及一个或多个对术语的定义。

在HTML 5中,dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素,用来表示术语,dt元素后面紧跟一个或多个dd元素,用来表示定义。在一个元素内,不允许有相同名字的dt元素,不允许有重复的术语。

dl列表也可以用来表示一些页面或article元素中内容的辅助信息,如作者、类别等。

10 加以严格限制的cite元素

cite元素表示作品(如书、文字、歌曲等)的标题。该作品可以在页面中被详细引用,也可以只在页面中提一下。HTML5中明确规定了不能用cite元素表示包括作者在内的任何人名(除非标题就是一个人名。),但是没有将这种用法当做错误。

11 small元素

专门用来标示“小字印刷体”的元素,通常用在诸如免责声明、注意事项、法律法规、与版权等的法律性声明文字中,同时不允许被应用在页面主内容中,只允许被当做辅助信息用inline方式内嵌在页面上使用。small元素不意味着元素中的内容字体会变小,如需将字体变小,需配合css。

时间: 2024-11-11 04:43:30

增强的页面元素的相关文章

HTML5 增强的页面元素

一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = document.getElementById("num1").valueAsNumber; 七.HTML5 增强的页面元素 1.figure.figcaption <figure> 标签规定独立的流内容(图像.图表.照片.代码等等).figure 元素的内容应该与主内容相关,但如果被删除,

[html5] 学习笔记-html5增强的页面元素

在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress.meter.ol.dl.cite .small元素. 1.figure,figcaption元素 figure元素用来表示网页上一块独立的内容,可以是图片.统计图.代码实例. figcaption元素从属figure元素,表示figure元素的标题:一个figure元素只能放置一个figcaptio

【Selenium专题】高亮显示页面元素

高亮显示页面元素主要用到Selenium中使用js的知识点,最常用的是检查元素定位是否正确.此外,实现js的调用大大增强了Selenium的功能.以下是调试通过的案例: import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class js { public static

页面元素与页面间的间隙

当我们做一个页面时,默认页面元素距页面左右上下都有一个很小的间隙.如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> </head> <style> .three{ width: 100px; height: 100px; border-style:

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

JavaScript 实现页面元素(ul-li)的简单排序

JavaScript 实现页面元素(ul-li)的简单排序 html页面: <input type="button" value="show" onclick="show()" /> <ul id="ul1"> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </

bootstrap 基本页面元素,代码,列表

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p c