Introduction to HTML5

What does HTML5 look like and how to use it? In fact, in the first chapter of our HTML tutorial, the codes used in the examples we gave you were all written in HTML. Let’s take a closer look at HTML5

## Introduction to HTML5

What is HTML5?

HTML5 is the next generation HTML standard.

HTML, the previous version of HTML 4.01 was born in 1999. The world of the Web has changed dramatically since then.

HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support.

How did HTML5 get started?

HTML5 is the result of collaboration between W3C and WHATWG, which stands for Web Hypertext Application Technology Working Group. .

The WHATWG focuses on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.

Some interesting new features in HTML5:

Canvas element for drawing

Video and audio elements for media playback

For local Better support for offline storage

New special content elements, such as article, footer, header, nav, section

New form controls, such as calendar, date, time, email, url, search

HTML5 <!DOCTYPE>

<! The doctype> declaration must be located on the first line of the HTML5 document and is very simple to use:

<!DOCTYPE html>

You can see if our first chapter example starts with <!DOCTYPE>

The smallest HTML5 document

The following is a simple HTML5 document:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>

Note: For Chinese web pages, you need to use <meta charset="utf-8"> to declare the encoding, otherwise garbled characters will appear.

Improvements in HTML5

##New elements
New properties
Fully supports CSS3
Video and Audio
2D/3D graphics
Local storage
Local SQL data
Web application

HTML5 Multimedia

Using HTML5, you can simply play video and audio on web pages.

HTML5

<video>

HTML5

<audio>

##HTML5 ApplicationUsing HTML5 you can simply develop applications

##HTML5 Graphics

Using HTML5 you can simply Draw graphics:

Use <canvas> element

Use inline SVG
Use CSS3 2D/3D

HTML5 using CSS3

New Selector
New Properties
Animation
2D/3D Conversion
Rounded Corners
Shadow effect
Downloadable font

Please learn more about CSS3 Check out this site’s CSS3 tutorial.

Semantic Elements

HTML5 adds a lot of semantic elements as follows:

HTML5 is the latest revised version of HTML. The standard was completed by the World Wide Web Consortium (W3C) in October 2014.

HTML5 is designed to support multimedia on mobile devices.

HTML5 is simple and easy to learn.

## <article>Define independent content areas of the page. <aside> Define the sidebar content of the page. <bdi>Allows you to set a piece of text independent of the text direction setting of its parent element. <command>Define command buttons, such as radio buttons, check boxes or buttons##

tag	Description

## <dialog>Define a dialog box, such as a prompt box <summary>The label contains the title of the details element <figure>Specifies independent stream content (images, charts, photos, code, etc.). <figcaption>Definition of the title of the <figure> element##

<details>	Used to describe the details of a document or a certain part of the document

<footer>	Define the footer of section or document.
<header>	Defines the header area of the document
<mark>	Define text with tokens.
<meter>	Define weights and measures. Use only for measurements with known maximum and minimum values.
<nav>	Define the part of the navigation link.

## <rt> Defines the interpretation or pronunciation of characters (Chinese phonetic notations or characters). ## <rp> <section>

<progress>	Define the progress of any type of task.
<ruby>	Define ruby comments (Chinese pinyin or characters).

Used in ruby comments to define the content displayed by browsers that do not support ruby elements.
Define the section (section, section) in the document.

## <time>Define date or time. <wbr>Specifies where in the text it is appropriate to add line breaks.

HTML5 Form

New form elements, new attributes, new input types, automatic validation.

##Element removed

The following HTML 4.01 elements have been removed in HTML5:

<acronym>
##<big>
##<center>
<dir>
##<font>
##<strike>
Example

The following example shows you how to play a video on a webpage

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的浏览器不支持 video 标签。
</video>
</body>
</html>

You You can find a video locally, put the location and name of the video in src, try it

HTML5 browser support

Latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support certain HTML5 features.

You can make some older browsers (that do not support HTML5) support HTML5.

Modern browsers support HTML5.

Additionally, all browsers, old and new, will automatically treat unrecognized elements as inline elements.

Because of this, you can "teach the browser" to handle "Unknown" HTML elements.

You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.

##Defining HTML5 elements as block elements

HTML5 defines 8 new HTML semantic elements. All these elements are block-level elements.

In order to allow older versions of browsers to display these elements correctly, you can set the CSS display attribute value to block:

##header, section, footer, aside, nav, main, article, figure { Display: block; }

Add new elements to HTMLYou can add new elements to HTML.

This example adds a new element to HTML and defines a style for the element. The element is named <myHero>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <meta charset="utf-8">
    <title>为 HTML 添加新元素</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #9dddd7;
            padding:40px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>

Run the program to see

The JavaScript statement document.createElement("myHero") is to add a new element to the IE browser.

Internet Explorer browser issues

You can use the above method to add HTML5 elements for IE browser, but:

Internet Explorer 8 and earlier IE browsers do not support the above method.

We can solve this problem using "HTML5 Enabling JavaScript", " shiv" created by Sjoerd Visscher:

The above code is a comment, which is used to read the html5.js file when the IE browser version is smaller than IE9 , and parse it.

Note: Domestic users please use Baidu static resource library (Google resource library is unstable in China):

html5shiv is a better solution for IE browser. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.

##Perfect Shiv solution

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>学习HTML就到PHP中文网</h1>
<article>
    php中文网 ——  php中文网！！
</article>
</body>
</html>

html5shiv.js reference code must be placed in the <head> element because IE The browser needs to load this file first when parsing new HTML5 elements.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

Introduction to HTML5

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]