Learn more about the HTML Tag Content Model and the tag Model

Source: Internet
Author: User

Learn more about the HTML Tag Content Model and the tag Model
Contents [1] metadata type [2] block type [3] header type [4] document flow type [5] statement type [6] embedded type [7] statement type before

The core of HTML is tag. Tags are used to describe the basic unit of the content in the document. Different tags indicate different meanings, and the nesting between tags indicates the structure between the content.

HTML tags extend the Content Model of HTML5 to seven categories, including metadata, block, title, document flow, statement, embedded, and plain. However, even these seven categories do not completely cover all the conditions of all elements. An element may not belong to any category and is called penetrating. Many elements may belong to more than one category, it is called hybrid.

For details about HTML tags, see the w3c link.

Classification [1] metadata (metadata)

Set the metadata element of the presentation, behavior, associated document, or other content

<Head> the element contains the element data of the document, including <base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, and <title>.

For more information, see

 

[2] sectioning)

Defines the content range of a block, including <article>, <aside>, <nav>, and <section>.

For more information, see

 

[3] heading)

Elements defining the block content title, including

<H1> to

<H1>->

[Note] Microsoft's bing search engine points out that the page should not contain more than one h1 element.

[Default style]

margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;font-weight: bold;

[Note]

<Hgroup>: Title group, used to combine titles. It is used only when the block requires multiple levels of titles.

<Hgroup> 

 

[4] flow)

Elements in most documents <body>, only some metadata elements are not streaming, they are <base> and <title>

<P>: a text block composed of several sentences with similar themes (<p>-> paragraph)

[Default style]

margin: 16px 0;

<Hr>: the delimiter between different theme content.

[Default style]

margin: 8px 0;border-style: inset;border-width: 1px;

[Note]

<Pre>: pre-formatted text, usually indicating typographical content, such as code blocks and character paintings.

[Default style]

margin: 1em 0;white-space: pre;

<Blockquote>: References content from other sources. The cite attribute indicates the source url.

[Default style]

margin: 1em  40px;

[Note] the referenced signature must be referenced in the external definition.

<Blockquote cite = "http://baike.baidu.com/view/921793.htm"> <p> qianniu refers to Qifu, and the top of the bow is as a scorpion </p> </blockquote> <p> Lu Xun </p>

<Ol> <ul> <dl>

For more information about the list elements, see

<Table>

Suitable for data displayed in a data table, which must be marked by a table. For more information about table-class elements, see

<Form>

Form elements include text boxes, drop-down menus, check boxes, and other elements used to collect user input in the form. For more information, see

[5] phrasing)

Text in the document, text elements marked in paragraphs, etc.

<A> hyperlink anchor

The detailed information about the anchor point is now

In addition to <a>, the detailed information of this type of element is now

 

[6] embedded model (embedded)

Due to the limited expression ability of the elements provided by HTML, it is necessary for browser developers to embed content, introduce another resource element in the document or insert a document in another language. Embedded content includes nine categories: <audio>, <canvas>, <embed>, <iframe>, , <math>, <object>, <svg>, and <video>.

[Note] the default width and height of <embed>, <iframe>, and <object> elements in this class are 300px * 150px if they are not set.

(-> image)

The detailed information about the Image Tag is now

<Iframe>

The detailed information about the framework tag is now

<Canvas>

The detailed information about <canvas> is now

Audio and video

For more information about audio and video tags, click here.

 

[7] interactive)

Elements Used for user interaction, including <a>, <audio>, <button>, <details>, <embed>, <iframe>, , <input>, <keygen>, and <label>, <menu>, <object>, <select>, <textarea>, and <video>

Among them, the support of the four interactive elements: <details>, <summary>, <command>, and <menu> is not very good.

For more information, see <details> and <summary>.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.