찾다
웹 프론트엔드H5 튜토리얼H5를 사용하여 웹페이지를 만드는 방법에 대한 전반적인 개요

H5를 사용하여 웹페이지를 만드는 방법에 대한 전반적인 개요

May 23, 2017 pm 01:33 PM
html웹페이지를 만들어 보세요

현재 HTML 5의 새로운 기능 중 일부를 이해하는 데 도움이 되도록 이제 본론으로 들어가 몇 가지 새로운 구조 요소를 사용해 보겠습니다. HTML 5 문서를 생성하기 위해 가장 먼저 해야 할 일은 새로운 문서 유형을 사용하는 것입니다.

누구의 질문에 따르면 HTML 5의미 있는 웹을 만들기 위한 다음 단계는 아니지만 일련의 불완전한 태그와 뒤죽박죽인 것입니다. 태그는 웹에 재앙을 가져왔습니다.

양측 주장의 문제는 자연 환경에서 HTML 5를 사용하는 사이트가 거의 없기 때문에 현재 인식되는 문제에 대한 이론적 해결책이 대부분 테스트되지 않은 상태로 남아 있다는 것입니다.

그래도 차세대 웹 마크업 도구의 장점과 잠재적인 문제점을 파악하는 것은 어렵지 않습니다.

콘텐츠

1. HTML 5의 차이점은 무엇인가요?

2.  드디어 누구나 기억할 수 있는 문서형

3. 가장 기본적인 의미구조

1. 

2. 

3. 

4. 함께 사용

5. 새로운 요소에 대한 스타일 작성

🎜>6. 기존 브라우저와 호환 가능

7. 이제 HTML 5를 사용할 수 있지만 사용하시겠습니까?

HTML 5의 차이점은 무엇인가요?

먼저 HTML 5를 통해 무엇을 표현하는가? 우선, HTML 5는 이론적으로 모든 것을 표현합니다. 캔버스

또는 오프라인 저장소와 기타

API 사양과 같은 새로운 의미 구조 태그와 인라인 시맨틱 태그. 그러나 실제 이유(PS: 브라우저 지원 문제)를 태그 구조에만 국한합니다. 캔버스, 오프라인 저장소, 로컬 동영상

또는 위치정보 API는 모두 훌륭하지만 아직 모든 브라우저에서 일관되게 지원되지는 않습니다.

"하지만 잠깐만요" "대부분의 브라우저도 새로운 구조적 요소를 지원하지 않습니다!"라고 말합니다. 사실이지만 대다수의 브라우저는 생성된 모든 태그를 기꺼이 받아들일 것입니다. IE6도 새 탭을 처리할 수 있지만 CSS로 스타일을 지정하려면 약간의 JavaScript

도움이 필요합니다.

새 태그의 스타일을 지정할 때 기억해야 할 한 가지는 알 수 없는 태그에는 대부분의 브라우저에서 기본 스타일이 없다는 것입니다. 또한 행 수준 요소로 간주됩니다. 하지만 HTML 5의 새로운 태그 대부분은 구성 가능하므로 블록 수준 요소의

동작을 제공할 것입니다. 해결책은 CSS 스타일에 display:block;을 포함시키는 것입니다. 현재 HTML 5의 새로운 기능 중 일부를 이해하는 데 도움이 되도록 이제 본론으로 들어가 몇 가지 새로운 구조 요소를 사용해 보겠습니다.

마지막으로 누구나 기억할 수 있는 문서 유형

HTML 5 문서를 만들기 위해 가장 먼저 해야 할 일은 새로운 문서 유형을 사용하는 것입니다. 이제 HTML 4 또는 XHTML 1.x 문서 유형을 확실히 기억한다면 당신은 우리보다 더 나쁜 놈입니다. 새 페이지를 만들 때마다 이전 파일을 열고 문서 유형 정의를 잘라내어 붙여넣어야 합니다.

그것은 정말 고통스러운 일인데, 우리가

새로운 HTML 5 문서 유형을 좋아하는 이유입니다. 준비됐나요? 여기 있습니다:

기억하기 어렵지 않습니다. 간단하고 이해하기 쉽습니다. 대소문자를 구분하지 않습니다.

HTML 버전 관리를 중단하고 이전 버전과의 호환성을 더 쉽게 만드는 것이 아이디어입니다. 장기적으로 성공할지 여부는 또 다른 문제이지만 적어도 평균 타이핑 시간은 절약됩니다.

가장 기본적인 의미 구조

우리 페이지를 HTML 5 문서로 정의했습니다. 지금까지는 너무 좋았습니다. 자, 우리가 들어본 이 새로운 라벨은 정확히 무엇입니까? 새 태그를 살펴보기 전에 다음과 같은 일반적인 웹페이지 구조를 생각해 보세요.

