HTML5의 새로운 태그와 버려진 태그에 대한 간략한 토론

다음 HTML 4.01 요소는 HTML5에서 삭제되었습니다. 브라우저는 호환성 문제로 이러한 태그를 계속 지원하지만, 역설적으로 기존 브라우저에서는 새 태그를 충분히 지원하지 않습니다.

이러한 요소에는 basefont, big, center, 글꼴, s, Strike, tt, u가 포함됩니다. 이러한 요소는 순전히 페이지 표시용이며 표시되는 내용은 CSS로 완성되어야 합니다.

이러한 요소에는 프레임세트, 프레임 및 노프레임이 포함됩니다. HTML5는 프레임 프레임을 지원하지 않고 iframe 프레임만 지원하거나 페이지에 맞는 여러 페이지로 구성된 서버 측 형식을 사용하고 위의 세 가지 태그를 삭제합니다.

이러한 요소에는 애플릿, bgsound, 깜박임, 선택 윤곽 및 기타 태그가 포함됩니다.

rb 폐지, 약어 대체에 ruby ​​사용 abbr 사용 폐지 dir 대체 ul 사용 isindex 대체 양식과 입력의 조합을 사용하여 목록 대체 pre 사용 xmp 대체 코드 사용 폐지 nextid 대체 guid 사용 일반 텍스트 폐지 text/ plian(형식화되지 않은 본문) MIME 유형 대체

HTML4.01에서는 div가 명확한 정의 없이 다양한 레이아웃 환경에서 널리 사용됩니다. HTML5는 SEO를 위해 div를 의미화하며, 새로 추가된 구조 태그는 다음과 같습니다.

a) 섹션 요소는 장, 머리글, 바닥글 또는 페이지의 다른 부분과 같은 페이지의 콘텐츠 블록을 나타냅니다. h1, h2... 및 기타 요소와 결합하여 문서 구조를 나타낼 수 있습니다. 예: HTML5의 <section>……</section>, HTML4의 <div>……</div>.

b) 기사 요소는 문맥과 관련되지 않은 페이지의 독립적인 콘텐츠를 나타냅니다. 예를 들어 기사.

c)side 요소는 기사 요소의 내용 외에 기사 요소의 내용과 관련된 보조 정보를 나타낸다.

d) 헤더 요소는 페이지의 콘텐츠 블록 또는 전체 페이지의 제목을 나타냅니다.

e) hgroup 요소는 전체 페이지의 제목 또는 페이지의 콘텐츠 블록의 조합을 나타냅니다.

f) 바닥글 요소는 전체 페이지의 각주 또는 페이지 내 콘텐츠 블록을 나타냅니다. 일반적으로 작성자의 이름, 만든 날짜, 작성자의 연락처 정보가 포함됩니다.

g) nav 요소는 페이지의 탐색 링크 부분을 나타냅니다.

h) 그림 요소는 일반적으로 문서의 주요 흐름 콘텐츠에서 독립적인 단위를 나타내는 독립적인 흐름 콘텐츠 부분을 나타냅니다. figcaption 요소를 사용하여 그림 요소 그룹에 캡션을 추가합니다. 예를 들어:

 <Figure> ​<figcaption>중국</figcaption> ​<p>중화인민공화국은 1949년에 탄생했습니다</p></Figure>

HTML4의 일반적인 작성

 <dl> ​<h1>prc</h1> ​<p>중화인민공화국은 1949년에 탄생했습니다</p> ​</dl>

실행 결과:

2.1.미터

임금, 수량, 백분율 등에 사용될 수 있는 특정 범위 내의 값을 나타냅니다. max는 최대값, min은 최소값, value는 현재값을 나타냅니다.

 <미터 최대=100 최소=0 값=60 스타일=너비: 300px;></meter>

js를 사용하여 0부터 100까지 제어할 수 있습니다.

시간. 시간 값을 나타냅니다. datetime 속성은 회의 시간을 강조합니다: <time>2015-10-6</time>

 <time>2015-10-6</time>

우리는 매일 아침 <time>8:30</time>에 수업을 시작합니다. <time datetime=2017-02-14>발렌타인데이</time>에 데이트가 있어요.

이 태그는 시맨틱 태그이므로 브라우저에서 볼 때 특별한 효과는 없습니다. 기본적으로 태그를 설정하지 않은 것과 동일한 효과입니다.

진행률 표시줄을 나타내는 데 사용됩니다.

 <h3>진행</h3><진행 값=75 max=100></progress>

max: 최대값, 완료 시 값

값: 현재 값

이 태그는 선택적 데이터 목록을 정의합니다. 입력 요소와 함께 사용하면 입력 값의 드롭다운 목록을 생성할 수 있습니다.

