html5와 html4의 차이점은 무엇입니까?

차이점: HTML5에서는 DOCTYPE, html, 메타, 스크립트 및 기타 태그가 단순화되었습니다. HTML5에는 머리글, 바닥글, 섹션, 기사, 탐색, hgroup, 옆 및 그림과 같은 의미 태그가 추가되었습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

1 HTML5의 마크업 방법

1.1 콘텐츠 유형(ContentType)

• HTML5의 파일 확장자 및 콘텐츠 유형 은 변경되지 않습니다. 즉, 확장자는 여전히 ".html" 또는 ".htm"이고 콘텐츠 유형은 여전히 ​​"text/html"입니다.

1.2 DOCTYPE

• HTML4

• HTML5

(대소문자 구분 안 함)

H5에서는 의도적으로 버전 선언을 사용하지 않음으로 문서가 모든 HTML 버전에 적용됩니다.

또한 도구를 사용할 때 DOCTYPE 선언 방법에 SYSTEM 식별자를 추가할 수도 있습니다. 선언 방법은 다음과 같습니다.

(대소문자를 구분하지 않으며 따옴표는 작은 따옴표나 큰 따옴표를 구분하지 않습니다)

1.3 문자 인코딩 지정

• HTML4

meta 요소 사용 파일의 문자 인코딩은 다음과 같이 (content 요소의 속성을 통해 지정됨) 형식으로 지정됩니다.

• HTML5

에서는 문자 인코딩을 지정하기 위해 요소에 charset 속성을 직접 추가하는 방식을 사용합니다.

참고: 두 가지 방법 모두 유효하지만 동시에 두 가지 방법을 혼합할 수는 없습니다. H5부터는 UTF-8을 사용하는 것이 좋습니다. 파일의 문자 인코딩.

2 HTML5 호환성 보장

2.1 표시된 요소는 생략 가능

(1) 닫는 태그가 있는 요소는 작성할 수 없습니다. 요소를 포함하는 것은 허용되지 않습니다. "" 형식만 허용됩니다. )

Area, base, br, col, command, embed, hr, img, input, keygen, link, Meta, param, source, track, wbr

(2) 닫는 태그의 요소는 생략 가능

li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

(3) 모든 태그는 요소를 생략할 수 있습니다(요소를 완전히 생략할 수 있음을 의미)

html, head, body, colgroup, tbody

참고: 마크업을 생략하더라도 요소는 암시적으로 존재합니다. 예를 들어 body 요소가 생략된 경우 해당 요소는 문서 구조에 여전히 존재하며 document.body를 사용하여 액세스할 수 있습니다.

2.2 부울 값이 있는 속성 ​​

2.3 따옴표 생략

(1) 속성 값을 지정할 때, 양쪽에 따옴표를 추가하는 경우 속성 값에는 큰따옴표나 작은따옴표를 사용할 수 있습니다.

(2) H5는 이를 바탕으로 속성 값에 빈 문자열, "", "=", 작은따옴표, 큰따옴표 및 기타 문자가 포함되지 않는 경우 몇 가지 개선을 적용했습니다. 속성 값 따옴표는 생략할 수 있습니다. 아래와 같이

                                                   

3.1 새로운 구조 요소section 요소 , 헤더 요소, 바닥글 요소, 탐색 요소, 그림 요소, 메인 요소

3.2에 추가된 기타 요소

video 요소, audio 요소, embed 요소, mark 요소, Progress 요소,meter 요소, time 요소, ruby ​​요소, rt 요소, rp 요소, wbr 요소, canvas 요소, commmand 요소 , 세부사항 요소, 데이터리스트 요소, 데이터그리드 요소, 키젠 요소, 출력 요소, 소스 요소, 메뉴 요소, 대화 상자 요소

3.3 새로운 입력 요소 유형

(1) 이메일: 이메일 주소를 반드시 입력해야 함을 나타냅니다. 텍스트 입력 상자

(2) url: URL 주소를 나타내는 텍스트 입력 상자

(3) 숫자: 숫자 값을 나타내는 텍스트 입력 상자

(4) 범위: 다음을 나타냅니다. 특정 범위 내의 숫자 값을 입력해야 합니다. 텍스트 입력 상자

(5) 날짜 선택기: H5에는 날짜 및 시간 선택을 위한 여러 개의 새로운 입력 텍스트 상자가 있습니다

1. 날짜: 일, 월, 연도 선택

2. 월 : 월, 연도 선택

3. 주: 주, 연도 선택

4. 시간: 시간(시, 분) 선택

5. 날짜시간: 시간, 일, 월, 연도 선택(UTC 시간)

6. datetime-local : 시간, 일, 월, 연도 선택(현지시간)

(6) 검색 : 검색에 사용

(7) tel : 전화 통화 전용

(8) color : 색상 선택 텍스트 상자. 선택한 값은 "#000000" 형식의 텍스트입니다.

3.4 사용되지 않는 요소

(1) CSS로 대체할 수 있는 요소

예: basefont, big, center,font, s, Strike, tt, u 및 기타 요소

그중 s 및 Strike 요소는 del 요소 교체로 대체될 수 있으며, tt 요소는 CSS 글꼴-famliy 속성으로 대체됩니다.

