Home >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)

青灯夜游Original: 2018-09-15 18:10:094542browse

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; bf769e47934ceb42033c7b27572a18f3;

(3) time: data label, used by search engines; release date aa2936c7f5fc1666fe354c2d39409f239:0091be1970faf1a1e6511e94af3a0f5b95Update date51f33e1919423ed2a6c50dd9a25e96a14:0091be1970faf1a1e6511e94af3a0f5b95

(4) ruby and rt: comment on a certain word;ec41f2147470148e85ad0337a362103e7240f116d85a7ee375466871bc33670acomment contente1cd1ef8331b2927cc680afad7b5de59515718f19dfe6612658be14be18aa0echow to display when the browser does not support21f25f120b8e75f2ae19a58ad1612dd6 8724a7e8dc86cc99e3aa1ae8f042e0e8;

(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(&#39;a&#39;)"></script>
<script async src=".....js" onload="alert(&#39;b&#39;)"></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.

d5ba1642137c3f32f4f4493ae923989cNew attributes:

4a6afdfddf29f2ac82de6d3c59088661

a7c0e27f446d9075885965055ddc9d66

acae77b749d558f566ebac26d5be4f31

b2c4a8a7241e424fff69906f802c4573

330bf92f812303d58982e5ecd9377da8

f20d090dccd3347aed0406b616ec60b6

00ccb9e6c1d0b84c1dd528155bda4f14

manifest attribute:

Define the offline application files that the page needs to use, usually placed in the 100db36a723c770d327fc0aef2ce13b1 tag

charset attribute:

One of the meta attributes, defining the character set of the page

sizes attribute:

2cdf5bf648cf2f33323966d7f58a7f3fNew attribute, when link's rel=" icon", used to set the icon size

base attribute:

ffb65a9b8b8c20fb156d9d5f47c92c05 means when opening in a new window When a page is created, the content in href will be added as a prefix to the address

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:

3499910bf9dac5ae3c52d5ede7383485 Element attribute: Indicates which device is optimized

hreflang attribute:

3499910bf9dac5ae3c52d5ede7383485 Attribute, indicating the language used by the URL pointed to by the hyperlink

ref attribute:

3499910bf9dac5ae3c52d5ede7383485 attribute, defining whether the hyperlink is an external link

reversed attribute:

c34106e0b4e09414b63b2ea253ff83d6's attribute, defines whether the serial number is flashback

start attribute:

c34106e0b4e09414b63b2ea253ff83d6's attribute, defines the starting value of the serial number

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!

JavaScript ruby html5 css html date JS number 异步 href alert 选择器 canvas http 搜索引擎

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：How to use canvas to get the effect of verification code (source code attached)Next article：How to use canvas to get the effect of verification code (source code attached)

See more

What new tags and attributes are added to HTML5? New tags and attributes added (summary)

Related articles