How to use the new features of HTML 5

This time I will show you how to use the new features of HTML 5. What are the precautions for using the new features of HTML 5? Here are practical cases, let’s take a look.

Preface

As we all know, HTML5 belongs to the World Wide Web Consortium (W3C). This organization provides standards for the entire Internet community, and the protocols formed in this way can be used around the world. In November 2016, the W3C updated the long-standing HTML 5 standard, its first minor update in 2 years. Many of the features originally proposed for HTML 5.1 were removed due to design flaws and lack of support from browser vendors.

Although there are some elements and feature improvements that have been brought into HTML 5.1, it is still a small update. Some of the new elements include combination tags, which now include a38fd2622755924ad24c0fc5f0b4d412, a5e9d42b316b6d06c62de0deffc36939, 631fb227578dfffda61e1fa4d04b7d25 and 9b66618b56ad8833e792d2ba7c315ba9, giving developers more ways to express their creativity and content. Space.

The W3C has also started working on the HTML 5.2 draft, which is expected to be released by the end of 2017. What we are here to present are the new features and improvements introduced in version 5.1. You don't need to touch javascript to take advantage of these features. Not all browsers support these features, so it's a good idea to check browser support before using them in production.

Prevent phishing attacks

Most people who use target ='_ blank' don't know an interesting fact - newly opened tabs can be changedwindow.opener.location to some phishing page. It will execute some malicious JavaScript code on your behalf on the open page. Because users trust that the page they open is safe, they have no doubts.

To completely eliminate this problem, HTML 5.1 has standardized the usage of the rel="noopener" attribute by isolating the browser context. rel="noopener" can be used in 3499910bf9dac5ae3c52d5ede7383485 and 03fc64e1e502d5ba947b3a9af06d2d2a tags.

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

Flexible processing of picture titles

614eb9dc63b3fb809437a716aa228d24 tag represents the title or legend associated with the 24203f2f45e6606542ba09fd2181843a element, usually as a container for visual elements such as pictures, charts, illustrations, etc. In earlier versions of HTML, 614eb9dc63b3fb809437a716aa228d24 could only be used as a child tag of the first or last 24203f2f45e6606542ba09fd2181843a. HTML5.1 has relaxed this restriction so that you can now use 614eb9dc63b3fb809437a716aa228d24 anywhere within a 24203f2f45e6606542ba09fd2181843a container.

<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 is an enumeration property whose values ​​can be empty string, true and false. Specifying its status as true means that the element will be checked for spelling and grammar.

element.forceSpellCheck() will force user agents to report checked spelling and grammar errors on text elements, even if the user never focused input on that element.

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

The new version of HTML allows you to create an empty 5a07473c87748fb1bf73f23d45547ab8 element. It can be a child element of an 5b7a15bed8615d1b843806256bebea72, fc86e7b705049fc9d4fccc89a2e80ee3 or 221f08282418e2996498697df914ce4e element. You may find this feature helpful when designing user-friendly forms.

The allowfullscreen attribute, a Boolean variable developed for Frame, allows you to control whether content can be displayed in full screen by using the requestFullscreen() method. For example, let's use an iframe embedded in a YouTube player. The allowfullscreen attribute needs to be set to allow the player to display the video in full screen.

<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 allows you to embed header and footer inside another header. You can add a header or footer to the header element if they contain themselves within paragraph content. This feature becomes useful if you want to add elaboration tags such as 2f8332c8dcfd5c7dec030a070bf652c3 and 23c3de37f2f9ebcb477c4a90aac6fffd to semantic paragraph elements.

In the following code, the 23c3de37f2f9ebcb477c4a90aac6fffd tag contains a 1aa9e5d373740b65a0cc8f0a02150c53 tag, which has an 15221ee8cba27fc1d7a26c47a001eb9b tag that itself contains a 1aa9e5d373740b65a0cc8f0a02150c53 tag.

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the img tag of HTML images

What are the name, id and class in HTML? What’s the difference?

#How to achieve the slash header effect in the table

The above is the detailed content of How to use the new features of HTML 5. For more information, please follow other related articles on the PHP Chinese website!