입력과 결합하면 선택과 입력이 모두 완료될 수 있습니다.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=United States></option> <option value=Japan></option></datalist >

주로 강조 표시하거나 강조 표시해야 하는 텍스트를 사용자에게 시각적으로 표시하는 데 사용됩니다. 검색 키워드는 일반적인 애플리케이션 검색 결과에서 강조 표시됩니다. HTML5<mark></mark>;HTML4 <span></span>.

루비 주석(중국어 병음 또는 문자)을 정의합니다. <ruby> 및 <rt> 태그와 함께 사용됩니다. ruby 요소는 하나 이상의 문자(설명/발음 필요)와 해당 정보를 제공하는 rt 요소, 그리고 브라우저가 Ruby를 지원하지 않을 때 표시할 콘텐츠를 정의하는 선택적 rp 요소로 구성됩니다. 요소.

문자(중국어 음성 표기 또는 문자)의 해석이나 발음을 정의합니다.

Ruby 요소를 지원하지 않는 브라우저에 표시되는 내용을 정의하기 위해 Ruby 주석에 사용됩니다.

부드러운 줄 바꿈을 나타냅니다. br 요소와의 차이점: br 요소는 여기서 줄 바꿈을 해야 함을 나타냅니다. wbr은 브라우저 창이나 상위 요소가 넓을 때(줄 바꿈이 필요하지 않은 경우) 줄 바꿈이 이루어지지 않음을 나타냅니다. 끊어졌지만 너비가 충분하지 않으면 선이 자동으로 여기에서 줄바꿈됩니다.

차트 및 기타 이미지와 같은 그래픽을 정의합니다. <canvas> 요소는 단지 그래픽 컨테이너(캔버스)일 뿐이며, 그래픽을 그리려면 스크립트를 사용해야 합니다.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d'); ;ctx.fillRect(0, 0, 80, 100);</script>

라디오 버튼, 확인란, 버튼과 같은 명령 버튼을 나타냅니다. 명령 요소는 메뉴 요소 내에 있는 경우에만 표시됩니다. 그렇지 않으면 이 요소는 표시되지 않지만 키보드 단축키를 지정하는 데 사용할 수 있습니다.

 <menu> ​<command onclick=alert('Hello World')> ​나를 클릭하세요!</command> ​</menu>

문서의 세부사항이나 문서의 일부를 설명하는 데 사용됩니다. 세부사항에 대한 제목을 정의할 수 있는 요약 태그와 함께 사용할 수 있습니다. 제목이 표시되며, 사용자가 제목을 클릭하면 세부정보가 표시됩니다. 요약은 세부정보의 첫 번째 하위 요소여야 합니다.

옵션 목록을 정의합니다. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다. 데이터 목록과 해당 옵션은 표시되지 않으며 단지 유효한 입력 값 목록일 뿐입니다. 데이터 목록을 바인딩하려면 입력 요소의 목록 속성을 사용하십시오.

스크립트 출력과 같은 다양한 유형의 출력을 정의합니다.

 <form action=form_action.asp method=get name=sumform> ​<output name=sum></output> ​</form>

메뉴 목록을 정의합니다. 양식 컨트롤을 나열하려면 이 레이블을 사용하십시오. 메뉴는 특히 양식 컨트롤에 사용됩니다.

페이지에서 오디오 및 비디오를 재생해야 하는 경우 우리가 자주 사용하는 방법은 다음과 같습니다.

a), 삽입

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' allowedFullScreen='true' 품질='높음' 너비='480' 높이='400' 정렬=' 중간'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b) 플래시 플레이어를 사용하세요

일부 타사 플러그인, flowplayer602 등

HTML5 멀티미디어 구성요소는 비디오(video) 구성요소와 오디오(audio) 구성요소를 의미합니다. HTML5 멀티미디어 구성 요소는 Flash Player와 같은 타사 플러그인의 도움 없이 웹 페이지에 직접 멀티미디어 구성 요소를 포함할 수 있습니다. 비디오에 대한 기본 지원을 제공하는 브라우저의 새로운 기능을 통해 웹 개발자는 외부 플러그인의 가용성에 의존하지 않고도 웹 사이트에 비디오 구성 요소를 더 쉽게 추가할 수 있습니다. 현재 Apple이 iPhone 및 iPad에서 사용하는 Flash 기술의 한계로 인해 HTML5 멀티미디어 구성 요소의 기능이 특히 중요합니다.

비디오, 영화 재생에 사용됩니다.

라벨의 기본 공식은 다음과 같습니다.

 <비디오 너비=800 높이=600 컨트롤=컨트롤 포스터=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> 현재 브라우저는 직접 비디오 재생을 지원하지 않습니다. 비디오를 다운로드하려면 여기를 클릭하십시오. <a href=a.mp4>다운로드 비디오</a></video>

