Home Web Front-end HTML Tutorial What is html5? What are the new features of html5? (Summary with code)

What is html5? What are the new features of html5? (Summary with code)

Oct 17, 2018 pm 03:20 PM
html5 new features

This article mainly introduces what HTML5 is and summarizes html5’s new features. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is html5? What are the new features of html5? (Summary with code)

First of all, everyone should know what HTML is, right?

HTML is the abbreviation of Hyper Text Markup Language, "Hypertext Markup Language", which is the standard language for making web pages. Because web pages contain not only ordinary text but also hypertext, it is called a hypertext description language.

SoWhat is HTML5?

The fifth major revision of Hypertext Markup Language (HTML), an application under Standard Universal Markup Language, the core language of the World Wide Web. We will call this revised standard html5.

html5 is a set of technology combinations including HTML, CSS and JavaScript, which enhances the performance of Web pages. Secondly, web application functions such as local database are added.

What is html5? What are the new features of html5? (Summary with code)

Now we will summarize and introduce the new features of html5 based on simple examples.

1. Painting canvas

HTML5 tag is used to draw images (via script, usually JavaScript).

2. Video and audio elements for media playback

HTML5 DOM provides methods, properties and events for the

These methods, properties, and events allow you to use JavaScript to manipulate the

3. Local offline storage localStorage long-term storage of data, the data will not be lost after the browser is closed

localStorage: data storage without time limit

4. SessionStorage data will be automatically deleted after the browser is closed

sessionStorage: Data storage for a session

5. Content elements with better semantics, For example, article, footer, header, nav, section

1.

tag defines external content.

2.

tag defines the header of a document or a part of a document. The
element should serve as a container for introductory content or navigation links.

3.Nav element can be used as a link group for page navigation. There are many links in the navigation link group. Clicking on each link can link to other pages or other parts of the current page, not all links. Groups must be placed in nav elements. We only need to put the most important, basic and important ones in nav elements.

4.section is a semantic label.

6. Form controls, calendar, date, time, email, url, search

7. New technologies webworker, websocket, Geolocation

1. Web worker is JavaScript running in the background, independent of other scripts and will not affect the performance of the page. You can continue to do whatever you want: click, select, etc. while the web worker runs in the background.

2.WebSocket is a protocol for full-duplex communication on a single TCP connection that HTML5 began to provide.

3.HTML5 Geolocation API is used to obtain the user's geographical location. Given that this feature may violate user privacy, user location information is not available unless the user consents.

This article is a summary of the new features of HTML5. I hope it will be helpful to friends in need.

If you want to know more about front-end related knowledge, you can follow the PHP Chinese website HTML5 video tutorial, Bootstrap tutorial and other related tutorials. Welcome everyone to refer to and learn!

The above is the detailed content of What is html5? What are the new features of html5? (Summary with code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

See all articles