웹 프론트엔드 H5 튜토리얼 웹 시대의 변화와 html5와 html4_html5 튜토리얼 기술의 차이점

웹 시대의 변화와 html5와 html4_html5 튜토리얼 기술의 차이점

May 16, 2016 pm 03:46 PM
html5 차이점

HTML5는 HTML 표준의 다음 버전입니다. 점점 더 많은 프로그래머들이 웹사이트 구축을 위해 HTML5를 사용하고 있습니다. HTML4와 HTML5를 동시에 사용하는 경우 HTML5로 처음부터 구축하는 것이 HTML4에서 HTML5로 마이그레이션하는 것보다 훨씬 편리하다는 것을 알게 될 것입니다. HTML5가 HTML4를 완전히 뒤집지는 못하더라도 여전히 많은 유사점을 갖고 있지만 몇 가지 중요한 차이점도 있습니다. 다음으로 이번 글을 통해 html5와 html4의 차이점을 알아보겠습니다
HTML5의 새로운 구조 태그
이전 HTML 페이지에서는 기본적으로 다들 Div CSS 레이아웃 방식을 사용했습니다. 검색 엔진이 페이지의 콘텐츠를 크롤링할 때 Div 중 하나의 콘텐츠가 기사 콘텐츠 컨테이너, 탐색 모듈 컨테이너 또는 작성자가 소개한 컨테이너 등인지 추측할 수 있습니다. 즉, HTML 문서 전체의 구조가 명확하게 정의되어 있지 않습니다. 이 문제를 해결하기 위해 HTML5에서는 머리글, 바닥글, 탐색, 기사 내용 및 구조와 관련된 기타 구조 요소 태그를 특별히 추가합니다.
이 새로운 태그에 대해 이야기하기 전에 먼저 일반 페이지의 레이아웃을 살펴보겠습니다.


위 그림에서 일반 페이지에는 헤더, 탐색, 기사 내용, 첨부된 오른쪽 사이드바 및 하단 모듈이 있다는 것을 매우 명확하게 볼 수 있으며 클래스를 통해 이를 수행합니다. 다른 CSS를 통해 차별화되고 처리됩니다. 스타일. 그러나 상대적으로 클래스는 보편적인 표준 사양이 아니며 검색 엔진은 특정 부분의 기능만 추측할 수 있습니다. 또한 이 페이지 프로그램을 시각 장애인에게 제공하면 문서 구조와 내용이 그다지 명확하지 않습니다. HTML5 새 태그가 가져온 새로운 레이아웃은 다음과 같습니다.  


웹 시대의 변화
HTML 표준의 이전 세대인 HTML 4.01과 XHTML 1.0이 출시된 지 10년이 넘었고, 웹 시대의 변화 측면 적용 또한 엄청난 변화를 겪었습니다. 더욱이, 웹 프런트엔드에 대한 통일되고 보편적인 인터넷 표준은 없습니다. 다양한 브라우저 사이에는 비호환성이 너무 많고, 이러한 브라우저의 호환성을 유지하는 데 너무 많은 시간이 낭비됩니다. 또한 이전 멀티미디어 작업, 애니메이션 등은 모두 타사 플러그인의 지원이 필요했기 때문에 다중 플랫폼 호환성 문제가 발생했습니다. 이 모든 것이 HTML5에서 표준이 되어 서버의 차이점과 문제를 근본적으로 해결합니다. 일부 타사 플러그인 문제로 인해 웹 애플리케이션이 더욱 표준화되고, 다양해지며, 장치 독립적이 됩니다.
2010년 h5가 공식 출시된 이후 주요 브라우저에서 환영과 지원을 받아왔습니다. 현재 업계는 h5를 향해 나아가고 있으며 곧 h5 시대가 다가오고 있습니다.
HTML5는 혁명적인 변화가 아니라 발전적인 변화일 뿐입니다. 또한 이전의 많은 HTML4 표준과 호환되며 최신 HTML5 표준을 통해 만들어진 모든 웹 응용 프로그램은 이전 버전의 브라우저에서도 쉽게 실행할 수 있습니다. HTML5 표준은 오디오 및 비디오, 로컬 저장소, 소켓 통신, 애니메이션 등과 같은 많은 실용적인 기능을 통합합니다. 이 기능은 이전 애플리케이션 개발에서 웹 측이 쓸모 없다고 느낀 후에야 심각하게 받아들여지고 업그레이드되었습니다. 관련 경험이 있다면 그것은 또한 매우 감동적일 것입니다.
HTML5의 목표는 몇 가지 새로운 태그와 새로운 기능을 통해 더 간단하고 독립적이며 표준적인 범용 웹 애플리케이션을 개발하기 위한 표준을 제공하는 것입니다.
새 표준은 브라우저 호환성, 불분명한 문서 구조, 웹 애플리케이션의 제한된 기능이라는 세 가지 주요 문제를 해결합니다.
HTML4와 HTML5의 차이점
1.