소스는 여러 유형이 있을 수 있는 비디오 소스입니다. 하나가 실패하면 다음 유형이 주로 선택됩니다.

Ogg = Theora 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 Ogg 파일 MPEG4 = H.264 비디오 인코딩 및 AAC 오디오 인코딩이 포함된 MPEG 4 파일 WebM = VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일

알아채다:

 <video src=img/a.mp4controls=controls Poster=img/1.jpg>브라우저가 너무 오래되었습니다. 업그레이드하세요. 비디오를 다운로드하세요 <a href=#>주소</a></video>

대부분의 HTML5 태그의 innerHTML 콘텐츠는 브라우저가 태그를 지원하지 않을 때 표시되는 콘텐츠입니다.

이벤트 바인딩과 청취의 차이점:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>이벤트 바인딩과 모니터링의 차이점</title> </head>​ <body> <button id=btnA>버튼 A </button> <button id=btnB>버튼 B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { 경고(클릭함); } btnA.onclick = function() { 경고(다시 클릭함) } btnB.addEventListener(클릭, function(event) { 경고(클릭함) },false); btnB.addEventListener(click,function(event){ 경고(다시 클릭했습니다) },false) </script> </body>​</html>

on 이벤트 이름을 사용하여 이벤트를 바인딩한 후 바인딩은 이전에 바인딩된 이벤트를 덮어씁니다. 즉, 마지막으로 바인딩된 이벤트가 적용됩니다.

addEventListener를 사용하여 이벤트를 바인딩하면 덮어쓰지 않으며 여러 개의 동일한 이벤트가 동시에 하나의 요소에 바인딩될 수 있습니다.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>비디오 태그</title> </head> <body> <video id=videoIce width=800 height=600 컨트롤=포스터 제어 =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> 현재 브라우저는 직접 비디오 재생을 지원하지 않습니다. 비디오를 다운로드하려면 여기를 클릭하십시오: <a href=content/a.mp4>비디오 다운로드</a> </video> <h2> <button onclick=play()>재생</button> <button onclick=pause()>일시중지</button> <span id=msg></span> </h2> <스크립트 유형 =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play() }​ function stop() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body>​</html>

오디오는 소리와 음악을 재생하는 기능을 실현할 수 있습니다.

 <audio src=http://baidu/demo/test.mp3 컨트롤 >브라우저가 오디오 요소를 지원하지 않습니다</autio><audio src=content/a.mp3controls=controls autoplay=autoplay></audio>

오디오 태그의 많은 속성은 비디오의 속성과 동일합니다.

autoplay: true|false, true인 경우 오디오가 준비되는 즉시 재생됩니다. 컨트롤: true|false true인 경우 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다. end: 숫자 값은 오디오 스트림에서 플레이어가 재생을 중지하는 위치를 정의합니다. 기본적으로 사운드는 끝까지 재생됩니다. loopend: 숫자 값은 오디오 스트림에서 루프 재생이 중지되는 위치를 정의합니다. 기본값은 end 속성의 값입니다. loopstart: 숫자 값은 오디오 스트림에서 루프 재생의 시작 위치를 정의합니다. 기본값은 시작 속성의 값입니다. playcount: 숫자 값은 오디오 클립이 재생된 횟수를 정의합니다. 기본값은 1입니다. src: url 재생 중인 오디오의 URL입니다. start : 숫자 값은 플레이어가 재생을 시작하는 오디오 스트림의 위치를 ​​정의합니다. 기본적으로 사운드는 처음에 재생됩니다.

소스 요소를 멀티미디어 요소의 하위 태그로 사용하는 예:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

브라우저는 소스 요소를 사용하여 재생할 수 있는 파일 형식을 찾을 때까지 목록에서 순차적으로 검색합니다. 일단 발견되면 파일을 재생하고 뒤따르는 다른 요소를 무시합니다.

오디오의 API는 기본적으로 비디오의 API와 동일합니다. 다음은 볼륨을 사용자 정의하는 예입니다.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>오디오 태그</title> </head> <body> <h2>오디오 태그</h2> <audio src=content/ fcml.mp3controls=controls autoplay=autoplay id=mp3> <marquee><h2>브라우저를 바꿔보세요. 너무 오래되었습니다.</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01 } < /스크립트> </body></html>

볼륨은 0-1 사이입니다.

콘텐츠(다양한 미디어 포함)를 삽입하는 데 사용됩니다. 형식은 Midi, Wav, AIFF, AU, MP3, 플래시 등이 될 수 있습니다.

예: <embed src=flash.swf /> HTML4의 코드 예 <object data=flash.swf type=application/x-shockwave-flash><object>

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.