html과 html5의 차이점은 무엇입니까-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

html과 html5의 차이점은 무엇입니까

醉折花枝作酒筹

Apr 07, 2021 pm 01:46 PM

htmlhtml5

차이점: 1. 문서 선언 측면에서 html 코드는 매우 길고 기억하기 어려운 반면, html5의 선언은 "" 구문을 사용하여 비교적 간단합니다. 2. HTML에는 구조적 의미 태그가 없지만 HTML5에는 새로운 의미 태그가 많이 추가되었습니다. 3. HTML5는 그릴 수 있지만 html은 그릴 수 없습니다.

html과 html5의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

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

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<!DOCTYPE html>

2. 의미 구조상

<code>html: 구조적 의미 태그가 없습니다(일반 용어로는 읽기 불편하고 머리가 어디에 있는지 알려주지 않습니다. 꼬리)<code>html:没有结构语义化的标签（通俗来讲就是不方便阅读，没有告诉你哪里是头，哪里是尾巴）

<code>html5:添加了许多具有语义化的标签，

使代码结构清晰，提高了代码的可读性。

下面是html5中的一些语义化标签：

<code>：简短、描述性、唯一（提升搜索引擎排名）

<code><hn></hn>：h1~h6分级标题，用于创建页面信息的层级关系。

<code><header></header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

也适合对页面内部一组介绍性或导航性内容进行标记。

<code><nav></nav>：标记导航，仅对文档中重要的链接群使用。

<code><main></main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<code><article></article>：表示文档、页面、应用或一个独立的容器.

<code><section></section>：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。

<code><aside></aside>：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。

<code><footer></footer>：页脚，只有当父级是body时，才是整个页面的页脚。

<code><small></small>：指定细则，输入免责声明、注解、署名、版权。只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。

<code><strong></strong>：表示内容重要性。

<code><em></em>：标记内容着重点（大量用于提升段落文本语义）。

在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。

<code><b></b>：出于实用目的提醒读者的一块文字，不传达任何额外的重要性

<code><time></time>：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。不再相关的时间用s标签。

<code><abbr></abbr>：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

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

<code><dfn></dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

<code><address></address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。

<code><code>：标记代码。包含示例代码或者文件名（）

<code><pre class="brush:php;toolbar:false"></pre>：预格式化文本。保留文本固有的换行和空格。

3.html5的绘图功能

1）canvas

在HTML5以前，web前端开发者无法在HTML页面上动态地绘制图片。HTM5新增了一个<code><canvas></canvas>

html5: 시맨틱 태그를 많이 추가하고,

코드 구조를 명확하게 만들어 코드의 가독성을 높입니다.

다음은 html5의 일부 의미 태그입니다.

