>웹 프론트엔드 >H5 튜토리얼 >html5 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개

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

寻∝梦
寻∝梦원래의
2018-09-04 11:08:418331검색

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

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

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

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

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

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

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

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

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

효과는 그림과 같습니다.

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

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

이제 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 헤더 태그는 어떻게 사용하나요? html5 헤더 태그 기능 소개

html 하이퍼링크 밑줄 없애는 방법은? a 태그에서 밑줄을 제거하는 모든 방법은 다음과 같습니다

위 내용은 html5 진행 태그를 사용하는 방법은 무엇입니까? 진행 태그의 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.