Progress ve meter
<progress> ve <meter> etiketlerinin farkını öğrenirsin.
Progress ile ilerleme çubuğu
Bir görevin ne kadar ilerlediğini göstermek için <progress> etiketini kullanırsın: dosya yükleme, anket adımları, kurulum çubuğu. value özniteliği mevcut durumu, max özniteliği toplam hedefi ifade eder.
value verilmezse tarayıcı çubuğu belirsiz olarak çizer: animasyonlu, ne kadar bittiği bilinmeyen bir durum için. Bu, görev süresi tahmin edilemeyen durumlar için uygundur.
Meter ile ölçü değeri
Bilinen bir aralıktaki ölçüyü göstermek için <meter> etiketini kullanırsın: disk doluluk oranı, puan, pil seviyesi. value mevcut ölçüdür; min ve max aralığı belirler.
low, high ve optimum ile renk bölgelerini işaret edebilirsin. Örneğin düşük diskte kırmızı, yeterli seviyede yeşil görünmesi gibi. Progress görev içindir, meter ise ölçü.
Uygulama İlerleme ve ölçü etiketlerini yaz
Body içine bir <progress> etiketi ekle; value özniteliği 40 ve max özniteliği 100 olsun. Altına bir <meter> etiketi ekle; value özniteliği 7 ve max özniteliği 10 olsun. İkisini de kapanış etiketiyle yaz.
Örnek çözümü göster
<body>
<progress value="40" max="100"></progress>
<meter value="7" max="10"></meter>
</body>Kendini test et
-
Hangisi doğrudur?
- progress bir görevin tamamlanma durumunu gösterir
- meter yalnızca yüzde değeri gösterebilir
- progress min özniteliği alır
- meter value özniteliği kullanmaz
Cevabı göster
progress bir görevin tamamlanma durumunu gösterir — Doğru. progress, görev tamamlanmasını çubuk olarak gösterir.
-
Açılış etiketini tamamla
<____ value="70" max="100"></progress>Cevabı göster
<progress value="70" max="100"></progress> -
Etiketi ve özniteliği rolüyle eşleştir
- progress
- Görev tamamlanma
- meter
- Bilinen ölçüm
- value
- Mevcut durum
- max
- Üst sınır