<!DOCTYPE html>
<html>
<head>
<title>进度条</title>
</head>
<body>
<style type="text/css">
.red{color:#0000;}
</style>
<!-- 高亮！ -->
<p><span id="red"><u><mark>HTML</mark></u></span>是通向WEB技术世界的钥匙。</p>
<!-- 进度！ -->
<section>
<p>百分比进度：<progress id="progress" max="100"><span>0</span>%</progress></p>
<input type="button" onclick="click1()" value="显示进度"/>
</section>
<script>
function click1(){
var progress = document.getElementById('progress');
progress.getElementsByTagName('span')[0].textContent = "0" ;
for(var i=0;i<=100;i++)
updateProgress(i);
}
function updateProgress(newValue){
var progress = document.getElementById('progress');
progress.value = newValue;
progress.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
<!-- 刻度！ -->
<section>
<meter value="3" min="0" max="10">十分之一</meter>
<meter value="0.6">60%</meter>
</section>
<!-- 时间！ -->
<section>
<time datetime="2019-12-27" pubdate>2017年11月13日</time>
</section>
<!-- 联系信息！ -->
<address>
<a href="www.baidu.com">百度</a>
</address>
<!-- 显示方向！ -->
<section>
<bdo dir="rtl">床头明月光，疑是地上霜</bdo>
</section>
<!-- 换行断点！ -->
<p>本站旧地址为：<wbr>>sjdfjsfjkfskjfskfjalfafkn</p>
<!-- 拼音注释！ -->
<ruby>
少<rt>shao</rt>
</ruby>
<ruby>
向<rt>xiang</rt>
</ruby>
</body>
</html>
