HTML5_html5 튜토리얼 기술의 표준 속성 및 사용자 정의 속성에 대한 종합 분석

HTML5 구문에서 설명했듯이 요소에는 요소의 다양한 속성을 설정하는 속성이 포함될 수 있습니다.

일부 속성은 전역으로 정의되어 모든 요소에서 사용할 수 있지만 다른 속성은 요소별로 정의됩니다. 모든 속성에는 아래 예와 같은 이름과 값이 있습니다.

다음은 HTML5 속성을 사용하는 예이며, class라는 속성과 "example" 값으로 div 요소를 표시하는 방법을 보여줍니다.

...

속성은 여는 태그에만 지정할 수 있으며 닫는 태그에는 사용할 수 없습니다.

HTML5 속성은 대소문자를 구분하지 않으며 모두 대문자로 사용하거나 대문자와 소문자를 혼합하여 사용할 수 있지만 가장 일반적인 규칙은 항상 소문자를 사용하는 것입니다.

표준 속성
아래 나열된 속성은 거의 모든 HTML5 태그에서 지원됩니다.

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

속성 옵션 함수 액세스 키 사용자 정의 요소에 액세스하기 위한 키보드 단축키를 정의합니다. 정렬 오른쪽, 왼쪽, 가운데 라벨을 가로로 정렬합니다. 배경 URL 요소 뒤에 배경 이미지를 설정합니다. 배경색상 숫자값, 16진수 값, RGB 값 요소 뒤에 배경색을 설정합니다. 수업 사용자 정의. 캐스케이딩 스타일 시트를 쉽게 사용할 수 있도록 요소를 분류합니다. 콘텐츠 편집 가능 참, 거짓 사용자가 요소의 콘텐츠를 편집할 수 있는지 여부를 정의합니다. 컨텍스트 메뉴 메뉴 ID 요소에 대한 컨텍스트 메뉴를 정의합니다. 데이터-XXXX 사용자 정의. 맞춤 속성. HTML 문서 작성자는 자신의 속성을 정의할 수 있습니다. 사용자 정의 속성은 "data-"로 시작해야 합니다. 드래그 가능 참,거짓,자동 사용자가 요소를 드래그할 수 있는지 여부를 정의합니다. 높이 숫자 값 표, 이미지 또는 표 셀의 높이를 정의합니다. 숨김 숨김 요소를 표시할지 여부를 정의합니다. ID 사용자 정의. CSS(Cascading Style Sheet) 사용을 용이하게 하기 위한 명명된 요소입니다. 항목 요소 목록. 는 요소를 결합하는 데 사용됩니다. 항목 소품 항목 목록입니다. 는 항목을 결합하는 데 사용됩니다. 맞춤법 검사 참, 거짓 요소에 철자법 또는 오류 검사가 필요한지 여부를 정의합니다. 스타일 CSS 스타일 시트. 는 요소의 인라인 스타일을 정의합니다. 제목 사용자 정의 ID입니다. 는 요소와 관련된 항목을 정의합니다. 탭인덱스 탭 번호 는 요소의 탭 순서에 따라 결정됩니다. 제목 사용자 정의. 요소의 "팝업" 제목입니다. 밸런스 상단, 중간, 하단 HTML 요소 내 태그의 수직 정렬입니다. 너비 숫자 값입니다. 표, 이미지, 표 셀의 너비를 정의합니다.

사용자 정의 속성
HTML5에는 사용자 정의 데이터 속성을 추가하는 새로운 기능도 도입되었습니다.

사용자 정의 데이터 속성은 data로 시작하며 필요에 따라 이름이 지정됩니다. 다음은 간단한 예입니다.

...

위 예시 중 두 개 맞춤 data-subject 및 data-level 속성은 HTML5에서 완전히 유효합니다. 표준 속성과 유사한 방식으로 JavaScript API 또는 CSS를 사용하여 해당 값을 얻을 수도 있습니다.

HTML 요소에 사용자 정의 속성을 추가하고 JavaScript를 통해 액세스합니다. 이전에 시도해 본 적이 있다면 태그 유효성 검사를 무시하기가 쉬우며 HTML5는 내에서 고유한 요소를 생성하고 사용할 수 있는 기능을 제공할 수 있습니다. 유효한 웹페이지.

HTML5 파일 만들기:

아직 어떤 것을 사용할지 결정하지 못했다면 아래 코드를 복사하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>
2. >
5. html
6. >
9. 머리
10. >
13. 스크립트
14. >
16. /*여기에 기능이 있습니다*/ 
18. 스크립트
19. >
22. 머리
23. >
26. 몸
27. >
30. 몸
31. >
34. html
35. >

