HTML5에서 data-* 속성을 사용하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5에서 data-* 속성을 사용하는 방법

清浅

Dec 01, 2018 pm 05:14 PM

HTML5의 data- 속성은 더 나은 사용자 경험을 만들기 위해 주로 페이지에 개인 맞춤 데이터를 저장하는 데 사용됩니다.

오늘은 HTML에 많은 새로운 속성이 추가되었습니다. HTML5의 * 속성이 모든 사람에게 도움이 되기를 바랍니다.

【추천 강좌: HTML5 강좌】

data-* data-* 속성의 의미는 페이지나 애플리케이션의 비공개 맞춤 데이터를 저장하는 데 사용됩니다. 모든 HTML 요소에 대한 사용자 정의 데이터 속성이 저장하는 데이터는 JavaScript에서 더 나은 사용자 경험을 만드는 데 사용될 수 있습니다.

data-* 속성은 두 부분으로 구성됩니다.

속성 이름: 속성 이름에는 대문자를 사용할 수 없으며 접두사 "data-" 뒤에 문자가 하나 있어야 하며 비워둘 수 없습니다.

속성 값: 속성 값은 임의의 문자열일 수 있습니다.

<element data-*="somevalue">

예

data-animal-type="动物类"

데이터-* 속성 사용 방법

사용자 정의 데이터 속성은 유효한 HTML 5이므로 HTML 5 문서 유형을 지원하는 모든 브라우저에서 사용할 수 있습니다.

초기 저장을 설정할 수 있습니다. JavaScript 애니메이션에 필요할 수 있는 요소의 높이 또는 불투명도, JavaScript를 통해 로드된 Flash 동영상에 대한 매개변수 설정, 사용자 정의 웹 분석 태그 데이터 저장 등이 가능합니다.

예:





Document




<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  小猫咪
  苹果

렌더링:

클릭 전

클릭 후 HTML5에서 data-* 속성을 사용하는 방법

HTML5에서 data-* 속성을 사용하는 방법 참고

데이터 속성은 다음에 적합하지 않습니다. 존재와 같은 모든 문제 기존 속성이나 요소가 데이터 저장에 적합한 경우 더 많은 데이터 속성을 사용해서는 안 됩니다. 예를 들어 날짜/시간 데이터는 사용자 정의 데이터 속성에 저장되기보다는 의미론적으로 표시되어야 하며 특정 데이터 속성은 스타일이 지정된 CSS에 연결되어서는 안 됩니다. 또한 데이터 속성이 점점 더 널리 사용됨에 따라 명명 규칙의 충돌이 점점 더 커질 수 있으므로 명명 시 플러그인 또는 공용 속성 이름과 혼동하지 않도록 주의해야 합니다

요약: 그게 다입니다. 이 기사의 전체 내용은 여기에 있습니다. HTML5를 배우는 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 HTML5에서 data-* 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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

핫 AI 도구

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

PHP 튜토리얼

1616

276

Setting up and using Magic Mouse in Windows

Related knowledge

HTML에서 웹 사이트 제목 탭에 아이콘을 추가하는 방법 Aug 07, 2025 pm 11:30 PM

웹 사이트 제목 표시 줄에 아이콘을 추가하려면 HTML의 일부에서 Favicon 파일을 연결해야합니다. 특정 단계는 다음과 같습니다. 1. 16x16 또는 32x32 픽셀 아이콘 파일 준비. favicon.ico를 사용하여 이름을 지정하여 웹 사이트 루트 디렉토리에 배치하거나 PNG 및 SVG와 같은 최신 형식을 사용하는 것이 좋습니다. 2. PNG 또는 SVG 형식과 같은 HTML에 링크 태그를 추가하려면 유형 속성을 적절하게 조정하십시오. 3. 선택적으로 Appletouchicon과 같은 모바일 장치에 고해상도 아이콘을 추가하고 크기 속성을 통해 다양한 크기를 지정합니다. 4. 모범 사례를 따르고, 아이콘을 루트 디렉토리에 배치하여 자동 감지를 확인하고 업데이트 후 브라우저 캐시를 지우고 파일 경로의 정확성을 확인하십시오.

내 HTML 이미지가 나타나지 않는 이유는 무엇입니까? Aug 16, 2025 am 10:08 AM

먼저 SRC 속성 경로가 올바른지 확인하고 상대적 또는 절대 경로가 HTML 파일 위치와 일치하는지 확인하십시오. 2. 파일 이름과 확장자가 정확하고 대소 문자를 사용하는지 확인하십시오. 3. 이미지 파일이 실제로 지정된 디렉토리에 존재하는지 확인하십시오. 4. 적절한 alt 속성을 사용하고 이미지 형식이 .jpg, .png, .gif 또는 .webp가 브라우저에서 널리 지원되는지 확인하십시오. 5. 브라우저 캐시 문제 해결, Image URL에 새로 고침 또는 직접 액세스하십시오. 6. 파일을 읽고 차단하지 않도록 서버 권한 설정을 확인하십시오. 7. 올바른 따옴표 및 속성 순서를 포함하여 IMG 태그 구문이 올바른지 확인하고 최종적으로 이미지가 정상적으로 표시되도록 브라우저 개발자 도구를 통해 404 오류 또는 구문 문제를 해결하십시오.