프레젠테이션 목적으로는 괜찮지만 페이지 요소에 포함된 내용에 대해 알고 싶다면 어떻게 해야 할까요?

위의 예에서는 모든 구조 p에 ID를 추가했습니다. 이는 지식이 풍부한 디자이너들 사이에서 흔히 볼 수 있는 일입니다. 목적은 두 가지입니다. 첫째, ID는 페이지의 특정 단락에 스타일을 적용하는 데 사용할 수 있는 앵커를 제공하고, 둘째, ID는 기본 의사 의미 구조로 작동합니다. 정교한 파서는 태그의 ID 속성 을 보고 그 의미를 추측하려고 노력하지만, 사이트마다 ID 이름이 다르면 그게 어렵습니다.

여기서 새로운 구조 태그가 사용됩니다.

이러한 ID가 관례가 되었음을 인식한 HTML 5 제작자는 한 단계 더 나아가 이러한 요소 중 일부를 자체 태그로 만들었습니다. 다음은 HTML 5에 적용되는 새로운 태그에 대한 간단한 요약입니다.

헤더 태그는 한 장이나 전체 웹 페이지에 대한 소개 정보를 담는 컨테이너로 설계되었습니다. .

태그에는 대부분의 페이지 상단에 있는 일반적인 로고나 태그라인부터 장을 소개하는 태그라인과 시작 줄까지 모든 것이 포함될 수 있습니다. 페이지에서 여전히

를 사용하면

nav 요소를 대체할 수 있습니다. 이것이 탐색 요소입니다. 물론 무엇이 탐색으로 간주되는지에 대한 논쟁이 있습니다. 기본 사이트 탐색이 있지만 경우에 따라 페이지 탐색 요소도 있을 수 있습니다. HTML5를 만든 WHATWG는 최근

아직도

섹션은 아마도 새로운 태그 중에서 가장 모호한 태그일 것입니다. HTML 5 정의에 따르면 장은 일반적으로 헤더 태그 뒤와 바닥글 태그 앞의 콘텐츠 주제 모음입니다. 그러나 필요한 경우 섹션을 서로 중첩할 수 있습니다.

위의 예에서 "content"로 표시된 p는 섹션이 되기에 좋은 선택입니다. 또한 해당 섹션 내에서 내용에 따라 섹션을 추가할 수 있습니다.

WHATWG의 주석을 삭제하세요. 기사 요소에는 "문서나 사이트의 별도 부분을 구성하는 콘텐츠 조각이 포함될 수 있습니다. 예를 들어, 잡지나 뉴스 기사 또는 블로그 항목입니다. "

한 페이지에 여러 기사 태그가 있을 수 있습니다. 예를 들어 블로그 홈페이지에는 최신 기사 10개가 있을 수 있으며 각 기사는 기사 태그에 포함되어 있습니다. 섹션 태그를 사용하여 기사를 여러 단락으로 나눌 수도 있지만 구조를 계획할 때 약간 주의해야 합니다. 그렇지 않으면 보기 흉한 태그가 뒤섞여 쉽게 끝날 수 있습니다.

또 다른 다소 모호한 태그인 aside 요소는 "문서의 본문 흐름을 구성하는 내용과 관련 없는" 내용에 사용됩니다. 이는 추가 댓글, 인라인 각주, 인용, 주석 또는 이 게시물 오른쪽에 표시되는 것과 같은 보다 일반적인 사이드바 콘텐츠를 의미합니다.

WHATWG 댓글에 따르면

HTML 5가 완벽하다고 말한 사람은 아무도 없습니다!

바닥글의 유용성은 여러 바닥글을 가질 수 있다는 사실을 모를 수도 있다는 점을 제외하면 분명해야 합니다. 즉, 일반적으로 대부분의 페이지 하단에 있는 기본 아래 첨자 외에도 단락에는 아래 첨자가 포함될 수도 있습니다.

함께 정리하기

새 태그를 사용하여 원래 예제를 다시 작성해 보겠습니다.

매우 명확하고 이해하기 쉽습니다. ? 참고 사항: 헤더 태그에

내 기사

제목을 포함할 수 있습니다. h1 요소가 이미 제목의 의미를 전달하고 있기 때문에 이렇게 하지 않았습니다. 하지만 기사 상단에 발행일, 작성자 또는 기타 데이터도 있는 경우 헤더 컨테이너 태그를 태그 세트에 추가하는 것은 좋은 옵션.

또한 기사 요소 아래에 두 번째 바닥글 요소를 추가하여 페이지 탐색, 관련 기사 또는 기타 콘텐츠를 포함할 수 있습니다.

새 탭에 스타일 작성

