> 웹 프론트엔드 > H5 튜토리얼 > H5와 C3의 새로운 대화형 기능은 무엇입니까?

H5와 C3의 새로운 대화형 기능은 무엇입니까?

php中世界最好的语言
풀어 주다: 2018-01-10 09:32:17
원래의
3610명이 탐색했습니다.

이번에는 H5와 C3의 새로운 인터랙티브 기능은 무엇이며, H5와 C3의 새로운 인터랙티브 기능은 어떻게 사용하는지 알려드리겠습니다. H5, C3의 새로운 인터랙티브 기능을 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

HTML5 및 CSS3

이란 무엇입니까? HTML과 CSS는 이해하기 어렵지 않습니다. HTML은 웹 페이지를 구성하는 주요 언어입니다. 이 언어를 통해 우리는 웹 페이지의 형식, 내용, 표시 효과 등을 컴퓨터에 설명할 수 있습니다. CSS는 웹페이지의 표시 효과를 제어하는 ​​데 특별히 사용되는 언어입니다. 이때 질문이 생깁니다. 왜 CSS만 사용해야 할까요? HTML도 웹페이지의 표시 효과를 제어할 수는 없는 걸까요? 이 질문에 답하기 위해 간단한 예를 들어 보겠습니다.

설명할 내용이 너무 많으면 명확하게 설명하려면 많은 정보를 반복해야 합니까? 페이지 언어의 경우에도 마찬가지입니다. 이 경우 체계적이지 않고 파악하기가 매우 어렵습니다. 표시 효과를 제어하는 ​​언어를 CSS에 통합함으로써 페이지의 주요 언어 부분의 단순성을 보장할 수 있을 뿐만 아니라 다양한 언어 세트를 재사용하는 것이 매우 편리해졌습니다.

HTML5와 CSS3는 HTML과 CSS의 최신 버전이지만 아직 표준화되지 않았지만 발표된 새로운 기능은 이미 우리를 흥분시켰습니다.

HTML5의 새로운 기능

1. 새로운 콘텐츠 태그

HTML4의 콘텐츠 태그는 동일한 수준에 있으며 콘텐츠의 부분을 구분할 수 없습니다. HTML5의 콘텐츠 태그는 서로 독립적이며 수준이 다릅니다. 검색 엔진과 통계 소프트웨어는 콘텐츠의 각 부분을 빠르게 식별할 수 있습니다.

2. 더 나은 테이블 시스템

이제 JavaScript이나 PHP를 버리고 HTML5를 통해서만 테이블을 정의할 수 있습니다. 각 테이블 셀의 입력 형식, 이 셀이 필요한지 여부 등을 정의할 수 있습니다.

3. 오디오 및 비디오 API

HTML5를 사용하면 웹 페이지에 비디오와 오디오를 직접 통합할 수 있을 뿐만 아니라 미디어 재생을 제어할 수 있는 풍부한 기능의 API 세트도 제공됩니다. 편집할 수 있습니다. 따라서 HTML5는 실제로 비디오 및 오디오 수준에서 일반적으로 사용되는 플래시 플러그인을 대체할 수 있습니다.

4. Canvas API

웹 페이지에 그래픽을 그리는 것은 항상 큰 문제였습니다. 플래시, 실버라이트와 같은 플러그인을 사용해야 합니다. 그러나 HTML5를 사용하면 웹 페이지에 직접 그림을 그릴 수 있을 뿐만 아니라 그래픽 그리기, 확대/축소 등 웹 페이지와 더 많은 상호 작용을 생성할 수도 있습니다. 레전드는 HTML5로 만든 작은 게임입니다.

5. Geolocation AP

HTML5는 지리정보 애플리케이션 인터페이스 Geolocation API를 제공합니다. 이 API를 통해 웹페이지는 IP, GPS 등을 통해 사용자의 지리 정보를 얻을 수 있으며 동시에 사용자는 이 기능을 끌지 여부를 선택할 수도 있습니다.

6. 웹 저장소 API

HTML5는 웹 애플리케이션의 오프라인 사용을 용이하게 하기 위해 웹 저장소 API를 제공합니다. 또한, 새로운 API는 쿠키보다 높은 보안성, 고효율성, 더 넓은 공간이라는 장점도 가지고 있습니다.

7. 드래그 앤 드롭 API

HTML5의 드래그 앤 드롭 API를 사용하면 이전 웹 페이지의 드래그 앤 드롭 프로세스 중에 요소를 지속적으로 수정할 필요 없이 웹 페이지에서 드래그 앤 드롭 효과를 완성할 수 있습니다. 위치와 코드 수가 많다는 단점이 있습니다.

CSS3의 새로운 기능

1. RGBa

CSS3의 새로운 RGBa 기능을 사용하면 각 요소의 색상과 투명도를 설정할 수 있습니다. 원래 일반적으로 사용되는 불투명도 명령은 요소와 해당 하위 요소만 설정할 수 있습니다.

2. 다중 열 레이아웃

CSS3의 새로운 다중 열 레이아웃 선택기는 HTML 레이아웃 태그 없이 다중 열 레이아웃을 생성할 수 있으며 '열 수', '열 너비' 및 '열 간격'을 모두 정의할 수 있습니다. .

3.둥근 모서리

둥근 모서리 기능은 아마도 CSS3에서 제공하는 가장 실용적인 기능일 것입니다. Border-radius를 사용하면 지정된 HTML 요소에 둥근 모서리를 어려움 없이 추가할 수 있습니다. 또한 둥근 모서리의 크기뿐만 아니라 둥근 모서리와 둥글지 않은 모서리도 정의할 수 있습니다.

4. @font-face

사용자가 설치하지 않은 글꼴이 웹 페이지에 표시되면 CSS3에서 제공하는 @font-face 기능이 자동으로 사용자가 인터넷에서 해당 글꼴을 다운로드하도록 도와줍니다. 이를 통해 디자이너는 사용자의 컴퓨터에 해당 글꼴이 설치되어 있는지 여부를 고려할 필요 없이 보다 자유롭게 플레이할 수 있습니다.

5. 기타 기능

또한 CSS3는 그라디언트, 문자열이 너무 길어지는 것을 방지하고 여러 배경을 사용하며 이미지를 요소 테두리로 사용하는 등의 기능도 제공합니다.

CSS3를 잘 활용하면 과거에는 많은 플러그인을 통해서만 얻을 수 있었던 효과를 더 빠르게 얻을 수 있습니다. 요소 자체를 사용하여 대부분의 이미지를 대체함으로써 웹 페이지의 로딩 속도가 향상되고 원래 이미지였던 콘텐츠도 검색 엔진에서 검색할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

H5의 일반 인터페이스에 대한 자세한 소개

h5의 어떤 페이지 요소가 향상되었는지에 대한 간단한 토론

H5를 사용하여 다섯개 별을 그리는 방법

위 내용은 H5와 C3의 새로운 대화형 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