HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Inline SVG HTML5 Tutorial

HTML5 browser support

you can make some older browsers (not supporting HTML5）support HTML5.

HTML5 browser support

Modern browsers all support HTML5.

In addition, all browsers, including old and new ones, automatically handle unrecognizable elements as inline elements.

Therefore, you can "teach" browsers handle "unknown" HTML elements.

even you can teach IE6 　(Windows XP 2001). Browsers handle unknown HTML elements.

HTML5 an element is defined as a block element

HTML5 defined 8 a new HTML semantic element. All these elements are Block-level elements.

To make these elements display correctly in old versions of browsers, you can set the CSS display property value to block:

Example

<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial Website (oldtoolbag.com)</title>　
</head>
<body>
header, section, footer, aside, nav, main, article, figure {
　　　　display: block;　
}
</body>
</html>

Test to see ‹/›

Add custom elements to HTML

You can add custom elements to HTML.

The custom element added to HTML in this example, and the style defined for the element, the element name is <myLabel> :

Example

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">　
<title>Add New Elements to HTML (oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display: block;
　　　　background-color: #ddd;
　　　　padding:　50px;
　　　　font-size:　30px;
}
</style>　
</head>
　
<body>
　
<h1>My first HTML5title</h1>
　
<p>My first HTML5paragraph.<//p>
　
<myLabel>My first custom element</myLabel>
　
</body>
　　</html>

Test to see ‹/›

The JavaScript statement document.createElement("myLabel") is used to add new elements for IE browsers.

Let the IE browser become a browser that supports html5browsers

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

Internet Explorer 8 and earlier IE browser versions do not support the above methods.

We can use the "HTML5 Enabling JavaScript

<!--[if　lt　IE　9]>
　　shiv" to solve this problem://<script src="https:/libs/html5shiv/3.7oss.maxcdn.com/html5.0/script>
<![endif]-->

shiv.js"><9 The above code is a comment, whose purpose is to enable comments in IE browsers whose version is less than IE5Read the html when the .js file is parsed.

Note:Domestic users please use the static resource library of this site (Google resource library is unstable in China):

<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

For the html of IE browser5Shiv is a good solution.html5shivMainly solves HTML5The new elements proposed are not supported by IE6-8These new elements cannot be wrapped around child elements as parent nodes, and CSS styles cannot be applied to them.

Perfect Shiv Solution

Example

<!DOCTYPE html>
<html>
<head>
<meta　charset="utf-8">
<title>Rendering HTML5</title>
　　<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>My First Article</h1>
　
<article>
Basic Tutorial Website (oldtoolbag.com) —— Learn the basics, and you can go further！！!
</article>
　
</body>
</html>

Test to see ‹/›

html5The reference code for shiv.js must be placed within the <head> element because IE browsers parse HTML5 The file must be loaded first when adding new elements.

HTML5 Inline SVG HTML5 Tutorial