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
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.; themark 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
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:
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)
1. Elements that can be replaced by CSS
2. The frame framework is no longer used
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:
