lucifinilhades

浏览: 87305 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 中增强的页面元素

博客分类：

HTML5/CSS3

HTML5 页面元素

新增的figure元素与figcaption元素

figure元素是一种元素的组合，带有可选标题。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。figure元素所表示的内容可以是图片、统计图或代码示例。

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

例1：不带标题的figure元素示例

<figure>
    <img src="images/ty1.jpg"/>
</figure>

例2：带标题的figure元素示例

<figure>
    <img src="images/ty1.jpg"/>
    <figcaption>标题</figcaption>
</figure>

例3：多个图片使用同一标题示例

<figure>
    <img src="images/ty1.jpg"/>
    <img src="images/ty2.jpg"/>
    <img src="images/ty3.jpg"/>
    <figcaption>标题</figcaption>
</figure>

figure元素所表示的内容通常是图片、统计图或代码示例，但并不仅限于此，它同样可以用来表示音频插件、视频插件或统计表格等。

新增的details元素

details元素提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的方法，例如：

<details>
    <summary>影片名字</summary>
    <p>影片介绍</p>
</details>

summary元素从属于details元素，用鼠标点击该元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字以供点击。details元素具有一个“open”属性，使用“<details open>” 语句对details元素添加该属性，添加该属性后在画面打开时details元素所表示的局部区域则会处于展开状态。details元素内并不限于放置文本信息，也可以在其内部放置表单、插件或对于一个统计图提供的详细数据表格。

新增的mark元素

mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。它通常使用于引用原文的时候，目的是引起读者的注意。mark元素是对原文内容具有补充作用的一个元素，它应该用于一段原文作者不认为重要，但为了与原文作者不相关的其他目的（通常是和当前用户的操作有关，需要当前用户引起注意的一段文字）而需要突出显示的文字上面。

mark元素最主要的目的是吸引当前用户的注意，因为标示出来的文字与用户的当前操作有关，通常该元素对于当前用户具有很好的帮助作用。除了在搜索结果中高亮显示关键词之外，mark元素的另一个主要作用是在引用原文的时候，为某种特殊目的而把原文作者没有特别重点标示的内容给标示出来。

注意：mark元素的作用与em元素和strong元素是有区别的，不能混同使用。 mark元素的标示目的与原文作者无关，或者说它不是原文作者用来标示文字的，而是在后来引用时添加上去的，它的目的是吸引当前用户的注意力，提供给用户作参考，希望能够对用户有帮助。而strong元素是原文作者用来强调一段文字的重要性的，例如：警告信息、错误信息等；em元素是作者为了突出文章重点而使用的。

新增的progress元素

progress元素代表一个任务的完成进度，个进度可以是不确定的，只是表示进度正在进行，但不清楚还有多少工作量没有完成，也可以用0到某个大数字（如：100）之间的数字来表示准确的进度完成情况（例如：百分比）。

该元素具有两个属性来表示当前任务完成情况，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不用指定。

在属性设定的时候，value属性和max属性只能指定为有效的浮点数，value属性的值必须大于0，且小于或等于max属性，max属性的值必须大于0。

<p>
完成百分比：
<progress id="p" max="100"><span>0</span>%</progress>
</p>

新增的meter元素

meter元素表示规定范围内的数量值。例如：磁盘使用量，对某个候选者的投票人数所占比例等。该元素有六个属性：

value属性：在元素中特地表示出来的实际值。该属性值默认为0，可以给该属性指定一个浮点小数值。
min属性：指定规定的范围时允许使用的最小值，默认为0，设定该属性时设定的值不能小于0。
max属性：指定规定的范围时允许使用的最大值，如果设定的该属性值小于min属性的值，则把min属性的值视为最大值。max属性默认值为1。
low属性：规定范围的下限值。必须小于或等于high属性的值。同样的，如果low属性值小于min属性的值，则把min属性值视为low属性值。
high属性：规定范围的上限值。若该属性值小于low属性值，则把low属性的值视为high属性的值，同样的，若该属性值大于max属性值，则把max的值视为high属性的值。
optimum属性：最佳值，属性值必须在min属性值与max属性值之间，可以大于high属性值。

例如：

<p>磁盘使用量：
    <meter value="40" min="0" max="160">40/160</meter>GB
</p>
<p>您的得分是：
    <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter>
</p>
<!-- 不是一定要使用属性 -->
<meter>80%</meter>
<meter>3/4</meter>
<!-- 不正确的使用方法，这样将无任何显示信息 -->
<meter min="0" max="100" value="75"></meter>

新增的menu元素与command元素

menu和command元素应用于Web应用程序，它用于菜单、工具条及弹出菜单。其中menu元素相当于其他语言开发工具中的菜单，而command元素相当于其他开发语言工具中的菜单项。

改良的ol列表

在HTML5中，将ol列表进行了改良，为它添加了start属性与reversed属性。

如果不想ol元素所打赌列表编号从1开始，那么可以使用start属性来自定义编号的初始值，例如：

<ol start="5">
  <li>列表项5</li>
  <li>列表项6</li>
  <li>列表项7</li>
</ol>

如果想对列表进行反向排序，可以使用ol列表的reversed属性。

改良的dl列表

在HTML5中，dl元素进行了重新定义，重新定义后的dl列表包含多个带名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。例如：

<dl>
  <dt><dfn>RSS</dfn></dt>
  <dd>RSS也叫聚合RSS，是在线共享内容的一种简易方式。</dd>
  <dt><dfn>Blog</dfn></dt>
  <dd>Blog，又名博客或网络日志，是一种通常由个人管理……</dd>
</dl>

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

<dl>
    <dt>作者</dt>
    <dd>XXX</dd>
    <dt>出版社</dt>
    <dd>XXXXXX</dd>
    <dt>类别</dt>
    <dd>网络开发</dd>
</dl>

加以严格限制的cite元素

cite元素表示作品（如：一本书、文章、歌曲等）的标题。该作品可以在页面中被详细引用，也可以只在页面中提一下。在HTML5中明确规定了不能用cite元素表示包括作者在内的任何人名，因为人的名字不是标题（除非标题就是人的名字）。示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>cite元素示例</title>
</head>
<body>
    <h2>cite元素示例</h2>
    <p>我最喜欢的电视剧是<cite>封神演义</cite>。</p>
</body>
</html>

重新定义的small元素

在HTML5中，对small元素进行了重新定义，使其由原来的通用展示性元素变为更具体的、专门用来标识所谓“小字印刷体”的元素，通常用在诸如免责声明、注意事项、法律规定、与版本相关等的法律性声明文字中，同时不允许被应用在页面主内容中，只允许被当做辅助信息用inline方式内嵌在页面上使用。同时，small元素也不意味着元素中内容字体会变小，如果需要将字体变小，需要配合CSS来使用。

分享到：

DWR的应用过程 | jQuery 事件模型【1】

2011-10-13 12:34
浏览 1305
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 中增强的页面元素

新增的figure元素与figcaption元素

新增的details元素

新增的mark元素

新增的progress元素

新增的meter元素

新增的menu元素与command元素

改良的ol列表

改良的dl列表

加以严格限制的cite元素

重新定义的small元素

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 中增强的页面元素

新增的figure元素与figcaption元素

新增的details元素

新增的mark元素

新增的progress元素

新增的meter元素

新增的menu元素与command元素

改良的ol列表

改良的dl列表

加以严格限制的cite元素

重新定义的small元素

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

最近访客更多访客>>