1.figure
2.figcaption
3.details
4.summary
5.mark
6.progress
7.meter
8.ol
9.dl
10.cite
11.small
<!DOCTYPE html>
<html>
<head>
<title>增强的元素</title>
</head>
<body>
<figure>
<img src ="img/bg_1.jpg" />
<figcaption style="align:center;">灯塔</figcaption>
</figure>
<script>
function detail_click(){
var p = document.getElementById("p");
if(detail.open){
p.style.visibility ="hidden";
}else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" οnclick="detail_click()">
<summary>yanglong</summary>
<p id="p" style="visibility:hidden"><mark>示例</mark>示例</p>
</details><br /><br />
<script>
function btn(){
var i=0;
function thread_one(){
if(i <= 100){
i++;
updateProgress(i);
}
}
setInterval(thread_one,200);
}
function updateProgress(newValue){
var progressBar = document.getElementById("progress");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<progress style="background-color:#269abc" id="progress" max="50" οnchange="thread_one()" ></progress>
<input type="button" value="加载" οnclick="btn()" /><br /><br />
<meter value="40" min="0" max="100" low="10" high="90" optimun="80"></meter>
</body>
</html>