详解html5增强页面的元素

时间：2016-07-12 21:01:50 阅读：282 评论：0 收藏：0 [点我收藏+]

标签：

HTML5 增强页面的元素，包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 和 small 元素。这些元素都是起到一些辅助作用，比如：figure元素，它主要作用类似于展示一个作品集，图片（包含图片，图片说明，图片标题）。具体我们以下来详细学习HTML5 这些增强页面的元素。
figure元素与figcaption元素
figure元素最常用的地方就是来展示图片，这里的图片包含图片说明，图片标题已经图片本身。一个figure元素只能包含一个figcaption元素，而figcaption元素必须从属于figure元素。figure元素可以包含很多其他元素。一般用于图片展示、统计图等。代码如下：
<!DOCTYPE HTML><html><meta charset="utf-8"><body><figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="img.jpg" width="350" height="234" /></figure></body></html>
details元素与summary元素
details元素类似于展示与隐藏功能标签，summary提供details标题。details只能有一个summary元素而且summary只能从属于details元素。如果不写summary元素那么details将以不同浏览器规定显示标题信息，details的内容默认是隐藏的，点击summary或者标题将显示。details有一个open的boolean属性，可以通过JS获取open属性判断是展示还是隐藏状态。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>details</title></head><body>
<script>
      function detailFunction(obj){
         var open = document.getElementById("details").open;
         alert("状态是"+open);
      }
</script>
<details id="details">
      <summary>速度与激情7</summary>
      <p id="p">你好吗？</p>
</details>
<button onClick="detailFunction(this)">获取状态</button></body>
效果：
QQ截图20160518203058.png

details与summary.png
mark元素
mark顾名思义，是标记的意思。可以突出高亮mark中的文字。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>details</title></head><body>
<p>
      突出<mark>高亮mark</mark>中的文字。
</p></body>
效果：

mark.png
ol元素
ol元素，是ul列表的改良，start属性用于指定开始的序号，后面的将递增，reversed属性用于将序号逆序显示，这时如果指定start将是递减的。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>ol</title></head><body>
   <ol start="3" reversed>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
      <li>列表4</li>
      <li>列表5</li>
   </ol></body></html>
效果：

ol.png
dl、dt、dd元素
是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签。我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。dt（术语）元素中的内容不能相同，dd元素用于描述。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>ol</title></head><body>
   <dl>
      <dt>标题1</dt>
      <dd>这里有，html教程</dd>
      <dd>这里有，css模块</dd>
      <dd>这里有，css教程</dd>
      <dt>标题2</dt>
      <dd>这里有，html教程</dd>
      <dd>这里有，css模块</dd>
      <dd>这里有，css教程</dd>
</dl></body></html>
效果：
QQ截图20160518203122.png

dl-dt-dd.png
progress元素
progress是进度条最常用的，用来表示不确定的进度，一般不做静态的数据展示，可以通过设置progress的value属性，来改变进度条的状态。切不可用作磁盘容量大小。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>progress</title>
<script>
      function btn(){
         var i = 0;
         //定义执行方法
         function thred_one(params) {
            if(i<100){
                  i++;
                  updateprogress(i);
            }
         }
         //注册定时器，每100毫秒执行一次
         setInterval(thred_one,100);
      }

      function updateprogress(newValue){
         var progressBar = document.getElementById("p");
         progressBar.value = newValue;
         document.getElementsByTagName("span")[0].textContent = newValue;
      }
</script></head><body>
<section>
      <h2>progress元素的使用</h2>
      <p>完成的百分比<progress id="p" max="100" value="0"></progress><span>0</span>%</p>
      <input type="button" onclick="btn();" value="点击">
</section></body></html>
效果：
QQ截图20160518204104.png

progress.png
meter元素
规定空间的使用量。有当前值value，最小/最大值min/max,高值/低值high/low,还有一个合适值optimum。当value低于或者大于low/high时，meter的样式出现警告样式，其他时候柔和的样式。代码如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>meter</title></head><body>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter></body></html>
cite元素
cite 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。显示效果是斜体的文字。代码如下：
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
small元素
small元素表示小字印刷体，免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。代码如下：
<dl>
<dt>单人间</dt>
<dd>399 元 <small>含早餐，不含税</small></dd>
<dt>双人间</dt>
<dd>599 元 <small>含早餐，不含税</small></dd></dl>

原文来自：简书

详解html5增强页面的元素

标签：

踩

(0)

评论一句话评论（0）

jiangjie190

加入时间：2016-02-19

关注此人发短消息

文章分类

默认分类（571）

“jiangjie190”关注的人------（0）

“jiangjie190”的粉丝们------（0）