HTML5 Study Notes-differences between html5 and traditional html, html5-html5

HTML5 Study Notes-differences between html5 and traditional html, html5-html5

I. HTML5 syntax changes

The changes mentioned in this knowledge point refer to changes defined based on HTML4, mainly including:

 

To ensure compatibility, you need to start with the element. In HTML5, the element tag can be omitted. In terms of the object, the element tag can be divided into three types: "Do not allow write end tag", "you can omit end tag", and "start tag and end tag can all be omitted.

• Write end mark elements are not allowed: area, base, br, col .....
• The end mark can be omitted: li, dt, dd, p, rt ......
• The start and end tags can all be omitted: html, head, body .....
• 2. New Structural Elements

   

  • The section element indicates a content block in the page, such as a chapter, header, footer, or other part of the page;
  • The article element indicates an independent content on the page that is irrelevant to the context, for example, an article in a blog or an article in a newspaper;
  • The aside element indicates auxiliary information related to the content of the article element beyond the content of the article element;
  • The header element indicates a content block or the title of the entire page;
  • The hgroup element is used to combine the titles of a content block on the entire page or page;
  • The footer element indicates the footer of a content block on the entire page or page. Generally, it contains the Creator's name, creation date, and contact information;
  • The nav element indicates the navigation link of the page;
  • The figure element indicates an independent stream content. It generally indicates an independent unit in the content of the main stream of the document. The figcaption element is used to add a title to the figure element group.

   

  2. Other New Elements

   

  • The audio element defines audio, such as music or other audio streams;
  • Embed elements are used to insert various multimedia files in the format of Midi, Wav, AU, and MP3;
  • The mark element is used to visually display the text to be highlighted or highlighted. A typical application is to highlight search keywords in the search results;
  • The progress element indicates a running process.
  • Ruby elements represent ruby comments (Chinese phonetic symbols or characters)
  • The rt element represents the interpretation or pronunciation of a character (Chinese phonetic alphabet or character ).
  • Rp elements are used in ruby annotations to define the content displayed by browsers that do not support ruby.
  • The wbr element indicates soft line breaks. When the width is insufficient, the line breaks here.
  • Canvas elements represent graphs, such as tables and other images
  • The cammand element represents a command button, such as a single button, check box, or button.
  • The details element indicates the details that the user requests and can obtain.
  • The datagrid element represents the list of optional data, which is displayed in a tree list.
  • The keygen element indicates that the key is generated.
  • The output element indicates the output of different types, such as the output of scripts.
  • The source element defines media resources for media elements (such as <video> and <audio> ).
  • The menu element indicates the menu list.

   

  3. New input Elements

   

  • The email type indicates that the text input box of the E-main address must be entered.
  • The url type indicates that the text input box of the URL address must be entered.
  • Number type indicates the text input box that must enter a numeric value
  • The range type indicates that a text box with numbers within a certain range must be entered.
  HTML5 has multiple new input text boxes for Date and Time Selection:
  
  • Date -- select day, month, and year
  • Month -- select month and year
  • Week -- select 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, and year (local time)

   

   3. Abolish Elements1. elements that can be replaced by CSS
  • For basefont, big, center, font, s, strike, tt, and u elements, their functions are purely for Image Display services, HTML5 advocates unified editing of the image display function in the CSS style sheet, so these elements are abolished

   

  2. frame framework is no longer used

   

  • For frameset elements, frame Elements, and noframes elements, the frame framework does not support the frame framework and only the iframe framework in html5, alternatively, you can create a composite page composed of multiple pages on the server and abolish the three elements.

   

  3. Only some elements supported by browsers

   

  • For applet, bgsound, blink, marquee and other elements, only some browsers support these elements, especially bgsound and marquee elements, and are only supported by Internet Explorer, therefore, HTML 5 is abolished. Applet elements can be replaced by ernedd elements or object elements, bgsound elements can be replaced by audio elements, and marquee can be replaced by JavaScript programming methods.

   

  4. Other abolished elements:

   

  • Remove rb elements and use ruby elements instead.
  • Abolish the acronym element and use the abbr element instead.
  • Abolish the dir element and use the ul element instead.
  • The isindex element is abolished and replaced by a combination of form and input elements.
  • Abolish the listing element and use the pre element instead.
  • Removes xmp elements and uses code elements instead.
  • Remove the nextid element and use GUIDS instead.
  • Remove the plaintext element and replace it with the "text/plian" MIME type.

   

   

  4. Adding and abolishing attributes1. Add attributes 1. related to the form

   

  • Added the autofocus attribute, which enables the element to automatically obtain the focus when the screen is opened;
  • Add the placeholder attribute, which will prompt the user's input, prompting the user to enter the content;
  • Add the form attribute, declare which form it belongs to, and place it in any position on the page, rather than in the form;
  • Added the required attribute, which indicates to check when the user submits the request. Check that there must be input content in the element;
  • .....
  2. Link-related attributes
  
  • Adds the media attribute, which specifies why the target URL is optimized for media/devices and can only be used when the href attribute exists;
  • Add the hreflang and rel attributes to keep them consistent with element a and link;
  • ......
  3. Other attributes
  
  • Attribute reverend, which specifies the reverse display of the List;
  • Adds the async attribute to the script element, which defines whether the script is executed asynchronously;
  • ......

   

  Ii. Abolishing attributes

   

  • All attributes that can be replaced by CSS style sheets are abolished;
  • Redundant attributes, such as target, profile, and version, are abolished;
  • .......

   

  5. Global attributesIn HTML5, a concept of ''global attribute ''is added. Global attributes are attributes that can be used for any element.

  1. contentEditable attributes

  • This attribute allows you to edit the content of an element to obtain the mouse focus. The attribute is a Boolean value and can be specified as true or false. In addition, this property also has a hidden inherit status. If it is set to true, editing is allowed. If it is set to false, editing is not allowed. If it is not specified, it is determined by inherit.
  2. designMode attributes
  
  • This attribute is used to determine whether the entire page can be edited. There are two attributes: "on" and "off ". When the attribute is "on", it can be edited. If it is "off", it cannot be edited.
  3. hidden attributes
  
  • All elements can use a hidden attribute, which is similar to the hidden element in the input element. The function is to notify the browser not to render the element and make it invisible. This attribute value is a Boolean value. If it is true, it is invisible. If it is false, it is visible.
  4. spellcheck attributes
  
  • This attribute is a new attribute provided by HTML 5 for the input text boxes (type = text) and textarea. It mainly checks the spelling and syntax of user input content. The attribute value is a Boolean value. When writing, you must explicitly 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 incorrect->
  <Textarea spellcheck>