关于HTML5语义内容的学习部分

<span style="background-color: rgb(255,255,255);"><span style="font-family:Simsun;">1.progress和meter元素</span></span>

progress元素用来描述程序进展过程中完成的当前装填，无论完成状态是否被定义。meter元素给出了一个已知其范围的元素。progress元素可以具有max属性以表示任务完成的终点，并且使用value属性来表示任务状态，这两个属性都是可选的。以下是一个实例。

<h1>Your Tesk is in Progress</h1>
<!--Progress元素用来描述程序进展过程完成的当前状态，无论完成状态是否被定义。-->
<p>Status:<progress min="0" max="100" value="50"><span>50</span>%</progress></p>

效果图：

 meter元素最好用于（与一些javaScript连同使用）动态改变百分比值。meter有6个相关属性。出来max和value属性外，还有min,high,low,optimum属性，high和low属性表明的是在文章中被分为的"高"和"低"的阈值。例如：考试成绩的范围可以从0%到100%（最大），但是任何低于60%的值都--> 被认为是低值，任何高于85%的值都被认为是高值。optimum指的是理想值。实例代码：

<p>Total current disk usage：<meter value="160" min="0" max="320" low="10" high="300" title="gigabytes">63GB</meter></p>
<br/>

效果图：

2.time元素以及其他

 在下面的代码中，T字符用来表示时间的开始，格式为HH:MM:SS以及小数点后的毫秒，Z字符是可选的，表示该时区是世界标准时间（UTC）

除了datetime属性，time元素也允许使用pubdate属性，这是一个布尔型属性，它的存在表明嵌套在最近article元素的内容在指定日期发布的。如果没有article元素，pubdate属性则将作用于整个文档。

注意：所表示的时间不能是“BC”或“BCE(公元前)”，必须是公历日期。

另外，还有b,i,em,strong元素的实例：

<time datetime="2016-6-13T10:48:48.014Z">13 Jun of this year</time>
<br>
<P>Harry's　Grill is the best <em>burger</em> joint in town.</P>
<P>Harry's　Grill is the best <strong>burger</strong> joint in town.</P>
<P>Harry's　Grill is the best <i>burger</i> joint in town.</P>
<!--建议标记出版物-->
<P>Harry's　Grill is the best <cite>burger</cite> joint in town.</P>
<small>&copy;SiterPoint Pty.Ltd.</small>
效果图：

3.detail元素和article元素的scope属性

	detail元素有助于标记文档的隐藏部分，而且可以扩展显示附加信息。以下实例会将summary元素中的内容以及其他隐藏的内容呈现给用户。只要单机summary元素，即可显示隐藏的内容。如果您想将隐藏内容默认为可视，那么您可以使用布尔型open属性。 在style样式中，由于代码存在scope属性，因此在style元素中样本样式仅应用于父代元素及其子代元素（如果允许级联原则），而不是整个文档。 代码：

<details>
    <summary>Some Magazines of Note</summary>
    <ul>
        <li><cite>Bird Watchers Digest</cite></li>
        <li><cite>Rowers Weekly</cite></li>
        <li><cite>Fishing Monthly</cite></li>
    </ul>
</details>
<br>
<h1>Page Title</h1>
<article>
    <!--由于在代码中存在scope属性，因此在style元素中的文本样式仅应用于父代元素及其子代元素（如果允许级联原则），而不是整个文档-->
    <style scoped>
        h1{color:Blue;}
    </style>
    <h1>Article Title</h1>
    <p>Article content.</p>
</article>

效果图：