H5에서 새로운 태그와 속성을 사용하는 방법 요약-HTML 튜토리얼-php.cn

H5에서 새로운 태그와 속성을 사용하는 방법 요약

php中世界最好的语言

풀어 주다： 2018-05-07 17:38:31

원래의

2509명이 탐색했습니다.

이번에는 H5에서 새로운 태그와 속성을 사용하는 방법에 대해 요약해보겠습니다. H5에서 새로운 태그와 속성을 사용할 때 주의사항은 무엇인가요?

HTML5 구문

대부분의 html 구문 차이는 계속됩니다.

<html lang="zh-CN">
<meta charset="utf-8">

로그인 후 복사

문자 인코딩의 시작 부분이 간결해지고

대소문자를 구분하지 않으며

부울이 추가되었습니다. value, selected와 유사, selected

따옴표는 생략 가능하지만 코딩 표준에 따라 권장하지 않습니다.

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

태그 추가:

1. 구조 태그

(1) 섹션: 문서 구조를 나타내기 위해 h1~h6으로 구성될 수 있는 독립적인 콘텐츠 블록이며, 장, 헤더, 페이지 바닥글 또는 헤더의 다른 부분; (2) 기사: 이 헤더의 핵심 콘텐츠를 나타내는 특수 독립 블록 (3) 옆: 태그 콘텐츠 외에 태그 콘텐츠와 관련된 보조 정보; : 특정 블록의 헤더 정보/제목; (5) hgroup: 헤더 정보/제목의 보충 내용 (6) footer: 하단 정보 (7) nav: 네비게이션 바의 부분 정보; , 사진과 콘텐츠가 포함된 뉴스 블록 등이 있습니다.

2. 양식 태그

(1) 이메일: 이메일을 입력해야 합니다. (2) URL 주소를 입력해야 합니다. (3) 숫자: 값을 입력해야 합니다. (5) 날짜 선택기: Date Picker;

a.date: 일, 월, 연도 선택 b.month: 월, 연도 선택 c.week: 주 및 연도 선택 d. time : 시간(시, 연도) 분 선택) e.datetime : 시간, 일, 월, 연도 선택(UTC 시간) f.datetime-local : 시간, 일, 월, 연도 선택(현지 시간)

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

(7) 색상: 색상

3. 미디어 태그

(1) 비디오: 비디오 (2) 오디오: 오디오 (3) 포함: 포함된 콘텐츠(다양한 미디어 포함), 미디, Wav, AU, MP3, 플래시, AIFF 등

4. 기타 기능 라벨

(1) mark: 표시(메모를 위한 형광펜과 같습니다) (2) Progress: progress bar; (3) 시간: 검색 엔진에서 사용되는 데이터 라벨 출시일9:00업데이트 날짜< time datetime="2015- 01-23T04:00" pubdate>4:00 (4) ruby and rt: 특정 단어에 주석을 답니다 ;rp> 브라우저가를 지원하지 않을 때 표시하는 방법 (5) wbr: 부드러운 줄 바꿈, 페이지 너비가 줄 바꿈이 필요한 지점에 도달할 때 줄 바꿈 (6) 캔버스; : JS 코드를 사용하여 이미지 그리기용 콘텐츠 생성; (8) 세부정보: 확장 메뉴; (9) dateilst: 텍스트 필드 드롭다운 프롬프트;

New; 속성:

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 이전에 이미 존재하므로 지연 로딩(Deferred)을 입력합니다. 실행) 먼저 src의 파일 내용을 로드(다운로드)한 다음 페이지가 완전히 로드될 때까지 기다린 다음 onload에 js.async 속성을 로드합니다. 이는 src를 로드한 후 즉시 onload를 실행합니다. 또한 위의 실행 순서는 페이지를 계속 로드합니다. 경고 표시에는 b가 먼저 표시되고

웹 페이지의 태그에 작은 아이콘을 추가하는 스타일 코드

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

로그인 후 복사

Ordered list ol: 시작 추가(목록 시작) 값), 반전(반전 여부) 메뉴 메뉴 유형 속성(3가지 메뉴 유형) 인라인 CSS 스타일: 태그 내부에 스타일 블록(범위 지정)을 정의합니다. 이는 스타일 태그 내부에서만 유효합니다. 인라인 프레임: iframe 요소가 새로 추가되었습니다. Seamless borderless borderless에서 srcdoc는 인라인 프레임의 내용을 정의합니다

<iframe>新增属性：
<!--seamless定义框架无边框 无边距-->
<!--srcdoc的显示级别比sandbox高-->
<!--sandbox用来规定一个内嵌框架的安全级别-->
<!--sandbox="allow-forms:允许提交表单"-->
<!--sandbox="allow-origin:允许是相同的源"-->
<!--sandbox="allow-scripts：允许执行脚本"-->
<!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->

로그인 후 복사

manifest 속성:

페이지에 필요한 오프라인 애플리케이션 파일을 정의합니다. 일반적으로 태그

charset 속성에 배치됩니다.

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

sizes 속성:

base 속성:

새 창에서 페이지가 생성되면 href의 콘텐츠가 주소

defer 속성:

script 태그 속성에 접두어로 추가됩니다. 즉, 스크립트가 로드된 후에만 실행됩니다(지연됨).

async 속성:

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