HTML5新增5个行内语义元素（详解）

●mark

mark元素表示页面中需要突出显示的文本。（相当于荧光笔在纸上标出的文字）
除mark元素之外，em和strong元素也可以突出显示文本。

 <div>
        <mark>html5</mark>是用于取代 <em>1999</em>年所制定的<strong>html 4.01</strong> 和XHTMl 1.0标准的 HTML标准版本，现处于发展阶段...
    </div>

mark、em、strong区别:

●cite

cite元素用来创建一个引用标记，用于文档中参考文献的引用说明。（比如书籍或杂志的标题）
呈斜体展示。

 <div>
        <p>
            有一个未来的目标 ，总能让我们欢欣鼓舞<br/>就像飞向火光的灰蛾 甘愿做烈焰的俘虏<br/>
            摆动着的是你不停的脚步 飞旋着的是你美丽的流苏<br/>
        </p>
        <p>-----<cite>引自《嫁给幸福》</cite></p>
    </div>

●time

time元素用于定义日期或时间。
time的两个属性：
1：datetime: 定义元素的日期和时间，如果为定义这个属性，则必须在元素内容中规定日期或时间。
2：pubdate: 用来表示发布日期，pubdate=“pubdate”。
目前所有主流浏览器都不支持 标签。

  <table>
        <tbody>
            <tr>
                <td>来源： 公司人资部</td>
                <td>作者：</td>
                <td>摄影作者：</td>
                <td>发布日期：<time datetime="2013-08-09" pubdate="pubdate">2013-08-09</time></td>
            </tr>
        </tbody>
    </table>

●meter

meter元素定义度量（单位），仅用于已知最大值和最小值的度量。
meter元素必须定义度量范围，既可以在文本中定义，也可以在max和min属性中定义。
meter元素常用的6个属性:
属性名       说明
min             定义最小值。默认值是 0
max             定义最大值。默认值是 1
value           定义度量的值,在min-max之间
low             定义范围内的下限值，必须小于或等于high属性的值
high             定义范围内的上限值
optimum         定义范围内的最佳值

<div class="wrapper" >
        <p>当前文章的热度:</p>
     </div>
     <table summary="设计优雅的博客列表">
        <tr>
            <th style="width: 400px;text-align: left;">标题</th>
            <th>发表时间</th>
        </tr>
        <tr>
            <td><a href="#">生命中最重要的事</a><meter min="0" max="100" value="32" low="10" high="98" optimum="50"></meter></td>
            <td>2013-08-09</td>
        </tr>
        <tr>
            <td><a href="#">爱与不爱</a><meter min="0" max="100" value="59" low="10" high="98" optimum="50"></meter></td>
            <td>2013-06-06</td>
        </tr>
        <tr>
            <td><a href="#">红楼梦</a><meter min="0" max="100" value="90" low="10" high="98" optimum="50"></meter></td>
            <td>2013-05-07</td>
        </tr>
     </table>

●progress

progress 元素表示一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在运行，但是不清楚还有多少工作量没有完成。
也可以用0到某个最大数字之间的数字来表示准确的进度完成情况。、

progress3个属性:
max 进度条的最大值
min 进度条的最小值
value 当前的进度值，已经完成的工作量
progress元素通常与JavaScript脚本结合使用，实现动态的改变进度条的值。

 <div>
            <span>选择图书目录文件</span>
            <input type="file" >
            <input type="button" id="inputbtn" value="上传">
            <div>
                <span id="pro"></span>
                <progress id="profile" min="0" max="100" value=""></progress>
            </div>
     </div>
     <script>
    var profile = document.getElementById('profile');
    var inputbtn = document.getElementById('inputbtn');
    var pro = document.getElementById('pro');
    var numvalue = 0;
    var timer = null;
    inputbtn.addEventListener('click' ,function(){
        timer = setInterval(function(){
            numvalue++;
            profile.value = numvalue;
            if(numvalue >= profile.max)
            {
                clearInterval(timer);
                pro.innerText = '上传完成';
            }
            else
            {
                pro.innerText = '正在上传' + numvalue + '%';
            }
        },100)
    });
    

</script>