본문에 맞춤 요소를 설정하고 헤드 스크립트 영역에서 JavaScript 요소를 사용하여 액세스하세요.

요소 만들기:

먼저 JavaScript 예시를 식별할 수 있도록 맞춤 속성 및 ID와 같은 몇 가지 간단한 콘텐츠와 요소를 추가하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

2. div id="product1" 데이터-제품-카테고리="의류"
3. >
5. 면 셔츠
7. div
8. >

보시다시피 사용자 정의 속성의 형식은 "data-*"입니다. "data-" 부분에 이름을 설정하거나 원하는 이름을 설정하세요. HTML5에서 사용자 정의 속성을 사용하는 것이 유일한 방법입니다. 따라서 웹페이지가 유효한지 확인하려는 경우에만 이 방법을 사용하세요.

물론, 프로젝트 세부 사항에 따라 사용자 정의 속성이 유용한지 여부와 이름 지정 방법이 결정됩니다. 이 예는 다양한 제품 카테고리의 소매 웹사이트에 적용될 수 있습니다.

사용자 정의 속성을 사용하면 페이지 내에서 JavaScript 코드를 사용하여 특별한 방법으로 요소를 설정할 수 있습니다(예: 표시 기능에 애니메이션 적용). 표준 HTML 요소가 없으면 사용자 정의 속성을 사용하는 것이 좋습니다.

테스트 버튼 추가

다음 코드가 페이지에 추가된 경우 페이지에서 자체 JavaScript 요소를 사용하여 이벤트를 실행합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

2. 입력 입력="버튼" 값="속성 가져오기" onclick="getElementAttribute ('제품1')"
3. />

속성 가져오기:

JavaScript에서 속성에 액세스하는 가장 일반적인 방법은 "getAttributes"를 사용하는 것입니다. 이는 우리가 수행해야 하는 첫 번째 단계이기도 합니다. 페이지의 헤드 스크립트 영역에 다음 기능을 추가합니다:

JavaScript 코드클립보드에 콘텐츠 복사

1. 함수 getElementAttribute(elemID) {
2. var theElement = document.getElementById(elemID)
3. var theAttribute = theElement.getAttribute('data-product-category');
경고(theAttribute)
} 

여기에서는 예제에 경고 값을 추가했습니다. 물론 필요에 따라 스크립트에 추가할 수도 있습니다.

데이터 가져오기:

DOM "getAttributes" 대신 요소 데이터세트를 사용할 수 있습니다. 이는 특히 코드가 여러 속성을 반복하는 특정 경우에 더 효율적일 수 있습니다. 그러나 데이터세트에 대한 브라우저 지원은 여전히 ​​매우 낮습니다. , 이 코드는 // 이후의 메소드와 동일한 프로세스를 실행합니다.

//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
데이터세트의 속성 이름에서 "data-"를 제거합니다. 여전히 HTML에 포함되어 있습니다.

맞춤 속성 이름에 하이픈이 포함되어 있으면 데이터를 통해 액세스할 때 카멜 케이스 형식으로 표시됩니다(예: "data-product-category"가 "productCategory"가 됨).

기타 모듈 및 기능

우리는 속성을 얻었으며 스크립트는 여전히 속성을 설정하고 제거할 수 있습니다. 아래 코드는 표준 JavaScript 모듈 및 데이터 세트를 사용하여 속성을 설정하는 방법을 보여줍니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. //DOM 메소드
3. theElement.setAttribute('데이터 제품 카테고리', '판매')
4. //데이터세트 버전
6. theElement.dataset.productCategory = "판매"
7. DOM 메소드나 데이터 세트를 사용하여 속성을 삭제할 수도 있습니다.
9. //DOM 메소드
10. theElement.removeAttribute('데이터-제품-카테고리')
11. //데이터세트 버전
12. theElement.dataset.productCategory = null;

HTML5에서 사용자 정의 속성을 구현하는 것은 기술적으로 그리 복잡하지 않습니다. 실제로 어려운 점은 사용하기로 선택한 방법이 프로젝트에 적합한지 여부입니다. 그렇다면 어떻게 하면 더 효과적으로 만들 수 있을까요? 아직 많은 브라우저가 이 기능을 지원하지 않기 때문에 데이터 세트 방법을 페이지 기능으로 활성화하기에는 아직 이르다는 점을 명심하세요.