는 CSS로 완전히 대체되었습니다.
취소된 기타 속성: 약어, 애플릿, 기본 글꼴, 빅, 센터, dir, 글꼴, 프레임, 프레임셋, isindex, noframes, Strike, tt.
2. 몇 가지 새로운 요소 추가
예: 더욱 지능적인 양식 태그: 날짜, 이메일, URL 등 더욱 합리적인 태그: 섹션, 비디오, 진행률, 탐색, 미터, 시간, 옆, 캔버스 등 .
3. 새로운 전역 속성: contentEditable designMode 숨겨진 맞춤법 검사 탭 인덱스
4. 표시 방법: 파일 형식 선언 유형()만 있습니다: .
문자 인코딩 지정
5. 새로운 JS API
6. 호환성 보장
태그 요소 생략 가능
끝 태그 작성 허용 안 함 예를 들어, Area base br
은 종료 태그를 생략할 수 있습니다: li dt
모든 태그를 생략할 수 있습니다: html head

코드 예는 다음과 같습니다:

코드 복사코드는 다음과 같습니다.



html5
<본문>
<헤더>...

<기사>
<섹션>

    111111

    22222


    <제쳐두고>...
    <바닥글>...

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

    핫 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 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

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

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    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 06, 2025 am 10:42 AM

    H5. 미니 프로그램과 앱의 주요 차이점은 다음과 같습니다. 기술 아키텍처 : H5는 웹 기술을 기반으로하며 미니 프로그램 및 앱은 독립적 인 응용 프로그램입니다. 경험과 기능 : H5는 가볍고 사용하기 쉽고 기능이 제한되어 있습니다. 미니 프로그램은 가벼우 며 상호성이 우수합니다. 앱은 강력하고 부드러운 경험이 있습니다. 호환성 : H5는 크로스 플랫폼 호환성이며 애플릿 및 앱은 플랫폼에 의해 제한됩니다. 개발 비용 : H5는 개발 비용이 낮고 중간 미니 프로그램 및 최고 앱이 있습니다. 적용 가능한 시나리오 : H5는 정보 표시에 적합하고 애플릿은 가벼운 응용 프로그램에 적합하며 앱은 복잡한 기능에 적합합니다.

    PS에서 PDF를 내보내기위한 비밀번호 보호를 설정하는 방법 PS에서 PDF를 내보내기위한 비밀번호 보호를 설정하는 방법 Apr 06, 2025 pm 04:45 PM

    Photoshop에서 암호로 보호 된 PDF를 내보내십시오 : 이미지 파일을 엽니 다. "파일"을 클릭하십시오. & gt; "수출"& gt; "PDF로 수출". "보안"옵션을 설정하고 동일한 비밀번호를 두 번 입력하십시오. "내보내기"를 클릭하여 PDF 파일을 생성하십시오.

    라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? 라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? Apr 05, 2025 pm 01:03 PM

    vue 응용 프로그램을 개발할 때 라우터 폴더 아래에 index.js 파일에 vuerouter를 등록해야 할 필요성이 있으면 종종 라우팅 구성에 문제가 발생합니다. 특별한...

    XPath를 사용하여 JavaScript의 지정된 DOM 노드에서 검색하는 방법은 무엇입니까? XPath를 사용하여 JavaScript의 지정된 DOM 노드에서 검색하는 방법은 무엇입니까? Apr 04, 2025 pm 11:15 PM

    JavaScript의 DOM 노드에서 XPath 검색 방법에 대한 자세한 설명은 종종 XPath 표현식을 기반으로 DOM 트리에서 특정 노드를 찾아야합니다. 필요하다면 ...

    H5는 html5와 동일합니까? H5는 html5와 동일합니까? Apr 08, 2025 am 12:16 AM

    "H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

    Console.log의 출력 결과의 차이 : 동일한 변수에 인쇄 방법이 다르지만 결과가 다른 이유는 무엇입니까? Console.log의 출력 결과의 차이 : 동일한 변수에 인쇄 방법이 다르지만 결과가 다른 이유는 무엇입니까? Apr 04, 2025 am 11:48 AM

    이 기사에서 Console.log 출력의 차이에 대한 심층적 인 논의는 Console.log 함수의 출력 결과가 다른 이유를 분석합니다. 코드 스 니펫에는 URL 매개 변수 해상도가 포함됩니다 ...

    H5는 무엇을 의미합니까? H5는 무엇을 의미합니까? Apr 04, 2025 am 12:10 AM

    H5는 HTML5의 약어이며 HTML의 다섯 번째 버전입니다. H5는 웹 페이지의 구조와 의미를 향상시키고 비디오, 오디오, 캔버스 드로잉 및 지리적 위치 API와 같은 새로운 기능을 소개하여 웹 페이지 개발이 더 풍부하고 효율적입니다.

    See all articles