Example analysis of semantic tags, new features in HTML5

HTML5 has only one simple document type: 8b05045a5be5764f313ed5b9168a17e6, which means the browser will parse it according to the standard mode. Today, the editor brings you the Semantic tag, a new feature of HTML5. Friends who are interested should take a look at it

HTML5 new feature

Concise DOCTYPE:

HTML5 has only one simple document type: 8b05045a5be5764f313ed5b9168a17e6, which means the browser will follow the standard Pattern parsing.

Simple and easy-to-remember encoding type

You can now use "charset" in the meta tag: 2af29d43c26a16c591422d8e61b5fb0e

Scripts and links do not require type

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

More semantic new tags

For example: 23c3de37f2f9ebcb477c4a90aac6fffd, 2f8332c8dcfd5c7dec030a070bf652c3, 15221ee8cba27fc1d7a26c47a001eb9b, d8eccd9ed644b68a6460a2bb84548c82, 1aa9e5d373740b65a0cc8f0a02150c53,c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9, 46dd80ba616c57a652514755c74c4211, f742f18f4bbee619a1e89bed70e469de and 614eb9dc63b3fb809437a716aa228d24 etc

Video and Audio

<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 Enhancements

New Input types: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, and url

New attributes: required, autofocus , pattern, list, autocomplete and placeholder

New elements: aa983b9eb8086376f1f6481364a02e5a, fc86e7b705049fc9d4fccc89a2e80ee3, be6d67dae90cc1ad6469079e163d0939, 49c6123c49c6be380cb91db06cd3bfa9 and 6ecb87e5318a36c03c59e25d55f43372

canvas tag drawing 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();

Geographical location acquisition

HTML semantics

1. What is HTML semantics?

Determine the semantics of the content through tags. For example, determine the content is a title based on the h1 tag, determine the content is a paragraph based on the e388a4556c0f65e1904146cc1a846bee, and determine the d5fd7aea971a85678ba271703566ebfd tag is an input box, etc.

2. Why semantics?

1). When the style is removed or lost, the page can present a clear structure
2). Convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to make sense Way to render web pages
3). Conducive to SEO
4). Facilitate team development and maintenance, follow W3C standards, can reduce differentiation

3. How to determine your tags Is it semantically sound?

Remove the style and see if the web page structure is well organized and orderly, and whether it is still very readable.

4. Common semantic tag modules

Form

<form action="" method="">
    <fieldset style="border: none">
        <legend style="display: none">登录表单</legend>
        <p><label for="name">账号：</label><input type="text" id="name"></p>
        <p><label for="pw">密码：</label><input type="password" id="pw"></p>
        <input type="submit" name="登录" class="subBtn">
    </fieldset>
</form>

The form fields should be wrapped with fieldset tags, and the legend tag should be used to describe the purpose of the form. ;The description text corresponding to each input label needs to use the label tag, and by setting the id attribute for the input and setting for=someld in the label tag, the description text is associated with the corresponding input.

5. Some issues that should be paid attention to in semantic tags

Use unsemantic tags p and span as little as possible;
When the semantics are not obvious, When you can use p or p, try to use p, because p has upper and lower spacing by default, which is beneficial to compatibility with special terminals;
Do not use pure style tags, such as: b, font, u, etc., use css settings instead .
Text that needs to be emphasized can be included in the strong or em tag. The default style of strong is bold (do not use b), and em is italic (do not use i)

The above is the detailed content of Example analysis of semantic tags, new features in HTML5. For more information, please follow other related articles on the PHP Chinese website!