关于HTML5语义内容的学习(部分)
来源:互联网 发布:赵梦玥黑历史知乎 编辑:程序博客网 时间:2024/05/22 06:25
<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>©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
- 关于HTML5语义内容的学习(部分)
- Html5新增的语义化标签(部分)
- HTML5提供定义网页不同部分的语义元素
- HTML5:学习(4)语义化标签
- 关于HTML5视频播放的一些内容(1)
- 关于HTML5视频播放的一些内容(2)
- Html5学习(主体内容)
- HTML5学习之语义化标签(一)
- html5新增的语义标签
- html5的语义化标签
- html5新增的语义标签
- 什么是HTML5(一):语义
- HTML5标签的语义认知和理解(1)
- HTML5标签的语义认知和理解(2)
- HTML5语义标签的实践(blog页面)
- 基于内容的图像检索系统(集成语义特征)
- 一些js语法和html5画布的内容以及一点点网页内容(week7学习)
- 关于数论以及部分其他学习内容总和
- java并发编程(十二)--可重入内置锁
- 实战:通过ViewModel规范TableView界面开发
- 无锁编程:采用不可变类减少锁的使用
- C++编译错误: unexpected end of file while looking for precompiled head
- 万网服务器主机,MYSQL远程无法链接的解决办法
- 关于HTML5语义内容的学习(部分)
- PHP精确去掉引号里的内容;获取引号里的内容
- java并发编程(十三)--线程间协作:wait、notify、notifyAll
- C++易错知识点整理
- nodejs之mysql简单查询实例测试代码
- 论飞机游戏在C语言程序的基本语句能完成功能的体会
- uoj#58. 【WC2013】糖果公园
- Android 热修复-AndFix
- 安装MYSQL过程记录