html5 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개-H5 튜토리얼-php.cn

html5 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개

寻∝梦

풀어 주다： 2018-09-04 11:08:41

원래의

8294명이 탐색했습니다.

이 글에서는 주로 html5 진행 태그의 사용법과 html5 진행 태그의 속성 사용법을 소개합니다. 다음으로 이 글을 함께 읽어볼까요

먼저 html5 진행 태그의 사용법을 소개하겠습니다.

태그는 실행 중인 진행(프로세스)을 정의합니다.

태그를 사용하면 자바스크립트에서 시간이 많이 걸리는 기능의 진행 상황을 표시할 수 있습니다.

는 작업의 진행 상황을 나타내며 배경은 회색이며 완료된 부분은 진동하는 녹색 막대로 채워집니다(그러나 스타일은 여전히 브라우저마다 다릅니다).

팁: 다운로드 진행 상황을 표시하려면 태그를 사용하세요.

html5 진행 태그 사용 예를 살펴보겠습니다.

"다운로드 진행률" 표시:

对象的下载进度：
<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

로그인 후 복사

효과는 그림과 같습니다.

html5 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개

사진이 뻔해서 제가 이겼습니다. 더 말하지 마세요.

이제 html5 진행 태그의 속성에 대해 이야기해 보겠습니다.

1 값 속성을 통해 백분율(0에서 1까지의 소수점)을 설정할 수 있습니다.

일반적으로 진행률 값을 내부에 배치할 수도 있습니다. 브라우저(m.sbmmt.com)가 지원하지 않는 경우 백업 계획으로 텍스트가 표시될 수 있습니다.

<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 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개