Elemen interaktif halaman HTML5 termasuk: 1. butiran, digunakan untuk mewakili sekeping kandungan tertentu 2. ringkasan 3. datagrid, digunakan untuk mengawal data dan paparan pelanggan; 5. , arahan, digunakan untuk memproses butang arahan 6. kemajuan;
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.
Elemen interaktif HTML5 : Ekspresi kandungan berfungsi, akan ada hubungan tertentu antara kandungan dan data, dan ia merupakan asas kepada pelbagai acara.
details
: Digunakan untuk mewakili bahagian kandungan tertentu, tetapi kandungan itu mungkin tidak dipaparkan secara lalai Ia akan dipaparkan hanya dengan berinteraksi dengan legenda melalui beberapa cara (seperti seperti mengklik).
summary
: Teg mengandungi tajuk elemen butiran dan elemen "butiran" digunakan untuk menerangkan maklumat terperinci tentang dokumen atau serpihan dokumen.
datagrid
: digunakan untuk mengawal data dan paparan pelanggan, yang boleh dikemas kini mengikut masa dengan skrip dinamik.
menu
: Digunakan terutamanya untuk menu interaktif (elemen yang ditinggalkan dan kemudian didayakan semula).
command
: Digunakan untuk mengendalikan butang arahan.
progress
: Digunakan untuk menunjukkan kemajuan penyelesaian tugas. Kemajuan ini mungkin tidak pasti, yang bermakna kemajuan sedang berjalan, tetapi tidak jelas berapa banyak kerja yang perlu diselesaikan. Anda juga boleh menggunakan nombor antara 0 dan nombor maksimum (seperti 100) untuk mewakili status penyelesaian kemajuan yang tepat (seperti peratusan kemajuan Terdapat dua nilai atribut: nilai: jumlah kerja yang telah disiapkan). max: Berapakah jumlah kerja yang ada. Ambil perhatian bahawa nilai nilai dan atribut maks mestilah lebih besar daripada 0, dan nilai nilai mestilah kurang daripada atau sama dengan nilai atribut maks.
meter
: Teg mentakrifkan ukuran skalar dalam julat yang diketahui atau nilai pecahan. Juga dikenali sebagai tolok.
Contoh:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5中常用的交互元素</title> <script type="text/javascript"> function command_click(){ document.getElementById("show").innerHTML= "点击了打开command·"; } var intVal = 0; var intTimer; var objpro = document.getElementById('objpro'); var title = document.getElementById('mytitle'); function interval_handler(){ intVal++; objpro.value = intVal; if(intVal >= objpro.max){ clearInterval(intTimer); title.innerHTML = "下载完成"; }else{ title.innerHTML = "正在下载"+intVal+"%"; }} function btn_click(){ intTimer = setInterval(interval_handler,100); } </script> ------------------------------------------------------------------ <menu> <command onclick="command_click();"> 打开 </command> </menu> <div id="show"></div> </head> <body> <form> <input id="myCar" list="cars" > <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </input> <hr><hr> <span>显示内容</span> <details id="detail" open="open"> 我被显示出来了 </details> <hr><hr> <details> <summary>HTML 5</summary> 欢迎使用 summary 标签 </details> <hr><hr> </form> <menu> <li> <img src="Chrome.png" alt="Apakah elemen interaktif halaman html5?" > <span>Chrome浏览器</span> </li> <li> <img src="360.png" alt="Apakah elemen interaktif halaman html5?" > <span>360浏览器</span> </li> <li> <img src="IE.png" alt="Apakah elemen interaktif halaman html5?" > <span>IE浏览器</span> </li> </menu> <hr><hr> <menu> <command onclick="alert('command click');"> Click Me! </command> </menu> <hr><hr> <p id="mytitle">开始下载</p> <progress value="0" max="100" id="objpro"> </progress> <input type="button" value="下载" onclick="btn_click();"> <hr><hr> <p>120人参与投票,明细如下:</p> <p>张三: <meter value="0.3" optimum="1" high="0.9" low="1" max="1" min="0"></meter> <span>30%</span> </p> <p>李四: <meter value="70" optimum="100" high="90" low="10" max="100" min="0"></meter> <span>70%</span> </p> <hr><hr> </body> </html>
Tutorial yang disyorkan: "tutorial video html"
Atas ialah kandungan terperinci Apakah elemen interaktif halaman html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!