이 글에서는 주로 html5 진행 태그의 사용법과 html5 진행 태그의 속성 사용법을 소개합니다. 다음으로 이 글을 함께 읽어볼까요
먼저 html5 진행 태그의 사용법을 소개하겠습니다.
팁: 다운로드 진행 상황을 표시하려면
html5 진행 태그 사용 예를 살펴보겠습니다.
"다운로드 진행률" 표시:
对象的下载进度: <progress value='70' max='100'></progress>
효과는 그림과 같습니다.
사진이 뻔해서 제가 이겼습니다. 더 말하지 마세요.
이제 html5 진행 태그의 속성에 대해 이야기해 보겠습니다.
1 값 속성을 통해 백분율(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 사이여야 합니다.
값이 없으면 완료 진행 상황이 불확실합니다. 이때는 작업이 진행 중이라는 뜻이지만 완료까지 얼마나 걸릴지는 알 수 없다. 이때 진행 상황은 웹킷 브라우저의 로딩으로 사용될 수 있으며, 이는 페이지가 로딩 중이거나 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 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!