This is the 31st day of my participation in the August More Text Challenge

What is it

HTML5 is the result of a collaboration between the W3C and the WHATWG (Web Hypertext Application Technology Working Group), which works on Web forms and applications, The W3C focused on XHTML 2.0.

In October 2014, HTML5 was finalized, and it is the latest stable version of HTML to date. HTML5 takes HTML from a simple tag used to construct a document to a complete application development platform.

HTML 5 new features

With the rapid development of Internet applications, what changes does HTML5 bring to meet the needs of the modern web?

  • Used for paintingcanvasThe element
  • Used for media playbackvideo 和 audioThe element
  • Better support for local offline storage
  • Semantic tags, for examplearticle,footer,header,nav,section 等
  • New form controls, such ascalendar,date,time,email,url,search 等
  • Full support for CSS3
  • The Web application

The addition of video, audio and canvas can reduce the browser’s need for plug-ins, and realize rich network application services by itself. Users can add and process multimedia and picture content in web pages more easily (generally processed by JavaScript).

Semantic tags and new attributes are added to enrich the document’s data content, making it easier for search engines to index, small screen devices and the visually impaired.

HTMl5 storage, more secure and fast, the data will not be stored on the server, the data is only used for users to request website data, and it can store a large amount of data, without affecting the performance of the website.

HTML template

Documentation declarations don’t need to be long, just a simple
.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document title</title>
  </head>

  <body>Document contents......</body>
</html>
Copy the code
  • <! DOCTYPE html>Declared as an HTML5 document, it tells the browser the correct version of HTML, which helps display web content correctly (case insensitive).
  • <html>, the root element of the HTML page.
  • <head>Is the header element of the page, which contains all the elements you want to include in the HTML pageContent that you do not want to display in an HTML page. These include keywords and page descriptions that you want to appear in search results, CSS styles, character set declarations, and so on.
    • <meta charset="utf-8">Define the web page encoding format asutf-8.
    • <title>The element describes the title of the document, which appears on the browser TAB.
  • <body>The element contains visible page content.

Use
declaration encoding for Chinese web pages; otherwise, garbled characters will appear.

Browser support

Modern browsers support HTML5.

Testhtmltest score:

The browser The official version score
Google Chrome 68 528
Opera 55 528
Microsoft Edge 18 496
Mozilla Firefox 62 497
Apple Safari 11.2 477

Perfect Shiv solution

For the old IE browser, HTML5SHIv is a better solution. Html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be wrapped as parent elements and cannot apply CSS styles.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Rendering HTML 5</title>
    <! -- [if lt IE 9] > < script SRC = "http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js" > < / script > <! [endif]-->
  </head>

  <body>
    <h1>My first article</h1>
    <article>Can I be identified by IE?</article>
  </body>
</html>
Copy the code
  1. The HTML5 Test site is designed to Test browser support for hot new features. The test has a full score of 555. ↩
  2. As of July 15, 2018, overall there is already better support ↩