이 기사는 주로 HTML5의 표준 속성 및 사용자 정의 속성을 소개합니다. 이 기사는 또한 JavaScript가 DOM을 운영 할 때 사용자 정의 속성에 액세스하는 것에 대한 관련 지식 포인트에 대해서도 이야기합니다. 매우 권장됩니다. 필요한 친구는 그것을 참조 할 수 있습니다.
HTML5 구문에 명시된 바와 같이, 요소는 요소에 대한 다양한 속성을 설정하는 속성을 포함 할 수 있습니다.
일부 속성은 전역으로 정의되며 모든 요소에서 사용할 수있는 반면 다른 속성은 요소별로 정의됩니다. 모든 속성에는 이름과 값이 있으며 다음 예제처럼 보입니다.
다음은 html5 속성을 사용하는 예입니다. 속성과 value example으로 div 요소를 태그하는 방법을 보여주는 방법은 다음과 같습니다.
<div class = example> ... </div>
속성은 시작 태그에만 지정할 수 있으며 최종 태그에 사용해서는 안됩니다.
HTML5 속성은 사례에 민감하지 않으며 모든 자본 또는 혼합을 사용할 수 있지만 가장 일반적인 규칙은 항상 소문자를 사용하는 것입니다.
표준 속성아래 나열된 속성은 거의 모든 HTML5 태그로 지원됩니다.
| 재산 | 옵션 | 기능 |
| 액세스키 | 사용자 정의 | 요소에 액세스하기위한 키보드 바로 가기를 정의합니다. |
| 맞추다 | 오른쪽, 왼쪽, 중앙 | 레이블을 가로로 정렬합니다. |
| 배경 | URL | 요소 뒤에 배경 이미지를 설정하십시오. |
| bgcolor | 값, 16 진수 값, RGB 값 | 요소 뒤에 배경색을 설정하십시오. |
| 수업 | 사용자 정의. | 계단식 스타일 시트의 사용을 용이하게하기 위해 요소를 분류하십시오. |
| 내용 가능 | 사실, 거짓 | 사용자가 요소의 내용을 편집 할 수 있는지 여부를 정의합니다. |
| 문맥 메뉴 | 메뉴 ID | 요소의 컨텍스트 메뉴를 정의하십시오. |
| 데이터 -xxxx | 사용자 정의. | 맞춤 속성. HTML 문서의 저자는 자신의 속성을 정의 할 수 있습니다. 사용자 정의 속성은 데이터로 시작해야합니다. |
| 드래그 가능 | 사실, 거짓, 자동 | 사용자가 요소를 드래그 할 수 있는지 여부를 정의합니다. |
| 키 | 숫자 값 | 테이블, 이미지 또는 테이블 셀의 높이를 정의합니다. |
| 숨겨진 | 숨겨진 | 요소가 표시되어야하는지 정의합니다. |
| ID | 사용자 정의. | 계단식 스타일 시트를 쉽게 사용하기위한 이름 요소. |
| 목 | 요소 목록. | 요소를 결합하는 데 사용됩니다. |
| ItemProp | 항목 목록. | 항목을 결합하는 데 사용됩니다. |
| 맞춤법 검사 | 사실, 거짓 | 요소에 철자법 또는 오류 확인이 있어야하는지 정의합니다. |
| 스타일 | CSS 스타일 시트. | 요소의 인라인 스타일을 정의하십시오. |
| 주제 | 사용자 정의 ID. | 요소와 관련된 항목을 정의합니다. |
| tabindex | 탭 번호 | 요소의 탭 키 순서로 결정됩니다. |
| 제목 | 사용자 정의. | 요소의 팝업 제목. |
| Valign | 상단, 중간, 하단 | HTML 요소 내에서 태그의 수직 정렬. |
| 너비 | 숫자 값. | 테이블, 이미지 및 테이블 셀의 너비를 정의합니다. |
HTML5는 또한 사용자 정의 데이터 속성을 추가하는 새로운 기능을 소개합니다.
사용자 정의 데이터 속성은 데이터로 시작하며 요구 사항에 따라 이름이 지정됩니다. 간단한 예는 다음과 같습니다.
<div class = 예제 data-subject = Physics Data-level = complex>
...
</div>
위의 예에서는 Data-Fubject 및 Data Level이라는 두 가지 사용자 지정 속성이 HTML5에서 완전히 유효합니다. 또한 JavaScript API를 사용하거나 표준 속성을 얻기 위해 유사한 방식으로 CSS에서 값을 얻을 수 있습니다.
HTML 요소에 사용자 정의 속성을 추가하고 JavaScript를 통해 액세스하십시오. 이전에 시도한 경우 태그 확인을 쉽게 무시할 수 있으며 HTML5는 유효한 웹 페이지 내에서 자신의 요소 속성을 작성하고 사용할 수있는 기능을 제공 할 수 있습니다.
html5 파일 생성 :
어떤 것을 사용할 것인지 알아 내지 않았다면 다음 코드를 복사 할 수 있습니다.
XML/HTML 코드 복사 컨텐츠를 클립 보드에 복사합니다