html5에는 어떤 기능이 있나요?
- 青灯夜游원래의
- 2022-01-17 12:02:503600검색
html5의 기능: 1. 웹사이트 콘텐츠를 더욱 풍부하게 만들 수 있는 새로운 그래픽 라이브러리 2. 더욱 편리한 멀티미디어 콘텐츠 3. 드래그 앤 드롭 기능 6. 오프라인 및 저장; 성능 및 통합 8. 장치 액세스 9. 스타일 디자인 등
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5의 기능
1. 새로운 그래픽 라이브러리:
HTML5에는 웹 사이트 콘텐츠를 더욱 풍부하게 만들 수 있는 Canvas 및 WebGL 기능 라이브러리가 도입되었습니다. 특히 WebGL 함수 라이브러리는 이 분야에서 전체 게임을 거의 바꿀 수 있습니다. 완전히 HTML5로 개발된 이 유명한 Quake II 게임 장면을 살펴보세요. 나에게 이것은 새로운 시대를 의미하며 미래에 게임이 어떻게 플레이될지 상상할 수 있게 해준다.
2. 더욱 편리한 멀티미디어 콘텐츠:
많은 오디오 및 비디오 콘텐츠를 포함해야 하는 웹사이트를 디자인해 본 적이 있다면 투박한 느낌을 아실 것입니다. 원하는 효과를 얻으려면 여러 개의 Flash와
3. 지리적 위치:
사람들은 데스크톱 컴퓨터나 노트북을 통해 인터넷을 점점 더 적게 사용하고 있습니다. 오늘날 많은 사람들은 스마트폰이나 태블릿과 같은 휴대용 모바일 장치를 통해 웹을 탐색합니다. 현재의 모바일 네트워크 액세스 기능은 HTML5의 새로운 지리적 위치 기능과 결합되어 수많은 새로운 가능성을 열어줍니다. 사용자가 웹사이트를 방문할 때 사용자의 정확한 위치를 알면 사용자의 상황에 맞는 개인화된 콘텐츠를 제공할 수 있습니다. 예를 들어 나들이 관련 웹사이트 방문 시 도심 지역에 있는 것으로 확인되면 여행 계획 관련 정보를 제공할 수 있지만, 교외 지역에서 해당 웹사이트를 방문하면 인터랙티브 지도 기능이 표시된다. 기본적으로.
4. 드래그 앤 드롭 기능:
미묘한 변화이지만 매우 중요합니다. 끌어서 놓기 기능을 사용하면 브라우저에서 컴퓨터로 콘텐츠를 직접 끌거나 컴퓨터에서 브라우저로 콘텐츠를 끌 수 있습니다. 정말 획기적인 변화죠? 이 디스플레이를 보고 생각해 보세요. 소셜 네트워킹 사이트에 그런 기능이 있으면 휴가에서 돌아왔을 때 휴가 사진을 쉽게 선택하고 브라우저로 끌어서 온라인 친구들과 즉시 공유할 수 있습니다. . 이것이 제가 웹사이트와 상호작용하고 싶은 방식입니다!
5. 데스크톱 알림:
데스크톱 알림은 사용자가 웹사이트를 탐색하지 않을 때에도 브라우저 외부에 표시되는 작은 팝업 창입니다. 이 기능은 현재 Google Chrome에서만 사용할 수 있으며 여기에서 데모를 볼 수 있습니다. 이러한 알림은 이메일 알림, 소셜 네트워크 업데이트, Weibo 메시지 및 기타 서비스에 적합합니다. 드래그 앤 드롭 기능과 결합하면 온라인 애플리케이션과 로컬 애플리케이션 간의 구분이 정말 모호해집니다.6. 오프라인 및 저장소
오프라인 리소스: 애플리케이션 캐시. Firefox는 HTML5 오프라인 리소스 사양을 완벽하게 지원합니다. 대부분의 다른 제품은 오프라인 리소스에 대해 어느 정도의 지원만 제공합니다. 온라인 및 오프라인 이벤트. Firefox 3는 WHATWG 온라인 및 오프라인 이벤트를 지원합니다. 이를 통해 응용 프로그램과 확장 프로그램은 네트워크 연결이 가능한지 여부를 감지하고 연결이 설정되거나 끊어지는 시기를 감지할 수 있습니다. WHATWG 클라이언트 세션 및 지속성 저장소(DOM 저장소라고도 함). 클라이언트 측 세션과 영구 저장소를 사용하면 웹 애플리케이션이 클라이언트 측에 구조화된 데이터를 저장할 수 있습니다. 인덱스DB. 대량의 구조화된 데이터를 브라우저에 저장하고, 이 데이터에 대한 인덱스를 사용하여 고성능 검색을 수행하도록 설계된 웹 표준입니다. 웹 애플리케이션의 파일을 사용하세요. 새로운 HTML5 파일 API에 대한 지원이 Gecko에 추가되어 웹 애플리케이션이 사용자가 선택한 로컬 파일에 액세스할 수 있게 되었습니다. 여기에는 파일 유형의 요소의 새로운 다중 속성을 사용한 다중 파일 선택 지원이 포함됩니다. 그리고 FileReader.7. 성능 및 통합
웹 작업자. JavaScript 계산을 백그라운드 스레드에 위임하는 기능은 이러한 활동을 허용하여 대화형 이벤트의 속도가 느려지는 것을 방지합니다. XMLHttpRequest 레벨 2. 페이지의 일부를 비동기적으로 읽을 수 있도록 하여 시간과 사용자 행동에 따라 달라지는 동적 콘텐츠를 표시할 수 있습니다. 이것이 Ajax의 기반이 되는 기술입니다. Just-in-time 컴파일된 JavaScript 엔진. 차세대 JavaScript 엔진은 더욱 강력하고 성능도 향상되었습니다. 역사 API. 브라우저 기록을 조작할 수 있습니다. 이는 새로운 정보를 대화형으로 로드하는 페이지에 특히 유용합니다.conentEditable 속성: 웹사이트를 Wiki로 변환하세요! HTML5는 contentEditable 속성을 표준화했습니다. 이 기능에 대해 자세히 알아보세요.
드래그 앤 드롭. HTML5의 드래그 앤 드롭 API는 사이트 내 및 사이트 간 항목 드래그 앤 드롭을 지원합니다. 또한 확장 기능과 Mozilla 기반 애플리케이션에서 사용할 수 있는 더 간단한 API를 제공합니다.
HTML에서 포커스 관리. 새로운 HTML5 activeElement 및 hasFocus 속성을 지원합니다.
웹 기반 프로토콜 핸들러. 이제 navigator.registerProtocolHandler() 메서드를 사용하여 웹 애플리케이션을 프로토콜 핸들러로 등록할 수 있습니다.
requestAnimationFrame. 더 나은 성능을 위해 애니메이션 렌더링을 제어할 수 있습니다.
전체 화면 API. 컨트롤은 브라우저 인터페이스를 표시하지 않고 웹페이지나 애플리케이션의 전체 화면을 사용합니다.
포인터 잠금 API. 포인터가 창 제한에 도달할 때 게임이나 유사한 응용 프로그램이 초점을 잃지 않도록 포인터를 콘텐츠에 고정할 수 있습니다.
온라인 및 오프라인 이벤트. 오프라인이 가능한 좋은 웹 애플리케이션을 구축하려면 애플리케이션이 실제로 오프라인 상태인 때를 알아야 합니다. 그런데 애플리케이션이 언제 다시 온라인 상태가 되는지 알아야 합니다.
8. 장치 액세스
카메라 API를 사용하세요. 컴퓨터의 카메라를 사용 및 작동하고 카메라의 사진에 액세스할 수 있습니다.
터치 이벤트. 사용자가 터치스크린을 누를 때 이벤트에 반응하는 핸들러입니다.
위치정보를 사용하세요. 브라우저가 위치정보 서비스를 사용하여 사용자 위치를 찾도록 합니다.
장치 방향을 감지합니다. 브라우저를 실행하는 기기의 방향이 바뀔 때 사용자가 정보를 얻을 수 있도록 허용합니다. 이는 입력 장치(예: 장치 위치에 반응하는 게임 만들기)로 사용하거나 페이지 레이아웃을 화면 방향(가로 또는 세로)에 맞게 조정할 수 있습니다.
포인터 잠금 API. 포인터가 창 제한에 도달할 때 게임이나 유사한 응용 프로그램이 초점을 잃지 않도록 포인터를 콘텐츠에 고정할 수 있습니다.
9. 스타일 디자인
새로운 배경 스타일 기능. 이제 box-shadow를 사용하여 논리 상자의 그림자를 설정할 수 있으며 여러 배경을 설정할 수도 있습니다.
더 아름다운 테두리. border-image 및 관련 일반 속성을 사용하여 이미지를 사용하여 테두리의 형식을 지정할 수 있을 뿐만 아니라 이제 border-radius 속성을 통해 둥근 테두리를 지원할 수 있습니다.
스타일에 애니메이션을 적용해 보세요. CSS 전환을 사용하여 다양한 상태 간에 애니메이션을 적용하거나 CSS 애니메이션을 사용하여 트리거 이벤트 없이 페이지의 일부에 애니메이션을 적용하면 이제 페이지 주위에서 요소 이동을 제어할 수 있습니다.
타이포그래피 개선. 작성자는 더 많은 제어권을 가지게 되어 더 나은 형식을 만들 수 있습니다. 텍스트 오버플로우와 하이픈 넣기를 제어할 수 있을 뿐만 아니라, 그림자를 설정하거나 장식을 더 세밀하게 제어할 수도 있습니다. 새로운 @font-face 규칙 덕분에 이제 사용자 정의 글꼴을 다운로드하고 적용할 수 있습니다. .
새로운 프리젠테이션 레이아웃. 디자인 유연성을 향상시키기 위해 CSS 다중 열 레이아웃과 CSS 유연한 상자 레이아웃이라는 두 가지 새로운 레이아웃이 추가되었습니다.
관련 추천: "html 비디오 튜토리얼"
위 내용은 html5에는 어떤 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!