What are the differences between html5 and traditional html? What are the new and abolished elements?

This article focuses on HTML. It mainly talks about the differences between HTML5 and traditional HTML, as well as some new elements and abolished elements of HTML5. Friends in need can refer to it. I hope it will be helpful to you.

1. Changes in HTML5 syntax

The changes mentioned in this knowledge point refer to the changes defined based on HTML4, mainly as follows:

1. The file extension (.html or .htm) and content type (text/html) of HTML5 remain unchanged.
2. In HTML5, version declarations are deliberately not used. One document will apply to all versions of HTML.
3. Starting from HTML5, it is recommended to use UTF-8 for the character encoding of files.
4. HTML5 ensures maximum compatibility with previous HTML versions.
In order to ensure compatibility, we need to start with the element. In HTML5., the tag of the element can be omitted. Specifically, the tags of elements are divided into three types: "the end tag is not allowed to be written", "the end tag can be omitted" and "the start tag and the end tag can be omitted".

End tag elements are not allowed to be written: area, base, br, col....
End tags can be omitted: li, dt, dd, p, rt...
All start tags and end tags can be omitted: html, head, body...

##2. New structural elements
# The ##section element represents a content block in the page, such as a chapter, header, footer or other part of the page; the

article element represents a piece of independent content in the page that is not related to the context, such as in a blog. An article or an article in a newspaper; the

aside element represents auxiliary information other than the content of the article element and related to the content of the article element; the
header element represents a content block or the entire page in the page The title; the
hgroup element is used to combine the title of the entire page or a content block in the page; the
footer element represents the footnote of the entire page or a content block in the page. Generally speaking, it will contain the name of the creator, the date of creation, and the creator's contact information; the
nav element represents the navigation link part of the page; the
figure element represents an independent flow content, generally representing the main flow of the document An independent unit in the content, use the figcaption element to add a title to the figure element group


2. Other new elements

audio element defines audio, such as music or other audio streams; The

embed element is used to insert various multimedia, the format can be Midi, Wav, AU, MP3, etc.; the

mark element is used to visually present to the user the text that needs to be highlighted or highlighted. A typical application is to highlight search keywords to users in search results;
progress elements represent running processes
ruby elements represent ruby ​​comments (Chinese phonetics or characters)
rt elements represent characters (Chinese The explanation or pronunciation of phonetic symbols or characters)
rp elements are used in ruby ​​comments to define what is displayed by browsers that do not support ruby ​​elements.
The wbr element represents soft line wrapping, and when the width is not enough, it will actively wrap here.
The canvas element represents graphics, such as charts and other images.
The cammand element represents command buttons, such as radio buttons and check boxes. Box or button
The details element represents the detailed information that the user requires and can obtain
The datagrid element represents a list of optional data, which is displayed in the form of a tree list
The keygen element represents the generated key
The output element represents different types of output, such as the output of a script.
The source element defines media resources for media elements (such as

email type represents the text input box where the E-main address must be entered

url type represents the text input box where the URL address must be entered

number Type represents a text input box that must enter a numerical value
range Type represents a text input box that must enter a numerical value within a certain range

HTML5 has multiple new input text boxes for selecting dates and times:

date ——Select the day, month, and year

month ——Select the month and year
week ——Select the week and year
time ——Select the time (hours and minutes)
datetime — —Select time, day, month, year (UTC time)
datetime.local —Select time, day, month, year (local time)

3. Destroy elements

1. Elements that can be replaced by CSS

For elements such as basefont, big, center, font, s, strike, tt, u, because their functions are pure Go to the screen display service, and HTML5 advocates putting the screen display function in the CSS style sheet for unified editing, so these elements are abolished

2. The frame framework is no longer used

For the frameset element, frame elements and noframes elements. Since frames have a negative impact on the usability of web pages, frames are no longer supported in HTML5. Only iframes are supported, or in the form of a composite page composed of multiple pages created by the server. At the same time, the above Three elements are abolished.

3. Elements only supported by some browsers

For elements such as applet, bgsound, blink, marquee, etc., since only some browsers support these elements, especially the bgsound element and marquee element, which are only supported by Internet Explorer, they were abolished in HTML 5. The applet element can be replaced by the ernedd element or the object element, the bgsound element can be replaced by the audio element, and the marquee can be replaced by JavaScript programming.

4. Other abolished elements:
Remove the rb element and use ruby Element replacement
Abolish acronym element, use abbr element to replace
Abolish dir element, use ul element to replace
Abolish isindex element, use form element combined with input element to replace
Abolish listing element, use pre element replacement
Destroy the xmp element, use the code element instead
Destroy the nextid element, use GUIDS instead
Destroy the plaintext element, use the "text/plian" MIME type instead

four .New attributes and abolished attributes

1. New attributes
1. Form-related attributes

New autofocus attribute, which makes the element in the Automatically gain focus when the screen opens;
Add a placeholder attribute, which will prompt the user for input and what content the user can input;
Add a new form attribute, declare which form it belongs to, and then place it in Anywhere on the page, not within the form;
Added required attribute, which indicates that it will be checked when the user submits, and there must be input content in the element;
.....
2. Link-related attributes
Add the media attribute, which specifies the type of media/device for which the target URL is optimized, and can only be used when the href attribute exists;
Add the hreflang attribute and rel attribute to Keep consistent with the a element and link element;
...
3. Other attributes
The attribute reverend, which specifies the list to be displayed in reverse order;
Add the async attribute to the script element, which defines Whether the script is executed asynchronously;
......

2. Abolish attributes

All attributes that can be replaced by CSS style sheets are abolished;
Redundant attributes, such as: target, profile, version, etc. are abolished;
.......    

5. Global attributes

in HTML5 , a new concept of ''global attributes" has been added. The so-called global attributes refer to attributes that can be used on any element.

1. contentEditable attribute
This attribute allows users to edit The content in the element can obtain mouse focus. The attribute is a Boolean value and can be specified as true or false. In addition, this attribute also has a hidden inherit state. When it is true, editing is allowed. When it is false, editing is not allowed. When specified, it is determined by inherit.
2. designMode attribute
This attribute is used to determine whether the entire page is editable. There are two attributes "on" and "off". When the attribute is "on", it can be edited; when it is "off", it cannot be edited.
3. Hidden attribute
All elements are allowed to use a hidden attribute, which is similar to the hidden element in the input element. Its function is to notify the browser not to render the element and make the element invisible. The attribute value is a Boolean value. When it is true, it is invisible; when it is false, it is visible.
4. Spellcheck attribute
This attribute is a new attribute provided by HTML 5 for the two text input boxes of input element (type=text) and textarea. It mainly checks the spelling and grammar of user input content. The attribute value is a Boolean value. When writing, you must clearly state that the attribute value is true or false. The writing method is as follows:

<br> <input type="text" spellcheck="false"><br> <br> <textarea spellcheck>

The above is the detailed content of What are the differences between html5 and traditional html? What are the new and abolished elements?. For more information, please follow other related articles on the PHP Chinese website!