H5와 기존 HTML의 차이점

본 글은 HTML5 스터디노트에서 html5와 기존 html의 차이점에 대한 관련 내용을 주로 소개하고 있으니 필요하신 분들은 참고하시면 됩니다. 1. HTML5 구문 변경
지식 포인트에 언급된 변경 사항은 HTML4를 기반으로 정의된 변경 사항을 의미하며, 주로 다음과 같습니다.
1. HTML5의 파일 확장자(.html 또는 .htm)와 콘텐츠 형식(text/html)은 그대로 유지됩니다. 변하지 않은.
2. HTML5에서는 버전 선언을 의도적으로 사용하지 않으며, 하나의 문서가 모든 HTML 버전에 적용됩니다.
3. HTML5부터 파일의 문자 인코딩은 UTF-8 사용을 권장합니다.
4.HTML5는 이전 HTML 버전과의 호환성을 극대화합니다.
호환성을 보장하려면 요소부터 시작해야 합니다. HTML5에서는 요소의 태그를 생략할 수 있습니다. 구체적으로 요소의 태그는 "종료 태그를 쓸 수 없다", "종료 태그를 생략할 수 있다", "시작 태그와 종료 태그를 생략할 수 있다"의 3가지 유형으로 구분된다.
• 닫는 태그 요소는 허용되지 않습니다: Area, base, br, col....
• 닫는 태그는 생략 가능: li, dt, dd, p, rt...
• 두 요소 모두 시작 태그 및 끝 태그 생략 가능: html, head, body.....
2.의 새로운 구조 요소
•섹션 요소는 장, 머리글, 바닥글 또는 페이지의 기타 부분과 같은 페이지의 콘텐츠 블록을 나타냅니다.
•기사 요소는 컨텍스트가 아닌 페이지 부분을 나타냅니다. 관련 블로그 기사나 신문 기사와 같은 독립적인 콘텐츠
•aside 요소는 기사 요소의 콘텐츠 외에 기사 요소의 콘텐츠와 관련된 보조 정보를 나타냅니다. header 요소는 페이지의 콘텐츠 블록 또는 전체 페이지의 제목을 나타냅니다.
•hgroup 요소는 전체 페이지 또는 페이지의 콘텐츠 블록의 제목을 결합하는 데 사용됩니다.
•footer 요소는 전체를 나타냅니다. 페이지 또는 페이지 블록 바닥글의 콘텐츠입니다. 일반적으로 작성자의 이름, 작성 날짜 및 작성자의 연락처 정보가 포함됩니다.
•nav 요소는 페이지의
탐색 링크된 부분을 나타냅니다. 독립적인 단락을 나타냅니다. 스트림 콘텐츠는 일반적으로 문서의 기본 스트림 콘텐츠에서 독립적인 단위를 나타냅니다. figcaption 요소를 사용하여 그림 요소 그룹
에 제목을 추가합니다. 2. 기타 새 요소
·오디오 요소 정의
음악 또는 기타 오디오 스트림과 같은 오디오 •embed 요소는 다양한 멀티미디어
를 삽입하는 데 사용되며 형식은 Midi, Wav, AU, MP3일 수 있습니다. , etc.; •mark 요소 강조 표시하거나 강조 표시해야 하는 텍스트를 사용자에게 시각적으로 표시하기 위해 일반적인 응용 프로그램은 검색
결과에서 사용자에게 검색 키워드를 강조 표시하는 것입니다. >·progress 요소는 실행 중인 프로세스 를 나타냅니다. • ruby ​​​​요소는 ruby ​​​​ 주석을 나타냅니다.
(중국어 발음 기호 또는 문자)
• rt 요소는 해당 문자(중국어)에 대한 설명 또는 발음을 나타냅니다. 음성 기호 또는 문자) • rp 요소 in Ruby 주석에서 Ruby 요소를 지원하지 않는 브라우저에 표시되는 콘텐츠를 정의하는 데 사용됩니다. •wbr 요소는 부드러운 줄바꿈을 나타내며 너비가 충분하지 않을 경우 여기서 줄바꿈이 활발히 수행됩니다.
•
캔버스
요소는 차트, 기타 이미지 등의 그래픽을 나타냅니다
•cammand 요소는 Radio Button,
Checkbox 또는 Button과 같은 Button 명령을 나타냅니다. 상세 요소는 사용자가 필요로 하고 수행할 수 있는 자세한 정보를 나타냅니다. get• DataGrid 요소는 트리 목록 형식으로 표시되는 선택적 데이터 목록을 나타냅니다.•
key
gen 요소는 생성된 키를 나타냅니다
•output 요소 스크립트와 같은 다양한 유형의 출력을 나타냅니다. 출력 • 소스 요소는 미디어 요소(예: 39000f942b2545a5315c57fa3276f220 및 b97864c2e0ef2353a16c4d64c7734e92)에 대한 미디어 리소스를 정의합니다. • 메뉴 요소는 메뉴 목록을 나타냅니다.

