ホームページ > 記事 > ウェブフロントエンド > HTML5のプログレスタグの使い方は？ progress タグの属性の概要
HTML5のプログレスタグの使い方は？ progress タグの属性の概要
- 寻∝梦オリジナル
- 2018-09-04 11:08:418217ブラウズ
この記事では、html5 progress タグの使い方と、html5 progress タグの属性の使い方を中心に紹介します。次に、この記事を一緒に読みましょう
まず、html5のprogressタグの使い方を紹介します
ヒント: ダウンロードの進行状況を表示するには、
HTML5 の進捗タグの使用例を見てみましょう:
「ダウンロードの進捗状況」をマークします:
对象的下载进度： <progress value='70' max='100'></progress>
効果は図に示すとおりです:
写真は明らかなので、私が勝ちましたそれ以上は言わないでください。
次に、HTML5 progress タグの属性について説明します:
1。value 属性を通じてパーセンテージ (0 から 1 までの小数) を設定できます
通常、内部に進捗値を配置することもできます。ブラウザ（www.php.cn）がサポートしていない場合、代替案としてテキストを表示できます。
<progress value="0.25">25%</progress>
2. max 属性を使用して最大値を設定できます。
<progress value="25" max="100">25%</progress>
3 の値の範囲は、進行状況を示します。は0〜最大です。 max 属性が設定されていない場合、value 属性の範囲は 0 から 1 である必要があります。
値がない場合、完了の進行状況は不確かです。現時点ではタスクが進行中であることを意味しますが、完了までにどれくらい時間がかかるかは不明です。現時点では、進行状況は Webkit ブラウザーの読み込みとして使用され、ページが読み込まれていること、または Ajax がバックグラウンド データを要求していることを示します。
値が設定されていない場合は、不確実な進行状況バーを表します (進行状況はループ内でスライドし続けます)
<progress></progress>
このスタイルは、自分で試すことができます。
HTML5進捗タグの毎日の概要:
進捗タグ: 名前から判断すると、おそらくこのタグが何であるか推測できるでしょう。はい、これは進捗バーです。 HTML5 ではついにモックを廃止できるようになりました。
<progress id="PHP中文网" max="100"></progress>
progress 属性: value: 現在の進行状況を示します。 max: 合計の進行状況を示します。 注: value および max 属性の値は 0 より大きい必要があり、value の値は max の値以下である必要があります。属性。ケース:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PHP中文网之progress标签的应用</title> </head> <body> <h1>PHP中文网之progress标签的应用</h1> <p>完成百分比：<progress max="100"></progress></p> </body> </html>
これにも動的効果が設定されています。効果は次の図に示すとおりです:
この画像は動的です。スクリーンショットを使用して動的にすることはできないため、見ることしかできません。この方法は自分で試すことができます。
HTML5 プログレスバーラベルの適用に関するこの記事はここで終わります。ご質問がある場合は、以下からお問い合わせください。
【編集者のおすすめ】
html5ヘッダータグの使い方は？ html5ヘッダータグの機能紹介
htmlハイパーリンクの下線を消す方法は？ a タグから下線を削除するすべての方法は次のとおりです
以上がHTML5のプログレスタグの使い方は？ progress タグの属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。