HTML 5.1 학습 14가지 새로운 기능 및 응용 예제

이 글은 주로 HTML 5.1의 14가지 새로운 기능과 적용 사례를 소개합니다. 글의 소개는 매우 자세하며 도움이 필요한 친구들은 아래에서 살펴볼 수 있습니다.

서문

우리 모두가 알고 있듯이 HTML5는 인터넷 커뮤니티 전체에 표준을 제공하는 조직인 월드 와이드 웹 컨소시엄(W3C)에 속해 있으며, HTML5의 프로토콜은 다음과 같습니다. 이런 방식으로 형성된 것은 전 세계적으로 사용될 수 있습니다. 2016년 11월, W3C는 2년 만에 처음으로 마이너 업데이트인 HTML 5 표준을 업데이트했습니다. 원래 HTML 5.1에 제안된 많은 기능은 디자인 결함과 브라우저 공급업체의 지원 부족으로 인해 제거되었습니다.

HTML 5.1에는 일부 요소와 기능이 개선되었지만 여전히 소규모 업데이트입니다. 새로운 요소 중 일부에는

,

,

및 가 포함된 조합 태그가 포함되어 있어 개발자가 창의성과 콘텐츠 공간을 더 많이 표현할 수 있습니다.

W3C는 2017년 말에 출시될 예정인 HTML 5.2 초안 개발을 시작했습니다. 우리가 여기서 소개할 내용은 버전 5.1에 도입된 새로운 기능과 개선 사항입니다. 이러한 기능을 활용하기 위해 자바스크립트를 사용할 필요는 없습니다. 모든 브라우저가 이러한 기능을 지원하는 것은 아니므로 프로덕션에서 사용하기 전에 브라우저 지원을 확인하는 것이 좋습니다.

14. 피싱 공격 방지

target ='_blank'를 사용하는 대부분의 사람들은 흥미로운 사실을 모릅니다. 새로 열린 탭이 변경될 수 있습니다 window.opener .일부 피싱 페이지의 위치. 열려 있는 페이지에서 사용자를 대신하여 일부 악성 JavaScript 코드를 실행합니다. 사용자는 자신이 여는 페이지가 안전하다고 믿기 때문에 의심의 여지가 없습니다.

이 문제를 완전히 제거하기 위해 HTML 5.1은 브라우저 컨텍스트를 분리하여 rel="noopener" 속성의 사용을 표준화했습니다. rel="noopener"는 및 태그에 사용할 수 있습니다.

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

13. 그림 제목의 유연한 처리

요소 그림, 차트, 일러스트레이션 등과 같은 시각적 요소의 컨테이너로 자주 사용되는 제목 또는 범례입니다. 이전 버전의 HTML에서는

은 첫 번째 또는 마지막

의 하위 태그로만 사용될 수 있었습니다. HTML5.1에서는 이 제한을 완화하여 이제

컨테이너 내 어디에서나

을 사용할 수 있습니다.

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

12. 맞춤법 검사

맞춤법 검사는 빈 문자열, true 또는 false일 수 있는 값입니다. 속성. 상태를 true로 지정하면 해당 요소의 철자와 문법이 검사됩니다.

element.forceSpellCheck()는 사용자가 해당 요소에 입력을 집중하지 않은 경우에도 사용자 에이전트가 텍스트 요소에 대한 검사된 철자 및 문법 오류를 보고하도록 강제합니다.

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

11. 빈 옵션

새 버전의 HTML에서는 빈 요소. 이는 ,