增强的页面元素

figure和figcaption元素

<!--figure元素和figcaption元素-->
<!--figcaption是figure的标题，一个figure只有一个figcaption-->
<figure>
<img src="img/1.jpeg" width="200" height="200">
<img src="img/2.jpg" width="200" height="200">
<img src="img/3.jpg" width="200" height="200">
<figcaption>秦时明月</figcaption>
</figure>

details和summary 元素

<!--details元素与summary元素-->
<!--summary是details默认显示的标题  没有summary标题将显示详细信息-->
<details id="detail" onclick="click(this)">
<summary>速度与激情7</summary>
<p id="text">激情四射的速度与激情7</p>
</details>
<script>
function click(detail) {
var text = document.getElementById('text');
if (detail.open) {
text.style.visibility = "hidden";
} else {
text.style.visibility = "visible";
}
}
</script>

mark 元素

<!--mark元素   高亮部分-->
<p>asd
<mark>sadasd</mark>
asdasd
</p>

progress元素

<section>
<h2>progress元素的使用</h2>
<p>完成的百分比:
<progress id="pro" style="background-color: aqua" max="100"></progress>
<span id="span">0</span>%
</p>
<input type="button" onclick="btn()" value="点击">
</section>
<script>
function btn() {
var i = 0;

function thread_one() {
if (i <= 100) {
updateProgress(i++);
}
}

setInterval(thread_one, 100);//指定多长时间执行一次
}
function updateProgress(newValue) {
var progress = document.getElementById('pro');
progress.value = newValue;
document.getElementById('span').textContent = newValue;
}
</script>

meter元素

<!--meter元素 下线low 上线high 最佳值optimum-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

ol元素

<!--ol元素  start从5开始排序 reversed倒序-->
<ol start="5" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>

dl元素

<dl>
<dt>hello</dt>
<dd>你好，hello</dd>
<dt>博客</dt>
<dd>我的博客</dd>
</dl>

cite元素

<!--cite元素-->
<h3>cite元素</h3>
<p>我最喜欢的动漫<cite>秦时明月</cite></p>

small元素

<!--small元素   额外信息，内嵌在页面中,css样式需要自己定义-->
<small>额外信息，内嵌在页面中</small>