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.
< !--The display level of srcdoc is higher than that of sandbox-->
manifest attribute:
Define the offline application files that the page needs to use, usually placed in the tag
charset attribute:
One of the meta attributes, defining the character set of the page
sizes attribute:
New attribute, when link's rel=" icon", used to set the icon size
base attribute:
defer attribute:
script tag attribute, which means that after the script is loaded, it will only be executed when the page is also loaded ( Delayed execution)
async attribute:
script tag attribute, executed immediately after the script is loaded (the browser will parse the following content during operation), even if the page has not been loaded yet (asynchronous execution )
media attribute:
Element attribute: Indicates which device is optimized
hreflang attribute:
Attribute, indicating the language used by the URL pointed to by the hyperlink
ref attribute:
attribute, defining whether the hyperlink is an external link
reversed attribute:
start attribute:
scoped attribute:
The attribute of the embedded CSS style. The definition of this style is limited to the element with the embedded style. It is suitable for single-page development.
HTML5 global attribute : Can be used for any tag, the following 6
data-yourvalue, hidden, Spenllecheck, tabindex, contenteditable, desginMode;
global attributes:
1. Can be inserted directly into the tag: data-custom attribute name.
hidden (put it directly to hide it);
spellcheck="true" (grammar error correction);
tabindex="1" (Tab jump sequence);
contenteditable="true" (editable state, click on the content, can be modified);
2. Insert window.document.designMode = 'on' in JavaScript (JavaScript global properties, the text of the entire page can be edited).
The above is the detailed content of What new tags and attributes are added to HTML5? New tags and attributes added (summary). For more information, please follow other related articles on the PHP Chinese website!