The difference between H5 and traditional HTML

This article mainly introduces the relevant information about the difference between HTML5 and traditional HTML in HTML5 study notes. Friends in need can refer to 1. Changes in HTML5 syntax
The The changes mentioned in the knowledge points refer to the changes defined based on HTML4, which are 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, and 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 mark 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...
• Both the start tag and the end tag can be omitted: html, head, body...
二.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 block of the page that is not relevant to the context Independent content, such as an article in a blog or an article in a newspaper;
•aside element represents auxiliary information related to the content of the article element in addition to the content of the article element;
•header element Represents the title of a content block in the page or the entire page;
•hgroup element is used to combine the titles of the entire page or a content block in the page;
•footer element represents the entire page or a piece of content in the page Block footer. Generally speaking, it will contain the name of the creator, the date of creation, and the creator's contact information;
•nav element represents the navigation link part of the page;
•figure element represents an independent paragraph Stream content generally represents an independent unit in the main stream content of the document. Use the figcaption element to add a title to the figure element group
2. Other new elements
•audio element definition Audio , such as music or other audio streams;
•embed element is used to insert various multimedia, the format can be Midi, Wav, AU, MP3, etc.;
•mark element To visually present text that needs to be highlighted or highlighted to users, a typical application is to highlight search keywords to users in search results;
•progress element represents The running process
•ruby element represents rubycomment (Chinese phonetic or character)
•rt element represents the interpretation or pronunciation of the character (Chinese phonetic or character)
•rp element in Used in ruby ​​annotations to define content displayed by browsers that do not support ruby ​​elements.
•The wbr element represents soft line breaks, and when the width is not enough, line breaks are automatically performed here
•canvas elements represent graphics, such as charts and other images
•cammand elements represent commands Button, such as radio button, checkbox or button
•the details element represents the detailed information that the user requires and can get
• The datagrid element represents a list of optional data, which is displayed in the form of a tree list
•keyThe gen element represents the generated key
•The output element represents different types of output, such as scripts Output
•The source element defines media resources for media elements (such as 39000f942b2545a5315c57fa3276f220 and b97864c2e0ef2353a16c4d64c7734e92)
•The menu element represents the menu list
3. New input element
•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 A text input box that represents a numerical value that must be entered
•range Type represents a text input box that must be entered with a numerical value within a certain range
HTML5 has multiple new inputs for selecting dates and times Text box:
•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 the time, day, month, and year (UTC time)
•datetime.local - Select time, day, month, year (local time)
3. Abolish elements
1. Elements that can be replaced by CSS
•For elements such as basefont, big, center, font, s, strike, tt, and u, because their functions are purely for screen display services, and HTML5 advocates screen display The sexual functions are edited uniformly in the CSS style sheet, so these elements are abolished
2, frameframe
•For frameset element, frame element and noframes element. Due to the negative impact of frame frame on web page usability, frame frame is no longer supported in HTML5. Only iframe frame is supported, or multiple pages created by the server. The form of a composite page abolishes the above three elements at the same time.
3. Elements supported by only 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, Only supported by Internet Explorer, so it was deprecated 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 the JavaScriptprogramming
4. Other abolished elements:
•Abolish the rb element and replace it with ruby ​​element
•Abolish the acronym element and replace it with abbr element
•Abolish the dir element and replace it with ul element
•Abolish the isindex element and replace it with the form element combined with the input element
•Abolish the listing element and replace it with the pre element
•Abolish the xmp element and replace it with the code element
•Abolish the nextid element and use GUIDS replacement
•Abolish the plaintext element and use the "text/plian" MIME type instead
4. Add attributes and abolish the attributes
1. New attributes
1. Form-related attributes
•New autofocus attribute, which allows the element to automatically gain focus when the screen is opened by specifying attributes;
•New placeholder attribute, which The user's input will be prompted, prompting the user what they can input;
•Add a new form attribute, declare which form it belongs to, and then place it anywhere on the page, not within the form;
• Added the required attribute, which indicates that it will be checked when the user submits. 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
•Attribute reverend, which specifies the list to be displayed in reverse order;
•Add the async attribute to the script element, which defines the script Whether to execute 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;
五.Global attributes
In HTML5, new The concept of a "global attribute". The so-called global attribute refers to an attribute that can be used on any element.
1. contentEditable attribute
•This attribute allows users to edit the content in the element , the mouse focus can be obtained. The attribute is a Boolean value and can be specified as true or false. In addition, this attribute also has a hidden inheritstate. When it is true, editing is allowed. When it is false, editing is not allowed. If it is not 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 user input content. Spelling and grammar check. 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:
a81519aefe67ddc1abeec156ca0ccd9a 552ac683c0f554e98a10af6771e392eb 6c928bdf2ad5e19a27ffcb03b46ec6f6 2a88788075306ecf55e9ceb271350ffd d489b9a5e4af6b2126b2d690798c190e
Detailed explanation of form attribute
In HTML4 In HTML5, the subordinate elements within the form must be written inside the form, but in HTML5, they can be written anywhere on the page, and then give the element a form attribute. The attribute value is the id of the form unit, so that you can declare the 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属性</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 the form. It is written inside the form, and there is no need to set the form attribute for it. The textarea element is written outside the form, but it is subordinate to the form, so the id of the form is set to the form attribute of the textarea element.
The advantage of this is that when you need to add styles to the elements on the page, you can add them more conveniently, because they are no longer scattered among the forms.

【Related Recommendations】

1. HTML5 Free Video Tutorial

2. The input box appears when making a virtual keyboard in H5 What to do if there is occlusion?

3. Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5

4. Detailed explanation of browser compatibility issues with H5 new tags

5. Overall overview of how to use H5 to create web pages

The above is the detailed content of The difference between H5 and traditional HTML. For more information, please follow other related articles on the PHP Chinese website!