The new features of HTML5 collected and summarized can basically be used except for IE9 and below.
HTML5 syntaxMost of the grammatical differences of html are continued: <!DOCTYPE html> at the beginning
<html lang=zh-CN><meta charset=utf-8>
Character encoding becomes concise,
Not case sensitive,
Added Boolean values, similar to checked and selected
The quotation marks can be omitted, but according to coding standards, it is not recommended.
There are tags that can omit the end character, and tags that can be completely omitted.
Add tags: 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, which represents The core content in the header of this article; (3) aside: the tag content is related to the tag content auxiliary information; (4) header: header information/title of a certain block; (5) hgroup: supplementary content of header information/title; (6) footer: bottom information; (7) nav: navigation bar part Information (8) figure: an independent unit, such as a news block with pictures and content.
2. Form tags(1) email: an email must be entered; (2) url: a url address must be entered; (3) number: a numerical value must be entered; (4) range: a numerical value within a certain range must be entered; (5) Date Pickers: date picker ;
a.date: Select day, month, year b.month: Select month, year c.week: Select week and year d.time: Select time (hours and minutes) e.datetime: Select time, day, month, year ( UTC time) f.datetime-local: Select time, day, month, year (local time)
(6) Search: Search 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 function labels(1) mark: mark (like a highlighter for taking notes) (2) progress: progress bar; <progress max=value of the maximum progress bar value=value of the current progress bar> (3) time: data label, used by search engines ; Release date <time datetime=2014-12-25T09:00>9:00</time> Update date <time datetime=2015- 01-23T04:00 pubdate>4:00</time> (4) ruby and rt: comment on a certain word; <ruby><rt>Comment content</rt><rp>How to display when the browser does not support it</rp>< /ruby> (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 properties:Attributes added to 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 it synchronously downwards. The defer attribute already exists before h5, and input delayed loading (delayed execution ), it will first load (download) src file content, and then wait until the page is fully loaded, then load the js.async attribute in onload, which is asynchronous loading. It will execute onload immediately after loading src, and will continue to load the page in the above execution sequence. The alert display will display b first. Then display a
Add the style code of the small icon to the label in the web page
<link rel=icon href=url... type=image name sizes=16*16>
Ordered list ol: Added start (list starting value), reversed (whether reversed) menu type attribute (3 menu types) embedded css style: define a style block (scoped) inside the tag, only for The inline frame is only valid inside the style tag: iframe element, seamless, borderless, and borderless are added, and srcdoc defines the content of the inline frame.
<iframe>New attributes: <!--seamless defines the frame without borders and margins--><!--srcdoc has a higher display level than sandbox--><!--sandbox is used to specify the security level of an inline frame --><!--sandbox=allow-forms:Allow submission Form --><!--sandbox=allow-origin: Allow is the same origin --><!--sandbox=allow-scripts: Allow execution of scripts --><!--sandbox=allow-top-navigation: Allow external pages to jump -->
manifest attributes:
Define the offline application files needed for the page, usually placed in the <html> tag
charset attribute:
One of the meta attributes, defining the character set of the page
sizes attribute:
<link>New attribute is used to set the icon size when the link's rel=icon.
base attribute:
<base href=http://localhost/ target=_blank> means that when a page is opened in a new window, the content in the href will be added as a prefix to the address.
defer attribute:
The script tag attribute indicates that after the script is loaded, it will only be executed when the page is also loaded (delayed execution)
async attribute:
The script tag attribute is executed immediately after the script is loaded (the browser will parse the following content during the running process), even if the page has not been loaded (asynchronous execution)
media attribute:
<a> element attribute: indicates which device is optimized
hreflang attribute:
The attribute of <a> indicates the language used by the URL pointed to by the hyperlink.
ref attribute:
The attribute of <a> defines whether the hyperlink is an external link
reversed attribute:
<ol> attribute, defines whether the serial number is flashback
start attribute:
Attributes of <ol> define the starting value of the sequence number
scoped attribute:
The attribute of the embedded CSS style. The definition of this style is limited to the elements with the embedded style. It is suitable for single-page development.
HTML5 global attributes: can be used for any tag, the following 6
data-yourvalue, hidden, Spenllecheck, tabindex, contenteditable, desginMode;
Global properties:
1. Can be inserted directly into the tag: data-custom attribute name; hidden (put it directly to hide); spellcheck=true (grammar correction); tabindex=1 (Tab jump order); contenteditable=true (can Editing state, click the content to modify); 2. Insert window.document.designMode = 'on' in JavaScript (a global property of JavaScript, the text of the entire page can be edited);
Summarize
The above is a summary of the new tags and attributes of HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!