대부분의 브라우저에서는 평소처럼 새 탭에 스타일 시트를 적용하고 스타일을 정의하기만 하면 됩니다. 하지만 앞으로는 무슨 일이 있어도 모든 요소에 display:block; 규칙을 추가하세요. 시간이 지나면서 브라우저가 새로운 요소를 표준화하고 지원하기 시작하면 그럴 필요가 없게 됩니다.

예를 들어 헤더에 몇 가지 스타일을 적용해 보겠습니다.

이 태그에는 클래스 및 ID 속성을 추가할 수 있다는 점을 기억하세요. 따라서 탐색 스타일을 별도로 지정하려면 다음과 같이 태그에 클래스나 스타일을 쉽게 추가할 수 있습니다.

그런 다음 스타일을 적용할 수 있습니다.

이전 브라우저와 호환

하지만 IE는 어떻습니까? 이러한 스타일은 IE6에서는 전혀 작동하지 않습니다. IE6과 같은 레거시 브라우저를 계속 지원해야 하는 경우 해결 방법은 다음과 같습니다. IE6은 이러한 태그를 잘 구문 분석하고 표시하지만 CSS를 설정할 수는 없습니다. 해결책은 약간의 JavaScript를 사용하는 것입니다.

createElement 메소드를 사용하여 생성한 HTML 5 태그에 IE의 스타일을 적용하기만 하면 됩니다. HTML 5 파일의 head 태그에 이를 추가하세요. 또는 특정 파일에 저장하고 그런 방식으로 포함할 수도 있습니다.

당신이 무슨 생각을 하는지 알아요: "형님, 당신은 그 스크립트 태그에 대해 MIME 유형을 전혀 정의하지 않았습니다.

당신은 그렇지 않습니다. HTML 5에서 정의할 필요조차 없습니다. 다음을 수행하십시오. HTML 5에서는 모든 스크립트가 type="text/javascript"라고 가정하므로 스크립트 태그를 속성으로 복잡하게 만들 필요가 없습니다(스크립트가 JavaScript가 아닌 경우).

이렇게 하면 IE의 문제가 해결되지만 위기에서 벗어난 것은 아닙니다. Firefox 2 및 Camino의 일부 버전이 이 탭에서 멈추게 만드는 버그가 Gecko 렌더링 엔진에 있는 것으로 밝혀졌습니다.

이 버그를 처리하는 방법에는 두 가지가 있지만 둘 다 이상적이지 않습니다. 자세한 내용은 HTML5doctor의 기사를 확인하세요. 이 기사에는 모든 HTML 5 요소를 활성화하는 편리한 스크립트도 함께 제공됩니다.

Firefox 2 사용량이 전체 사이트 트래픽의 10% 미만으로 빠르게 떨어졌지만 단순히 이 버그를 무시하는 것은 여전히 ​​사이트 방문자에 따라 결정될 수 있다는 점을 명심하세요.

이제 HTML 5를 사용할 수 있는데, 계속 사용하시겠습니까?

간단히 대답하자면 그렇습니다.

더 복잡한 것은 사이트에 따라 다릅니다. CNN 홈페이지를 개조했다는 비난을 받는다면 브라우저 지원이 더 좋아질 때까지 약간의 저항을 할 수도 있습니다. 하지만 블로그를 개편하고 싶다면 저희가 도와드리겠습니다. 이러한 인기 있는 출판 시스템을 사용하는 경우 도움이 될 수 있는 몇 가지 WordPress 플러그인은 다음과 같습니다. Jeff Starr가 만든 HTML 5 테마는 다음과 같습니다.

또한 사이트 중심 HTML 5 갤러리를 시도하고 소스 코드를 확인하여 어떤 작업을 수행했는지 확인하세요.

그래도 IE의 단점으로 인해 중단된다면 다음 사항을 고려하십시오. Google도 기본 검색 페이지에서 HTML 5의 doctype을 사용하고 있습니다. 새로운 구조적 태그를 모두 사용하지 않더라도 최소한 다음 시간에 다룰 간결한 스크립트 선언과 일부 비구조적 의미 태그를 활용할 수 있습니다.

[관련 추천]

1. HTML5 무료 동영상 튜토리얼

H5 입력에 음성 기능을 추가하는 방법에 대한 자세한 설명 box

3. H5에서 가상키보드 생성시 입력창이 막히면 어떻게 해야 하나요?

4. HTML5에서 WeChat 전체화면 재생 구현 방법에 대한 자세한 설명

브라우저 호환성 문제에 대한 자세한 설명 H5 새 태그

위 내용은 H5를 사용하여 웹페이지를 만드는 방법에 대한 전반적인 개요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
H5 코드 : 웹 개발자를위한 모범 사례H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

H5 : 웹 표준 및 기술의 발전H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기