> 웹 프론트엔드 > H5 튜토리얼 > HTML5 기초, 1부: 시작하기

HTML5 기초, 1부: 시작하기

黄舟
풀어 주다: 2016-12-19 15:55:35
원래의
1454명이 탐색했습니다.

HTML5는 웹 콘텐츠를 구성하기 위해 설계된 언어입니다. 그 목적은 표준적이고 직관적인 UI 마크업 언어를 만들어 웹 디자인과 개발을 더 쉽게 만드는 것입니다. HTML5는 페이지를 자르고 분할하는 다양한 수단을 제공하므로 사이트를 논리적으로 구성하는 데 사용할 수 있을 뿐만 아니라 사이트에 집계 기능을 제공하는 절단 구성 요소를 만들 수 있습니다. HTML5는 정보 매핑의 본질을 구현하고 정보를 구분하고 정보에 태그를 지정하여 사용하기 쉽고 이해하기 쉽도록 정보를 웹 사이트 디자인으로 매핑하는 방법이라는 점에서 "정보에서 웹 사이트 디자인까지의 매핑 방법"이라고 설명할 수 있습니다. 이는 HTML5의 표현적 의미와 실용적인 미학의 기초로서 디자이너와 개발자에게 단순한 텍스트 콘텐츠부터 풍부한 대화형 콘텐츠까지 모든 수준에서 다양한 콘텐츠를 게시할 수 있는 능력을 제공합니다. 모든 멀티미디어가 포함됩니다.

HTML5는 효율적인 데이터 관리, 그리기, 비디오 및 오디오 도구를 제공하여 웹 및 휴대용 장치에서 크로스 브라우저 애플리케이션 개발을 용이하게 합니다. HTML5는 더 큰 유연성을 제공하고 매우 흥미로운 대화형 웹사이트 개발을 지원하므로 모바일 클라우드 컴퓨팅 서비스 개발을 주도하는 기술 중 하나입니다. 또한 우아한 구조, 양식 컨트롤, API, 멀티미디어, 데이터베이스 지원 및 크게 향상된 처리 속도를 포함한 새로운 태그와 향상된 기능을 소개합니다.

HTML5의 새로운 태그는 매우 인상적이며 태그는 해당 기능과 사용법을 요약합니다. 이전 버전의 HTML은 설명이 없는 태그를 더 많이 사용했습니다. 그러나 HTML5에는 내용을 즉시 식별할 수 있도록 하는 풍부한 내용 태그 세트를 제공하는 매우 설명적이고 직관적인 태그가 있습니다. 예를 들어, 자주 사용되는 태그는 ,

태그를 추가하면 특정 콘텐츠 유형에 대한 보다 정확한 설명도 제공됩니다.

HTML5는 다음을 제공합니다.

1. 포함하려는 내용을 정확하게 설명하는 태그
2. 향상된 네트워크 통신
3. 일반적으로 사용되는 저장소가 대폭 개선되었습니다. 백그라운드 프로세스를 실행하는 Web Worker
5. 로컬 애플리케이션과 서버 간의 지속적인 연결을 설정하는 WebSocket 인터페이스
6. 향상된 저장 데이터 검색 방법
7. 페이지 저장 및 로딩 속도 향상
8. CSS3를 사용하여 GUI를 관리합니다. 이는 HTML5가 콘텐츠 지향적일 수 있음을 의미합니다
9. 향상된 브라우저 양식 처리
10. 클라이언트측에서 로컬 저장을 허용하는 SQL 기반 데이터베이스 API
11. 캔버스 및 타사 플러그인을 설치하지 않고도 그래픽 및 비디오를 추가할 수 있는 비디오
12. 스마트폰 위치 기능을 사용하여 모바일 클라우드를 통합하는 Geolocation API 사양 서비스 및 앱
13. JavaScript 코드를 다운로드하면 모바일 장치와 클라우드 서비스 간의 보다 효율적인 통신이 가능해집니다.

HTML5는 사용자에게 더욱 매력적인 경험을 제공합니다. HTML5를 사용하여 디자인된 페이지는 데스크톱 애플리케이션과 유사한 경험을 제공할 수 있습니다. HTML5는 또한 API 기능을 유비쿼터스 브라우저와 통합하여 향상된 다중 플랫폼 개발을 제공합니다. 개발자는 HTML5를 사용하여 플랫폼 전반에 걸쳐 원활하게 흐르는 현대적인 애플리케이션 경험을 제공할 수 있습니다.

HTML5라는 단어를 말할 때, 지속적인 혁신을 표현하기 위해 짧은 단어를 사용합니다. 새로운 마크업, 새로운 방법론 세트, HTML5와 상호 보완적인 두 동료인 CSS3 및 Javascript 간의 상호 작용을 기반으로 하는 공통 개발 프레임워크, 현상에 대한 클라이언트 중심 접근 방식 애플리케이션의 핵심입니다. HTML5 기술 기술 및 방법의 많은 데스크톱 배포 외에도 HTML5는 기능이 풍부한 웹 휴대폰 브라우저에서도 구현될 수 있습니다. 이는 Palm webOS를 실행하는 Apple iPhone, Google Android 및 Android 장치 시장이 성장하고 있는 시장입니다. 이것에 대한 증거.

HTML5의 강력한 기능 중 매우 중요한 측면은 정보 매핑 또는 콘텐츠 차단입니다. 원한다면 이 접근 방식을 사용하면 프로세스를 훨씬 더 쉽게 이해할 수 있습니다. 웹 처리 영역에 대한 제어를 강화함으로써 설계 및 개발 측면에서 이 도구가 얼마나 효율적이었는지 확인할 수 있습니다.

HTML5는 텍스트 수준에서 보다 효율적인 의미 처리와 양식 구성 및 사용에 대한 보다 강력한 제어의 출현을 예고합니다. HTML5 혁신의 이러한 모든 기능과 기타 많은 미묘함은 점점 더 지배적인 패러다임의 기초입니다. 많은 기관, 상업 기관 및 기타 기관, 심지어 정보 처리 및 전달을 주요 기관 활동으로 전혀 간주하지 않는 많은 조직도 이러한 증가하는 현상의 발전으로 인해 다양한 정도로 영향을 받습니다.

HTML5는 요술램프가 아니며 지니가 나타나지 않습니다. 그러나 그 기술적, 방법론적 자산으로 인해 요술 램프를 연마하는 것보다 차선책이 됩니다.

기획페이지

간단한 웹페이지를 만들어 보겠습니다. 그 과정에서 HTML5에 도입된 몇 가지 새로운 태그에 대해 논의하겠습니다. 효율적이고 효과적인 웹 페이지를 만들려면 계획을 세우고 구축하려는 모든 구성 요소를 고려해야 합니다. 생성한 웹 페이지는 그림 1과 같은 고급 디자인을 갖게 됩니다. 페이지 디자인에는 머리글 영역, 탐색 영역, 세 개의 섹션 영역과 옆 영역을 포함하는 기사 영역, 마지막으로 바닥글 영역이 포함됩니다. 이 페이지는 Google의 Chrome 브라우저에서 작동하도록 설계되어 브라우저 호환성 문제를 일으키는 시각적 혼란을 제거하는 동시에 기본 구조에 대한 이해를 방해합니다. 우리의 목표는 새로운 HTML5 태그의 사용법을 명확하게 설명하고 이를 사용하여 올바른 형식의 코드와 우아한 페이지 디자인을 만드는 방법을 보여주는 페이지를 만드는 것이었습니다.

그림 1. Acme United의 웹 페이지 계획

HTML5 기초, 1부: 시작하기

이 페이지를 만드는 과정에서 HTML5를 올바르게 사용해야 하는 CSS3가 포함됩니다. 웹페이지를 효율적으로 CSS3는 HTML5 페이지의 스타일, 탐색 및 일반적인 모양과 느낌에 필수적이며 WsSchool의 CSS3 참조 사이트(참고자료 섹션 참조)에서 찾을 수 있는 속성 세트에는 배경, 글꼴과 같은 매우 유용한 요소가 포함되어 있습니다. , 선택 윤곽, 애니메이션 등

그러나 페이지 구축을 시작하기 전에 몇 가지 새로운 HTML5 태그를 배워야 합니다.

헤더 영역

페이지 제목과 부제가 포함된 예시입니다.

태그는 페이지의 헤더 영역에 대한 내용을 만드는 데 사용됩니다. 페이지 자체 외에도 여기서 생성된 웹페이지는 하이레벨 디자인에서 제공하는 페이지용 Header 영역과 Article 및 Section 영역 내부에 Header 영역이 있습니다. 목록 1은
태그의 예를 제공합니다.

목록 1.


제목 텍스트

여기에 배치하세요

; 목록 2에 표시된 태그.
제목 계층 구조를 사용하여

목록 2.

기본 제목
부제목

여기에 텍스트 또는 이미지를 배치할 수 있습니다.

탐색 영역

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