약어를 위해 HTML ABBR 태그를 사용하는 방법 Aug 05, 2025 pm 12:54 PM

HTML 태그를 사용하면 컨텐츠의 접근성과 명확성이 향상 될 수 있습니다. 1. 약어 약어 또는 약어가있는 마크 약어; 2. 완전한 설명을 제공하기 위해 비정상적인 약어에 제목 속성을 추가하십시오. 3. 문서가 처음 나타날 때 중복 주석을 피하십시오. 4. CSS를 통해 스타일을 사용자 정의 할 수 있으며 기본 브라우저에는 일반적으로 점선 밑줄이 표시됩니다. 5. 스크린 리더 사용자가 용어를 이해하고 사용자 경험을 향상시키는 데 도움이됩니다.

HTML에서 버튼에 아이콘을 추가하는 방법 Aug 07, 2025 pm 11:09 PM

fontawesome을 사용하면 CDN을 소개하고 Like와 같은 버튼에 아이콘 클래스를 추가하여 아이콘을 빠르게 추가 할 수 있습니다. 2. 라벨을 사용하여 버튼에 사용자 정의 아이콘을 포함 시키려면 올바른 경로와 크기를 지정해야합니다. 3. 고해상도 아이콘을 달성하고 텍스트 색상과 일치하도록 SVG 코드를 직접 포함시킵니다. 4. 간격은 CSS를 통해 추가해야하며 ARIA-Label을 아이콘 버튼에 추가하여 접근성을 향상시켜야합니다. 요약하면, Fontawesome은 표준 아이콘에 가장 적합하고 사진은 사용자 정의 디자인에 적합한 반면 SVG는 최고의 스케일링 및 제어를 제공하며 프로젝트 요구에 따라 방법을 선택해야합니다. fontawesome은 일반적으로 권장됩니다.

R 언어를 사용하여 동적 웹 페이지에서 중첩 URL을 추출 Aug 27, 2025 pm 07:06 PM

이 튜토리얼은 R Language Rvest 패키지를 사용하여 웹 페이지에서 URL을 크롤링 할 때 JavaScript가 컨텐츠를 동적으로로드하는 경우 실패 실패 문제를 탐색합니다. 이 기사는 기존의 HTML 구문 분석 방법이 유효하지 않은 이유를 자세히 설명하고 효율적인 솔루션을 제공합니다. 웹 페이지 뒤에있는 API 인터페이스를 식별하고 직접 호출하여 HTTR 패키지를 사용하여 JSON 데이터를 얻으므로 필요한 정보를 성공적으로 추출합니다.

HTML에서 BDO 태그를 사용하여 텍스트 방향을 재정의하는 방법 Aug 16, 2025 am 09:32 AM

thebdotagisUsedToOverRideTheBrowser'SdefaultDectiveRenderrendingWhenderingWithmixEdleft-to-rightwright 대

HTML ID와 클래스의 차이점은 무엇입니까? Aug 07, 2025 am 12:03 AM

ID는 독특해야합니다. 각 페이지의 하나의 ID는 하나의 요소에만 사용할 수 있으며 클래스는 여러 요소에서 재사용 할 수 있으며 하나의 요소는 여러 클래스를 가질 수 있습니다. 2. ID를 사용하는 시나리오는 다음과 같습니다. 단일 특정 요소 위치, 페이지 내의 링크 앵커, JavaScript는 ID를 통해 요소를 작동하며 양식 요소와 관련된 레이블; 클래스를 사용하는 시나리오에는 다음이 포함됩니다. 여러 요소에 동일한 스타일 또는 동작 적용, 재사용 가능한 UI 구성 요소 구축 및 JavaScript에서 여러 요소를 선택하는 것; 3. CSS에서 타겟팅은 각각 #ID 선택기와 .class 선택기에 의해 수행되며, getElementByid ()는 id, geteleme에 사용됩니다.

태그로 텍스트를 강조하는 방법은 무엇입니까? Aug 04, 2025 pm 04:29 PM

태그를 사용하여 텍스트를 의미 적으로 강조 표시하며 종종 검색 결과 또는 중요한 내용을 식별하는 데 사용됩니다. 2. 배경색, 텍스트 색상 및 경계와 같은 사용자 정의 스타일은 CSS를 통해 사용자 정의 할 수 있습니다. 3. 접근성과 SEO 효과를 향상시키기 위해 시각적 장식이 아니라 실질적인 의미를 가진 맥락에서 사용해야합니다.

See all articles