(2) 더 이상 프레임 프레임워크를 사용하지 않습니다

예: 프레임셋, 프레임, 노프레임.

프레임이 웹 페이지 유용성에 미치는 부정적인 영향으로 인해 H5는 더 이상 프레임을 지원하지 않습니다. 동시에 서버에서 생성된 여러 페이지로 구성된 iframe 또는 복합 페이지만 지원합니다.

(3) 애플릿, bgsound, 깜박임, 선택 윤곽 및 기타 요소와 같은 일부 브라우저

에서만 지원되는 요소입니다.

applet 요소는 embed 요소나 object 요소로 대체할 수 있고, bsground 요소는 audio 요소로 대체할 수 있으며, marquee 요소는 javascript 프로그래밍으로 대체할 수 있습니다.

(4) 기타 폐지 요소

1. rb 요소, ruby ​​​​요소로 대체 ​​

2. acronym 요소, abbr 요소로 대체 ​​

3. dir 요소, ul 요소로 대체 ​​4. isindex 요소, 다음으로 대체 form 요소와 input 요소의 조합

5. Listing. 요소, pre 요소로 대체 ​​

6. xmp 요소, code 요소로 대체 ​​

7. Nextid 요소, GUIDS 요소로 대체 ​​

8. 일반 텍스트 요소, 사용 대신 "text/plain" MIMEL 유형을 사용하세요

추천 튜토리얼: "

html 비디오 튜토리얼

"

4. 전역 속성 소위 전역 속성은 모든 요소에 사용할 수 있는 속성을 나타냅니다.

4.1 contentEditable 속성

(1) 주요 기능

요소 안의 내용을 사용자가 편집할 수 있도록 하기 때문에 해당 요소는 마우스 포커스를 얻을 수 있는 요소여야 하며, 클릭 후 캐럿을 사용자에게 제공해야 합니다. 사용자는 이 요소의 내용을 순차적으로 편집합니다.

(2) value

이 속성은 true 또는 false로 지정할 수 있는 부울 속성입니다.

(3) 숨겨진 상속 상태

이 속성을 지정하지 않으면 상속 상태에 따라 결정됩니다. 요소의 상위 요소가 편집 가능하면 해당 요소도 편집 가능합니다.

(4) isContentEditable attribute

요소가 편집 가능한 경우 속성 값은 true이고, 그렇지 않으면 false입니다.

4.2 designMode 속성

(1) 기능

은 페이지 전체를 편집할 수 있는지 여부를 지정하는 데 사용됩니다. 페이지가 편집 가능하면 contentEditable 속성을 지원하는 페이지의 모든 요소가 편집 가능해집니다.

(2) 값

이 속성에는 "on"(페이지를 편집할 수 있음)과 "off"(페이지를 편집할 수 없음)의 두 가지 값이 있습니다.

(3) 이 속성은 Javascript 스크립트에서만 편집 및 수정할 수 있습니다.

document.designMode = " on ";

(4) 브라우저 지원

1.IE8: 보안상의 이유로 이 속성은 허용되지 않습니다. 사용 페이지를 편집 모드로 전환합니다.

2.IE9: 이 속성을 사용하여 페이지를 편집 상태로 전환할 수 있습니다.

3.Chorme3 및 Safari: . 인라인 프레임 방식으로 인라인 프레임을 편집할 수 있습니다.

4.Firefox 및 Opera: 이 속성을 사용하여 페이지를 편집 상태로 전환할 수 있습니다.

4.3 숨겨진 속성

(1) 함수

는 브라우저에 요소를 렌더링하지 말라고 알려 요소를 보이지 않게 만듭니다.

(2) 값

부울 속성(true 또는 false)입니다.

4.4 맞춤법 검사 속성

맞춤법 검사 속성은 입력 요소(type=text)와 텍스트 영역의 두 텍스트 입력 상자에 대해 H5에서 제공하는 새로운 속성입니다.

(1) 함수

사용자가 입력한 텍스트 내용에 대해 맞춤법 및 문법 검사를 수행합니다.

(2) 값

부울 값, true 또는 false.

(3) 참고

1. 속성 값은 true 또는 false로 선언되어야 합니다.

2. 요소의 readOnly 속성 또는 비활성화 속성이 true로 설정된 경우 맞춤법 검사가 수행되지 않습니다.

(4) 브라우저 지원

현재 IE 외에도 Firefox, Chrome, Safari, Opera와 같은 브라우저는 모두 이 속성을 지원합니다.

4.5 tabindex 속성

각 컨트롤의 tabindex는 액세스되는 컨트롤을 나타냅니다. (Tab 키를 탭하세요)

(1) 요즘에는 페이지의 요소 위치에 따라 컨트롤의 순회 순서가 결정되므로 더 이상 필요하지 않습니다.

(2) 또 다른 기능

기본적으로 링크 요소와 양식 요소만 키를 눌러 포커스를 받을 수 있습니다. 다른 요소에 이 속성을 사용하면 해당 요소에도 포커스가 부여됩니다. 요소의 tabindex 값을 음수 값(일반적으로 -1)으로 설정한 후 프로그래밍 방식으로 요소에 포커스를 부여할 수 있으며 Tab 키를 눌렀을 때 요소에 포커스가 부여되지 않습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 html5와 html4의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!