Web Front-end
H5 Tutorial
What new tags and attributes are added to HTML5? New tags and attributes added (summary)
What new tags and attributes are added to HTML5? New tags and attributes added (summary)
This chapter will introduce to you what new tags and attributes are added to HTML5? New tags and attributes have been added (summary) to let everyone know what attributes and tags are newly added in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Summarized the new features of HTML5, which can be used basically except for IE9 and below.
HTML5 syntax
mostly continues the syntax of html
The difference: the beginning
<!DOCTYPE html> <html> <meta charset="utf-8">
character encoding becomes Concise, case-insensitive, added Boolean values, similar to checked, selected
quotes can be omitted, but according to coding standards, it is not recommended to use
There are tags that can omit the end character, and Completely omitted label application.
Newly added tags in HTML5:
1. Structure tag
(1) section : Independent content block, which can be composed of h1~h6 to represent the document structure. It can also have chapters, headers, footers or other parts of the header;
(2) article: special independent block , indicating the core content in the header of this page;
(3) aside: auxiliary information related to the tag content other than the tag content;
(4) header: a certain block Header information/title;
(5) hgroup: supplementary content of the header information/title;
(6) footer: bottom information;
(7) nav : Partial information of the navigation bar;
(8) figure: an independent unit, such as a news block with pictures and content.
2. Form label
(1) email: Email must be entered;
(2) url: URL address must be entered;
(3) number: a value must be entered;
(4) range: a value within a certain range must be entered;
(5) Date Pickers: date picker;
date: Select the day, month, and year
month: Select the month and year
week: Select Week and year
time: Select time (hours and minutes)
datetime: Select time, day, month, year (UTC time)
datetime-local: Select time, day, month, year (local time)
(6) search: search for regular text fields ;
(7) color: color.
3. Media tags
(1) video: video;
(2) audio: audio;
(3 ) embed: embedded content (including various media), Midi, Wav, AU, MP3, Flash, AIFF, etc.
4. Other functional tags
(1) mark: mark, highlight (like a highlighter for taking notes);
(2) progress: progress bar;
(3) time: data label, used by search engines; release date Update date
(4) ruby and rt: comment on a certain word; ;
(5) wbr: soft line break, line break when the page width reaches the required line break;
(6) canvas: use JS code to make content for image drawing;
(7) command: button;
(8) deteils: expand menu;
(9) dateilst: text field drop-down prompt;
(10) keygen: encryption.
New attributes:
Added attributes for js.
<script defer src=".....js" onload="alert('a')"></script> <script async src=".....js" onload="alert('b')"></script>
If there are no above two attributes, the execution order is to first load (download) the first src, then execute its onload, and then execute the defer attribute synchronously downwards before h5. Already have it, enter delayed loading (delayed execution), it will first load (download) the file content in src, and then wait until the page is fully loaded, then load the js.async attribute in onload, which is asynchronous loading, it will load src after loading , execute onload immediately, and continue to load the page in the above execution sequence. The alert display will display b first and then a.
Add the style code of the small icon to the label in the web page
<link rel="icon" href="url..." type="图片名称" sizes="16*16">
Ordered list ol: Add start (list starting value), reversed (whether to reverse) menu Menu type attribute (3 menu types) embedded css style: define a style block (scoped) inside the tag, which is only valid inside the style tag. Inline frame: iframe element, seamless borderless is added. srcdoc defines the content of the iframe.