html5之增强页面元素

HTML5 增强页面的元素，包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 和 small 元素。这些元素都是起到一些辅助作用，比如：figure元素，它主要作用类似于展示一个作品集，图片（包含图片，图片说明，图片标题）。具体我们以下来详细讲解。

figure元素与figcaption元素

figure元素最常用的地方就是来展示图片，这里的图片包含图片说明，图片标题已经图片本身。一个figure元素只能包含一个figcaption元素，而figcaption元素必须从属于figure元素。figure元素可以包含很多其他元素。一般用于图片展示、统计图等。代码如下：

  
黄浦江上的的卢浦大桥
  

details元素与summary元素

details元素类似于展示与隐藏功能标签，summary提供details标题。details只能有一个summary元素而且summary只能从属于details元素。如果不写summary元素那么details将以不同浏览器规定显示标题信息，details的内容默认是隐藏的，点击summary或者标题将显示。details有一个open的boolean属性，可以通过JS获取open属性判断是展示还是隐藏状态。代码如下：

    
    


    
    

        
速度与激情7
        
你好吗？
    
    获取状态

效果：

details与summary.png

mark元素

mark顾名思义，是标记的意思。可以突出高亮mark中的文字。代码如下：

    
    


    

        突出高亮mark中的文字。
    

效果：

mark.png

ol元素

ol元素，是ul列表的改良，start属性用于指定开始的序号，后面的将递增，reversed属性用于将序号逆序显示，这时如果指定start将是递减的。代码如下：

    
    


     

        
列表1
        
列表2
        
列表3
        
列表4
        
列表5
    

效果：

ol.png

dl、dt、dd元素

是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签。我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。dt（术语）元素中的内容不能相同，dd元素用于描述。代码如下：

    
    


     

        
标题1
        
这里有，html教程
        
这里有，css模块
        
这里有，css教程
        
标题2
        
这里有，html教程
        
这里有，css模块
        
这里有，css教程
    

效果：

dl-dt-dd.png

progress元素

progress是进度条最常用的，用来表示不确定的进度，一般不做静态的数据展示，可以通过设置progress的value属性，来改变进度条的状态。切不可用作磁盘容量大小。代码如下：

    
    
    


    

        
progress元素的使用
        
完成的百分比0%
        
    

效果：

progress.png

meter元素

规定空间的使用量。有当前值value，最小/最大值min/max,高值/低值high/low,还有一个合适值optimum。当value低于或者大于low/high时，meter的样式出现警告样式，其他时候柔和的样式。代码如下：

    
    


    3/10

    60%

cite元素

cite 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。显示效果是斜体的文字。代码如下：

《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成。

small元素

small元素表示小字印刷体，免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。代码如下：

 
单人间
 
399 元 含早餐，不含税
 
双人间
 
599 元 含早餐，不含税

谢谢大家观看，欢迎大家评论交流！一起学习移动网页制作