이 기사는 주로 HTML5와 HTML5 연구 노트의 전통적인 HTML의 차이에 대한 관련 정보를 소개합니다. 필요한 친구는 다음을 언급 할 수 있습니다. HTML5 구문의 변경
이 지식 지점에서 언급 된 변경 사항은 주로 다음과 같이 HTML4에 정의 된 변경 사항을 나타냅니다.
1. html5의 파일 확장 문자 (.html 또는 .htm)는 컨텐츠 유형 (텍스트/html)과 변경되지 않았습니다.
2. HTML5에서 의도적으로 버전 선언을 사용하지 않으면 모든 버전의 HTML에 문서가 적용됩니다.
3. HTML5에서 시작하여 파일의 문자 인코딩에 UTF-8을 사용하는 것이 좋습니다.
4. HTML5는 이전 HTML 버전과의 대응성을 최대한 활용합니다.
호환성을 보장하려면 요소부터 시작해야합니다. HTML5에서 요소의 태그를 생략 할 수 있습니다. 그 특성의 관점에서, 요소의 마크는 세 가지 유형으로 나뉩니다. 엔드 마크를 쓰지 않으면 끝 마크를 생략 할 수 있으며 시작 마크와 끝 마크를 생략 할 수 있습니다.
• 엔드 마크를 쓸 수없는 요소는 다음과 같습니다. Area, Base, BR, Col ......
• 엔드 태그 : Li, DT, DD, P, RT ...
• 시작 마크와 끝 마크를 생략 할 수 있습니다 : HTML, 머리, 바디 ...
2. 새로운 구조 요소• 섹션 요소는 페이지의 컨텐츠 블록 (예 : 챕터, 헤더, 바닥 글 또는 페이지의 다른 부분)을 나타냅니다.
• 기사 요소는 블로그의 기사 나 신문의 기사와 같이 컨텍스트와 관련이없는 페이지의 독립적 인 내용을 나타냅니다.
• 제외 요소는 기사 요소의 내용 외부의 기사 요소의 내용과 관련된 보조 정보를 나타냅니다.
• 헤더 요소는 컨텐츠 블록의 제목 또는 페이지의 전체 페이지를 나타냅니다.
• HGROUP 요소는 페이지의 전체 페이지 또는 컨텐츠 블록의 제목을 결합하는 데 사용됩니다.
• 바닥 글 요소는 전체 페이지에 대한 각주 또는 페이지의 콘텐츠 블록을 나타냅니다. 일반적으로, 여기에는 제작자의 이름, 창조 날짜 및 제작자 연락처 정보가 포함됩니다.
• NAV 요소는 페이지의 내비게이션 링크의 일부를 나타냅니다.
• 그림 요소는 스트림 컨텐츠의 독립적 인 섹션을 나타내며, 일반적으로 문서 본문의 스트림 내용에서 독립 장치를 나타냅니다. Figcaption 요소를 사용하여 그림 요소 그룹에 제목을 추가하십시오.
2. 다른 새로운 요소• 오디오 요소는 음악 또는 기타 오디오 스트림과 같은 오디오를 정의합니다.
• 임베드 요소는 다양한 멀티미디어를 삽입하는 데 사용되며 형식은 MIDI, WAV, AU, MP3 등일 수 있습니다.
• 마크 요소는 사용자에게 강조 표시되거나 강조 해야하는 텍스트를 시각적으로 제시하는 데 사용해야합니다. 일반적인 응용 프로그램은 검색 결과에서 검색 키워드를 사용자에게 강조하는 것입니다.
• 진행 요소는 실행 프로세스를 나타냅니다
• 루비 요소는 루비 주석을 나타냅니다 (중국어 발음 또는 캐릭터)
• RT 요소는 문자의 해석 또는 발음을 나타냅니다 (중국어 발음 또는 문자).
• RP 요소는 루비 댓글에 사용되어 루비 요소를 지원하지 않는 브라우저에 표시되는 내용을 정의합니다.
• WBR 요소는 소프트 라인 파손을 나타내며 너비가 충분하지 않은 경우 여기에서 적극적으로 라인이 파손됩니다.
• 캔버스 요소는 차트 및 기타 이미지와 같은 그래픽을 나타냅니다.
• Cammand 요소는 라디오 버튼, 확인란 또는 버튼과 같은 명령 버튼을 나타냅니다.
• 세부 사항 요소는 사용자가 요청하고 얻을 수있는 세부 사항을 나타냅니다.
• Datagrid 요소는 선택적 데이터 목록을 나타내며 트리 목록의 형태로 표시됩니다.
• keygen 요소는 키 생성을 나타냅니다.
• 출력 요소는 스크립트의 출력과 같은 다른 유형의 출력을 나타냅니다.
• 소스 요소는 미디어 요소에 대한 미디어 리소스 (예 : <video> 및 <audio>)를 정의합니다.
• 메뉴 요소는 메뉴 목록을 나타냅니다
3. 새로운 입력 요소• 이메일 유형은 e-main 주소를 입력 해야하는 텍스트 입력 상자를 나타냅니다.
• URL 유형은 URL 주소에 입력 해야하는 텍스트 입력 상자를 나타냅니다.
• 숫자 유형을 입력 해야하는 텍스트 입력 상자를 나타냅니다.
• 범위 유형은 특정 범위의 숫자 값 내에 입력 해야하는 텍스트 입력 상자를 나타냅니다.
HTML5에는 날짜와 시간을 선택하기위한 몇 가지 새로운 입력 텍스트 상자가 있습니다.
• 날짜 -일, 월 및 연도를 선택하십시오
• 월 - 월과 연도를 선택하십시오
• 주 - 주와 연도를 선택하십시오
• 시간 - 시간 선택 (시간 및 분)
• DateTime- 시간, 요일, 월, 연도 (UTC 시간) 선택
• dateTime.local- 시간, 요일, 월, 연도 (현지 시간)를 선택하십시오.
3. 요소를 폐지1. CSS로 대체 할 수있는 요소
• BaseFont, Big, Big, Center, Font, S, Strike, TT 및 U와 같은 요소의 경우 기능은 화면 표시에 순수하게 사용되므로 HTML5는 CSS 스타일 시트에서 화면 디스플레이 기능의 통합 편집을 옹호하므로 이러한 요소가 폐지됩니다.
2. 더 이상 프레임 프레임을 사용하지 않습니다• 프레임 세트 요소, 프레임 요소 및 Noframes 요소의 경우 프레임 프레임 워크가 웹 페이지 가용성에 부정적인 영향을 미치기 때문에 프레임 프레임 워크는 더 이상 HTML5에서 지원되지 않으며 iframe 프레임 워크 만 지원되거나 서버가 작성한 여러 페이지로 구성된 복합 페이지의 형태 만 동시에 폐지됩니다.
3. 브라우저에서 지원하는 일부 요소 만• 애플릿, bgsound, 깜박임, 마키 및 기타 요소의 경우, 일부 브라우저만이 이러한 요소, 특히 BGSound 및 Marquee 요소를 지원하기 때문에 HTML 5에서 폐지됩니다. 애플릿 요소를 대체 할 수있는 곳에서 대체 할 수있는 곳에서 대체 될 수 있습니다. 프로그래밍 방법
4. 기타 폐지 된 요소 :• RB 요소를 폐지하고 Ruby 요소를 사용하여 교체하십시오.
• 약어 요소를 폐지하고 ABBR 요소를 사용하여 교체하십시오.
• DIR 요소를 폐지하고 UL 요소를 사용하여 교체하십시오.
• isindex 요소를 폐지하고 양식 요소 및 입력 요소로 바꾸십시오.
• 리스팅 요소를 폐지하고 사전 요소를 사용하여 대체
• XMP 요소를 폐지하고 코드 요소를 사용하여 대체하십시오.
• 다음 요소를 폐지하고 대신 안내를 사용하십시오
• 일반 텍스트 요소를 폐지하고 Text/Plian Mime 유형을 사용하여 교체하십시오.
4. 속성 추가 및 속성 폐지1. 속성 추가
1. 양식 관련 속성
• AutoFocus 속성이 추가되어 속성을 지정하여 화면을 열 때 요소가 자동으로 초점을 얻을 수 있습니다.
• 자리 표시 자 속성이 추가되어 사용자의 입력을 자극하여 사용자에게 입력 할 수있는 내용을 유발합니다.
• 새 양식 속성을 추가하고, 어떤 형태의 형태인지 선언 한 다음, 양식 내의가 아닌 페이지에 어디에나 배치하십시오.
• 필수 속성을 추가하여 사용자가 제출할 때 확인합니다. 확인할 때 요소에 입력 내용이 있어야합니다.
2. 링크 관련 속성• 미디어 속성을 추가하여 대상 URL이 유형의 미디어/장치에 의해 최적화 된 이유와 HREF 속성이 존재할 때만 사용할 수있는 이유를 지정합니다.
• 요소 및 링크 요소와 일관성을 유지하기 위해 Hreflang 속성 및 Rel 속성을 추가하십시오.
3. 다른 속성• 리버스 순서로 표시 할 목록을 지정하는 속성 목사;
• 스크립트가 비동기로 실행되는지 여부를 정의하는 스크립트 요소에 비동기 속성을 추가합니다.
2. 속성을 폐지합니다• CSS 스타일 시트로 대체 할 수있는 모든 속성이 폐지됩니다.
• 대상, 프로필, 버전 등과 같은 불필요한 속성이 폐지됩니다.
5. 글로벌 속성HTML5에서는 ''글로벌 속성의 새로운 개념이 추가됩니다. 소위 글로벌 속성은 모든 요소에서 사용할 수있는 속성을 나타냅니다.
1. 내용 가능한 속성•이 속성을 사용하면 사용자가 요소의 컨텐츠를 편집 할 수 있고 마우스 초점을 얻을 수 있으며 속성은 부울 값이며 true 또는 false로 지정할 수 있습니다. 또한이 속성에는 숨겨진 상속 상태도 있습니다. 진실하면 편집이 허용됩니다. False 인 경우 편집이 허용되지 않습니다. 지정되지 않으면 상속이 결정됩니다.
2. DesignMode 속성•이 속성은 전체 페이지가 편집 가능한지 확인하는 데 사용됩니다. 켜지거나 끄는 두 가지 속성이 있습니다. 속성이 켜져 있으면 편집 할 수 있지만 꺼져 있으면 편집 할 수 없습니다.
3. 숨겨진 속성• 모든 요소는 숨겨진 속성을 허용하며 입력 요소의 숨겨진 요소와 유사합니다. 그 기능은 요소가 보이지 않도록 브라우저에 요소를 렌더링하지 않도록 알리는 것입니다. 이 속성의 가치는 부울 가치입니다. 사실이라면, 그것은 보이지 않으며, false 일 때는 볼 수 있습니다.
4. 맞춤법 검사 속성•이 속성은 입력 요소 (유형 = 텍스트) 및 TextArea에 대해 HTML 5가 제공하는 새로운 속성으로, 주로 사용자 입력 컨텐츠에 대한 철자 및 문법 검사를 수행합니다. 속성 값은 부울 값입니다. 글을 쓸 때 속성 값이 true 또는 false임을 명확하게 선언해야합니다. 작문 방법은 다음과 같습니다.
<! - 다음 두 가지 글쓰기 방법이 정확합니다 -> <TextArea SpaLCheck = true> <입력 유형 = 텍스트 맞춤법 = 거짓> <! - 다음 두 가지 글쓰기 방법이 잘못되었습니다.
양식 속성에 대한 자세한 설명html4에서, 양식의 하위 요소는 양식 내부에 작성되어야하지만 HTML5에서는 페이지의 어느 곳에 나 서면으로 작성 될 수 있으며, 양식 속성이 요소에 주어지고, 속성 값은 양식 단위의 ID이므로, 요소가 지정된 양식에 종속 된 것으로 선언 할 수 있습니다.
코드를 복사하십시오