关于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>

效果图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值