What are the differences between html5 and html4?

Difference: DOCTYPE, html, meta, script and other tags are simplified in HTML5. HTML5 has added semantic tags such as header, footer, section, article, nav, hgroup, aside, and figure; a canvas tag has been added.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

1 Markup method in HTML5

1.1 Content Type (ContentType)

• HTML5's file extension and content type remain unchanged. That is, the extension is still ".html" or ".htm", and the content type is still "text/html".

1.2 DOCTYPE

• HTML4

##

• HTML5

(case-insensitive)

In H5, deliberately

do not use version declarations, a document will apply to all versions of HTML.

In addition, when using tools, you can also add the SYSTEM identifier in the DOCTYPE declaration method. The declaration method is as follows:

(Case-insensitive, quotation marks do not distinguish between single quotation marks or double quotation marks)

1.3 Specify character encoding

• HTML4

Use the

meta element to specify the character encoding in the file (specified through the attribute of the content element ), as shown below:

• HTML5

##Specify the character encoding by directly appending the

charset attribute

to the element.

Note: Both methods are valid, but you cannot mix the two methods at the same time. Starting from H5, for files It is recommended to use UTF-8 as the character encoding.

2 Compatibility ensured by HTML5##2.1 Marked elements can be omitted

(1) It is not allowed to write elements with end tags (that is, the form of using start tags and end tags to enclose elements is not allowed, only the form of "" is allowed)

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

(2) The elements of the end tag can be omitted

li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

(3) All marked elements can be omitted (meaning that the element can be completely Omitted)

html, head, body, colgroup, tbody

Note: Even if the tag is omitted, the element still exists implicitly. For example, when the body element is omitted, it still exists in the document structure and can be accessed using document.body.

2.2 Attributes with boolean values

2.3 Omit the quotation marks

(1) When specifying attribute values, When placing quotes around the attribute value, you can use either double quotes or single quotes.

(2) H5 has made some improvements on this basis. When the attribute value does not include empty strings, "<", ">", "=", single quotes, double quotes and other characters , the quotation marks around the attribute value can be omitted. As shown below

##3. HTML5 new elements and abolished elements

3.1 New structural elements

section element, article element, aside element, header element , footer element, nav element, figure element, main element

3.2 Other new elements

video element, audio element, embed element, mark element, progress element, meter element, time element, ruby ​​element, rt element, rp element , wbr element, canvas element, commmand element, details element, datalist element, datagrid element, keygen element, output element, source element, menu element, dialog element

3.3 New input element types

(1) email: a text input box indicating that the e-mail address must be entered

(2) url: a text input box indicating that the URL address must be entered

(3) number: A text input box that indicates that a numerical value must be entered

(4) range: A text input box that indicates that a numerical value within a certain range must be entered

(5) Date Pickers: H5 There are multiple new input text boxes for selecting dates and times

1. date: Select the day, month, and year

2. Month: Select the month and year

3. week: select the week and year

4. time: select the time (hours and minutes)

5. datetime: select the time, day, month, year (UTC time)

  6. datetime-local: Select time, day, month, year (local time)

(6) search: used to search

(7) tel: dedicated to phone calls

(8) color: color selection text box. The selected value is text in the format of "#000000".

3.4 Obsolete elements

(1) Elements that can be replaced by CSS

such as: basefont, big, center, font, s, strike , tt, u and other elements

The s and strike elements can be replaced by del elements, and the tt element can be replaced by the CSS font-famliy attribute.

(2) No longer use frame framework

Such as: frameset, frame, noframes.

Due to the negative impact of frame frames on web page usability, H5 does not support frame frames. It only supports iframe frames or composite pages composed of multiple pages created by the server. At the same time, these three element is abolished.

(3) Elements supported by only some browsers

such as: applet, bgsound, blink, marquee and other elements.

The applet element can be replaced by embed element or object element, the bsground element can be replaced by audio element, and the marquee can be replaced by javascript programming.

(4) Other abolished elements

1. rb element, replaced by ruby ​​element

2. acronym element, replaced by abbr element

3. The dir element is replaced by the ul element

4. The isindex element is replaced by the combination of the form element and the input element

5. Listing. element is replaced by the pre element

6. xmp element, replaced by code element

7. nextid element, replaced by GUIDS element

8. plaintext element, use "text/plain" MIMEL type instead

Recommended tutorial: "html video tutorial"

4. Global attributes

The so-called global attributes are Refers to attributes that can be used on any element.

4.1 contentEditable attribute

(1) Main function

Allows users to edit the content in an element, so the element must be able to obtain mouse focus element, and provide a caret to the user after clicking the mouse, prompting the user to edit the content in the element sequentially

(2) Value

This attribute is a Boolean attribute that can be Specified to be true or false.

(3) Hidden inherit state

When this attribute is not specified, it is determined by the inherit state. If the parent element of the element is editable, the element is editable. of.

(4) isContentEditable attribute

When the element is editable, the value of this attribute is true, otherwise it is false.

4.2 designMode attribute

(1) Function

is used to specify whether the entire page is editable. When the page is editable, any support in the page Elements with the contentEditable attribute become editable.

(2) Value

This attribute has two values, "on" (the page is editable) and "off" (the page is not editable).

(3) This attribute can only be edited and modified in Javascript script

document.designMode = " on ";

(4) Browser support

1.IE8: For security reasons, this attribute is not allowed to be used to enter the editing state of the page.

2.IE9: Allow using this attribute to put the page into editing state.

3.Chorme3 and Safari: Use . The way of inline frame, the inline frame is editable.

4.Firefox and Opera: Allow using this attribute to put the page into editing state.

4.3 hidden attribute

(1) Function

Notifies the browser not to render the element, making the element invisible.

(2) Value

Boolean attribute, which is true or false.

4.4 spellcheck attribute

The spellcheck attribute is a new attribute provided by H5 for the two text input boxes of input element (type=text) and textarea.

(1) Function

Perform spelling and grammar check on the text content entered by the user.

(2) Value

Boolean value, true or false .

(3) Note

1. The attribute value must be declared to be true or false.

2. If the element's readOnly attribute or disabled attribute is set to true, spell checking will not be performed.

(4) Browser support

Currently, in addition to IE, browsers such as Firefox, Chrome, Safari, and Opera all provide support for this attribute.

4.5 tabindex attribute

The tabindex of each control indicates which control is accessed. (Tap the Tab key)

(1) Now the traversal order of controls is determined by the position of the element on the page, so it is no longer needed.

(2) Another function

By default, only link elements and form elements can obtain focus by pressing keys. If you use this attribute on other elements, the element will also gain focus. After setting the tabindex value of an element to a negative value (usually -1), you can programmatically allow the element to gain focus, and the element will not gain focus when the Tab key is pressed.

For more programming related knowledge, please visit: Programming Video! !

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