ol元素,dl元素
<body>
<!--ol-->
<!--start:开始的序列号, reversed:是否倒序-->
<ol start="4" reversed>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ol>
<!--dl-->
<dl>
<dt>Hello</dt>
<dd>你好就是hello</dd>
</dl>
<!--cite元素-->
<!--斜体显示-->
<h3>cite元素</h3>
<p>广州大学 <cite>华软软件学院</cite></p>
<!--small元素-->
<p> 广州大学<small>华软软件学院</small></p>
</body>
</html>
progress元素和meter元素
<body>
<!--请使用 <progress> 标签来显示下载的进度。-->
<!--max 定义完成的值。-->
<!--value 定义进程的当前值。-->
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比<progress id="p" max="100" style="background-color: aqua"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="点击"/>
</section>
<!--meter元素-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
<meter>40/100</meter>
<script>
function btn() {
var i = 0;
function thread_one() {
if(i <= 100) {
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue) {
var progressBar = document.getElementById("p");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
</body>