>  기사  >  웹 프론트엔드  >  HTML5에는 어떤 새로운 태그와 속성이 추가되나요? 새로운 태그 및 속성이 추가되었습니다(요약)

HTML5에는 어떤 새로운 태그와 속성이 추가되나요? 새로운 태그 및 속성이 추가되었습니다(요약)

青灯夜游
青灯夜游원래의
2018-09-15 18:10:094505검색

이 장에서는 HTML5에 어떤 새로운 태그와 속성이 추가되었는지 소개하겠습니다. HTML5에 새로 추가된 속성과 태그가 무엇인지 모든 사람이 알 수 있도록 새로운 태그와 속성이 추가되었습니다(요약). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

IE9 이하를 제외한 모든 사용자가 사용할 수 있는 HTML5의 새로운 기능을 요약했습니다.

HTML5 구문

mostly html 구문을 계속합니다

차이점: 처음에는 #🎜🎜 #

<!DOCTYPE html>
<html>
<meta charset="utf-8">

문자 인코딩이 간결해지고 대소문자를 구분하지 않으며 부울 값이 추가되었습니다. check, selected

따옴표는 생략 가능하지만 인코딩에 따라 사양에 따라 #🎜🎜 사용을 권장하지 않습니다. #

끝 문자를 생략할 수 있는 태그와 완전히 생략할 수 있는 태그가 있습니다.

HTML5 새로 추가된 태그:

# 구조 태그

#. 🎜🎜# (1) 섹션: 문서 구조를 나타내는 개요로 h1~h6으로 구성될 수 있는 독립적인 콘텐츠 블록입니다. 또한 장, 머리글, 바닥글 또는 머리글의 다른 부분을 가질 수도 있습니다. 🎜🎜 # (2) 기사: 이 헤더의 핵심 내용을 나타내는 특별한 독립 블록

(3) 옆: 태그 외에 태그 내용과 관련된 보조 정보; content;

(4) 헤더: 특정 블록의 헤더 정보/제목

(5) hgroup: 헤더 정보/제목의 보충 콘텐츠; 🎜🎜# (6) footer: 하단 정보;

(7) nav: 네비게이션 바의 일부 정보

(8) Figure: a 등의 독립 단위; 사진과 콘텐츠가 포함된 특정 뉴스 블록.

2. 양식 태그

(1) 이메일: 이메일을 입력해야 합니다.

(2) : URL 주소를 입력해야 합니다. (3) 숫자: 숫자를 입력해야 합니다.

(4) 범위: 특정 범위 내의 숫자를 입력해야 합니다.

#🎜🎜 #(5) 날짜 선택기: 날짜 선택기

date: 월, 연도 선택;

week: 주 및 연도 선택
  • time: 시간 선택(시 및 분) #🎜🎜 #
  • datetime: 시간, 일, 월, 연도 선택(UTC 시간)

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

  • (6) 검색: 일반 텍스트 필드 검색

    #🎜🎜 #(7)color: 색상; .
  • 3, 미디어 태그

  • (1) 비디오: 비디오

    (2) 오디오: 오디오;
(3) 삽입: 삽입된 콘텐츠(다양한 미디어 포함), Midi, Wav, AU, MP3, Flash, AIFF 등

4. 기타 기능 태그

(1) mark: 표시, 강조 표시(메모를 위한 형광펜과 유사); (2) 진행률: 진행률 표시줄; 0e5d2e97fa3a77a72a720146e4842934;

(3) 시간 : 검색 엔진에서 사용되는 데이터 태그, 게시 날짜aa2936c7f5fc1666fe354c2d39409f239:0091be1970faf1a1e6511e94af3a0f5b95업데이트 날짜51f33e1919423ed2a6c50dd9a25e96a1 4:0091be1970faf1a1e6511e94af3a0f5b95;

(4) ruby ​​​​및 rt: 특정 단어에 주석 달기;ec41f2147470148e85ad0337a362103e7240f116d85a7ee375466871bc33670a주석 내용e1cd1ef8331b2927cc680afad7b5de59515718f19dfe6612658be14be18aa0ec 브라우저가 지원하지 않을 때 21f25f120b8e75f2ae19a58ad1612dd68724a7e8dc86cc99e3aa1ae8f042e0e8 표시

(5) wbr: 부드러운 줄 바꿈, 페이지 너비가 필요한 줄 바꿈에 도달할 때 줄 바꿈; ) 캔버스: JS 코드를 사용하여 이미지 그리기용 컨텐츠 만들기;

(8) 세부사항: 메뉴 확장; 🎜# (9) dateilst: 텍스트 필드 드롭다운 프롬프트 (10) keygen: 암호화.

