오늘 저는 새로운 HTML5/"> HTML5 시리즈 코스를 시작할 것입니다.이 코스는"HTML5에 대한 결정적인 안내서 "에 대한 연구 노트입니다. 모든 사람이 배울 수 있도록 좋은 것으로 생각되는 장이나 의미있는 콘텐츠를 구성 할 것입니다.
요소는 로컬 속성이라고하는 HREF 속성을 정의하기위한 A 태그와 같은 자체 속성을 정의 할 수 있습니다. 이에 따라 글로벌 속성을 통해 모든 요소에 대한 공통 동작을 설정할 수 있습니다. 물론, 개별 요소에 대한 글로벌 속성을 설정할 수도 있지만 그렇게하는 것은 그리 의미가 없습니다. 아래는 이러한 글로벌 속성을 하나씩 소개합니다.
다음 예제는 일반적으로 Chrome 브라우저에서 실행됩니다. Firefox의 일부 예는 실행할 수 없으며 다른 브라우저를 테스트하지 않았으므로 Chrome 브라우저를 선호하는 HTML5 브라우저로 사용하는 것이 좋습니다. 브라우저 호환성 문제에 중점을 두지 않고 학습 및 구현에 중점을 둡니다. HTML5는 여전히 개선되고 있습니다. 인기를 얻으려면 주류 브라우저가 더 좋고 더 잘 지원할 것이라고 생각하며, 그 당시 브라우저 호환성 문제가 훨씬 나아질 것입니다.
1. 액세스키AccessKey 속성을 사용하면 하나 이상의 키보드 바로 가기를 설정하여 페이지에서 요소를 선택할 수 있습니다. 다음 예를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<양식>
이름 : <input type = "text"name = "name"accesskey = "n"/>
<p/>
비밀번호 : <입력 유형 = "비밀번호"이름 = "비밀번호"accesskey = "p"/>
<p/>
<입력 유형 = "제출"value = "로그인"accesskey = "s"/>
</form>
</body>
</html>
이 예에서는 키 조합을 사용하여 페이지에서 요소를 선택할 수 있습니다. 예를 들어 Windows 운영 체제에서 Alt+XXX를 사용하여 요소를 선택할 수 있습니다.
실행 효과 :
2. 클래스이 속성에 대해 더 말하고 싶지 않습니다. 그룹화 요소의 함수입니다. 대부분의 경우 CSS와 함께 사용하여 다른 그룹의 요소에 대한 다른 디스플레이 효과를 설정합니다.
3. 콘텐츠가 가능합니다이것은 HTML5에 추가 된 새로운 속성입니다. HTML 요소에 ContentEdable 속성을 추가하여 True로 설정하여 사용자가 요소 컨텐츠를 편집 할 수 있습니다. False로 설정하고 사용자가 편집 할 수 없습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<p contenteditable = "true"> 지금 비가 내리고 있습니다 </p>
</body>
</html>
4. ContextMenuContextMenu를 사용하면 사용자가 HTML 요소의 오른쪽 클릭 메뉴를 설정할 수 있으며 사용자가 트리거 할 때 메뉴가 나타납니다. 지금 까지이 속성을 지원하는 브라우저는 없습니다.
5. 디르 DIR 속성은 HTML 요소 리터럴의 정렬을 정의하며 LTR (왼쪽에서 오른쪽으로)과 RTL (오른쪽에서 왼쪽으로)을 지원합니다.<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<p dir = "rtl"> 이것은 오른쪽에서 왼쪽으로 </p>입니다
<p dir = "ltr"> 이것은 왼쪽에서 오른쪽으로 </p>입니다
</body>
</html>
6. 드래그 가능Draggable은 HTML5에서 HTML 요소의 드래그 앤 드롭 함수를 구현하는 속성이며, 다음 과정에서 자세히 소개합니다.
7. 드롭 존Dropzone은 또한 HTML5에서 HTML 요소 드래그 기능을 구현하는 속성입니다. 우리는 이후 과정에서 자세히 소개 할 것입니다.
8. hidden모든 사람은 HTML 요소를 숨기는이 속성에 익숙해야합니다.
9.ID누구나이 속성을 알아야합니다. HTML 요소에 대한 고유 식별자를 설정하고 HTML 페이지에서 상당한 ID가있는 요소가 허용되지 않습니다.
10. langLang은 HTML 요소의 내용에 사용되는 언어를 지정합니다. Lang의 가치는 유효한 ISO 언어 코드 여야합니다. 자세한 내용은 아래 주소를 방문하여 http://tools.ietf.org/html/bcp47을 방문하십시오. 언어를 다루는 것은 매우 복잡하고 기술적 인 문제라는 점에 유의해야합니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<p lang = "en"> 안녕하세요 - 어떻게 지내세요? </p>
<p lang = "fr"> bonjour- 댓글 êtes -vous? </>
<p lang = "es"> hola -¿ cómo estás? </p>
</body>
</html>
11. 스펠 체크 SportCheck 속성을 사용하는 경우 브라우저는 HTML 요소의 맞춤법 체크 내용이 올바르게 철자인지 확인하는 데 도움이됩니다. HTML 요소가 편집 가능한 경우에만 맞춤법 검사 속성이 의미가있을 수 있습니다.<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<Textarea Spellcheck = "True"> 이것은 잘못된 텍스트 </textarea>입니다
</body>
</html>
효과 : (나는 크롬으로 원하는 효과를 실행하지 않았다. 왜 그런지 모르겠다)
12. 스타일이 속성을 너무 많이 소개하고 HTML 요소의 CSS 스타일을 설정할 필요가 없습니다.
13. TABINDEXTabIndex를 사용하면 탭 키를 사용할 때 HTML 요소에 액세스하는 순서를 정의 할 수 있습니다. tabindex가 -1로 설정되면 탭 키를 사용하여 HTML 요소를 선택하지 않습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<양식>
<라벨> 이름 : <input type = "text"name = "name"tabindex = "1"/> </label>
<p/>
<라벨> 도시 : <입력 유형 = "text"name = "City"tabindex = "-1"/> </label>
</p>
<라벨> 국가 : <입력 유형 = "text"name = "Country"tabindex = "2"/> </label>
</p>
<입력 유형 = "제출"tabindex = "3"/>
</form>
</body>
</html>
효과:
14. 테이틀 제목은 HTML 요소에 대한 추가 정보를 제공 할 수 있으며, 종종 신속한 정보를 표시하는 데 사용됩니다.<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<a href = "http://apress.com"> Apress 사이트 방문 </a>
</body>
</html>
효과:
이것이 오늘날의 과정의 전부입니다. 이러한 내용이 모든 사람에게 도움이되기를 바랍니다.
데모 다운로드 주소 : html5guide.rar