html5와 기존 html의 차이점은 무엇입니까? 새로운 요소와 폐지된 요소는 무엇입니까?

이 글은 HTML5와 기존 HTML의 차이점을 주로 다루며, HTML5의 새로운 요소와 폐지된 요소도 참고할 수 있기를 바랍니다.

1. HTML5 구문 변경

이 지식 항목에서 언급된 변경 사항은 주로 다음을 포함하는 HTML4를 기반으로 정의된 변경 사항을 의미합니다. :

1. HTML5의 파일 확장자(.html 또는 .htm)와 콘텐츠 유형(text/html)은 변경되지 않습니다.
2. HTML5에서는 버전 선언이 의도적으로 사용되지 않습니다. 하나의 문서가 모든 HTML 버전에 적용됩니다.
3. HTML5부터는 파일의 문자 인코딩에 UTF-8을 사용하는 것이 좋습니다.
4. HTML5는 이전 HTML 버전과의 호환성을 극대화합니다.​
호환성을 보장하기 위해서는 요소부터 시작해야 합니다. HTML5에서는 요소의 태그를 생략할 수 있습니다. 구체적으로 요소의 태그는 "종료 태그를 쓸 수 없다", "종료 태그를 생략할 수 있다", "시작 태그와 종료 태그를 생략할 수 있다"의 3가지 유형으로 구분된다.

종료 태그 요소는 쓸 수 없습니다: Area, Base, br, col....
종료 태그는 생략 가능: li, dt, dd, p, rt.. .. ..
모든 ​​시작 태그와 종료 태그는 생략 가능: html, head, body....

2. 🎜#

section 요소는 장, 머리글, 바닥글 또는 페이지의 다른 부분과 같은 페이지의 콘텐츠 블록을 나타냅니다.

article 요소는 다음의 콘텐츠 블록을 나타냅니다. 페이지 블로그의 기사나 신문의 기사와 같이 맥락과 관련이 없는 독립적인 콘텐츠
side 요소는 기사 요소의 콘텐츠와 관련된 보조 정보를 나타냅니다. 기사 요소의 콘텐츠 # 🎜🎜#header 요소는 페이지의 콘텐츠 블록 제목 또는 전체 페이지를 나타냅니다.
hgroup 요소는 전체 페이지의 제목 또는 콘텐츠 블록을 결합하는 데 사용됩니다. page;
footer 요소는 전체 페이지 또는 페이지 콘텐츠 블록의 바닥글을 나타냅니다. 일반적으로 여기에는 작성자의 이름, 생성 날짜 및 작성자의 연락처 정보가 포함됩니다.
nav 요소는 페이지의 탐색 링크 부분을 나타냅니다. 일반적으로 문서를 나타내는 독립적인 흐름 콘텐츠 기본 흐름 콘텐츠의 독립적인 단위로 figcaption 요소를 사용하여 그림 요소 그룹


2 및 기타 새 요소 #🎜에 제목을 추가합니다. 🎜#
audio 요소는 오디오를 정의합니다. 예를 들어 음악 또는 기타 오디오 스트림

embed 요소는 다양한 멀티미디어를 삽입하는 데 사용되며 형식은 Midi, Wav, AU, MP3 등이 될 수 있습니다.

mark 요소는 강조 표시되거나 강조 표시된 텍스트가 필요한 사용자에게 시각적으로 표시하는 데 사용됩니다. 일반적인 응용 프로그램은 검색 결과에서 사용자에게 검색 키워드를 강조 표시하는 것입니다.

progress 요소는 실행 중인 프로세스를 나타냅니다.

