HTML5 study notes: the difference between html5 and traditional html

This article mainly introduces the relevant information about the difference between HTML5 and traditional HTML, which is the HTML5 study notes. Friends who need it can refer to the next one. Changes in HTML5 syntax

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

1. The file extension character (.html or .htm) of HTML5 remains unchanged from the content type (text/html).

2. In HTML5, if you deliberately do not use the version declaration, a document will be applicable to all versions of HTML.

3. Starting from HTML5, it is recommended to use UTF-8 for character encoding of files.

4. HTML5 ensures maximum compatibility with previous HTML versions.

In order to ensure compatibility, we need to start with the elements. In HTML5, the element's tag can be omitted. In terms of its nature, the marks of elements are divided into three types: not allowed to write an end mark, the end mark can be omitted, and the start mark and the end mark can be omitted.

• The elements that are not allowed to write end marks are: area, base, br, col......

• End tags: li, dt, dd, p, rt...

• The start mark and the end mark can be omitted: html, head, body...

•The section element represents a content block in the page, such as a chapter, header, footer, or other parts of the page;

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

• The aside element represents auxiliary information related to the content of the article element outside the content of the article element;

•The header element represents the title of a content block or the entire page in the page;

•hgroup elements are used to combine the title of an entire page or a content block in the page;

•The footer element represents a footnote to an entire page or a content block in the page. Generally speaking, it will contain the creator’s name, creation date, and creator contact information;

•nav element represents the part of the navigation link in the page;

•Figure element represents an independent section of stream content, generally representing an independent unit in the stream content of the document body. Use the figcaption element to add a title to the figure element group.

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

•embed elements are used to insert various multimedia, and the formats can be Midi, Wav, AU, MP3, etc.;

• The mark element should be used to visually present text that needs to be highlighted or highlighted to the user. A typical application is to highlight search keywords to the user in search results;

•The progress element represents a running process

• Ruby element represents ruby ​​annotation (Chinese pronunciation or characters)

• The rt element represents the interpretation or pronunciation of characters (Chinese pronunciation or character)

• The rp element is used in ruby ​​comments to define what is displayed in browsers that do not support ruby ​​elements.

•Wbr element represents soft line breaks, and when the width is not enough, actively carry out line breaks here.

• Canvas elements represent graphics, such as charts and other images

•The cammand element represents a command button, such as a radio button, a check box, or a button

•The details element represents the details that the user requests 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 indicates the generation of the key

•The output element represents different types of output, such as the output of a script

•The source element defines a media resource for media elements (such as <video> and <audio>)

• menu element represents menu list

•Email type indicates the text input box where the E-main address must be entered

•url type indicates the text input box that must be entered in the URL address

•Number type indicates the text input box that must be entered

•range type indicates that the text input box that must be entered within a certain range of numeric values.

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

•date -Select day, month, and year

•month - Select 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)

•For elements such as basefont, big, center, font, s, strike, tt, and u, since their functions are purely used to display screens, and HTML5 advocates the unified editing of screen display functions in CSS style sheets, so these elements are abolished.

•For frameset elements, frame elements and noframes elements, since the frame framework has a negative impact on web page availability, the frame framework is no longer supported in HTML5, and only the iframe framework is supported, or the form of a composite page composed of multiple pages created by the server is abolished at the same time.

• For applet, bgsound, blink, marquee and other elements, since only some browsers support these elements, especially bgsound and marquee elements, which are only supported by Internet Explorer, it is abolished in HTML 5. Where the applet element can be replaced by an erned element or an object element, the bgsound element can be replaced by an audio element, and marquee can be replaced by a JavaScript programming method

• Abolish the rb element and use the ruby ​​element to replace it

• Abolish the acronym element and use the abbr element to replace it

• Abolish the dir element and use the ul element to replace it

• Abolish the isindex element and replace it with the form element and the input element.

• Abolish listing elements and use pre elements to replace them

• Abolish the xmp element and use the code element to replace it

• Abolish nextid elements and use GUIDS instead

• Abolish plaintext elements and use text/plian MIME type to replace

•Added autofocus attribute, which allows elements to automatically gain focus when the screen is opened by specifying attributes;

•Added placeholder attribute, which will prompt the user's input, prompting the user for what he can enter;

•Add a new form attribute, declare which form it belongs to, and then place it anywhere on the page, not within the form;

•Added a required attribute, which means that the user will check when submitting it. You must have input content in the element when checking;

• Add media attribute, which specifies why the target URL is optimized by the media/device of type and can only be used when the href attribute exists;

•Add hreflang attributes and rel attributes to maintain consistency with the a element and link element;

•Attribute reverend, which specifies the list to be displayed in reverse order;

•Add an async attribute to the script element, which defines whether the script is executed asynchronously;

•All attributes that can be replaced by CSS style sheets are abolished;

•Superfluous attributes, such as: target, profile, version, etc., are abolished;

In HTML5, a new concept of ''global attributes is added. The so-called global attribute refers to attributes that can be used on any element.

•This property allows the user to edit the content in the element, can obtain the mouse focus, the property is a Boolean value, can be specified as true or false. In addition, this property also has a hidden inherit status. When true, editing is allowed. When false, editing is not allowed. When not specified, inherit will decide.

•This property is used to determine whether the entire page is editable. There are two attributes on and off. When the property is on, it can be edited, but when it is off, it cannot be edited.

•All elements allow 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, so that the element is invisible. The value of this property is a Boolean value. When true, it is not visible, and when false, it is visible.

•This property is a new property provided by HTML 5 for the input element (type=text) and textarea, which mainly conducts spelling and grammar checks on user input content. The attribute value is a Boolean value. When writing, you must clearly 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 wrong—> <textarea spellcheck>

In HTML4, 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 given to the element, and the attribute value is the id of the form unit, so that the element can be declared subordinate to the specified form.

Copy the code