How to use the new semantic tag features of H5

This time I will bring you H5's SemanticHow to use the new features of H5's semantic tags, and what are the precautions for using the new features of H5's semantic tags. The following are practical cases. , let’s take a look.

HTML5 new features

Concise DOCTYPE:

HTML5 has only one simple document type: , which means the browser will parse it according to the standard mode.

Simple and easy-to-remember encoding type

You can now use "charset" in meta tags:

Script And links do not need to be type

#

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

##More semantic

Newtags

For example:

, ,

,

,

,

, , ,

and

, etc.

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Form enhancement

New input type:

color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url

New

Attribute:

required, autofocus, pattern, list, autocomplete 和placeholder

New element: , < datalist>,

, and

canvas tags draw 2D graphics.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

About the adaptation issues of HTML5 pages on iPhoneX

html Solution to the table being too wide and overflowing the parent container

How to use the title attribute of html to display text on mouse hover

How to use the cellpadding attribute and cellspacing attribute of HTML

The above is the detailed content of How to use the new semantic tag features of H5. For more information, please follow other related articles on the PHP Chinese website!