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
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)meta elementto specify the character encoding in the file (specified through the attributeof thecontent element ), as shown below:
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
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
##3. HTML5 new elements and abolished elements
3.1 New structural 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
(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".
(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.
(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.
(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.
(1) Function
Notifies the browser not to render the element, making the element invisible.
(2) Value
Boolean attribute, which is true or false.
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.
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
