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: 8b05045a5be5764f313ed5b9168a17e6, 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: b6c06a3eac5ba315bbbfde6d7627c15a

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: 23c3de37f2f9ebcb477c4a90aac6fffd, 3bee3987e809b3256bab943668a67001, d8eccd9ed644b68a6460a2bb84548c82, 1aa9e5d373740b65a0cc8f0a02150c53,c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9, 46dd80ba616c57a652514755c74c4211, f920514e6447cf1d171079d1371f007f, 24203f2f45e6606542ba09fd2181843a and 614eb9dc63b3fb809437a716aa228d24, 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: aa983b9eb8086376f1f6481364a02e5a, b442b5a49d7f754ee12fffc1f7092435, be6d67dae90cc1ad6469079e163d0939, 49c6123c49c6be380cb91db06cd3bfa9 and 6ecb87e5318a36c03c59e25d55f43372

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!