>  기사  >  웹 프론트엔드  >  HTML4와 비교하여 HTML5의 주요 변경 사항 및 개선 사항 요약

HTML4와 비교하여 HTML5의 주요 변경 사항 및 개선 사항 요약

黄舟
黄舟원래의
2017-02-20 13:56:041936검색

이 기간 동안 저는 선생님들의 프로젝트를 도우느라 매우 바빴습니다. 종종 수업에 가지 않고 연구실에만 머물면서 다른 것을 읽을 시간이 없었습니다. 저는 프로젝트에서 프론트엔드 페이지 디자인을 맡게 되었습니다. 가끔 웹서핑을 하다 보면 최근 모바일 인터넷의 급속한 발전으로 인해, 특히 4G 시대가 도래하면서 모바일 APP과 HTML5가 꽤 인기를 얻고 있는 것을 볼 수 있습니다. Microsoft는 win10에서 이를 구현했습니다. 새로운 브라우저 Edge가 IE를 대체했기 때문에 이제 많은 웹 사이트가 IE를 포기하고 HTML5로 이동하기 시작했습니다. 이는 특히 모바일 웹 페이지에서 추세이지만 PC 측면에서는 여전히 격차가 있습니다. 서로 다른 브라우저 간에는 긴급하게 해결해야 할 몇 가지 호환성 문제가 있지만 가까운 미래에는 html5가 지배적인 브라우저 마크업 언어가 될 것입니다.

html5란 무엇인가요?
html5는 WHATWG(Web Hypertext Application Technology Working Group)에서 처음 명명한 하이퍼텍스트 마크업 언어로, W3C에서 조직한 xhtml2.0(표준)과 결합하여 최신 세대의 하이퍼텍스트 마크업 언어를 생성합니다. HTML 5 ≒ HTML+CSS 3+javascript+API

현재 웹 프론트엔드에서 개발 중인 정적 웹 페이지는 일반적으로 html4.01입니다. 또한 W3C 사양을 준수합니다. 그렇다면 둘 사이의 실질적인 차이점은 무엇입니까?

1. 문서 유형 선언에
 html:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">



 html5:

XML/HTML Code复制内容到剪贴板
    
    
        <!DOCTYPE html>




두 가지를 비교해 보면 알 수 있습니다. 문서 선언에서 html4의 코드 섹션이 길어서 이 코드를 기억하기 어렵습니다. 많은 분들이 믿겠지만 도구로 직접 생성한 걸까요? 하지만 html5는 사람들이 기억하기에도 편리한 간단한 선언만 갖고 있습니다.


2. 페이지 문자 인코딩 설정
HTML5에서는 그림과 같이 charset 속성을 e8e496c15ba93d81f6ea4fe5f55a2244 요소에 직접 추가하여 문자 인코딩을 지정할 수 있습니다. 아래:

  

html:<meta charset= “UTF-8 ”>
      html5:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5부터 파일의 문자 인코딩은 UTF-8 사용을 권장합니다.

3. 구조적 의미 측면에서
HTML: 일반적으로 다음과 같이 이름을 지정합니다. p id="header". 웹사이트 머리.

html5: 의미론적으로 큰 장점을 가지고 있습니다. 머리글, 기사, 바닥글과 같은 몇 가지 새로운 태그가 제공됩니다.

이러한 태그를 제공하면 어떤 이점이 있나요? 웹페이지 모듈의 이름을 직접 짓든, 그런 라벨을 붙이든, 가장 중요한 것은 SEO 최적화라고 생각합니다. 왜냐하면 웹사이트 구축의 궁극적인 목표는 단 하나, 바로 돈을 버는 것이기 때문입니다. 수익을 내고 싶다면 SEO 최적화 기술을 통해서만 웹사이트 순위를 높일 수 있으므로 귀하의 웹사이트가 가치있게 될 것입니다. 바로 이 점이 html5가 충족하는 지점입니다. 왜 그런 말을 합니까? 그가 정의한 태그가 최적화에 더 도움이 되고 스파이더가 귀하를 식별할 수 있기 때문입니다.

4. 기타 새로운 콘텐츠
새로운 입력 유형에는 숫자(number), 날짜(date), 색상(color), 범위(range) 등이 있습니다.

새로운 인라인 요소에는 시간, 미터, 진행 상황이 포함됩니다.

새로운 내장 요소는 비디오와 오디오입니다. 새로운 대화형 요소는 세부 정보, 데이터 그리드 및 명령입니다.

5. 5ba626b379994d53f7acf72a64f9b697 태그가 Flash를 대체합니다
Flash를 웹 페이지에서 재생하려면 많은 코드와 플러그인이 필요합니다. 5ba626b379994d53f7acf72a64f9b697 태그를 사용하면 개발자는 하나의 태그만 사용하여 UI를 통해 사용자와 상호 작용할 수 있습니다. 5ba626b379994d53f7acf72a64f9b697 태그는 아직 Flash의 모든 기능을 구현할 수 없지만 곧 5ba626b379994d53f7acf72a64f9b697는 Flash를 구식으로 보이게 만들 것입니다. 하하!

6. 사용되지 않는 요소
CSS로 대체할 수 있는 요소: 기본 글꼴, big, 글꼴, s, tt, u의 경우 해당 요소는 해당 기능이 순수 화면 표시이기 때문입니다. 서비스 및 HTML5에서는 통합 편집을 위해 화면 표시 기능을 CSS 스타일에 넣는 것을 옹호하므로 이러한 요소는 폐지됩니다.

프레임은 더 이상 사용되지 않습니다. 프레임은 웹페이지 사용성에 부정적인 영향을 미치기 때문에 html5에서는 프레임을 지원하지 않고 iframe 또는 서버에서 생성된 여러 페이지로 구성된 복합 페이지만 지원합니다.

애플릿, bgsound, 깜박임, 선택 윤곽 및 기타 요소 등 일부 브라우저에서만 지원되는 요소입니다. bgsound 및 marquee는 ie에서만 지원되며 html5에서는 폐지됩니다. applet 요소는 embed 요소나 object 요소로 대체될 수 있고, bgsound 요소는 audio 요소로 대체될 수 있으며, marquee는 JavaScript 프로그래밍으로 대체될 수 있습니다.

요약: html5는 몇년 전에 나왔지만 아직 성숙하지 않았고 시기가 맞지 않아 당시에는 인기가 없었습니다. 인터넷이 급속도로 발전하는 이때, 4G 시대도 다가오고 있다. hml5+css3을 배우지 않으면 우리는 나가겠습니다!

위 내용은 HTML4 대비 HTML5의 주요 변경사항과 개선사항을 요약한 것입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

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