3. 새로운 입력 요소

•email
유형은 E-main 주소를 입력해야 하는 텍스트 입력 상자를 나타냅니다. •url 유형은 URL 주소를 입력해야 하는 텍스트 입력 상자 •숫자 유형 반드시 입력해야 하는 숫자 값을 나타내는 텍스트 입력 상자 •
범위
유형은 반드시 입력해야 하는 텍스트 입력 상자를 나타냅니다. 특정 범위 내의 숫자 값
HTML5에는 날짜 및 시간 선택을 위한 여러 가지 새로운 입력이 있습니다. 텍스트 상자: •날짜
——일, 월, 연도 선택
•월 — —월과 연도를 선택하세요•week - 주 및 연도 선택
•time - 시간(시간 및 분) 선택
•datetime - 시간, 일, 월, 연도 선택(UTC 시간)
•datetime.local - 시간, 일, 월, 연도(현지 시간) 선택
3. 요소 폐지
1. CSS로 대체 가능한 요소
•basefont, big, center,font, s, Strike, tt, u와 같은 요소의 경우 순전히 화면 표시 서비스를 위한 기능이므로 HTML5에서는 화면 표시 기능을 CSS에서 일률적으로 편집합니다. 스타일 시트이므로 이러한 요소는 폐지됩니다
2. 더 이상 프레임을 사용하지 않습니다프레임
•프레임설정 요소, 프레임 요소 및 노프레임 요소 프레임은 웹 페이지 사용성에 부정적인 영향을 미치므로 프레임은 더 이상 HTML5에서 지원되지 않습니다. ram 프레임이 지원되거나 서버에서 여러 페이지가 생성된 경우에만 해당됩니다. 위의 세 가지 요소는 동시에 폐지됩니다.
3. 일부 브라우저에서만 지원되는 요소
• 애플릿, bgsound, 깜박임, marquee 등과 같은 요소의 경우 일부 브라우저에서만 이러한 요소를 지원하므로 특히 bgsound 요소 및 marquee 요소는 Internet Explorer에서만 지원되므로 HTML 5에서는 더 이상 사용되지 않습니다. applet 요소는 ernedd 요소 또는 object 요소로 대체될 수 있고, bgsound 요소는 audio 요소로 대체될 수 있으며, marquee는 JavaScript로 대체될 수 있습니다. 프로그래밍 방식
4. 기타 폐지된 요소: •rb 요소를 폐지하고 Ruby 요소로 대체
•acronym 요소를 폐지하고 abbr 요소로 대체
•dir 요소를 폐지하고 ul 요소로 대체
•isindex 요소를 폐지하고 input 요소와 결합된 form 요소를 사용하여 대체
•list 요소를 폐지하고 pre 요소를 사용하여 •xmp 요소를 폐지하고 code 요소를 사용하여 교체
•nextid 요소를 폐지하고 GUIDS 교체 사용
• 일반 텍스트 요소를 삭제하고 "text/plian" MIME 유형을 사용하여
교체

