Summary of new tags and attributes in HTML5

This article shares with you a summary of the new tags and attributes in HTML5. The content is very good. Friends in need can refer to it. I hope it can help everyone.

Collect and summarize the new features of HTML5, which can basically be used except for IE9 and below.

HTML5 syntax

Mostly continues the syntax of html

Differences:

at the beginning

Character encoding becomes concise,

is not case sensitive,

Added Boolean value, similar to checked, selected

The quotation marks can be omitted, but in terms of 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 as an outline to indicate the document structure. It can also have chapters, headers, footers or other parts of the header;

(2) article: a special independent block, indicating the core content in this header;

(3) aside: outside the tag content and the tag content Relevant 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 partial information ;

(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: The url address must be entered;

(3) number: The numerical value must be entered;

(4 ) Range: You must enter a value within a certain range;

(5) Date Pickers: Date selector;

　a.date: Select Day, month, year

b.month: Select month and 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 for regular text fields;

(7) color: color.

3. Media tag

(1) video: video;

(2) audio: audio;

(3) embed: embedded content (including various media), Midi, Wav, AU, MP3, Flash, AIFF, etc.

4. Other function tags

(1) mark: mark, highlight (like a highlighter) Notes);

(2) progress: progress bar;;

(3) time: data tag, used by search engines; release date9:00update date< ;time datetime="2015- 01-23T04:00" pubdate>4:00;

(4) ruby ​​and rt: comment on a certain word;< ;ruby>Comment contentHow to display when the browser does not support it;

（5 ) wbr: Soft line break, line break when the page width reaches the point where a line break is needed;

(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.

##

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) 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 execute onload immediately after loading src, and will continue at the same time. In the order of execution above when loading the page, 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

##

Ordered list ol: Added start (list starting value), reversed ( Inverted or not) menu menu type attribute (3 menu types) Inline css style: define a style block (scoped) inside the tag, which is only valid inside the style tag. Inline frame: iframe element, newly added seamless borderless Borderless, srcdoc defines the content of the inline frame.

##

manifest attribute:

Need to be used to define the page The offline application file is usually placed in the tag

charset attribute:

One of the meta attributes, defines the page Character set

sizes attribute:

New attribute, used to set when link’s rel="icon" Icon size

base attribute:

means 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:

script tag Attribute, indicating that after the script is loaded, it will only be executed when the page is also loaded (delayed execution)

async attribute:

##script tag attribute , the script will be executed immediately after loading (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:

## indicates the language used by the URL pointed to by the hyperlink.

ref attribute: The attribute of

defines the hyperlink Whether the link is an external link

reversed attribute:

's attribute, defines whether the serial number is reversed

start attribute:

's attribute defines the starting value of the serial number

scoped attribute:

Attributes of embedded CSS styles, defining this style is limited to elements with this embedded style, 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 attributes:

1. Can be inserted directly in the tag: data-custom attribute name.

hidden (put it directly to hide);

spellcheck="true" (grammar correction);

##tabindex="1" (Tab jump sequence);

contenteditable="true" (editable state, click the content to modify);

2. Insert window.document.designMode = 'on' in JavaScript ( JavaScript global properties, the text of the entire page can be edited).

Related recommendations:

New analysis on tag video playback in html5


##HTML5 method of embedding audio and video

The above is the detailed content of Summary of new tags and attributes in HTML5. For more information, please follow other related articles on the PHP Chinese website!