HTML5 Learning notes----HTML5 and traditional HTML differences

I. Changes in HTML5 grammar

The change referred to in this knowledge point refers to the changes defined on the basis of HTML4, mainly as follows:

1. The HTML5 file extension (. html or. htm) and Content type (text/html) remain the same.
2. HTML5, a document will apply to all versions of HTML without intentionally using the version declaration.
3. Starting with HTML5, UTF-8 is recommended 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 element, in HTML5., the tag of the element can be omitted. In its body, the element's markup is divided into "do not allow write end tag", "can omit end tag" and "Start tag and end tag can all be omitted" three kinds.

• Write-end tag elements are not allowed: area, base, Br, col ....
• The end tag can be omitted: Li, DT, DD, p, RT ...
• Opening and closing tags can all be omitted: HTML, head, body .....
• two. New structure elements
  • A section element represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page;
  • The article element represents a piece of independent content in the page that is not relevant to the context, such as an article in a blog or an article in a newspaper;
  • The aside element represents the auxiliary information related to the content of the article element, outside the content of the article element;
  • Header element represents the title of a content block or an entire page in a page;
  • The Hgroup element is used to group the title of a chunk of content across a page or page;
  • The footer element represents a footnote to an entire page or a chunk of content in a page. In general, it contains the creator's name, date of creation, and the author's contact information;
  • The Nav element represents the part of the navigation link in the page;
  • The figure element represents a separate stream content, which generally represents a separate unit in the content of the document body flow, and uses the Figcaption element to add a caption to the group of Figure elements
  2. Additional elements added
  • The audio element defines sounds, such as music or other audio streams;
  • Embed element is used to insert various multimedia, the format can be midi, Wav, AU, MP3 and so on;
  • The mark element is used to visually present to the user the text that needs to be highlighted or highlighted, and the typical application is to highlight the search keywords to the user in the results.
  • The progress element represents a running process
  • Ruby elements represent Ruby annotations (Chinese phonetic notation or characters)
  • RT elements represent the interpretation or pronunciation of characters (Chinese phonetic symbols or characters)
  • RP elements are used in Ruby annotations to define what is displayed by browsers that do not support Ruby.
  • The WBR element represents soft line breaks, and when the width is not sufficient, the active line wraps here
  • Canvas elements represent graphs, tables, 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 detail information that the user requests and can get
  • The DataGrid element represents a list of optional data that is displayed in a tree-shaped list
  • The keygen element represents the generated key
  • The output element represents different types of outputs, such as the output of a script
  • The source element defines media resources for media elements (such as <video> and <audio>)
  • menu element represents a list of menus
  3. The new INPUT element
  • The email type indicates that a text input box must be entered for the E-main address
  • The URL type represents a text input box that must enter a URL address
  • The number type represents the text input box that must lose the population value
  • The range type indicates that a text box must be entered in a range of numeric values
  HTML5 has several new input text boxes available for selecting dates and times:
  
  • date--Select Day, month, year
  • month--Select Month, year
  • week--Select minute
  • time--pick time (hours and minutes)
  • datetime--One Select time, day, month, year (UTC time)
  • datetime.local--Select time, day, month, year (local time)
  three. Abolition of elements1. Elements that can be substituted with CSS
  • For dry Basefont, big, center, font, S, Strike, TT, u these elements, because their functions are purely to screen display services, and HTML5 advocated the display of the screen function in the CSS style sheet unified editing, so these elements of the abolition of
  2. No longer use frame frame
  • For frameset elements, frame elements, and noframes elements, because the frame framework has a negative impact on Web page availability, frame frames are not supported in HTML5, only the IFRAME framework is supported, or the form of a composite page of multiple pages created by the server side , and the above three elements are abolished.
  3. Only some elements supported by the browser
  • For applets, Bgsound, Blink, Marquee, and so on, because only a subset of browsers support these elements, especially the BGSOUND element and the marquee element, are only supported by Internet Explorer, and are therefore abolished in HTML 5. Where the applet element can be substituted by the Ernedd element or the object element, and the BGSOUND element can be substituted by the audio element, marquee can be overridden by JavaScript programming
  4. Other elements that have been abolished:
  • Abolish the RB element and use the Ruby element instead
  • Repeal the acronym element and replace it with the abbr element
  • The dir element is abolished and the UL element is used instead
  • The Isindex element is abolished and the form element is used in combination with the INPUT element to replace
  • Repeal listing elements, using the pre element instead
  • Abolishing XMP elements, using the code element instead
  • Repeal NextID elements, use GUIDs instead
  • Revoke the plaintext element and replace it with the "Text/plian" MIME type
  four. New and revoked PropertiesFirst, new property 1, and form-related properties
  • Added the Autofocus property, which allows the element to automatically get focus when the screen is opened by specifying a property;
  • Added the placeholder property, which will prompt the user's input, prompting the user to enter the content;
  • Add a Form property, declare which form it belongs to, and place it anywhere on the page, not within the form;
  • Added the Required property, which indicates that the user submits the time to check, check that the element must have input content;
  • .....
  2. Related properties of links
  
  • Increase the Media property, which specifies why the target URL is optimized for the type of media/device and can only be used when the href attribute is present;
  • Add the Hreflang attribute to the REL attribute to maintain consistency with element a and link elements;
  • ......
  3. Other properties
  
  • The Reverend property, which specifies that the list is displayed in reverse;
  • Adds an async attribute to the script element, which defines whether the scripts execute asynchronously;
  • ......
  Ii. Abolition of attributes
  • Properties that can be overridden by CSS stylesheets are all abolished;
  • Extra attributes, such as target, profile, version, etc. are abolished;
  • .......
  five. Global PropertiesIn HTML5, a new concept of ' global properties ' has been added. The so-called global attributes are those that can be used on any element.

  1. Contenteditable Properties

  • This property allows the user to edit the contents of the element, can get 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 state, which is true when editing is allowed, false when not allowed, when not specified, determined by inherit.
  2. DesignMode Properties
  
  • This property is used to determine whether the entire page can be edited. There are two properties of "on" and "off". When the property is "on", it can be edited, and "off" is not editable.
  3. Hidden Properties
  
  • All elements allow a hidden property, similar to the hidden element in the input element, to inform the browser not to render the element, leaving the element invisible. The value of the property is a Boolean value that is true when it is not visible, and false when it is visible.
  4. SpellCheck Properties
  
  • This property is a new property provided by HTML 5 for the INPUT element (Type=text) and textarea text input boxes, primarily for spelling and grammar checking of user input. The property value is a Boolean value that must be explicitly declared when writing a property value of TRUE or False to write as follows:

    <!-The following two methods of writing are correct
     <textarea spellcheck= "true" >
     <input Type=text spellcheck=false>
  <!-the following two ways to write errors
     <textarea spellcheck >

HTML5 Learning notes----HTML5 and traditional HTML differences