새 속성:

js에 속성이 추가되었습니다.

<script defer src=".....js" onload="alert(&#39;a&#39;)"></script>
<script async src=".....js" onload="alert(&#39;b&#39;)"></script>

위의 두 가지 속성이 없으면 실행 순서는 첫 번째 src를 먼저 로드(다운로드)한 다음 해당 onload를 실행한 다음 defer 속성을 아래쪽으로 동기적으로 실행하는 것입니다. h5 이전에도 존재했습니다. 지연 로딩(지연 실행)을 입력하면 먼저 src에 파일 내용을 로드(다운로드)한 다음 페이지가 완전히 로드될 때까지 기다린 다음 onload에 js.async 속성을 로드합니다. src를 로드한 후 즉시 onload가 실행되고 위의 실행 순서에 따라 페이지가 계속 로드됩니다. 경고 표시에는 b가 먼저 표시된 다음 a가 표시됩니다.

웹페이지 라벨에 작은 아이콘의 스타일 코드 추가

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

순서 목록 ol: 시작 추가(목록 시작 값 ), 반전(반전 여부) 메뉴 메뉴 유형 속성(3가지 메뉴 유형) 내장 CSS 스타일: 태그 내부에 스타일 블록(범위 지정)을 정의합니다. 이는 스타일 태그 내부에서만 유효합니다. 인라인 프레임: iframe 요소, 새로 추가됨 원활한 테두리 없음. , srcdoc는 인라인 프레임의 내용을 정의합니다.

d5ba1642137c3f32f4f4493ae923989c새로운 속성:

f7c67c5b450aa98415ae1526afff6456#🎜 🎜## 🎜🎜#e26593365c67b2fe410cfb4ec9ec729af4f160eda36e5bedbf5011cb38a5cca9

1b9e3b2f331397b7667bb39bb5bbada24a6ec1d44a7a251e972ccad7bf943b5a

eedb63b3d5cbbb03ea981b56702a66fc

30368ab4f6889870fe93fed3db8a04da

manifest 속성:

페이지에서 사용해야 하는 오프라인 애플리케이션 파일을 정의하며 일반적으로 100db36a723c770d327fc0aef2ce13b1 태그에 배치됩니다.

charset 속성:

메타 속성 중 하나, 페이지의 문자 집합을 정의합니다.

크기 속성:

2cdf5bf648cf2f33323966d7f58a7f3f링크의 rel="icon"일 때 아이콘 크기를 설정하는 데 사용되는 새 속성이 추가되었습니다.

base 속성:

db04a0c9801f58dc17617bafa8ce074b 페이지가 새 창에서 열릴 때 href의 콘텐츠가 주소

defer 속성:

script 태그 속성에 접두사로 추가됨을 나타냅니다. 즉, 스크립트가 로드된 후 페이지도 로드될 때만 실행됩니다(지연된 실행)

async 속성:

script 태그 속성, 스크립트가 로드된 후 즉시 실행됩니다(브라우저는 작업 중에 다음 내용을 구문 분석합니다). 페이지가 로드되지 않은 경우에도 아직 로드되지 않았습니다(비동기 실행)

media 속성:

3499910bf9dac5ae3c52d5ede7383485Element 속성: 최적화된 장치를 나타냅니다.

hreflang 속성:

3499910bf9dac5ae3c52d5ede7383485 hyperlink

ref 속성:

3499910bf9dac5ae3c52d5ede7383485 속성, 하이퍼링크가 외부 링크인지 여부 정의

reverse 속성:

c34106e0b4e09414b63b2ea253ff83d6 속성, 일련 번호가 플래시백인지 여부 정의

start 속성: the

c34106e0b4e09414b63b2ea253ff83d6 속성은 일련번호의 시작 값을 정의합니다.

범위 속성:

내장된 CSS 스타일의 속성은 이 내장된 스타일이 있는 요소로 제한됩니다. 페이지 개발.

HTML5 전역 속성: 다음 6 data-yourvalue, Hidden, Spenllecheck, tabindex, contenteditable, desginMode와 같은 모든 태그에 사용할 수 있습니다.

1. data-custom 속성 이름 태그에 직접 삽입할 수 있습니다.

hidden(숨기려면 직접 입력);

tabindex="1"(탭 이동 순서);

2. JavaScript에 window.document.designMode = 'on'을 삽입합니다(JavaScript의 전역 속성으로 전체 페이지의 텍스트를 편집할 수 있습니다).

위 내용은 HTML5에는 어떤 새로운 태그와 속성이 추가되나요? 새로운 태그 및 속성이 추가되었습니다(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.