HTML5--新增的頁面元素(4)
前言：
這節課主要學習HTML5中新增的頁面元素，figure、figcaption、details、summary、mark......等元素
1.新增的figure和figcaption元素
figure元素
作用：<figure> 用來表示網頁上一塊獨立的內容，將其從網頁移除後，不會對網頁上的其他內容產生任何的影響。
場景：常常用在流內容，如：圖像、圖表、照片、代碼等等
figcaption元素
作用：<figcaption> 元素表示figure元素標題，從屬於figure元素(一個figure只能用於一個)，必須包裹在其內部，
figure和figcaption元素示例：
<body>
<figure>
<img src="./img/eg_submit.jpg" alt="測試圖">
<!-- 表示figure部分的標題 -->
<figcaption>提交按鈕圖標</figcaption>
</figure>
</body>
2.新增的details和summary元素
details元素
作用：<details> 標簽用於描述文檔或文檔某個部分的詳細內容
summary元素
作用：<summary>元素顯示details標題內容
details和summary元素示例：
<body> <!-- open屬性默認為false --> <details id="details"> <!-- 當沒有設置summary屬性，標題顯示為‘詳細信息‘ --> <summary>隋唐五代史</summary> <p> 這是一部講述隋唐五代史的斷代史書記，讓我們穿越歷史和古人來一次思想上的碰撞。 </p> </details> <script> var details = document.getElementById(‘details‘) details.onclick = function(){ console.log(details.open) } </script> </body>
3.新增的mark元素
作用：使元素中的部分內容高亮顯示
mark示例：
<body> <p>這段文字用來<mark>測試</mark>mark元素</p> </body>
4.新增ol的start和reverse屬性
作用：HTML5中對ol元素進行了改良，為它添加了start和reverse屬性。
ol新屬性示例：
<body> <ol start="6" reversed> <!-- start重新定義了列表起始序號，reversed讓列表項倒序排列 --> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ol> </body>
5.新增cite元素
作用：<cite> 表示它所包含的文本對某個參考文獻的引用，比如書籍或者雜誌的標題，通常以斜體顯示而且會用a標簽包裹。
cite元素示例：
<body> <!-- cite主要表示對文獻的引用，顯示為斜體 --> <p>隋唐五代史這本書中的很多內容參考了<cite>史記</cite>中的內容</p> </body>
6.新增progress元素
作用：<progress> 標簽通常用來標示任務的進度。
屬性：
max -- 表示任務總量
value -- 表示當前任務完成量
progress元素示例：
<body> <section> <h2>progress元素的使用</h2> <!-- max表示進度條總量，value表示當前的完成量 --> <p>任務進度<progress id="pro" max="100" value="0"><span>0</span>%</progress></p> <input type="button" value="開始" id="btn"> </section> <script> var timer = null var progress = document.getElementById(‘pro‘) var span = progress.getElementsByTagName(‘span‘)[0] var btn = document.getElementById(‘btn‘) function update() { if (progress.value < 100) { progress.value++ span.textContent = progress.value } else { clearInterval(timer) } } btn.onclick = function() { timer = setInterval(update, 100) } </script> </body>
7.新增meter元素
作用：<meter> 標簽用來表示規定範圍內的數值量，例如:磁盤使用量、投票比例等
屬性：
max -- 表示範圍的最大值
min-- 表示範圍的最小值
high -- 表示被識為高級別的值的範圍
low -- 表示被識為低級別的值的範圍
value -- 當前元素所顯示的值
optinum -- 表示當前度量最優值
meter元素示例：
<body> <!-- 這裏low和high將meter範圍分成了三部分，三部分顯示的顏色也不同 --> <meter value="95" min="0" max="100" low="10" high="90" optimum="80"></meter> </body>
HTML5--新增的頁面元素(4)