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 dateupdate date< ;time datetime="2015- 01-23T04:00" pubdate>4:00;
(4) ruby and rt: comment on a certain word;< ;ruby>;
(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: 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: media attribute: 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 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
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.

Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.

The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.

H5 (HTML5) is suitable for lightweight applications, such as marketing campaign pages, product display pages and corporate promotion micro-websites. Its advantages lie in cross-platformity and rich interactivity, but its limitations lie in complex interactions and animations, local resource access and offline capabilities.

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.
