집 > 기사 > 웹 프론트엔드 > HTML 5의 새로운 기능을 사용하는 방법

HTML 5의 새로운 기능을 사용하는 방법

php中世界最好的语言원래의: 2018-01-18 09:51:022284검색

이번에는 HTML 5의 새로운 기능을 사용하는 방법과 HTML 5의 새로운 기능을 사용할 때 주의사항이 무엇인지 알려드리겠습니다. 실제 사례는 다음과 같습니다. 살펴보겠습니다.

머리말

우리 모두 알고 있듯이 HTML5는 W3C(World Wide Web Consortium)에 속해 있으며, 이 조직은 전체 인터넷 커뮤니티에 대한 표준을 제공하며, 이렇게 형성된 프로토콜은 전 세계에서 사용할 수 있습니다. 2016년 11월, W3C는 2년 만에 처음으로 마이너 업데이트인 HTML 5 표준을 업데이트했습니다. 원래 HTML 5.1에 제안된 많은 기능은 디자인 결함과 브라우저 공급업체의 지원 부족으로 인해 제거되었습니다.

HTML 5.1에 일부 요소와 기능이 개선되었지만 여전히 소규모 업데이트입니다. 새로운 요소 중 일부에는 a38fd2622755924ad24c0fc5f0b4d412, a5e9d42b316b6d06c62de0deffc36939, 631fb227578dfffda61e1fa4d04b7d25 및 9b66618b56ad8833e792d2ba7c315ba9가 포함된 조합 태그가 포함되어 있어 개발자가 창의성과 콘텐츠 공간을 더 많이 표현할 수 있습니다.

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

피싱 공격 방지

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

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

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

그림 제목의 유연한 처리

614eb9dc63b3fb809437a716aa228d24 태그는 일반적으로 그림, 차트, 일러스트레이션 등과 같은 시각적 요소에 대한 컨테이너로 a7e92aa379a95c24a947f9b436d5f4f4 요소와 관련된 제목 또는 범례를 나타냅니다. 이전 버전의 HTML에서는 614eb9dc63b3fb809437a716aa228d24은 첫 번째 또는 마지막 a7e92aa379a95c24a947f9b436d5f4f4의 하위 태그로만 사용될 수 있었습니다. HTML5.1에서는 이 제한을 완화하여 이제 a7e92aa379a95c24a947f9b436d5f4f4 컨테이너 내 어디에서나 614eb9dc63b3fb809437a716aa228d24을 사용할 수 있습니다.

<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>

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

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

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

새 버전의 HTML에서는 빈 5a07473c87748fb1bf73f23d45547ab8 요소를 만들 수 있습니다. 이는 5b7a15bed8615d1b843806256bebea72, fc86e7b705049fc9d4fccc89a2e80ee3 또는 221f08282418e2996498697df914ce4e 요소의 하위 요소일 수 있습니다. 사용자 친화적인 양식을 디자인할 때 이 기능이 유용할 수 있습니다.

Frame용으로 개발된 부울 변수 allowedfullscreen 속성을 사용하면 requestFullscreen() 메서드를 사용하여 콘텐츠를 전체 화면으로 표시할 수 있는지 여부를 제어할 수 있습니다. 예를 들어 YouTube 플레이어를 삽입하는 iframe을 사용해 보겠습니다. 플레이어가 비디오를 전체 화면으로 표시할 수 있도록 하려면 allowedfullscreen 속성을 설정해야 합니다.

<article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

HTML5.1을 사용하면 머리글과 바닥글을 다른 머리글 안에 삽입할 수 있습니다. 단락 콘텐츠 내에 머리글이나 바닥글이 포함된 경우 머리글 요소에 머리글이나 바닥글을 추가할 수 있습니다. 이 기능은 의미 있는 단락 요소에 2f8332c8dcfd5c7dec030a070bf652c3 및 23c3de37f2f9ebcb477c4a90aac6fffd과 같은 상세 태그를 추가하려는 경우 유용합니다.

아래 코드에서 23c3de37f2f9ebcb477c4a90aac6fffd 태그에는 15221ee8cba27fc1d7a26c47a001eb9b 태그가 포함되어 있습니다.

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!