ruby 요소는 루비 주석(중국어 음성 또는 문자)을 나타냅니다.
rt 요소는 문자(중국어 음성 또는 문자)의 해석이나 발음을 나타냅니다.
rp 요소는 루비 주석에서 다음을 정의하는 데 사용됩니다. Ruby 요소를 지원하지 않는 브라우저에서 표시되는 콘텐츠입니다.
wbr 요소는 부드러운 줄 바꿈을 나타내며 너비가 충분하지 않을 경우 여기에 적극적으로 래핑됩니다.
canvas 요소는 차트 및 기타 이미지와 같은 그래픽을 나타냅니다. 라디오 버튼, 체크박스 또는 버튼과 같은 명령 버튼
details 요소는 사용자가 필요로 하고 얻을 수 있는 세부 정보를 나타냅니다.
datagrid 요소는 다음과 같은 형식으로 표시되는 선택적 데이터 목록을 나타냅니다. 트리 목록
keygen 요소는 생성된 키를 나타냅니다.
The Output 요소는 스크립트의 출력과 같은 다양한 유형의 출력을 나타냅니다.
The source 요소는 미디어 요소에 대한 미디어 리소스를 정의합니다(예: < ;video> 및

숫자 유형은 숫자 값을 입력해야 하는 텍스트 입력 상자를 나타냅니다#🎜 🎜#range 유형은 특정 범위 내의 숫자 값을 입력해야 하는 텍스트 입력 상자를 나타냅니다

HTML5에는 날짜와 시간을 선택하기 위한 여러 개의 새로운 입력 텍스트 상자가 있습니다:

date - 날짜, 월 선택 , 연도

month - 월, 연도 선택
week - —주 및 연도 선택
time —시간(시간 및 분) 선택
datetime —시간, 일, 월, 연도(UTC 시간)

datetime.local - 시간, 일, 월, 연도 선택(현지 시간)

3. 요소 폐지#🎜 🎜#


1. CSS 대체 요소
는 basefont, big, center,font, s, Strike, tt 및 u와 같은 요소에 해당합니다. 기능은 순전히 화면 표시 서비스용이며 HTML5에서는 CSS 스타일 시트에 넣고 균일하게 편집하므로 이러한 요소는 폐지됩니다

2. 더 이상 사용됨frameset 요소, 프레임 요소 및 noframes 요소의 경우 프레임 프레임워크의 존재로 인해 웹페이지 사용성에 부정적인 영향을 미침 HTML5에서는 프레임 프레임워크가 더 이상 지원되지 않고 iframe 프레임워크만 지원됩니다. , 또는 서버에서 생성된 여러 페이지로 구성된 복합 페이지를 사용하며, 위의 세 가지 요소는 동시에 폐지됩니다.

3. 일부 브라우저에서만 지원되는 요소

애플릿, bgsound, 깜박임, marquee 등과 같은 요소의 경우 일부 브라우저에서만 이러한 요소를 지원하므로, 특히 Internet Explorer에서만 지원되는 bgsound 요소와 marquee 요소는 HTML 5에서 폐지되었습니다. Applet 요소는 ernedd 요소 또는 object 요소로 대체될 수 있고, bgsound 요소는 audio 요소로 대체될 수 있으며, marquee는 JavaScript 프로그래밍으로 대체될 수 있습니다.

4 기타 폐지된 요소:
rb 요소를 폐지합니다. Ruby 요소로 대체
acronym 요소를 폐지하고, abbr 요소를 사용하여
를 대체하여 dir 요소를 폐지하고, ul 요소를 사용하여
를 대체하여 isindex 요소를 폐지하고, form 요소를 input 요소와 결합하여 대체합니다.
목록 요소를 폐지하려면 pre 요소를 사용하여
xmp 요소를 폐지하려면 code 요소를 사용하여
Nextid 요소를 폐지하려면 GUIDS를 대신 사용하고
일반 텍스트 요소를 폐지하고 대신 "text/plian" MIME 유형을 사용하세요

4가지. 새로운 속성 및 폐지된 속성

1. 새로운 속성
1. 양식 관련 속성

New autofocus 속성을 사용하면 속성을 지정하여 요소가 자동으로 포커스를 얻을 수 있습니다. 사용자에게 입력할 수 있는 내용과 사용자가 입력할 수 있는 내용을 묻는 메시지가 추가됩니다.
새로운 양식 속성이 추가되어 해당 속성이 어떤 양식에 속하는지 선언한 다음 양식 내가 아닌 페이지의 아무 곳에나 배치할 수 있습니다. 사용자가 제출할 때 확인되며 요소에 입력 콘텐츠가 있어야 함을 나타내는 속성
... ..
2. 링크 관련 속성
미디어 유형을 지정하는 미디어 속성을 추가합니다. 대상 URL이 최적화된 장치이며 href 속성이 존재할 때만 사용할 수 있습니다.
hreflang 속성과 rel 속성을 추가하여 a 요소와 link 요소가 일관성을 유지합니다.
...
3. 기타 속성
목록이 역순으로 표시되도록 지정하는 속성
스크립트가 비동기적으로 실행되는지 여부를 정의하는 async 속성을 추가합니다.... ..


2. 속성

CSS 스타일 시트로 대체할 수 있는 모든 속성은 폐지됩니다.
대상, 프로필, 버전 등과 같은 중복 속성은 폐지됩니다.

.....​​​​

5 . 전역 속성

HTML5에는 "전역 속성"이라는 새로운 개념이 있습니다. 소위 전역 속성은 모든 요소에 사용할 수 있는 속성을 의미합니다.

1. 이 속성은 사용자를 허용합니다. 요소의 내용을 편집할 때 마우스 포커스를 얻을 수 있습니다. 속성은 true 또는 false로 지정할 수 있습니다. 또한 이 속성은 true인 경우 편집이 허용됩니다. false일 경우 편집이 허용되지 않으며, 지정하지 않으면 상속으로 결정됩니다.
2. designMode 속성

이 속성은 "on"과 "off" 두 가지 속성이 있습니다. ". 속성이 "켜짐"이면 편집할 수 있고, "꺼짐"이면 편집할 수 없습니다.

3. 숨겨진 속성
모든 요소는 입력 요소의 숨겨진 요소와 유사한 숨겨진 속성을 사용할 수 있습니다. 해당 기능은 요소를 렌더링하지 않고 요소를 보이지 않게 만드는 것입니다. 속성 값은 부울 값입니다. true이면 표시되지 않고 false이면 표시됩니다.
4. 맞춤법 검사 속성
이 속성은 입력 요소(type=text)와 텍스트 영역의 두 텍스트 입력 상자에 대해 HTML 5에서 제공하는 새로운 속성입니다. 주로 사용자 입력 내용의 철자와 문법을 검사합니다. 속성값은 Boolean 값으로 작성 시 속성값이 true인지 false인지 명확히 명시해야 합니다.
<br> <input type=text 맞춤법 검사=false><br> <!—다음 두 가지 쓰기 방법이 잘못되었습니다—><br> <textarea 맞춤법 검사 ><br></p><p>위 내용은 html5와 기존 html의 차이점은 무엇입니까? 새로운 요소와 폐지된 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">ruby</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">date</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">异步</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">canvas</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">li</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="웹팩으로 패키징한 만료된 해시 파일을 서버에서 정리하는 방법" href="https://m.php.cn/ko/faq/410310.html">웹팩으로 패키징한 만료된 해시 파일을 서버에서 정리하는 방법</a></span><span>다음 기사：<a class="dBlack" title="웹팩으로 패키징한 만료된 해시 파일을 서버에서 정리하는 방법" href="https://m.php.cn/ko/faq/410402.html">웹팩으로 패키징한 만료된 해시 파일을 서버에서 정리하는 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>