<code>: 짧고 설명적이며 고유함(검색 엔진 순위 향상) 🎜🎜<code>: h1~h6 계층적 제목, 페이지 정보의 계층적 관계를 생성하는 데 사용됩니다. 🎜🎜<code><header></header>: 헤더에는 일반적으로 웹사이트 로고, 기본 탐색, 사이트 전체 링크 및 검색창이 포함됩니다. 🎜🎜페이지 내부에 소개 또는 탐색 콘텐츠 세트를 표시하는 데에도 적합합니다. 🎜🎜<code><nav></nav>: 탐색을 표시합니다. 문서의 중요한 링크 그룹에만 사용됩니다. 🎜🎜<code><main></main>: 페이지의 주요 콘텐츠로, 페이지에서 한 번만 사용할 수 있습니다. 웹 애플리케이션인 경우 주요 기능을 둘러싸세요. 🎜🎜<code><article></article>: 문서, 페이지, 애플리케이션 또는 독립 컨테이너를 나타냅니다. 🎜🎜<code><section></section>: 소개, 뉴스 항목, 연락처 정보 등의 섹션으로 나눌 수 있는 웹 사이트 홈페이지와 같이 유사한 주제를 가진 콘텐츠 그룹입니다. 🎜🎜<code><aside></aside>: 인용문, 사이드바, 기사 링크 집합, 광고, 친숙한 링크, 관련 제품 목록 등을 포함하여 사이드바 열을 지정합니다. 🎜🎜<code><footer></footer>: 바닥글, 상위 항목이 본문인 경우에만 전체 페이지의 바닥글입니다. 🎜🎜<code><small></small>: 세부정보를 지정하고 면책조항, 주석, 서명, 저작권을 입력합니다. "이용약관" 또는 "개인정보 보호정책"과 같은 긴 법적 설명이 아닌 짧은 문구에만 사용하세요. 🎜🎜<code><strong></strong>: 콘텐츠의 중요성을 나타냅니다. 🎜🎜<code><em></em>: 콘텐츠의 핵심 사항을 표시합니다(주로 단락 텍스트의 의미를 개선하는 데 사용됨). 🎜🎜🎜HTML5에서 em은 강조를 나타내는 유일한 요소인 반면 Strong은 중요성을 나타냅니다. 🎜🎜🎜<code><b></b>: 독자에게 실용적인 목적을 상기시키고 추가적인 중요성을 전달하지 않는 텍스트 블록🎜🎜<code><time> time> ;</time>: 시간을 표시합니다. 날짜/시간 속성은 특정 형식을 따릅니다. 이 속성이 생략되면 텍스트 콘텐츠는 합법적인 날짜 또는 시간 형식이어야 합니다. 더 이상 관련이 없는 시간에는 s 태그가 지정됩니다. 🎜🎜<code><abbr></abbr>: 약어에 대한 설명입니다. 전체 이름을 제공하려면 title 속성을 사용하세요. 처음 나타나는 경우에만 사용해도 괜찮습니다. 🎜rrreee🎜<code><dfn></dfn>: 정의 용어 요소. 정의 바로 옆에 있어야 하며 설명 목록 dl 요소에 사용할 수 있습니다. 🎜🎜<code><address></address>: 저자, 관심 있는 사람 또는 단체의 연락처 정보(이메일 주소, 연락처 페이지 링크)입니다. 전체 페이지에 대한 작성자 연락처 정보를 제공하는 경우 일반적으로 페이지 수준 바닥글에 배치됩니다. 문서나 문서와 같은 기타 콘텐츠를 포함할 수 없습니다. 🎜🎜<code><code>: 마크 코드. 샘플 코드 또는 파일 이름 포함( ) 🎜🎜<code><pre class="brush:php;toolbar:false"></pre>: 미리 서식이 지정된 텍스트입니다. 텍스트의 고유한 줄 바꿈 및 공백을 유지합니다. 🎜🎜🎜3. HTML5 그리기 기능 🎜🎜🎜1) 캔버스 🎜🎜HTML5 이전에는 웹 프런트 엔드 개발자가 HTML 페이지에 그림을 동적으로 그릴 수 없었습니다. HTM5는 캔버스와 동일한 새로운 <code><canvas></canvas> 요소를 추가합니다. 그러나 그림을 그리는 기능은 없으며, 그림을 완성하려면 스크립트를 사용해야 합니다. 실제 그리기 작업. getContext 메소드를 사용하면 페인팅의 속성과 메소드를 제공하는 객체를 반환할 수 있습니다. 🎜🎜• 1단계:

위 내용은 html과 html5의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

반응 및 프론트 엔드 : 대화 형 경험 구축Apr 11, 2025 am 12:02 AM

React는 대화식 프론트 엔드 경험을 구축하는 데 선호되는 도구입니다. 1) 반응은 구성 요소화 및 가상 DOM을 통해 UI 개발을 단순화합니다. 2) 구성 요소는 기능 구성 요소 및 클래스 구성 요소로 나뉩니다. 기능 구성 요소는 더 간단하고 클래스 구성 요소는 더 많은 수명주기 방법을 제공합니다. 3) RECT의 작동 원리는 가상 DOM 및 조정 알고리즘에 의존하여 성능을 향상시킵니다. 4) 주 경영진은 usestate 또는 this.state를 사용하며 ComponentDidMount와 같은 수명주기 방법은 특정 논리에 사용됩니다. 5) 기본 사용에는 구성 요소 생성 및 상태 관리가 포함되며 고급 사용량은 사용자 정의 후크 및 성능 최적화가 포함됩니다. 6) 일반적인 오류에는 부적절한 상태 업데이트 및 성능 문제, 디버깅 기술은 ReactDevTools 사용 및 우수

반응 및 프론트 엔드 스택 : 도구 및 기술Apr 10, 2025 am 09:34 AM

React는 핵심 구성 요소 및 상태 관리 기능을 갖춘 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1) 구성 요소화 및 상태 관리를 통해 UI 개발을 단순화합니다. 2) 작업 원칙에는 화해 및 렌더링이 포함되며 최적화는 React.Memo 및 Usememo를 통해 구현할 수 있습니다. 3) 기본 사용법은 구성 요소를 작성하고 렌더링하는 것입니다. 고급 사용법에는 후크 및 컨텍스트를 사용하는 것이 포함됩니다. 4) 부적절한 상태 업데이트와 같은 일반적인 오류는 ReactDevTools를 사용하여 디버그 할 수 있습니다. 5) 성능 최적화에는 React.Memo, 가상화 목록 및 코드플릿을 사용하는 것이 포함되며 코드를 읽을 수 있고 유지 관리 가능하게 유지하는 것이 가장 좋습니다.

HTML에서 React의 역할 : 사용자 경험 향상Apr 09, 2025 am 12:11 AM

React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.

반응 구성 요소 : HTML에서 재사용 가능한 요소 생성Apr 08, 2025 pm 05:53 PM

반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.