简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

HTML 5.1 - Detailed explanation of 14 new features and usage sample codes (picture)

黄舟
Release： 2017-03-09 16:03:25
Original
1797 people have browsed it

HTML5 belongs to the World Wide Web Consortium (W3C), an organization that provides standards for the entire Internet community, and the resulting protocols 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

,
, and , giving developers more ways to express their creativity and content. Space.

The W3C has begun developing 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 use 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 a production environment.

14. Prevent phishing attacks

Most people who use target ='_ blank' don't know an interesting fact - newly opened tabs can change window.opener.location to some phishing pages. 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 use of the rel="noopener" attribute by isolating the browser context. rel="noopener" can be used in and tags. 

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

13. Flexible handling of picture titles

The
tag represents the title or legend associated with the
element, usually as a container for visual elements such as pictures, charts, illustrations, etc. In earlier versions of HTML,
could only be used as a child tag of the first or last
. HTML5.1 has relaxed this restriction so that you can now use
anywhere within a
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>
Copy after login

12. Spell check

spellcheck is an enumeration property whose value can be an empty string, true, or 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 grammatical 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>
Copy after login

11. Empty option

The new version of HTML allows you to create an empty , or