HTML5 learning notes: differences between html5 and traditional html, and html5 learning notes

HTML5 learning notes: differences between html5 and traditional html, and html5 learning notes
I. HTML5 syntax changes
The changes mentioned in this knowledge point refer to changes defined based on HTML4, mainly including:
The file extension (.htmlor .htm) of 1.html5 remains unchanged from the content type (text/html.
2. In HTML5, the version declaration is deliberately not used. A document will apply to HTML of all versions.
3. From HTML5, UTF-8 is recommended for character encoding of files.
4. HTML5 ensures maximum compatibility with previous HTML versions.
To ensure compatibility, you need to start with the element. In HTML5, the element tag can be omitted. In terms of the object, the element tag can be divided into three types: "Do not allow write end tag", "you can omit end tag", and "start tag and end tag can all be omitted.
• Write end tag elements are not allowed: area, base, br, col .....
• End mark can be omitted: li, dt, dd, p, rt ......
• The start and end tags can all be omitted: html, head, body .....
2. New Structural Elements
• The section element indicates a content block in the page, such as a section, header, footer, or other part of the page;
• The article element indicates an independent content on the page that is irrelevant to the context, for example, an article in a blog or an article in a newspaper;
• The aside element indicates auxiliary information other than the content of the article element and related to the content of the article element;
• The header element indicates a content block or the title of the entire page;
• The hgroup element is used to combine the titles of a content block on the entire page or page;
• The footer element represents the footer of a content block on the entire page or page. Generally, it contains the Creator's name, creation date, and contact information;
• The nav element indicates the navigation link of the page;
• The figure element indicates an independent stream content. It generally indicates an independent unit in the content of the main stream of the document. The figcaption element is used to add a title to the figure element group.
2. Other New Elements
• The audio element defines audio, such as music or other audio streams;
• The embed element is used to insert various multimedia files in the format of Midi, Wav, AU, and MP3;
• The mark element is used to visually display the text to be highlighted or highlighted. A typical application is to highlight search keywords in the search results;
• The progress element indicates a running process.
• Ruby elements represent ruby comments (Chinese phonetic symbols or characters)
• The rt element represents the interpretation or pronunciation of a character (Chinese phonetic alphabet or character)
• Rp elements are used in ruby annotations to define the content displayed by browsers that do not support ruby.
• The wbr element indicates soft line breaks. When the width is insufficient, the line breaks here.
• Canvas elements represent images, such as tables and other images
• The cammand element represents a command button, such as a single-choice button, checkbox, or button.
• The details element indicates the details that the user requests and can obtain.
• The datagrid element represents the list of optional data, which is displayed in a tree list.
• The keygen element indicates that the key is generated.
• The output element represents different types of output, such as the output of scripts.
• The source element defines media resources for media elements (such as <video> and <audio> ).
• The menu element indicates the menu list.
3. New input Elements
• The email type indicates that the text input box of the E-main address must be entered.
• The url type indicates that the text input box of the URL address must be entered.
• Number indicates a text input box that must contain numbers
• The range type indicates that a text box with numbers within a certain range must be entered.
HTML5 has multiple new input text boxes for Date and Time Selection:
• Date -- select day, month, and year
• Month -- select month and year
• Week-select weeks and years
• Time -- select the time (hours and minutes)
• Datetime-Select time, day, month, and year (UTC time)
• Datetime. local -- select the time, day, month, and year (local time)
3. Abolish Elements
1. elements that can be replaced by CSS
• For elements like basefont, big, center, font, s, strike, tt, and u, their functions are purely Image Display services, HTML5 advocates unified editing of the image display function in the CSS style sheet, so these elements are abolished
2. frame framework is no longer used
• For frameset elements, frame Elements, and noframes elements, the frame framework does not support the frame framework and only the iframe framework in html5, alternatively, you can create a composite page composed of multiple pages on the server and abolish the three elements.
3. Only some elements supported by browsers
• For applet, bgsound, blink, marquee and other elements, only some browsers support these elements, especially bgsound and marquee elements, and are only supported by Internet Explorer, therefore, HTML 5 is abolished. Applet elements can be replaced by ernedd elements or object elements, bgsound elements can be replaced by audio elements, and marquee can be replaced by JavaScript programming methods.
4. Other abolished elements:
• Abolish the rb element and use the ruby element instead.
• Abolish the acronym element and use the abbr element instead.
• Abolish the dir element and use the ul element instead.
• The isindex element is abolished and replaced by a combination of form and input elements.
• Abolish the listing element and use the pre element instead.
• Abolish the xmp element and use the code element instead.
• Abolish the nextid element and use GUIDS instead.
• Remove the plaintext element and replace it with the "text/plian" MIME type
4. Adding and abolishing attributes
1. New Attributes
1. Form-related attributes
• Added the autofocus attribute, which enables the element to automatically obtain the focus when the screen is opened;
• The placeholder attribute is added, prompting users to input content;
• Add the form attribute, declare which form it belongs to, and place it in any position on the page, rather than in the form;
• Added the required attribute, which indicates to check when the user submits the request. Check that the element must contain the input content;
2. Link-related attributes
• Adds the media attribute, which specifies why the target URL is optimized for media/devices and can only be used when the href attribute exists;
• Add the hreflang and rel attributes to keep them consistent with element a and link;
3. Other attributes
• Attribute reverend, which specifies the reverse display of the List;
• Add the async attribute to the script element, which defines whether the script is executed asynchronously;
Ii. Abolishing attributes
• All attributes that can be replaced by CSS style sheets are abolished;
• Redundant attributes, such as target, profile, and version, are abolished;
5. Global attributes
In HTML5, a concept of ''global attribute ''is added. Global attributes are attributes that can be used for any element.
1. contentEditable attributes
• This attribute allows you to edit the content in the element to obtain the mouse focus. The attribute is a Boolean value and can be specified as true or false. In addition, this property also has a hidden inherit status. If it is set to true, editing is allowed. If it is set to false, editing is not allowed. If it is not specified, it is determined by inherit.
2. designMode attributes
• This attribute is used to determine whether the entire page can be edited. There are two attributes: "on" and "off ". When the attribute is "on", it can be edited. If it is "off", it cannot be edited.
3. hidden attributes
• A hidden attribute can be used for all elements. This attribute is similar to the hidden element in the input element. The function is to notify the browser not to render this element and make it invisible. This attribute value is a Boolean value. If it is true, it is invisible. If it is false, it is visible.
4. spellcheck attributes
• This attribute is a new attribute provided by HTML 5 for text input boxes (type = text) and textarea. It mainly checks the spelling and syntax of user input content. The attribute value is a Boolean value. When writing, you must explicitly declare that the attribute value is true or false. The writing method is as follows:
<! -The following two writing methods are correct-> <textarea spellcheck = "true"> <input type = text spellcheck = false> <! -The following two writing methods are incorrect-> <textarea spellcheck>
Details about form attributes
In HTML4, the subordinate elements in the form must be written inside the form, but in HTML5, they can be written anywhere on the page, and then a form attribute is created for the element, the attribute value is the id of the form unit, so that you can declare that the element belongs to the specified form.

The Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> form attributes </title>
</Head>
<Body>
<Form action = "" id = "testform">
<Input type = "text" name = ""/>
</Form>
<Textarea form = "testform" name = "" cols = "30" rows = "10"> </textarea>
</Body>
</Html>

The input element belongs to a form. It is written inside the form and no form attribute needs to be specified for it. The textarea element is written outside the form, but belongs to the form. Therefore, the form id is assigned to the form attribute of the textareea element.
The advantage of this is that you can add styles to elements on the page more easily, because they are not dispersed in various forms.