지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 간단한 HTML5 예비 입문 tutorial_html5 튜토리얼 기술

간단한 HTML5 예비 입문 tutorial_html5 튜토리얼 기술

WBOY
풀어 주다： 2016-05-16 15:46:29
원래의
1274명이 탐색했습니다.

HTML5는 미래를 대표합니다. W3C(World Wide Web Consortium, World Wide Web Consortium)는 XHTML을 포기하고 HTML5를 공식 표준으로 인정했습니다.

HTML5는 차세대 HTML입니다.
HTML5는 기존 HTML4.01 및 XHTML1.0 표준을 대체한다는 목표로 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다. Flash, Silverlight, JavaFX 등에 대한 RIA(Rich Internet Application)의 의존성을 줄이고 네트워크 애플리케이션을 효과적으로 향상시킬 수 있는 더 많은 API를 제공할 수 있기를 바랍니다.
HTML의 마지막 버전은 1999년에 만들어졌습니다. 그 이후로 웹의 세계는 극적으로 변했습니다.
HTML5는 아직 진행 중인 작업입니다. 그러나 대부분의 최신 브라우저에는 이미 HTML5가 일부 지원되어 있습니다.
HTML5는 W3C와 WHATWG 간의 협력의 결과입니다.
WHATWG는 웹 양식과 애플리케이션을 다루는 반면, W3C는 XHTML 2.0에 중점을 두고 있습니다. 2006년에 두 당사자는 새로운 버전의 HTML을 만들기 위해 협력하기로 결정했습니다.
HTML5에 설정된 몇 가지 규칙:
새로운 기능은 HTML, CSS, DOM 및 JavaScript를 기반으로 해야 합니다.
외부 플러그인(Flash 등)의 필요성 감소
더 나은 오류 처리
스크립트 대체를 위한 추가 마크업
HTML5는 기기 독립적이어야 합니다.
개발 프로세스는 대중에게 투명해야 합니다.

가장 간단한 HTML5 문서

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <제목>작은 HTML 문서제목>
  3. <p>HTML5 스타일로 브라우저를 흔들어 보세요.< ;/피> 

한 줄의 텍스트만 포함하는 매우 간단한 HTML5 문서는 브라우저에서 다음과 같이 보입니다.


보다 일반적인 구조에서는 및 전체 문서, 현재 문서는 다음과 같습니다:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <머리>
  4. <제목>작은 HTML 문서제목>
  5. 머리>
  6. <몸>
  7. <p>HTML5 스타일로 브라우저를 흔들어 보세요.< ;/피> 
  8. 몸>
  9. html>

, 및 HTML5에는 이러한 요소가 필요하지 않지만 이 작성 스타일이 더 좋습니다.

HTML5 문서 유형

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >


첫 번째 줄은 특정 문서 유형 선언이어야 하며, 이는 후속 문서 마크업이 어떤 표준을 따르는지 알려주는 데 사용됩니다. HTML5의 문서 유형 선언은 매우 간단합니다.

문자 인코딩

이제 대부분의 웹사이트는 간결하고 변환이 빠르며 원하는 영어 이외의 문자를 지원하는 UTF-8 인코딩을 사용합니다.

HTML5에서 문자 인코딩 정보를 추가하는 것은 매우 간단합니다.

에
XML/HTML 코드클립보드에 콘텐츠 복사
  1. 머리>
  2. <메타 문자 집합="utf- 8"> 
  3. <제목>작은 HTML 문서제목>
  4. 머리>


Dreamweaver 디자인 도구는 새 웹 페이지를 만들 때 이 메타정보를 자동으로 추가하고 파일을 UTF 인코딩으로 저장합니다. 가장 간단한 텍스트 편집기를 사용하는 경우 저장할 때 올바른 인코딩(UTF-8)을 선택해야 합니다.

페이지 언어

웹페이지에 사용되는 자연어를 표시하는 것이 좋습니다. 콘텐츠의 언어를 지정하려면 모든 요소에 lang 속성을 사용하세요.

전체 페이지에 언어 설명을 추가하려면 다음 코드와 같이 요소에 lang 속성을 지정해야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <html lang="zh-CN"> 


이 정보 세부정보는 페이지에 여러 언어로 된 텍스트가 포함되어 있는 경우 스크린 리더에도 유용합니다.

스타일 시트 추가

전문적으로 디자인된 웹사이트라면 당연히 스타일 시트를 사용할 것입니다. 사용할 CSS 스타일 시트를 지정할 때 다음과 같이 에 요소를 추가해야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 머리>
  2. <메타 문자 집합="utf- 8"> 
  3. <제목>작은 HTML 문서제목>
  4. <링크 rel="스타일시트" href="TinyHTML5.css">
  5. 머리>


자바스크립트 추가

HTML5에 JavaScript를 추가하는 것은 기존 페이지에 추가하는 것과 유사합니다. 예를 들면 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 머리>
  2. <메타 문자 집합="utf- 8"> 
  3. <제목>작은 HTML 문서제목>
  4. <링크 rel="스타일시트" href="TinyHTML5.css">
  5. <스크립트 src="TinyHTML5. js">스크립트>
  6. 머리>


언어="JavaScript" 속성을 추가할 필요가 없습니다. 브라우저는 사용자가 JavaScript를 사용한다고 가정합니다.

특별 참고 사항:

IE에서 JavaScript가 포함된 페이지를 테스트하는 데 많은 시간을 소비하려면 웹 마크(url=에서 저장됨)라는 특수 주석도 추가해야 합니다. 이 주석 줄은 지정된 문자 인코딩 요소 뒤에 배치되어야 합니다. 다음과 같습니다:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. 머리>
  2. <메타 문자 집합="utf- 8"> 
  4. <제목>작은 HTML 문서제목>


이 댓글은 IE가 페이지를 원격 웹사이트에서 다운로드한 것으로 처리하도록 지시합니다. 그렇지 않으면 IE는 "차단된 콘텐츠 허용"을 클릭한 후 특수 잠금 모드로 전환하고 보안 경고를 표시합니다. 버튼을 누를 때까지 실행됩니다.

(0014)는 about:internet 문자열의 길이를 나타냅니다.

최종 결과

완전하고 아름다운 HTML5 코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html lang="zh- CN"> 
  3. <머리>
  4. <메타 문자 집합="utf- 8"> 
  6. <제목>작은 HTML 문서제목>
  7. <링크 rel="스타일시트" href="TinyHTML5.css">
  8. <스크립트 src="TinyHTML5. js">스크립트>
  9. 머리>
  11. <몸>
  12. <p>HTML5 스타일로 브라우저를 흔들어 보세요.< ;/피> 
  13. 몸>
  14. html>
관련 라벨：
html5
원천：php.cn
이전 기사：HTML5_html5 튜토리얼 기술에서 Blob 객체 사용에 대한 심층 분석 다음 기사：HTML5의 발전은 어떻게 될까요? HTML5_html5 튜토리얼 기술의 전망은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