Home > Article > Web Front-end > H5 semantic tags
H5 semantic tags
- php中世界最好的语言Original
- 2018-03-27 14:01:572514browse
This time I will bring you the semantic tags of H5. What are the precautions when using H5 semantic tags? Here are practical cases, let’s take a look.
HTML5 new features
Concise DOCTYPE:
HTML5 has only one simple document type : <!DOCTYPE html>, indicating that the browser will parse according to the standard mode.
Simple and easy-to-remember encoding type
You can now use "charset" in the meta tag: <meta charset=”utf-8″ / >
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:
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:
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();
Geolocation 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
, and determine the 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)
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
html5 How to achieve the animation effect of pictures turning in circles
How to automatically play background music in H5 videos
The above is the detailed content of H5 semantic tags. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：H5 mobile page zoomNext article：H5 mobile page zoom
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server