수집, 요약된 HTML5의 새로운 기능은 IE9 이하를 제외하고는 기본적으로 사용할 수 있습니다.
HTML5 구문html의 문법적 차이점 대부분은 계속됩니다: 처음에는 <!DOCTYPE html>
<html lang=zh-CN><meta charset=utf-8>
문자 인코딩이 간결해지고,
대소문자를 구분하지 않으며,
확인 및 선택과 유사한 부울 값이 추가되었습니다.
따옴표는 생략 가능하지만, 코딩 표준에 따르면 권장하지 않습니다.
끝 문자를 생략할 수 있는 태그와 완전히 생략할 수 있는 태그가 있습니다.
태그 추가: 1. 구조 태그(1) 섹션: 문서 구조를 나타내기 위해 h1~h6으로 구성될 수 있는 독립적인 콘텐츠 블록입니다. 또한 장, 머리글, 바닥글 또는 머리글의 다른 부분을 가질 수도 있습니다. (2) 기사: 나타내는 특수 독립 블록입니다. (3) 이 기사 헤더의 핵심 내용은 다음과 같습니다. 태그 내용은 태그 내용과 관련이 있습니다. 보조 정보 (4) 헤더: 특정 블록의 헤더 정보/제목; (5) hgroup: 헤더 정보/제목의 보충 내용 (6) 바닥글: 하단 정보; 그림: 그림과 내용이 포함된 뉴스 블록과 같은 독립적인 단위입니다.
2. 양식 태그(1) 이메일: 이메일을 입력해야 합니다. (2) url: URL 주소를 입력해야 합니다. (3) 숫자: 숫자 값을 입력해야 합니다. (4) 범위: 특정 범위 내의 숫자 값을 입력해야 합니다. (5) 날짜 선택기: 날짜 선택기;
a.date: 일, 월, 연도 선택 b.month: 월, 연도 선택 c.week: 주, 연도 선택 d.time: 시간(시간, 분) 선택 e.datetime: 시간, 일, 월, 연도 선택( UTC 시간) f.datetime-local : 시간, 일, 월, 연도 선택(현지 시간)
(6) 검색: 일반 텍스트 필드를 검색합니다.
(7) 색상: 색상
3. 미디어 태그(1) video: 비디오 (2) audio: audio (3) embed: 임베디드 콘텐츠(다양한 미디어 포함), Midi, Wav, AU, MP3, Flash, AIFF 등
4. 기타 기능 라벨(1) mark: 표시(메모를 하기 위한 형광펜과 같은) (2) Progress: 진행률 막대 <진행률 최대값=최대 진행률 막대값=현재 진행률 막대값> (3) 시간: 데이터 라벨, 사용됨 검색 엔진별 ; 출시일 <time datetime=2014-12-25T09:00>9:00</time> 업데이트 날짜 <time datetime=2015- 01-23T04:00 pubdate>4:00</time> (4) ruby 및 rt: 특정 단어에 댓글 달기 <ruby><rt>댓글 내용</rt><rp>브라우저가 지원하지 않을 때 표시 방법< /rp>< /ruby> (5) wbr: 부드러운 줄 바꿈, 페이지 너비가 필요한 줄 바꿈에 도달하면 줄 바꿈 (6) 캔버스: JS 코드를 사용하여 이미지 그리기용 콘텐츠 만들기; (8) 세부사항 : 메뉴 확장; (9) dateilst: 텍스트 필드 드롭다운 프롬프트 (10) keygen: 암호화;
새로운 속성:js에 추가된 속성
<script defer src=.....js onload=alert('a')></script><script async src=.....js onload=alert('b')></script>위의 두 속성이 없는 경우 실행 순서는 첫 번째 src를 먼저 로드(다운로드)한 다음 onload를 실행한 다음 h5 이전에 defer 속성이 이미 존재하고 입력 지연 로딩(지연 실행)입니다. , 먼저 src를 로드(다운로드)합니다. 파일 내용을 로드한 다음 페이지가 완전히 로드될 때까지 기다린 다음 onload에 js.async 속성을 로드합니다. 이는 비동기 로딩입니다. src를 로드한 후 즉시 onload를 실행하고 위의 실행 순서에 따라 페이지를 계속 로드합니다. 경고 표시에는 b가 먼저 표시된 다음 a가 표시됩니다.
웹페이지 라벨에 작은 아이콘의 스타일 코드를 추가하세요.
<link rel=icon href=url... type=이미지 이름 크기=16*16>
Ordered list ol: 시작 추가(목록 시작 값), reversed(반전 여부) 메뉴 유형 속성(3가지 메뉴 유형) 내장 CSS 스타일: 태그 내부에 스타일 블록(범위 지정) 정의 인라인 프레임은 내부에서만 유효합니다. 스타일 태그: iframe 요소, Seamless, Borderless, Borderless가 추가되고 srcdoc는 인라인 프레임의 내용을 정의합니다.
<iframe>새 속성: <!--seamless는 테두리와 여백 없이 프레임을 정의합니다--><!--srcdoc는 샌드박스보다 표시 수준이 더 높습니다--><!--sandbox는 프레임의 보안 수준을 지정하는 데 사용됩니다. 인라인 프레임 --><!--sandbox=allow-forms:제출 허용 양식 --><!--sandbox=allow-origin: 허용은 동일한 출처 --><!--sandbox=allow-scripts: 스크립트 실행 허용 --><!--sandbox=allow-top-navigation : 외부 페이지 점프 허용 -->
매니페스트 속성:
일반적으로 <html> 태그에 배치되는 페이지에 필요한 오프라인 애플리케이션 파일을 정의합니다.
문자셋 속성:
페이지의 문자 집합을 정의하는 메타 속성 중 하나
크기 속성:
<link>새 속성은 링크의 rel=icon일 때 아이콘 크기를 설정하는 데 사용됩니다.
기본 속성:
<base href=http://localhost/ target=_blank>는 페이지가 새 창에서 열릴 때 href의 콘텐츠가 주소의 접두어로 추가된다는 의미입니다.
연기 속성:
script 태그 속성은 스크립트가 로드된 후 페이지도 로드될 때만 실행됨을 나타냅니다(지연 실행).
비동기 속성:
스크립트 태그 속성은 페이지가 로드되지 않은 경우에도 스크립트가 로드된 후 즉시 실행됩니다(브라우저는 실행 프로세스 중에 다음 내용을 구문 분석합니다)(비동기 실행).
미디어 속성:
<a> 요소 속성: 어떤 장치가 최적화되었는지 나타냅니다.
hreflang 속성:
<a> 속성은 하이퍼링크가 가리키는 URL이 사용하는 언어를 나타냅니다.
참조 속성:
<a> 속성은 하이퍼링크가 외부 링크인지 여부를 정의합니다.
반대 속성:
<ol> 속성은 일련번호가 플래시백인지 여부를 정의합니다.
시작 속성:
<ol>의 속성은 시퀀스 번호의 시작 값을 정의합니다.
범위가 지정된 속성:
포함된 CSS 스타일의 속성입니다. 이 스타일의 정의는 포함된 스타일이 있는 요소로 제한됩니다. 단일 페이지 개발에 적합합니다.
HTML5 전역 속성: 모든 태그에 사용할 수 있습니다. 다음 6개
데이터-값, 숨겨진, Spenllecheck, tabindex, contenteditable, desginMode;
전역 속성:
1. 태그에 직접 삽입 가능: data-custom 속성 이름; hide(직접 숨기기 위해 입력); tabindex=1(탭 이동 순서); 수정할 내용을 클릭하세요. 2. JavaScript에 window.document.designMode = 'on'을 삽입합니다(JavaScript의 전역 속성, 전체 페이지의 텍스트를 편집할 수 있음).
요약
위 내용은 에디터가 소개한 HTML5의 새로운 태그와 속성을 요약한 것입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!