<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>figure、figcaption、details、summary 和 mark 元素</title>
</head>
<body>
<!-- figure及figcaption元素 -->
<!-- figure：规定独立的流内容（图像、图表、照片、代码等等），figcaption为 figure 添加标题。 -->
<figure>
<figcaption>这是标题</figcaption>
<img src="1.jpg" alt="图1">
<img src="2.jpg" alt="图2">
<img src="3.jpg" alt="图3">
</figure>
<!-- details及summary元素 -->
<!-- details:用于描述文档或文档某个部分的细节, 配合summary使用可以为 details 定义标题，标题是可见的，用户点击标题时，会显示出 details。目前只有 Chrome 和 Safari 6 支持 <details> 标签。 -->
<details>
<summary>速度与激情</summary>
<p>这是赛车电影这是赛车电影这是赛车电影这是赛车电影这是赛车电影这是赛车电影</p>
</details>
<!-- mark元素 -->
<!-- mark：定义带有记号的文本（突出、高亮等）。 -->
<p>这是老子说过的话，“<mark>
道可道，非常道。名可名，非常名。无名天地之始。有名万物之母。故常无欲以观其妙。常有欲以观其徼。此两者同出而异名，同谓之玄。玄之又玄，众妙之门。
</mark>”</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>progress 和 meter 元素</title>
</head>
<body>
<script type="text/javascript">
function btn(){
var i = 0;
function one(){
if(i<=100){
i++;
update(i);
}
}
setInterval(one,100);
}
function update(newValue){
var progressBar = document.getElementById('ip');
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
<!-- rogress:定义运行中的进度（进程）。 -->
<section>
<h2>progress的使用</h2>
<p>完成情况<progress value="0" max="100" id="ip"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="点我"/>
</section>
<br/>
<script type="text/javascript">
function bt(){
var i = 0;
function one(){
if(i<=100){
i++;
update(i);
}
}
setInterval(one,100);
}
function update(newValue){
var progressBar = document.getElementById('wo');
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
<!-- meter:定义度量衡。仅用于已知最大和最小值的度量。 -->
<meter value="10" min="0" max="100" low="15" high="95" optimum="80" id="wo"></meter>
<input type="button" onclick="bt()" value="点我"/>
</body>
</html>
浙公网安备 33010602011771号