4. 속성 을 추가하고 속성을 ​​사용하지 않습니다. 1. 새 속성
1. 양식 관련 속성
•새 자동 초점 속성, 속성을 지정하여 화면이 열릴 때 요소가 자동으로 포커스를 얻을 수 있도록 합니다.
• 사용자 입력에 대해 사용자에게 입력할 수 있는 내용을 묻는 새로운 자리 표시자 속성 • 양식 속성을 추가하고 선언합니다.
• 사용자가 제출할 때 확인된다는 것을 나타내는
require
d 속성을 추가했습니다. 2. 링크 관련 속성
•대상 URL이 최적화된 미디어/장치 유형을 지정하는 미디어 속성을 추가합니다. href 속성이 존재할 때 사용됩니다.
lang 속성과 rel 속성을 a 요소 및 link 요소와 일치하도록 추가하세요.
•역순으로 표시할 목록을 지정하는 속성 reverend
•스크립트를 비동기적으로 실행할지 여부를 정의하는 script 요소에 async 속성을 추가합니다.
2. 속성 폐지

• CSS 스타일 시트로 대체할 수 있는 모든 속성이 폐지됩니다. • 중복 속성(예: target, pro
file 등) .는 폐지됩니다.
5.전역 속성
HTML5에서는 새로운 "전역 속성"이라는 개념이 사용됩니다. 모든 요소에 사용할 수 있는 속성을 참조하세요.
1. contentEditable 속성 •이 속성은 사용자가 요소의 내용을 편집할 수 있도록 하며, 마우스 포커스를 얻을 수 있습니다. 부울 값이며 true 또는 false로 지정할 수 있습니다. 또한 이 속성에는 숨겨진 상속
상태가 있으며, true인 경우 편집이 허용되고, false인 경우에는 상속으로 결정됩니다.
2. designMode 속성 •이 속성은 전체 페이지를 편집할 수 있는지 여부를 결정하는 데 사용됩니다. "on"과 "off"라는 두 가지 속성이 있습니다. 속성이 "켜짐"이면 편집할 수 있고, "꺼짐"이면 편집할 수 없습니다.
3.숨겨진 속성
• 모든 요소는 입력 요소의 숨겨진 요소와 유사한 숨겨진 속성을 사용할 수 있습니다. 해당 기능은 요소를 렌더링하지 않고 요소를 보이지 않게 만드는 것입니다. 속성 값은 부울 값입니다. true이면 표시되지 않고 false이면 표시됩니다.
4. 맞춤법 검사 속성
• 이 속성은 입력 요소(type=text)와 텍스트 영역의 두 텍스트 입력 상자에 대해 HTML 5에서 제공하는 새로운 속성입니다. 콘텐츠의 철자와 문법을 확인합니다. 속성 값은 부울 값입니다. 작성 시에는 속성 값이 true인지 false인지 명확하게 명시해야 합니다.
060e208a33bff835af91dec154108a98 c6a06377af59103fc6bae1b26641b156 - 다음 두 가지 작성 방법이 잘못되었습니다. -> 2444ec70074f933e94eda7f4dfc6e186
HTML4의 form 속성
HTML5에서는 form 내의 하위 요소를 form 내부에 작성해야 하지만, HTML5에서는 페이지 어디든 작성할 수 있으며, 이후에 form 속성을 지정합니다. 요소 속성 값은 양식 단위의 ID이므로 해당 요소가 지정된 양식에 속한다고 선언할 수 있습니다.

코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>

입력 요소는 폼에 속하며 폼 내부에 작성되며 폼 속성을 지정할 필요가 없습니다. 그것을 위해. textarea 요소는 양식 외부에 작성되지만 양식에 종속되므로 양식의 id가 textarea 요소의 form 속성으로 설정됩니다.
이것의 장점은 페이지의 요소에 스타일을 추가해야 할 때 더 이상 양식에 흩어지지 않기 때문에 더 편리하게 추가할 수 있다는 것입니다.

[관련 추천]

1. HTML5 무료 동영상 튜토리얼

가상 생성 시 입력 상자가 나타납니다. H5의 키보드 폐쇄가 있으면 어떻게 해야 합니까?

3. HTML5에서 WeChat에서 전체 화면 재생을 구현하는 방법에 대한 자세한 설명

브라우저 호환성 문제에 대한 자세한 설명 H5 새 태그

5. H5를 사용하여 웹페이지를 만드는 방법에 대한 전체 개요

위 내용은 H5와 기존 HTML의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!