HTML5 layout and HTML5 tags

First, the new document type declaration (DTD)

Document Type Declaration
HTML 5's DTD declaration is:

    <!doctype html>
    <!DOCTYPE html> etc. are also correct because HTML syntax is case insensitive.

When writing HTML5 documents, specifying the document type is required to ensure that the browser can render in HTML5 standards mode.

Second, the new HTML5 tags

a, the new HTML5 tag - structure tag

Structural tags: (block elements) meaningful divs
 <article> tags define an article
 <header> tags define the header of a page or a section
  <nav> tags define navigation links
 <section> tags define an area
 <aside> The tag defines the sidebar of the content section of the page
 <hgroup> The tag defines information about a block in the file
 <figure> The tag defines a set of media content and their captions 
 <figcaption> The tag defines the caption for the figure element.
 The <footer> tag defines the bottom of a page or an area
 <dialog> tag defines a dialog (conversation box) similar to WeChat

The new structure tag brings changes to the page layout and improves search engine friendliness

b, the new HTML5 tag - multimedia tag

Multimedia Interactive Tab

 <video> tags define a video
 <audio> tags define audio content
  <source> tags define media resources

 The <canvas> tag defines the image

 The <embed> tag defines external interactive content or plugins such as flash

The emergence of HTML5 multimedia tags means the development of rich media and support for operating media files without using plug-ins, which greatly improves the user experience

c, the new HTML5 tag - Web application tag

Web Application Tags

<menu>command list
<menuitem>menu command list tag FF (embedded system)
<command> menu tag defines a command button

<meter> status tag (real-time status display: air pressure, temperature) C, O
<progress> status tag (task process: installation, loading) C, F, O

<datalist> defines a drop-down list for the input tag, with option F, O
<details> tags define the details of an element, with dt, dd C

d, new HTML5 tags - other tags

Comment tags
<ruby> tags define comments or phonetic symbols
<rp> tell browsers that do not support Ruby elements how to display
 <rt> tags define the text of the comment content for ruby

Other tags
<keygen> tag defines a generated key value in the form (encrypted information transmission) O, F
<mark> tag defines marked text (yellow selected state)
<output> tag defines some output types, the calculation form results cooperate with oninput event


The <time> tag defines a date/time currently not supported by all major browsers

3. Deleted HTML tags

Purely expressive elements:
basefont, big, center, font, s, strike, tt, u;

Elements that negatively affect usability:
frame, frameset, noframes;

Confused elements:
acronym, applet, isindex, dir.

4. The meaning of redefined HTML tags
HTML elements in HTML5
<b> Represents inline text, usually bold, not passed to indicate important meaning
<i> Represents inline text, usually italic, not passed to indicate important meaning
<dd> can be used with details and figure, definition contains text, dialog can also be
used with <dt> can be used with details and figure, summarizing details, dialog can also use
<hr> to indicate the end of the topic, not a horizontal line, although the display is the same
< menu> redefines the menu of the user interface, using
<small> for small fonts with commond or menuitem, such as printed notes or legal clauses
<strong> for importance rather than emphasis

 

5. Brand new page layout

Traditional HTML:

Brand new HTML5:

 

Difference and meaning of Div and new structure tags

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325420921&siteId=291194637