HTML과 HTML5의 차이점에 대해 이야기 해 봅시다

오늘 누군가가 물었습니다. html5나 html을 자주 사용하시나요? 음... 사실 저는 보통 웹페이지를 작성할 때 둘 사이에 특별한 구별을 두지 않습니다. 차이점에 대해 이야기해야 한다면, 명백한 차이점은 아래에 나열한 것입니다. 더 깊이 이해하자면 HTML5는 마크업 언어의 범위를 훨씬 뛰어넘었습니다. 그 뒤에는 일련의 기술이 있습니다. Xiaobai의 연구는 너무 얕아서 감히 말을 많이하지 않습니다. <.<

1. 문서 유형 선언이 다릅니다

html:

"http://www.w3.org/TR/ xhtml1 /DTD/xhtml1-strict.dtd">

html5: 문서 선언은 비교적 간단하므로 프로그래머가 빠르게 읽고 개발하는 데 도움이 됩니다.

2. 의미 구조 측면에서

html: 구조적 의미 태그가 없습니다(일반 용어로는 읽기 불편하고, 헤드가 어디에 있는지 알려주지 않습니다. 꼬리입니다)

html5: 추가 코드 구조를 명확하게 하고 코드의 가독성을 높이기 위해 많은 시맨틱 태그를 추가합니다.

다음은 HTML5의 일부 의미 체계 태그입니다.

< title>: 짧고 설명적이며 고유함(검색 엔진 순위 향상)

: h1~ h6 계층적 제목은 페이지 정보의 계층적 관계를 생성하는 데 사용됩니다.

: 헤더에는 일반적으로 웹사이트 로고, 기본 탐색, 사이트 전체 링크 및 검색창이 포함됩니다.

페이지 내부에 소개 또는 탐색 콘텐츠 세트를 표시하는 데에도 적합합니다.

: 탐색을 표시합니다. 문서의 중요한 링크 그룹에만 사용됩니다.

: 페이지의 주요 콘텐츠로, 페이지에서 한 번만 사용할 수 있습니다. 웹 애플리케이션인 경우 주요 기능을 둘러싸세요.

: 문서, 페이지, 애플리케이션 또는 독립 컨테이너를 나타냅니다.

: 홈페이지와 같이 유사한 주제를 가진 콘텐츠 그룹입니다. 웹사이트는 소개, 뉴스 항목, 연락처 정보 등을 위한 섹션으로 나눌 수 있습니다.

: 인용문, 사이드바, 기사 링크 모음, 광고, 친숙한 링크, 관련 제품 목록 등을 포함하여 사이드바 열을 지정합니다.

: 바닥글, 상위 항목이 본문인 경우에만 전체 페이지의 바닥글입니다.

: 세부 사항을 지정하고 고지 사항, 주석, 서명 및 저작권을 입력합니다.

문구에만 적용되며 "이용약관" 또는 "개인정보 보호정책"과 같은 긴 법적 문구를 표시하지 마세요.

: 콘텐츠의 중요성을 나타냅니다.

: 콘텐츠의 핵심 사항을 표시합니다(주로 단락 텍스트의 의미를 개선하는 데 사용됨).

: 독자에게 상기시키기 위해 텍스트(노란색)를 강조 표시합니다.

HTML5에서 em은 강조를 나타내는 유일한 요소인 반면 Strong은 중요성을 나타냅니다.

||이 번역은 정말...

: 그림을 만듭니다(기본 여백은 약 40px).

: 그림의 제목은 그림에 포함된 첫 번째 또는 마지막 요소여야 합니다.

출처 자체를 참조할 때만 인용할 수 없습니다.

: 기본적으로 새 줄에 표시되는 인용 텍스트입니다.

: 짧은 따옴표(브라우저 간 문제이므로 사용하지 마세요).

검색 엔진 자동화 도구에 유용한 blockquoto 및 q 요소에 cite 속성(cite 요소 아님!)을 사용할 수 있습니다. cite=“URL”은 소스 주소를 인용합니다.

: 시간을 표시하세요. 날짜/시간 속성은 특정 형식을 따릅니다. 이 속성이 생략되면 텍스트 콘텐츠는 합법적인 날짜 또는 시간 형식이어야 합니다. 더 이상 관련이 없는 시간에는 s 태그가 지정됩니다.

: 약어를 설명하세요. 전체 이름을 제공하려면 title 속성을 사용하세요. 처음 나타나는 경우에만 사용해도 괜찮습니다.

abbr[title]{ border-bottom:1px dotted #000; }

: 정의 옆에 있어야 하며 설명 목록 dl에서 사용할 수 있는 정의 용어 요소입니다. 요소.

: 저자, 관련 인물 또는 단체의 연락처 정보(이메일 주소, 연락처 페이지 링크)입니다.

전체 페이지에 대한 작성자 연락처 정보를 제공하는 경우 일반적으로 페이지 수준 바닥글에 배치됩니다. 문서 또는 문서와 같은 기타 콘텐츠를 포함할 수 없습니다.

: 콘텐츠가 삭제되었습니다.

: 콘텐츠가 추가되었습니다.

블록 레벨과 구문 콘텐츠를 모두 둘러쌀 수 있는 희귀한 요소입니다.

: 마크 코드. 샘플 코드 또는 파일 이름 포함(< > )

: 미리 서식이 지정된 텍스트입니다. 텍스트의 고유한 줄 바꿈 및 공백을 유지합니다.

3. html5의 그리기 기능

1) 캔버스

HTML5 이전에는 웹 프런트 엔드 개발자가 HTML 페이지에 그림을 동적으로 그릴 수 없었습니다. 1) HTM5에는 새로운 <캔버스> 요소는 캔버스와 동일하지만 그림을 그리는 기능은 없습니다. getContext 메소드를 사용하면 페인팅의 속성과 메소드를 제공하는 객체를 반환할 수 있습니다.

• 1단계: DOM 개체 가져오기

• 2단계: Canvas 개체의 getContext() 메서드를 호출하여 CanvasRederingContext2D 개체 가져오기(getContext 메서드에 매개변수 전달: " 2d")

• 3단계: CanvasRederingContext2D를 호출하여 그림 완성

2) SVG: 네트워크용 벡터 기반 그래픽을 정의하는 데 사용되는 확장 가능한 벡터 그래픽.

읽어주신 모든 분들께 감사드리며, 많은 도움이 되셨으면 좋겠습니다.

이 기사는 https://blog.csdn.net/yezi__6/article/details/82881729

추천 튜토리얼: "HTML Tutorial"

에서 복제되었습니다.

위 내용은 HTML과 HTML5의 차이점에 대해 이야기 해 봅시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!