時(shí)間:2023-09-27 06:12:02 | 來源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-27 06:12:02 來源:網(wǎng)站運(yùn)營(yíng)
輕松學(xué):網(wǎng)頁設(shè)計(jì)7-html網(wǎng)頁的頁面交互元素:HTML5是一些獨(dú)立特性的集合,它不僅增加了許多Web頁面特性,而且本身也是一個(gè)應(yīng)用程序。對(duì)于應(yīng)用程序而言,表現(xiàn)最為突出的就是交互操作。<!doctype html><html><head><meta charset="utf-8"><title>details和summary元素的使用</title></head><body> <details> <summary>顯示列表</summary> <ul> <li>列表1</li> <li>列表2</li> </ul> </details></body></html>
2.progress元素用于定義一個(gè)正在完成的進(jìn)度條,這個(gè)進(jìn)度可以是不確定的,只是表示進(jìn)度正在進(jìn)行,但是不清楚還有多少工作量沒有完成 <body> <h1>我的工作進(jìn)展</h1> <p><progress min="0" max="100" value="50"></progress></p></body>
3.meter元素用于表示指定范圍內(nèi)的數(shù)值。<!doctype html><html><head><meta charset="utf-8"><title>meter元素的使用</title></head><body> <h1>學(xué)生成績(jī)列表</h1> <p> 小紅:<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/> 小明:<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/> 小李:<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/> </p></body></html>
<!doctype html><html><head><meta charset="utf-8"><title>draggable屬性的應(yīng)用</title></head><body><h3>元素拖動(dòng)屬性</h3><article draggable="true">這些文字可以被拖動(dòng)</article>可拖動(dòng)的圖片<img src="images/td.jpg" draggable="true"> </body></html>
7.在HTML5中,大多數(shù)元素都支持hidden屬性,該屬性有兩個(gè)屬性值:true和false。當(dāng)hidden屬性取值為true時(shí),元素將會(huì)被隱藏,反之則會(huì)顯示。元素中的內(nèi)容是通過瀏覽器創(chuàng)建的,頁面裝載后允許使用JavaScript腳本將該屬性取消,取消后該元素變?yōu)榭梢姞顟B(tài),同時(shí)元素中的內(nèi)容也及時(shí)顯示出來。<!doctype html><html><head><meta charset="utf-8"><title>contenteditable屬性的應(yīng)用</title></head><body><h3>可編輯列表</h3><ul contenteditable="true"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li></ul></body></html>
針對(duì)頁面交互元素HTML5中的重要元素分別進(jìn)行了講解.關(guān)鍵詞:交互,設(shè)計(jì)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。